Chromium Code Reviews| Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-percentage-rows.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-percentage-rows.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-percentage-rows.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..b922d3880eef0eb7eea57b33d9d9e1089e768785 |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-percentage-rows.html |
| @@ -0,0 +1,296 @@ |
| +<!DOCTYPE html> |
| +<link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" rel="stylesheet"> |
| +<link href="resources/grid.css" rel="stylesheet"> |
| +<style> |
| +.wrapper { |
| + position: relative; |
| + clear: both; |
| +} |
| + |
| +.grid { |
| + font: 10px/1 Ahem; |
| + width: fit-content; |
| +} |
| + |
| +.abspos { |
| + position: absolute; |
| +} |
| + |
| +.fixedSize { |
| + width: 200px; |
| + height: 200px; |
| +} |
| + |
| +.oneRow100 { |
| + grid-template-rows: 100%; |
| +} |
| + |
| +.oneRow50 { |
| + grid-template-rows: 50%; |
| +} |
| + |
| +.twoRows { |
| + grid-template-rows: 100px 50%; |
| +} |
| +</style> |
| +<script src="../../resources/testharness.js"></script> |
| +<script src="../../resources/testharnessreport.js"></script> |
| +<script src="../../resources/check-layout-th.js"></script> |
| +<body onload="checkLayout('.grid')"> |
| +<div id="log"></div> |
| + |
| +<p>This test checks that percentage rows behave as "auto" if the height of the grid container is indefinite.</p> |
|
jfernandez
2016/07/22 11:26:37
None of the test cases defined in this file fail w
Manuel Rego
2016/07/22 13:05:37
Wow, this has shown a very weird issue we've.
The
|
| + |
| +<div class="wrapper"> |
| + <div class="grid oneRow100" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid fixedSize oneRow100" data-expected-width="200" data-expected-height="200"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid abspos oneRow100" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid max-content oneRow100" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid fit-content oneRow100" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid min-content oneRow100" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid oneRow50" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid fixedSize oneRow50" data-expected-width="200" data-expected-height="200"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid abspos oneRow50" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid max-content oneRow50" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid fit-content oneRow50" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid min-content oneRow50" data-expected-width="40" data-expected-height="10"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid twoRows" data-expected-width="40" data-expected-height="110"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="110"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="110"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="110"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="110"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="10"> |
| + XX X |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid twoRows" data-expected-width="40" data-expected-height="100"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + XX X |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="0"> |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> |
| + XX X |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"> |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid abspos twoRows" data-expected-width="40" data-expected-height="100"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + XX X |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="0"> |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid max-content twoRows" data-expected-width="40" data-expected-height="100"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + XX X |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="0"> |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="100"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + XX X |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="0"> |
| + </div> |
| + </div> |
| +</div> |
| + |
| +<div class="wrapper"> |
| + <div class="grid min-content twoRows" data-expected-width="40" data-expected-height="100"> |
| + <div class="firstRowFirstColumn" |
| + data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100"> |
| + XX X |
| + </div> |
| + <div class="secondRowFirstColumn" |
| + data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="0"> |
| + </div> |
| + </div> |
| +</div> |
| + |
| +</body> |