Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(53)

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/implicit-tracks-before-explicit.html

Issue 1529083006: [css-grid] Initial support for implicit grid before explicit grid (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Try to fix Windows build Created 5 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(Empty)
1 <!DOCTYPE html>
2
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .grid {
6 grid: 100px / 50px;
7 font: 10px/1 Ahem;
8 position: relative;
9 }
10
11 .firstNegativeRowFirstColumn {
12 grid-row: -3;
13 grid-column: 1;
14 }
15
16 .firstNegativeRowFirstNegativeColumn {
17 grid-row: -3;
18 grid-column: -3;
19 }
20
21 .secondNegativeRowFirstColumn {
22 grid-row: -4;
23 grid-column: 1;
24 }
25
26 .secondNegativeRowSecondNegativeColumn {
27 grid-row: -4;
28 grid-column: -4;
29 }
30
31 .firstRowFirstNegativeColumn {
32 grid-row: 1;
33 grid-column: -3;
34 }
35
36 .firstNegativeRowFirstNegativeColumn {
37 grid-row: -3;
38 grid-column: -3;
39 }
40
41 .firstRowSecondNegativeColumn {
42 grid-row: 1;
43 grid-column: -4;
44 }
45
46 </style>
47 <script src="../../resources/testharness.js"></script>
48 <script src="../../resources/testharnessreport.js"></script>
49 <script src="../../resources/check-layout-th.js"></script>
50
51 <body onload="checkLayout('.grid')">
52 <div id="log"></div>
53
54 <p>This test checks that it's possible to create implicit tracks before the expl icit ones using negative indexes.</p>
55
56 <div class="grid">
57 <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
58 </div>
59
60 <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
61 <div class="item firstNegativeRowFirstColumn" data-offset-x="0" data-offset- y="0" data-expected-width="100" data-expected-height="10">X</div>
62 <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="10" dat a-expected-width="100" data-expected-height="50">XX</div>
63 </div>
64
65 <div class="grid">
66 <div class="item firstNegativeRowFirstColumn" data-offset-x="0" data-offset- y="0" data-expected-width="100" data-expected-height="10">X</div>
67 <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="10" d ata-expected-width="100" data-expected-height="50">XX</div>
68 </div>
69
70 <div class="grid">
71 <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="0" data -offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
72 <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" dat a-expected-width="100" data-expected-height="10">XX</div>
73 </div>
74
75 <div class="grid">
76 <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="0" data -offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
77 <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div>
78 </div>
79
80 <div class="grid">
81 <div class="item secondNegativeRowFirstColumn" data-offset-x="0" data-offset -y="0" data-expected-width="100" data-expected-height="10">X</div>
82 <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="10" dat a-expected-width="100" data-expected-height="10">XX</div>
83 </div>
84
85 <div class="grid">
86 <div class="item secondNegativeRowFirstColumn" data-offset-x="0" data-offset -y="0" data-expected-width="100" data-expected-height="10">X</div>
87 <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="10" d ata-expected-width="100" data-expected-height="50">XX</div>
88 </div>
89
90 <div class="grid">
91 <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
92 <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" dat a-expected-width="20" data-expected-height="10">XX</div>
93 </div>
94
95 <div class="grid">
96 <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
97 <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div>
98 </div>
99
100 <div class="grid">
101 <div class="item secondNegativeRowFirstColumn" data-offset-x="0" data-offset -y="0" data-expected-width="100" data-expected-height="10">X</div>
102 <div class="item firstNegativeRowFirstColumn" data-offset-x="0" data-offset- y="10" data-expected-width="100" data-expected-height="10">XX</div>
103 <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="20" dat a-expected-width="100" data-expected-height="50">XXX</div>
104 </div>
105
106 <div class="grid">
107 <div class="item secondNegativeRowFirstColumn" data-offset-x="0" data-offset -y="0" data-expected-width="100" data-expected-height="10">X</div>
108 <div class="item firstNegativeRowFirstColumn" data-offset-x="0" data-offset- y="10" data-expected-width="100" data-expected-height="10">XX</div>
109 <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="20" d ata-expected-width="100" data-expected-height="50">XXX</div>
110 </div>
111
112 <div class="grid">
113 <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
114 <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="10" dat a-offset-y="10" data-expected-width="30" data-expected-height="10">XX</div>
115 <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" dat a-expected-width="30" data-expected-height="10">XXX</div>
116 </div>
117
118 <div class="grid">
119 <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
120 <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="10" dat a-offset-y="10" data-expected-width="20" data-expected-height="10">XX</div>
121 <div class="item firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="50">XXX</div>
122 </div>
123
124 <div class="grid">
125 <div class="item firstRowFirstNegativeColumn" data-offset-x="0" data-offset- y="0" data-expected-width="10" data-expected-height="50">X</div>
126 <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" dat a-expected-width="100" data-expected-height="50">XX</div>
127 </div>
128
129 <div class="grid">
130 <div class="item firstRowFirstNegativeColumn" data-offset-x="0" data-offset- y="0" data-expected-width="10" data-expected-height="50">X</div>
131 <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="0" d ata-expected-width="100" data-expected-height="50">XX</div>
132 </div>
133
134 <div class="grid">
135 <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="0" data -offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
136 <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" dat a-expected-width="100" data-expected-height="10">XX</div>
137 </div>
138
139 <div class="grid">
140 <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="0" data -offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
141 <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div>
142 </div>
143
144 <div class="grid">
145 <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset -y="0" data-expected-width="10" data-expected-height="50">X</div>
146 <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" dat a-expected-width="20" data-expected-height="50">XX</div>
147 </div>
148
149 <div class="grid">
150 <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset -y="0" data-expected-width="10" data-expected-height="50">X</div>
151 <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="0" d ata-expected-width="100" data-expected-height="50">XX</div>
152 </div>
153
154 <div class="grid">
155 <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
156 <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" dat a-expected-width="20" data-expected-height="10">XX</div>
157 </div>
158
159 <div class="grid">
160 <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
161 <div class="item firstRowFirstColumn" data-offset-x="10" data-offset-y="10" data-expected-width="100" data-expected-height="50">XX</div>
162 </div>
163
164 <div class="grid">
165 <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset -y="0" data-expected-width="10" data-expected-height="50">X</div>
166 <div class="item firstRowFirstNegativeColumn" data-offset-x="10" data-offset -y="0" data-expected-width="20" data-expected-height="50">XX</div>
167 <div class="item autoRowAutoColumn" data-offset-x="30" data-offset-y="0" dat a-expected-width="100" data-expected-height="50">XXX</div>
168 </div>
169
170 <div class="grid">
171 <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset -y="0" data-expected-width="10" data-expected-height="50">X</div>
172 <div class="item firstRowFirstNegativeColumn" data-offset-x="10" data-offset -y="0" data-expected-width="20" data-expected-height="50">XX</div>
173 <div class="item firstRowFirstColumn" data-offset-x="30" data-offset-y="0" d ata-expected-width="100" data-expected-height="50">XXX</div>
174 </div>
175
176 <div class="grid">
177 <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
178 <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="10" dat a-offset-y="10" data-expected-width="30" data-expected-height="10">XX</div>
179 <div class="item autoRowAutoColumn" data-offset-x="10" data-offset-y="0" dat a-expected-width="30" data-expected-height="10">XXX</div>
180 </div>
181
182 <div class="grid">
183 <div class="item secondNegativeRowSecondNegativeColumn" data-offset-x="0" da ta-offset-y="0" data-expected-width="10" data-expected-height="10">X</div>
184 <div class="item firstNegativeRowFirstNegativeColumn" data-offset-x="10" dat a-offset-y="10" data-expected-width="20" data-expected-height="10">XX</div>
185 <div class="item firstRowFirstColumn" data-offset-x="30" data-offset-y="20" data-expected-width="100" data-expected-height="50">XXX</div>
186 </div>
187
188 <div class="grid">
189 <div class="item firstNegativeRowFirstColumn" data-offset-x="30" data-offset -y="0" data-expected-width="100" data-expected-height="10">X</div>
190 <div class="item firstRowFirstNegativeColumn" data-offset-x="0" data-offset- y="10" data-expected-width="30" data-expected-height="50">XX</div>
191 <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data -expected-width="30" data-expected-height="10">XXX</div>
192 </div>
193
194 <div class="grid">
195 <div class="item firstNegativeRowFirstColumn" data-offset-x="20" data-offset -y="0" data-expected-width="100" data-expected-height="10">X</div>
196 <div class="item firstRowFirstNegativeColumn" data-offset-x="0" data-offset- y="10" data-expected-width="20" data-expected-height="50">XX</div>
197 <div class="item firstRowFirstColumn" data-offset-x="20" data-offset-y="10" data-expected-width="100" data-expected-height="50">XXX</div>
198 </div>
199
200 <div class="grid">
201 <div class="item secondNegativeRowFirstColumn" data-offset-x="30" data-offse t-y="0" data-expected-width="100" data-expected-height="10">X</div>
202 <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset -y="10" data-expected-width="30" data-expected-height="50">XX</div>
203 <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data -expected-width="30" data-expected-height="10">XXX</div>
204 </div>
205
206 <div class="grid">
207 <div class="item secondNegativeRowFirstColumn" data-offset-x="20" data-offse t-y="0" data-expected-width="100" data-expected-height="10">X</div>
208 <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset -y="10" data-expected-width="20" data-expected-height="50">XX</div>
209 <div class="item firstRowFirstColumn" data-offset-x="20" data-offset-y="10" data-expected-width="100" data-expected-height="50">XXX</div>
210 </div>
211
212 <div class="grid">
213 <div class="item secondNegativeRowFirstColumn" data-offset-x="90" data-offse t-y="0" data-expected-width="100" data-expected-height="10">X</div>
214 <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset -y="20" data-expected-width="50" data-expected-height="50">XX</div>
215 <div class="item firstNegativeRowFirstColumn" data-offset-x="90" data-offset -y="10" data-expected-width="100" data-expected-height="10">XXX</div>
216 <div class="item firstRowFirstNegativeColumn" data-offset-x="50" data-offset -y="20" data-expected-width="40" data-expected-height="50">XXXX</div>
217 <div class="item autoRowAutoColumn" data-offset-x="0" data-offset-y="0" data -expected-width="50" data-expected-height="10">XXXXX</div>
218 </div>
219
220 <div class="grid">
221 <div class="item secondNegativeRowFirstColumn" data-offset-x="60" data-offse t-y="0" data-expected-width="100" data-expected-height="10">X</div>
222 <div class="item firstRowSecondNegativeColumn" data-offset-x="0" data-offset -y="20" data-expected-width="20" data-expected-height="50">XX</div>
223 <div class="item firstNegativeRowFirstColumn" data-offset-x="60" data-offset -y="10" data-expected-width="100" data-expected-height="10">XXX</div>
224 <div class="item firstRowFirstNegativeColumn" data-offset-x="20" data-offset -y="20" data-expected-width="40" data-expected-height="50">XXXX</div>
225 <div class="item firstRowFirstColumn" data-offset-x="60" data-offset-y="20" data-expected-width="100" data-expected-height="50">XXXXX</div>
226 </div>
227
228 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698