| 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 89 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 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> |
| 106 </div> | 106 </div> |
| 107 | 107 |
| 108 <!-- Check positioning using grid areas --> | 108 <!-- Check positioning using grid areas --> |
| 109 <div style="position: relative"> | 109 <div style="position: relative"> |
| 110 <div class="grid gridAreas gridNoLineNames"> | 110 <div class="grid gridAreas gridNoLineNames gridAutoFlowRowDense"> |
| 111 <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" dat
a-offset-y="0" data-expected-width="200" data-expected-height="50"></div> | 111 <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" dat
a-offset-y="0" data-expected-width="200" data-expected-height="50"></div> |
| 112 <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-off
set-y="150" data-expected-width="50" data-expected-height="200"></div> | 112 <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-off
set-y="150" data-expected-width="50" data-expected-height="200"></div> |
| 113 <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-
offset-y="0" data-expected-width="50" data-expected-height="50"></div> | 113 <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-
offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| 114 <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="100"></div> | 114 <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="100"></div> |
| 115 </div> | 115 </div> |
| 116 </div> | 116 </div> |
| 117 | 117 |
| 118 <div style="position: relative"> | 118 <div style="position: relative"> |
| 119 <div class="grid gridAreas gridNoLineNames gridAutoFlowStack"> | 119 <div class="grid gridAreas gridNoLineNames gridAutoFlowStack"> |
| 120 <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="50" data
-offset-y="0" data-expected-width="300" data-expected-height="50"></div> | 120 <div class="sizedToGridArea" style="grid-column: a;" data-offset-x="50" data
-offset-y="0" data-expected-width="300" data-expected-height="50"></div> |
| 121 <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-off
set-y="0" data-expected-width="50" data-expected-height="150"></div> | 121 <div class="sizedToGridArea" style="grid-row: a;" data-offset-x="0" data-off
set-y="0" data-expected-width="50" data-expected-height="150"></div> |
| 122 <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offse
t-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150">
</div> | 122 <div class="sizedToGridArea" style="grid-column: a; grid-row: a;" data-offse
t-x="50" data-offset-y="0" data-expected-width="300" data-expected-height="150">
</div> |
| 123 </div> | 123 </div> |
| 124 </div> | 124 </div> |
| 125 | 125 |
| 126 <!-- Use grid area's implicit line names if defined before explicitly named grid
lines --> | 126 <!-- Use grid area's implicit line names if defined before explicitly named grid
lines --> |
| 127 <div style="position: relative"> | 127 <div style="position: relative"> |
| 128 <div class="grid gridAreas gridWithNamedLineAfterGridArea"> | 128 <div class="grid gridAreas gridWithNamedLineAfterGridArea gridAutoFlowRowDense
"> |
| 129 <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" dat
a-offset-y="0" data-expected-width="200" data-expected-height="50"></div> | 129 <div class="sizedToGridArea" style="grid-column: d;" data-offset-x="150" dat
a-offset-y="0" data-expected-width="200" data-expected-height="50"></div> |
| 130 <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-off
set-y="150" data-expected-width="50" data-expected-height="200"></div> | 130 <div class="sizedToGridArea" style="grid-row: d;" data-offset-x="0" data-off
set-y="150" data-expected-width="50" data-expected-height="200"></div> |
| 131 <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-
offset-y="0" data-expected-width="50" data-expected-height="50"></div> | 131 <div class="sizedToGridArea" style="grid-column: c;" data-offset-x="0" data-
offset-y="0" data-expected-width="50" data-expected-height="50"></div> |
| 132 <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="100"></div> | 132 <div class="sizedToGridArea" style="grid-row: c;" data-offset-x="0" data-off
set-y="50" data-expected-width="50" data-expected-height="100"></div> |
| 133 </div> | 133 </div> |
| 134 </div> | 134 </div> |
| 135 | 135 |
| 136 <div style="position: relative"> | 136 <div style="position: relative"> |
| 137 <div class="grid gridAreas gridWithNamedLineAfterGridArea"> | 137 <div class="grid gridAreas gridWithNamedLineAfterGridArea"> |
| 138 <div class="sizedToGridArea" style="grid-column-start: a-start;" data-offset
-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></
div> | 138 <div class="sizedToGridArea" style="grid-column-start: a-start;" data-offset
-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></
div> |
| (...skipping 109 matching lines...) Expand 10 before | Expand all | Expand 10 after 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 |