Skip to content

Commit 8a901ba

Browse files
joevilchesfacebook-github-bot
joevilches
authored and
facebook-github-bot
committed
Surround some intrinsic sizing tests in non-relative container
Summary: Some of these were specified as relative but that makes the `top` value of layout incorrect. Surrounding in a div which is absolute so they all layout in the top left. Differential Revision: D66275587
1 parent 26b21ae commit 8a901ba

File tree

4 files changed

+2775
-2065
lines changed

4 files changed

+2775
-2065
lines changed

‎gentest/fixtures/YGIntrinsicSizeTest.html‎

Lines changed: 150 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -229,24 +229,28 @@
229229
</div>
230230
</div>
231231

232-
<div data-disabled="true" id="fit_content_width" style="width: 90px; position: relative;">
233-
<div style="flex-direction: row; width: fit-content; flex-wrap: wrap;">
234-
<div style="width: 50px; height: 50px;">
235-
</div>
236-
<div style="width: 100px; height: 50px;">
237-
</div>
238-
<div style="width: 25px; height: 50px;">
232+
<div data-disabled="true" id="fit_content_width">
233+
<div style="width: 90px; position: relative;">
234+
<div style="flex-direction: row; width: fit-content; flex-wrap: wrap;">
235+
<div style="width: 50px; height: 50px;">
236+
</div>
237+
<div style="width: 100px; height: 50px;">
238+
</div>
239+
<div style="width: 25px; height: 50px;">
240+
</div>
239241
</div>
240242
</div>
241243
</div>
242244

243-
<div data-disabled="true" id="stretch_width" style="width: 500px; position: relative;">
244-
<div style="flex-direction: row; width: -webkit-fill-available; flex-wrap: wrap;">
245-
<div style="width: 50px; height: 50px;">
246-
</div>
247-
<div style="width: 100px; height: 50px;">
248-
</div>
249-
<div style="width: 25px; height: 50px;">
245+
<div data-disabled="true" id="stretch_width">
246+
<div style="width: 500px; position: relative;">
247+
<div style="flex-direction: row; width: -webkit-fill-available; flex-wrap: wrap;">
248+
<div style="width: 50px; height: 50px;">
249+
</div>
250+
<div style="width: 100px; height: 50px;">
251+
</div>
252+
<div style="width: 25px; height: 50px;">
253+
</div>
250254
</div>
251255
</div>
252256
</div>
@@ -260,24 +264,28 @@
260264
</div>
261265
</div>
262266

263-
<div data-disabled="true" id="fit_content_height" style="height: 90px; position: relative;">
264-
<div style="height: fit-content; flex-wrap: wrap;">
265-
<div style="width: 50px; height: 50px;">
266-
</div>
267-
<div style="width: 50px; height: 100px;">
268-
</div>
269-
<div style="width: 50px; height: 25px;">
267+
<div data-disabled="true" id="fit_content_height">
268+
<div style="height: 90px; position: relative;">
269+
<div style="height: fit-content; flex-wrap: wrap;">
270+
<div style="width: 50px; height: 50px;">
271+
</div>
272+
<div style="width: 50px; height: 100px;">
273+
</div>
274+
<div style="width: 50px; height: 25px;">
275+
</div>
270276
</div>
271277
</div>
272278
</div>
273279

274-
<div data-disabled="true" id="stretch_height" style="height: 500px; position: relative;">
275-
<div style="height: -webkit-fill-available; flex-wrap: wrap;">
276-
<div style="width: 50px; height: 50px;">
277-
</div>
278-
<div style="width: 50px; height: 100px;">
279-
</div>
280-
<div style="width: 50px; height: 25px;">
280+
<div data-disabled="true" id="stretch_height">
281+
<div style="height: 500px; position: relative;">
282+
<div style="height: -webkit-fill-available; flex-wrap: wrap;">
283+
<div style="width: 50px; height: 50px;">
284+
</div>
285+
<div style="width: 50px; height: 100px;">
286+
</div>
287+
<div style="width: 50px; height: 25px;">
288+
</div>
281289
</div>
282290
</div>
283291
</div>
@@ -291,29 +299,34 @@
291299
</div>
292300
</div>
293301

294-
<div data-disabled="true" id="fit_content_flex_basis_column" style="height: 90px; position: relative;">
295-
<div style="flex-basis: fit-content; flex-wrap: wrap;">
296-
<div style="width: 50px; height: 50px;">
297-
</div>
298-
<div style="width: 50px; height: 100px;">
299-
</div>
300-
<div style="width: 50px; height: 25px;">
302+
<div data-disabled="true" id="fit_content_flex_basis_column">
303+
<div style="height: 90px; position: relative;">
304+
<div style="flex-basis: fit-content; flex-wrap: wrap;">
305+
<div style="width: 50px; height: 50px;">
306+
</div>
307+
<div style="width: 50px; height: 100px;">
308+
</div>
309+
<div style="width: 50px; height: 25px;">
310+
</div>
301311
</div>
302312
</div>
303313
</div>
304314

305-
<div data-disabled="true" id="stretch_flex_basis_column" style="height: 500px; position: relative;">
306-
<div style="flex-basis: -webkit-fill-available; flex-wrap: wrap;">
307-
<div style="width: 50px; height: 50px;">
308-
</div>
309-
<div style="width: 50px; height: 100px;">
310-
</div>
311-
<div style="width: 50px; height: 25px;">
315+
<div data-disabled="true" id="stretch_flex_basis_column">
316+
<div style="height: 500px; position: relative;">
317+
<div style="flex-basis: -webkit-fill-available; flex-wrap: wrap;">
318+
<div style="width: 50px; height: 50px;">
319+
</div>
320+
<div style="width: 50px; height: 100px;">
321+
</div>
322+
<div style="width: 50px; height: 25px;">
323+
</div>
312324
</div>
313325
</div>
314326
</div>
315327

316-
<div id="max_content_flex_basis_row" style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
328+
<div data-disabled="true" id="max_content_flex_basis_row"
329+
style="flex-direction: row; flex-basis: max-content; flex-wrap: wrap;">
317330
<div style="width: 50px; height: 50px;">
318331
</div>
319332
<div style="width: 100px; height: 500px;">
@@ -322,29 +335,34 @@
322335
</div>
323336
</div>
324337

325-
<div data-disabled="true" id="fit_content_flex_basis_row" style="width: 90px; position: relative;">
326-
<div style="flex-direction: row; flex-basis: fit-content; flex-wrap: wrap;">
327-
<div style="width: 50px; height: 50px;">
328-
</div>
329-
<div style="width: 100px; height: 50px;">
330-
</div>
331-
<div style="width: 25px; height: 50px;">
338+
<div data-disabled="true" id="fit_content_flex_basis_row">
339+
<div style="width: 90px; position: relative;">
340+
<div style="flex-direction: row; flex-basis: fit-content; flex-wrap: wrap;">
341+
<div style="width: 50px; height: 50px;">
342+
</div>
343+
<div style="width: 100px; height: 50px;">
344+
</div>
345+
<div style="width: 25px; height: 50px;">
346+
</div>
332347
</div>
333348
</div>
334349
</div>
335350

336-
<div data-disabled="true" id="stretch_flex_basis_row" style="width: 500px; position: relative;">
337-
<div style="flex-direction: row; flex-basis: -webkit-fill-available; flex-wrap: wrap;">
338-
<div style="width: 50px; height: 50px;">
339-
</div>
340-
<div style="width: 100px; height: 50px;">
341-
</div>
342-
<div style="width: 25px; height: 50px;">
351+
<div data-disabled="true" id="stretch_flex_basis_row">
352+
<div style="width: 500px; position: relative;">
353+
<div style="flex-direction: row; flex-basis: -webkit-fill-available; flex-wrap: wrap;">
354+
<div style="width: 50px; height: 50px;">
355+
</div>
356+
<div style="width: 100px; height: 50px;">
357+
</div>
358+
<div style="width: 25px; height: 50px;">
359+
</div>
343360
</div>
344361
</div>
345362
</div>
346363

347-
<div data-disabled="true" id="max_content_max_width" style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
364+
<div data-disabled="true" id="max_content_max_width"
365+
style="flex-direction: row; max-width:max-content; width: 200px; flex-wrap: wrap;">
348366
<div style="width: 50px; height: 50px;">
349367
</div>
350368
<div style="width: 100px; height: 50px;">
@@ -353,29 +371,34 @@
353371
</div>
354372
</div>
355373

356-
<div data-disabled="true" id="fit_content_max_width" style="width: 90px; position: relative;">
357-
<div style="flex-direction: row; max-width: fit-content; width: 110px; flex-wrap: wrap;">
358-
<div style="width: 50px; height: 50px;">
359-
</div>
360-
<div style="width: 100px; height: 50px;">
361-
</div>
362-
<div style="width: 25px; height: 50px;">
374+
<div data-disabled="true" id="fit_content_max_width">
375+
<div style="width: 90px; position: relative;">
376+
<div style="flex-direction: row; max-width: fit-content; width: 110px; flex-wrap: wrap;">
377+
<div style="width: 50px; height: 50px;">
378+
</div>
379+
<div style="width: 100px; height: 50px;">
380+
</div>
381+
<div style="width: 25px; height: 50px;">
382+
</div>
363383
</div>
364384
</div>
365385
</div>
366386

367-
<div data-disabled="true" id="stretch_max_width" style="width: 500px; position: relative;">
368-
<div style="flex-direction: row; max-width: -webkit-fill-available; width: 600px; flex-wrap: wrap;">
369-
<div style="width: 50px; height: 50px;">
370-
</div>
371-
<div style="width: 100px; height: 50px;">
372-
</div>
373-
<div style="width: 25px; height: 50px;">
387+
<div data-disabled="true" id="stretch_max_width">
388+
<div style="width: 500px; position: relative;">
389+
<div style="flex-direction: row; max-width: -webkit-fill-available; width: 600px; flex-wrap: wrap;">
390+
<div style="width: 50px; height: 50px;">
391+
</div>
392+
<div style="width: 100px; height: 50px;">
393+
</div>
394+
<div style="width: 25px; height: 50px;">
395+
</div>
374396
</div>
375397
</div>
376398
</div>
377399

378-
<div data-disabled="true" id="max_content_min_width" style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
400+
<div data-disabled="true" id="max_content_min_width"
401+
style="flex-direction: row; min-width:max-content; width: 100px; flex-wrap: wrap;">
379402
<div style="width: 50px; height: 50px;">
380403
</div>
381404
<div style="width: 100px; height: 50px;">
@@ -384,24 +407,28 @@
384407
</div>
385408
</div>
386409

387-
<div data-disabled="true" id="fit_content_min_width" style="width: 90px; position: relative;">
388-
<div style="flex-direction: row; min-width: fit-content; width: 90px; flex-wrap: wrap;">
389-
<div style="width: 50px; height: 50px;">
390-
</div>
391-
<div style="width: 100px; height: 50px;">
392-
</div>
393-
<div style="width: 25px; height: 50px;">
410+
<div data-disabled="true" id="fit_content_min_width">
411+
<div style="width: 90px; position: relative;">
412+
<div style="flex-direction: row; min-width: fit-content; width: 90px; flex-wrap: wrap;">
413+
<div style="width: 50px; height: 50px;">
414+
</div>
415+
<div style="width: 100px; height: 50px;">
416+
</div>
417+
<div style="width: 25px; height: 50px;">
418+
</div>
394419
</div>
395420
</div>
396421
</div>
397422

398-
<div data-disabled="true" id="stretch_min_width" style="width: 500px; position: relative;">
399-
<div style="flex-direction: row; min-width: -webkit-fill-available; width: 400px; flex-wrap: wrap;">
400-
<div style="width: 50px; height: 50px;">
401-
</div>
402-
<div style="width: 100px; height: 50px;">
403-
</div>
404-
<div style="width: 25px; height: 50px;">
423+
<div data-disabled="true" id="stretch_min_width">
424+
<div style="width: 500px; position: relative;">
425+
<div style="flex-direction: row; min-width: -webkit-fill-available; width: 400px; flex-wrap: wrap;">
426+
<div style="width: 50px; height: 50px;">
427+
</div>
428+
<div style="width: 100px; height: 50px;">
429+
</div>
430+
<div style="width: 25px; height: 50px;">
431+
</div>
405432
</div>
406433
</div>
407434
</div>
@@ -415,24 +442,28 @@
415442
</div>
416443
</div>
417444

418-
<div data-disabled="true" id="fit_content_max_height" style="height: 90px; position: relative;">
419-
<div style="max-height: fit-content; height: 110px; flex-wrap: wrap;">
420-
<div style="width: 50px; height: 50px;">
421-
</div>
422-
<div style="width: 50px; height: 100px;">
423-
</div>
424-
<div style="width: 50px; height: 25px;">
445+
<div data-disabled="true" id="fit_content_max_height">
446+
<div style="height: 90px; position: relative;">
447+
<div style="max-height: fit-content; height: 110px; flex-wrap: wrap;">
448+
<div style="width: 50px; height: 50px;">
449+
</div>
450+
<div style="width: 50px; height: 100px;">
451+
</div>
452+
<div style="width: 50px; height: 25px;">
453+
</div>
425454
</div>
426455
</div>
427456
</div>
428457

429-
<div data-disabled="true" id="stretch_max_height" style="height: 500px; position: relative;">
430-
<div style="max-height: -webkit-fill-available; flex-wrap: wrap; height: 600px;">
431-
<div style="width: 50px; height: 50px;">
432-
</div>
433-
<div style="width: 50px; height: 100px;">
434-
</div>
435-
<div style="width: 50px; height: 25px;">
458+
<div data-disabled="true" id="stretch_max_height">
459+
<div style="height: 500px; position: relative;">
460+
<div style="max-height: -webkit-fill-available; flex-wrap: wrap; height: 600px;">
461+
<div style="width: 50px; height: 50px;">
462+
</div>
463+
<div style="width: 50px; height: 100px;">
464+
</div>
465+
<div style="width: 50px; height: 25px;">
466+
</div>
436467
</div>
437468
</div>
438469
</div>
@@ -446,24 +477,28 @@
446477
</div>
447478
</div>
448479

449-
<div data-disabled="true" id="fit_content_min_height" style="height: 90px; position: relative;">
450-
<div style="min-height: fit-content; height: 90px; flex-wrap: wrap;">
451-
<div style="width: 50px; height: 50px;">
452-
</div>
453-
<div style="width: 50px; height: 100px;">
454-
</div>
455-
<div style="width: 50px; height: 25px;">
480+
<div data-disabled="true" id="fit_content_min_height">
481+
<div style="height: 90px; position: relative;">
482+
<div style="min-height: fit-content; height: 90px; flex-wrap: wrap;">
483+
<div style="width: 50px; height: 50px;">
484+
</div>
485+
<div style="width: 50px; height: 100px;">
486+
</div>
487+
<div style="width: 50px; height: 25px;">
488+
</div>
456489
</div>
457490
</div>
458491
</div>
459492

460-
<div data-disabled="true" id="stretch_min_height" style="height: 500px; position: relative;">
461-
<div style="min-height: -webkit-fill-available; flex-wrap: wrap; height: 400px;">
462-
<div style="width: 50px; height: 50px;">
463-
</div>
464-
<div style="width: 50px; height: 100px;">
465-
</div>
466-
<div style="width: 50px; height: 25px;">
493+
<div data-disabled="true" id="stretch_min_height">
494+
<div style="height: 500px; position: relative;">
495+
<div style="min-height: -webkit-fill-available; flex-wrap: wrap; height: 400px;">
496+
<div style="width: 50px; height: 50px;">
497+
</div>
498+
<div style="width: 50px; height: 100px;">
499+
</div>
500+
<div style="width: 50px; height: 25px;">
501+
</div>
467502
</div>
468503
</div>
469504
</div>

0 commit comments

Comments
 (0)