Chromium Code Reviews| 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> |