|
4 | 4 | <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
5 | 5 | <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
|
6 | 6 | <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">
|
| 7 | + <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio-minimum"> |
| 8 | + <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto"> |
7 | 9 | <link rel="match" href="../../reference/ref-filled-green-200px-square.html" />
|
8 | 10 | <style>
|
9 | 11 | .flexContainer {
|
|
19 | 21 | box-sizing: border-box;
|
20 | 22 | }
|
21 | 23 | .item > div {
|
22 |
| - height: 500px; /* Set a large content size suggestion for flex item. */ |
| 24 | + height: 190px; /* Set the content size suggestion for flex item. */ |
23 | 25 | }
|
24 | 26 | </style>
|
25 | 27 |
|
26 | 28 | <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
27 | 29 |
|
| 30 | + <!-- In all of the subtests here, each flex item's automatic minimum height is |
| 31 | + resolved directly from its content size suggestion. Notably, these items |
| 32 | + *do not* get a "transferred size suggestion", because they are all |
| 33 | + *non-replaced* elements; and "transferred size suggestion" is only used |
| 34 | + for resolving automatic minimum sizes on *replaced* elements. However, |
| 35 | + note that we do "transfer" sizes through the aspect ratio, as part of |
| 36 | + computing the content size suggestion and/or flex base size. --> |
| 37 | + |
28 | 38 | <!-- In the following four flex containers, the aspect-ratio works with border-box. -->
|
29 | 39 | <div class="flexContainer" style="height: auto;">
|
30 | 40 | <!-- The border-box width 25px is transferred to the main axis,
|
31 |
| - yielding a resolved flex base size of 200px. --> |
| 41 | + yielding a resolved flex base size (border-box) of 200px. --> |
32 | 42 | <div class="item" style="min-height:0; width: 25px; aspect-ratio: 1/8;"><div></div></div>
|
33 | 43 | </div>
|
34 | 44 |
|
35 | 45 | <div class="flexContainer">
|
36 |
| - <!-- The border-box width 25px is transferred to the main axis, |
37 |
| - yielding a resolved min-height:auto of 200px. --> |
38 |
| - <div class="item" style="width: 25px; aspect-ratio: 1/8;"><div></div></div> |
| 46 | + <!-- The content size suggestion is 190px, i.e. the height of the item's |
| 47 | + child div. --> |
| 48 | + <div class="item" style="width: 25px; aspect-ratio: 1/1;"><div></div></div> |
39 | 49 | </div>
|
40 | 50 |
|
41 | 51 | <div class="flexContainer">
|
42 |
| - <!-- The border-box min-width 25px is transferred to the main axis, |
43 |
| - yielding a resolved min-height:auto of 200px. --> |
44 |
| - <div class="item" style="min-width: 25px; aspect-ratio: 1/8;"><div></div></div> |
| 52 | + <!-- The content size suggestion is 190px, i.e. the height of the item's |
| 53 | + child div. --> |
| 54 | + <div class="item" style="min-width: 25px; aspect-ratio: 1/1;"><div></div></div> |
45 | 55 | </div>
|
46 | 56 |
|
47 | 57 | <div class="flexContainer">
|
48 |
| - <!-- The border-box width 25px (clamped by max-width) is transferred to the main axis, |
49 |
| - yielding a resolved min-height:auto of 200px. --> |
50 |
| - <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;"><div></div></div> |
| 58 | + <!-- The content size suggestion is 200px because the border-box max-width |
| 59 | + 25px is transferred to the main axis as the upper bound of its |
| 60 | + border-box height. --> |
| 61 | + <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: 1/8;"> |
| 62 | + <div style="height: 500px"></div> |
| 63 | + </div> |
51 | 64 | </div>
|
52 | 65 |
|
53 | 66 | <!-- In the following four flex containers, the aspect-ratio works with content-box
|
54 | 67 | because its value contains 'auto'. -->
|
55 | 68 | <div class="flexContainer" style="height: auto;">
|
56 | 69 | <!-- The content-box width 10px is transferred to the main axis,
|
57 |
| - yielding a resolved flex base size of 190px. --> |
| 70 | + yielding a resolved flex base size (content-box) of 190px. --> |
58 | 71 | <div class="item" style="min-height:0; width: 25px; aspect-ratio: auto 1/19;"><div></div></div>
|
59 | 72 | </div>
|
60 | 73 |
|
61 | 74 | <div class="flexContainer">
|
62 |
| - <!-- The content-box width 10px is transferred to the main axis, |
63 |
| - yielding a resolved min-height:auto of 190px. --> |
64 |
| - <div class="item" style="width: 25px; aspect-ratio: auto 1/19;"><div></div></div> |
| 75 | + <!-- The content size suggestion is 190px, i.e. the height of the item's |
| 76 | + child div. --> |
| 77 | + <div class="item" style="width: 25px; aspect-ratio: auto 1/1;"><div></div></div> |
65 | 78 | </div>
|
66 | 79 |
|
67 | 80 | <div class="flexContainer">
|
68 |
| - <!-- The content-box min-width 10px is transferred to the main axis, |
69 |
| - yielding a resolved min-height:auto of 190px. --> |
70 |
| - <div class="item" style="min-width: 25px; aspect-ratio: auto 1/19;"><div></div></div> |
| 81 | + <!-- The content size suggestion is 190px, i.e. the height of the item's |
| 82 | + child div. --> |
| 83 | + <div class="item" style="min-width: 25px; aspect-ratio: auto 1/1;"><div></div></div> |
71 | 84 | </div>
|
72 | 85 |
|
73 | 86 | <div class="flexContainer">
|
74 |
| - <!-- The content-box width 10px (clamped by max-width) is transferred to the main axis, |
75 |
| - yielding a resolved min-height:auto of 190px. --> |
76 |
| - <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"><div></div></div> |
| 87 | + <!-- The content size suggestion is 190px because the content-box max-width |
| 88 | + 10px is transferred to the main axis as the upper bound of its |
| 89 | + content-box height.--> |
| 90 | + <div class="item" style="max-width: 25px; width: 100px; aspect-ratio: auto 1/19;"> |
| 91 | + <div style="height: 500px"></div> |
| 92 | + </div> |
77 | 93 | </div>
|
78 | 94 | </html>
|
0 commit comments