Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..959c73773af8569e90dc61fa36732139af463a8f |
--- /dev/null |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html |
@@ -0,0 +1,228 @@ |
+<!DOCTYPE html> |
+ |
+<link href="resources/grid.css" rel="stylesheet"> |
+<style> |
+.grid { |
+ grid: 100px / 50px; |
+ font: 10px/1 Ahem; |
+ position: relative; |
+} |
+ |
+.firstNegativeRowFirstColumn { |
+ grid-row: -3; |
+ grid-column: 1; |
+} |
+ |
+.firstNegativeRowFirstNegativeColumn { |
+ grid-row: -3; |
+ grid-column: -3; |
+} |
+ |
+.secondNegativeRowFirstColumn { |
+ grid-row: -4; |
+ grid-column: 1; |
+} |
+ |
+.secondNegativeRowSecondNegativeColumn { |
+ grid-row: -4; |
+ grid-column: -4; |
+} |
+ |
+.firstRowFirstNegativeColumn { |
+ grid-row: 1; |
+ grid-column: -3; |
+} |
+ |
+.firstNegativeRowFirstNegativeColumn { |
+ grid-row: -3; |
+ grid-column: -3; |
+} |
+ |
+.firstRowSecondNegativeColumn { |
+ grid-row: 1; |
+ grid-column: -4; |
+} |
+ |
+</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 it's possible to create implicit tracks before the explicit ones using negative indexes.</p> |
+ |
+<div class="grid"> |
+ <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX</div> |
jfernandez
2015/12/18 14:33:21
Where is the 'item' class defined ?
Manuel Rego
2015/12/18 22:42:30
Good catch, dunno from where it comes. I've remove
|
+</div> |
+ |
+<div class="grid"> |
jfernandez
2015/12/18 14:33:21
Are we able to properly see each test cases in the
Manuel Rego
2015/12/18 22:42:30
It's true that we cannot see them easily.
So I've
|
+ <div class="item firstNegativeRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstNegativeRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="100" data-expected-height="10">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="20" data-expected-height="10">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstNegativeRowFirstColumn" data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10">XX</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="50">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstNegativeRowFirstColumn" data-offset-x="0" data-offset-y="10" data-expected-width="100" data-expected-height="10">XX</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="20" data-expected-width="100" data-expected-height="50">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="10" data-offset-y="10" data-expected-width="30" data-expected-height="10">XX</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="30" data-expected-height="10">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="10" data-offset-y="10" data-expected-width="20" data-expected-height="10">XX</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="50">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstRowFirstNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="50">X</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstRowFirstNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="50">X</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="100" data-expected-height="10">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="50">X</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="20" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="50">X</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="0" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="20" data-expected-height="10">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="50">X</div> |
+ <div class="item firstRowFirstNegativeColumn" data-offset-x="10" data-offset-y="0" data-expected-width="20" data-expected-height="50">XX</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="50">X</div> |
+ <div class="item firstRowFirstNegativeColumn" data-offset-x="10" data-offset-y="0" data-expected-width="20" data-expected-height="50">XX</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="10" data-offset-y="10" data-expected-width="30" data-expected-height="10">XX</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" data-expected-width="30" data-expected-height="10">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="10">X</div> |
+ <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="10" data-offset-y="10" data-expected-width="20" data-expected-height="10">XX</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="50">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstNegativeRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstRowFirstNegativeColumn" data-offset-x="0" data-offset-y="10" data-expected-width="30" data-expected-height="50">XX</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item firstNegativeRowFirstColumn" data-offset-x="20" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstRowFirstNegativeColumn" data-offset-x="0" data-offset-y="10" data-expected-width="20" data-expected-height="50">XX</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="20" data-offset-y="10" data-expected-width="100" data-expected-height="50">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowFirstColumn" data-offset-x="30" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset-y="10" data-expected-width="30" data-expected-height="50">XX</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="10">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowFirstColumn" data-offset-x="20" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset-y="10" data-expected-width="20" data-expected-height="50">XX</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="20" data-offset-y="10" data-expected-width="100" data-expected-height="50">XXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowFirstColumn" data-offset-x="90" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset-y="20" data-expected-width="50" data-expected-height="50">XX</div> |
+ <div class="item firstNegativeRowFirstColumn" data-offset-x="90" data-offset-y="10" data-expected-width="100" data-expected-height="10">XXX</div> |
+ <div class="item firstRowFirstNegativeColumn" data-offset-x="50" data-offset-y="20" data-expected-width="40" data-expected-height="50">XXXX</div> |
+ <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="10">XXXXX</div> |
+</div> |
+ |
+<div class="grid"> |
+ <div class="item secondNegativeRowFirstColumn" data-offset-x="60" data-offset-y="0" data-expected-width="100" data-expected-height="10">X</div> |
+ <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset-y="20" data-expected-width="20" data-expected-height="50">XX</div> |
+ <div class="item firstNegativeRowFirstColumn" data-offset-x="60" data-offset-y="10" data-expected-width="100" data-expected-height="10">XXX</div> |
+ <div class="item firstRowFirstNegativeColumn" data-offset-x="20" data-offset-y="20" data-expected-width="40" data-expected-height="50">XXXX</div> |
+ <div class="item firstRowFirstColumn" data-offset-x="60" data-offset-y="20" data-expected-width="100" data-expected-height="50">XXXXX</div> |
+</div> |
+ |
+</body> |