| 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 <link href="resources/grid-alignment.css" rel="stylesheet"> |
| 5 <style type="text/css"> | 6 <style type="text/css"> |
| 6 | 7 |
| 7 .gridAreas { | 8 .gridAreas { |
| 8 grid-template-areas: ". a a" | 9 grid-template-areas: ". a a" |
| 9 "c a a" | 10 "c a a" |
| 10 ". . d"; | 11 ". . d"; |
| 11 } | 12 } |
| 12 | 13 |
| 13 .gridAreasSpecial { | 14 .gridAreasSpecial { |
| 14 grid-template-areas: ". a-start a-start" | 15 grid-template-areas: ". a-start a-start" |
| (...skipping 66 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 81 <div class="grid gridUniqueNames"> | 82 <div class="grid gridUniqueNames"> |
| 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-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> | 84 <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> | 85 <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> | 86 <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> | 87 </div> |
| 87 </div> | 88 </div> |
| 88 | 89 |
| 89 <!-- Check that without named gridAreas there are no implicit grid-line names de
fined --> | 90 <!-- Check that without named gridAreas there are no implicit grid-line names de
fined --> |
| 90 <div style="position: relative"> | 91 <div style="position: relative"> |
| 91 <div class="grid gridUniqueNames"> | 92 <div class="grid gridUniqueNames justifyContentStart"> |
| 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-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="0" da
ta-offset-y="350" data-expected-width="50" data-expected-height="0"></div> | 94 <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="350" data-offset-y="350" data-expected-width="0" data-expected-hei
ght="0"></div> | 95 <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="350" data-offset-y="350" data-expected-width="0" data-expected-hei
ght="0"></div> | 96 <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> | 97 </div> |
| 97 </div> | 98 </div> |
| 98 | 99 |
| 99 <!-- Check that gridArea's implicit names are well defined --> | 100 <!-- Check that gridArea's implicit names are well defined --> |
| 100 <div style="position: relative"> | 101 <div style="position: relative"> |
| 101 <div class="grid gridAreas gridNoLineNames"> | 102 <div class="grid gridAreas gridNoLineNames"> |
| (...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 159 </div> | 160 </div> |
| 160 | 161 |
| 161 <div style="position: relative"> | 162 <div style="position: relative"> |
| 162 <div class="grid gridAreas gridWithNamedLineBeforeGridArea"> | 163 <div class="grid gridAreas gridWithNamedLineBeforeGridArea"> |
| 163 <div class="sizedToGridArea" style="grid-column-start: d-start;" data-offset
-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></
div> | 164 <div class="sizedToGridArea" style="grid-column-start: d-start;" data-offset
-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></
div> |
| 164 <div class="sizedToGridArea" style="grid-row-start: d-start;" data-offset-x=
"0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div
> | 165 <div class="sizedToGridArea" style="grid-row-start: d-start;" data-offset-x=
"0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div
> |
| 165 </div> | 166 </div> |
| 166 </div> | 167 </div> |
| 167 | 168 |
| 168 <div style="position: relative"> | 169 <div style="position: relative"> |
| 169 <div class="grid gridAreas gridWithNamedLineBeforeGridArea"> | 170 <div class="grid gridAreas gridWithNamedLineBeforeGridArea justifyContentStart
"> |
| 170 <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="0" data-
offset-y="0" data-expected-width="350" data-expected-height="50"></div> | 171 <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="0" data-
offset-y="0" data-expected-width="350" data-expected-height="50"></div> |
| 171 <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="350" data-o
ffset-y="50" data-expected-width="0" data-expected-height="300"></div> | 172 <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="350" data-o
ffset-y="50" data-expected-width="0" data-expected-height="300"></div> |
| 172 <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offse
t-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300">
</div> | 173 <div class="sizedToGridArea" style="grid-column: a; grid-row: d;" data-offse
t-x="0" data-offset-y="50" data-expected-width="350" data-expected-height="300">
</div> |
| 173 </div> | 174 </div> |
| 174 </div> | 175 </div> |
| 175 | 176 |
| 176 <!-- Check that a "-start" ident in a end column or a "-end" ident in a start co
lumn is not treated as a implicit grid line of a grid area --> | 177 <!-- Check that a "-start" ident in a end column or a "-end" ident in a start co
lumn is not treated as a implicit grid line of a grid area --> |
| 177 <div style="position: relative"> | 178 <div style="position: relative"> |
| 178 <div class="grid gridAreas gridNoLineNames"> | 179 <div class="grid gridAreas gridNoLineNames"> |
| 179 <div class="sizedToGridArea" style="grid-column: a / a-start; grid-row: d-st
art;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expe
cted-height="200"></div> | 180 <div class="sizedToGridArea" style="grid-column: a / a-start; grid-row: d-st
art;" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expe
cted-height="200"></div> |
| (...skipping 17 matching lines...) Expand all Loading... |
| 197 <div style="position: relative"> | 198 <div style="position: relative"> |
| 198 <div class="grid gridAreas gridRepeatedNames"> | 199 <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> | 200 <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> | 201 <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> | 202 <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> | 203 </div> |
| 203 </div> | 204 </div> |
| 204 | 205 |
| 205 <!-- Check behavior with areas named *-start or *-end --> | 206 <!-- Check behavior with areas named *-start or *-end --> |
| 206 <div style="position: relative"> | 207 <div style="position: relative"> |
| 207 <div class="grid gridAreasSpecial gridNoLineNames"> | 208 <div class="grid gridAreasSpecial gridNoLineNames justifyContentStart"> |
| 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-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="0" data-off
set-y="350" data-expected-width="50" data-expected-height="0"></div> | 210 <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="350" data-offset-y="350" data-expected-width="0" data-expected-height="0"><
/div> | 211 <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> | 212 </div> |
| 212 </div> | 213 </div> |
| 213 | 214 |
| 214 <div style="position: relative"> | 215 <div style="position: relative"> |
| 215 <div class="grid gridAreasSpecial gridNoLineNames"> | 216 <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> | 217 <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> | 218 <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> |
| (...skipping 30 matching lines...) Expand all Loading... |
| 248 <div style="position: relative"> | 249 <div style="position: relative"> |
| 249 <div class="grid gridAreas gridImplicitArea"> | 250 <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> | 251 <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> | 252 <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> | 253 <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> | 254 </div> |
| 254 </div> | 255 </div> |
| 255 | 256 |
| 256 </body> | 257 </body> |
| 257 </html> | 258 </html> |
| OLD | NEW |