| 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 |
|---|
Chromium Code Reviews
Issue 2458023002:
[css-grid] Fix percentage height resolution on replaced elements (Closed)
