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> |