OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <link href="resources/grid.css" rel="stylesheet"> | 4 <link href="resources/grid.css" rel="stylesheet"> |
5 <style type="text/css"> | 5 <style type="text/css"> |
6 | 6 |
7 .gridAreas { | 7 .gridAreas { |
8 grid-template-areas: ". a a" | 8 grid-template-areas: ". a a" |
9 "c a a" | 9 "c a a" |
10 ". . d"; | 10 ". . d"; |
(...skipping 71 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
82 <div class="sizedToGridArea" style="grid-column: b / 4;" data-offset-x="50"
data-offset-y="0" data-expected-width="300" data-expected-height="50"></div> | 82 <div class="sizedToGridArea" style="grid-column: b / 4;" data-offset-x="50"
data-offset-y="0" data-expected-width="300" data-expected-height="50"></div> |
83 <div class="sizedToGridArea" style="grid-row: 3 / h;" data-offset-x="0" data
-offset-y="150" data-expected-width="50" data-expected-height="200"></div> | 83 <div class="sizedToGridArea" style="grid-row: 3 / h;" data-offset-x="0" data
-offset-y="150" data-expected-width="50" data-expected-height="200"></div> |
84 <div class="sizedToGridArea" style="grid-column: 2; grid-row: g;" data-offse
t-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200
"></div> | 84 <div class="sizedToGridArea" style="grid-column: 2; grid-row: g;" data-offse
t-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="200
"></div> |
85 <div class="sizedToGridArea" style="grid-column: a; grid-row: 2;" data-offse
t-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"><
/div> | 85 <div class="sizedToGridArea" style="grid-column: a; grid-row: 2;" data-offse
t-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"><
/div> |
86 </div> | 86 </div> |
87 </div> | 87 </div> |
88 | 88 |
89 <!-- Check that without named gridAreas there are no implicit grid-line names de
fined --> | 89 <!-- Check that without named gridAreas there are no implicit grid-line names de
fined --> |
90 <div style="position: relative"> | 90 <div style="position: relative"> |
91 <div class="grid gridUniqueNames"> | 91 <div class="grid gridUniqueNames"> |
92 <div class="sizedToGridArea" style="grid-column: c-start;" data-offset-x="0"
data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> | 92 <div class="sizedToGridArea" style="grid-column: c-start;" data-offset-x="35
0" data-offset-y="0" data-expected-width="0" data-expected-height="50"></div> |
93 <div class="sizedToGridArea" style="grid-row: f-start;" data-offset-x="50" d
ata-offset-y="0" data-expected-width="100" data-expected-height="50"></div> | 93 <div class="sizedToGridArea" style="grid-row: f-start;" data-offset-x="0" da
ta-offset-y="350" data-expected-width="50" data-expected-height="0"></div> |
94 <div class="sizedToGridArea" style="grid-column: c-start; grid-row: f-end" d
ata-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-hei
ght="50"></div> | 94 <div class="sizedToGridArea" style="grid-column: c-start; grid-row: f-end" d
ata-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-hei
ght="0"></div> |
95 <div class="sizedToGridArea" style="grid-column: b-end; grid-row: h-start" d
ata-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-heigh
t="100"></div> | 95 <div class="sizedToGridArea" style="grid-column: b-end; grid-row: h-start" d
ata-offset-x="350" data-offset-y="350" data-expected-width="0" data-expected-hei
ght="0"></div> |
96 </div> | 96 </div> |
97 </div> | 97 </div> |
98 | 98 |
99 <!-- Check that gridArea's implicit names are well defined --> | 99 <!-- Check that gridArea's implicit names are well defined --> |
100 <div style="position: relative"> | 100 <div style="position: relative"> |
101 <div class="grid gridAreas gridNoLineNames"> | 101 <div class="grid gridAreas gridNoLineNames"> |
102 <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d-start;
" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected
-height="200"></div> | 102 <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d-start;
" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected
-height="200"></div> |
103 <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" data
-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-heigh
t="200"></div> | 103 <div class="sizedToGridArea" style="grid-column: a-start; grid-row: d;" data
-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-heigh
t="200"></div> |
104 <div class="sizedToGridArea" style="grid-column: d-start; grid-row: c-start;
" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected
-height="100"></div> | 104 <div class="sizedToGridArea" style="grid-column: d-start; grid-row: c-start;
" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected
-height="100"></div> |
105 </div> | 105 </div> |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
198 <div class="grid gridAreas gridRepeatedNames"> | 198 <div class="grid gridAreas gridRepeatedNames"> |
199 <div class="sizedToGridArea" style="grid-column: d; grid-row: c" data-offset
-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"><
/div> | 199 <div class="sizedToGridArea" style="grid-column: d; grid-row: c" data-offset
-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="100"><
/div> |
200 <div class="sizedToGridArea" style="grid-column: d-start / d-end; grid-row:
c-start / c-end" data-offset-x="0" data-offset-y="50" data-expected-width="350"
data-expected-height="100"></div> | 200 <div class="sizedToGridArea" style="grid-column: d-start / d-end; grid-row:
c-start / c-end" data-offset-x="0" data-offset-y="50" data-expected-width="350"
data-expected-height="100"></div> |
201 <div class="sizedToGridArea" style="grid-column: c; grid-row: d" data-offset
-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"><
/div> | 201 <div class="sizedToGridArea" style="grid-column: c; grid-row: d" data-offset
-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"><
/div> |
202 </div> | 202 </div> |
203 </div> | 203 </div> |
204 | 204 |
205 <!-- Check behavior with areas named *-start or *-end --> | 205 <!-- Check behavior with areas named *-start or *-end --> |
206 <div style="position: relative"> | 206 <div style="position: relative"> |
207 <div class="grid gridAreasSpecial gridNoLineNames"> | 207 <div class="grid gridAreasSpecial gridNoLineNames"> |
208 <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="0" data-
offset-y="0" data-expected-width="50" data-expected-height="50"></div> | 208 <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="350" dat
a-offset-y="0" data-expected-width="0" data-expected-height="50"></div> |
209 <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="50" data-of
fset-y="0" data-expected-width="100" data-expected-height="50"></div> | 209 <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-off
set-y="350" data-expected-width="50" data-expected-height="0"></div> |
210 <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offse
t-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50">
</div> | 210 <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offse
t-x="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"><
/div> |
211 </div> | 211 </div> |
212 </div> | 212 </div> |
213 | 213 |
214 <div style="position: relative"> | 214 <div style="position: relative"> |
215 <div class="grid gridAreasSpecial gridNoLineNames"> | 215 <div class="grid gridAreasSpecial gridNoLineNames"> |
216 <div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50
" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div> | 216 <div class="sizedToGridArea" style="grid-column: a-start;" data-offset-x="50
" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div> |
217 <div class="sizedToGridArea" style="grid-row: a-end;" data-offset-x="0" data
-offset-y="50" data-expected-width="50" data-expected-height="100"></div> | 217 <div class="sizedToGridArea" style="grid-row: a-end;" data-offset-x="0" data
-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
218 <div class="sizedToGridArea" style="grid-column: a-start; grid-row: a-end;"
data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-he
ight="100"></div> | 218 <div class="sizedToGridArea" style="grid-column: a-start; grid-row: a-end;"
data-offset-x="50" data-offset-y="50" data-expected-width="300" data-expected-he
ight="100"></div> |
219 </div> | 219 </div> |
220 </div> | 220 </div> |
(...skipping 27 matching lines...) Expand all Loading... |
248 <div style="position: relative"> | 248 <div style="position: relative"> |
249 <div class="grid gridAreas gridImplicitArea"> | 249 <div class="grid gridAreas gridImplicitArea"> |
250 <div class="sizedToGridArea" style="grid-column: z;" data-offset-x="50" data
-offset-y="0" data-expected-width="100" data-expected-height="50"></div> | 250 <div class="sizedToGridArea" style="grid-column: z;" data-offset-x="50" data
-offset-y="0" data-expected-width="100" data-expected-height="50"></div> |
251 <div class="sizedToGridArea" style="grid-row: z;" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="300"></div> | 251 <div class="sizedToGridArea" style="grid-row: z;" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="300"></div> |
252 <div class="sizedToGridArea" style="grid-column-end: z; grid-row-start: z;"
data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-he
ight="100"></div> | 252 <div class="sizedToGridArea" style="grid-column-end: z; grid-row-start: z;"
data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-he
ight="100"></div> |
253 </div> | 253 </div> |
254 </div> | 254 </div> |
255 | 255 |
256 </body> | 256 </body> |
257 </html> | 257 </html> |
OLD | NEW |