OLD | NEW |
---|---|
(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> | |
OLD | NEW |