OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 | 2 |
3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
4 <link href="resources/grid-alignment.css" rel="stylesheet"> | 4 <link href="resources/grid-alignment.css" rel="stylesheet"> |
5 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> | 5 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel
="stylesheet"> |
6 | 6 |
7 <style> | 7 <style> |
8 .grid { | 8 .grid { |
9 grid: 200px / 200px; | 9 grid: 200px / 200px; |
10 width: 200px; | 10 width: 200px; |
11 } | 11 } |
12 | 12 |
13 .red { | 13 .red { |
14 background-color: red; | 14 background-color: red; |
15 } | 15 } |
16 | 16 |
17 img { | 17 img { |
18 height: 100%; | 18 height: 100%; |
19 display: block; | 19 display: block; |
20 } | 20 } |
| 21 |
| 22 .height100 { |
| 23 height: 100%; |
| 24 } |
21 </style> | 25 </style> |
22 | 26 |
23 <script src="../../resources/testharness.js"></script> | 27 <script src="../../resources/testharness.js"></script> |
24 <script src="../../resources/testharnessreport.js"></script> | 28 <script src="../../resources/testharnessreport.js"></script> |
25 <script src="../../resources/check-layout-th.js"></script> | 29 <script src="../../resources/check-layout-th.js"></script> |
26 | 30 |
27 <body onload="checkLayout('.grid')"> | 31 <body onload="checkLayout('.grid')"> |
28 <div id="log"></div> | 32 <div id="log"></div> |
29 | 33 |
30 <p>This test checks that percentage heights are properly resolved for grid items
that are replaced elements. | 34 <p>This test checks that percentage heights are properly resolved for grid items
that are replaced elements. |
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
63 <div class="grid alignItemsStart justifyItemsStart"> | 67 <div class="grid alignItemsStart justifyItemsStart"> |
64 <div class="firstRowFirstColumn red" style="width: 100px; height: 100px;" | 68 <div class="firstRowFirstColumn red" style="width: 100px; height: 100px;" |
65 data-expected-width="100" data-expected-height="100"> | 69 data-expected-width="100" data-expected-height="100"> |
66 </div> | 70 </div> |
67 <div class="firstRowFirstColumn"> | 71 <div class="firstRowFirstColumn"> |
68 <img src="../css/resources/greenbox-100px.png" | 72 <img src="../css/resources/greenbox-100px.png" |
69 data-expected-width="100" data-expected-height="100"> | 73 data-expected-width="100" data-expected-height="100"> |
70 </div> | 74 </div> |
71 </div> | 75 </div> |
72 | 76 |
| 77 <p>5) 100% height on the image (grid item's child) should be resolved against th
e height of the grid item, |
| 78 which also has a 100% height that is resolved against the height of the grid are
a (200px).</p> |
| 79 |
| 80 <div class="grid red"> |
| 81 <div class="height100" data-expected-width="200" data-expected-height="200"> |
| 82 <img src="../css/resources/greenbox-100px.png" |
| 83 data-expected-width="200" data-expected-height="200"> |
| 84 </div> |
| 85 </div> |
| 86 |
73 </body> | 87 </body> |
OLD | NEW |