| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <link href="resources/grid.css" rel="stylesheet"> | 3 <link href="resources/grid.css" rel="stylesheet"> |
| 4 <style> | 4 <style> |
| 5 .grid { | 5 .grid { |
| 6 grid-template-columns: 40% 60%; | 6 grid-template-columns: 40% 60%; |
| 7 grid-template-rows: 30% 70%; | 7 grid-template-rows: 30% 70%; |
| 8 width: 400px; | 8 width: 400px; |
| 9 height: 300px; | 9 height: 300px; |
| 10 grid-auto-columns: 200px; |
| 11 grid-auto-rows: 250px; |
| 10 } | 12 } |
| 11 | 13 |
| 12 #bigGrid { | 14 #bigGrid { |
| 13 grid-template-columns: 25% 25% 25% 25%; | 15 grid-template-columns: 25% 25% 25% 25%; |
| 14 grid-template-rows: 25% 25% 25% 25%; | 16 grid-template-rows: 25% 25% 25% 25%; |
| 15 height: 100px; | 17 height: 100px; |
| 16 width: 200px; | 18 width: 200px; |
| 17 } | 19 } |
| 18 | 20 |
| 19 #fixedGrid { | 21 #fixedGrid { |
| (...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 117 </div> | 119 </div> |
| 118 | 120 |
| 119 <div style="position: relative"> | 121 <div style="position: relative"> |
| 120 <div class="grid" data-expected-width="400" data-expected-height="300"> | 122 <div class="grid" data-expected-width="400" data-expected-height="300"> |
| 121 <div class="sizedToGridArea bothRowBothColumn" data-offset-x="0" data-offset
-y="0" data-expected-width="400" data-expected-height="300"></div> | 123 <div class="sizedToGridArea bothRowBothColumn" data-offset-x="0" data-offset
-y="0" data-expected-width="400" data-expected-height="300"></div> |
| 122 </div> | 124 </div> |
| 123 </div> | 125 </div> |
| 124 | 126 |
| 125 <div style="position: relative"> | 127 <div style="position: relative"> |
| 126 <div class="grid" data-expected-width="400" data-expected-height="300"> | 128 <div class="grid" data-expected-width="400" data-expected-height="300"> |
| 127 <div class="sizedToGridArea negativeOverflowRowFirstColumn" data-offset-x="0
" data-offset-y="0" data-expected-width="160" data-expected-height="90"></div> | 129 <div class="sizedToGridArea negativeOverflowRowFirstColumn" data-offset-x="0
" data-offset-y="0" data-expected-width="160" data-expected-height="500"></div> |
| 128 </div> | 130 </div> |
| 129 </div> | 131 </div> |
| 130 | 132 |
| 131 <div style="position: relative"> | 133 <div style="position: relative"> |
| 132 <div class="grid" data-expected-width="400" data-expected-height="300"> | 134 <div class="grid" data-expected-width="400" data-expected-height="300"> |
| 133 <div class="sizedToGridArea overflowRowFirstColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="160" data-expected-height="300"></div> | 135 <div class="sizedToGridArea overflowRowFirstColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="160" data-expected-height="800"></div> |
| 134 </div> | 136 </div> |
| 135 </div> | 137 </div> |
| 136 | 138 |
| 137 <div style="position: relative"> | 139 <div style="position: relative"> |
| 138 <div class="grid" data-expected-width="400" data-expected-height="300"> | 140 <div class="grid" data-expected-width="400" data-expected-height="300"> |
| 139 <div class="sizedToGridArea firstRowNegativeOverflowColumn" data-offset-x="0
" data-offset-y="0" data-expected-width="160" data-expected-height="90"></div> | 141 <div class="sizedToGridArea firstRowNegativeOverflowColumn" data-offset-x="0
" data-offset-y="0" data-expected-width="400" data-expected-height="90"></div> |
| 140 </div> | 142 </div> |
| 141 </div> | 143 </div> |
| 142 | 144 |
| 143 <div style="position: relative"> | 145 <div style="position: relative"> |
| 144 <div class="grid" data-expected-width="400" data-expected-height="300"> | 146 <div class="grid" data-expected-width="400" data-expected-height="300"> |
| 145 <div class="sizedToGridArea firstRowOverflowColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="400" data-expected-height="90"></div> | 147 <div class="sizedToGridArea firstRowOverflowColumn" data-offset-x="0" data-o
ffset-y="0" data-expected-width="800" data-expected-height="90"></div> |
| 146 </div> | 148 </div> |
| 147 </div> | 149 </div> |
| 148 | 150 |
| 149 <div style="position: relative"> | 151 <div style="position: relative"> |
| 150 <div class="grid" data-expected-width="400" data-expected-height="300"> | 152 <div class="grid" data-expected-width="400" data-expected-height="300"> |
| 151 <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="160
" data-offset-y="0" data-expected-width="240" data-expected-height="90"></div> | 153 <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="160
" data-offset-y="0" data-expected-width="240" data-expected-height="90"></div> |
| 152 </div> | 154 </div> |
| 153 </div> | 155 </div> |
| 154 | 156 |
| 155 <div style="position: relative"> | 157 <div style="position: relative"> |
| 156 <div class="grid" data-expected-width="400" data-expected-height="300"> | 158 <div class="grid" data-expected-width="400" data-expected-height="300"> |
| 157 <div class="sizedToGridArea autoSecondRowAutoFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="160" data-expected-height="90"></div> | 159 <div class="sizedToGridArea autoSecondRowAutoFirstColumn" data-offset-x="0"
data-offset-y="0" data-expected-width="200" data-expected-height="90"></div> |
| 158 </div> | 160 </div> |
| 159 </div> | 161 </div> |
| 160 | 162 |
| 161 <div style="position: relative"> | 163 <div style="position: relative"> |
| 162 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1
00"> | 164 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1
00"> |
| 163 <div class="sizedToGridArea secondRowSecondColumnNoSpan" data-offset-x="50"
data-offset-y="25" data-expected-width="50" data-expected-height="25"></div> | 165 <div class="sizedToGridArea secondRowSecondColumnNoSpan" data-offset-x="50"
data-offset-y="25" data-expected-width="50" data-expected-height="25"></div> |
| 164 <div class="sizedToGridArea thirdRowThirdColumnNoSpan" data-offset-x="100" d
ata-offset-y="50" data-expected-width="50" data-expected-height="25"></div> | 166 <div class="sizedToGridArea thirdRowThirdColumnNoSpan" data-offset-x="100" d
ata-offset-y="50" data-expected-width="50" data-expected-height="25"></div> |
| 165 </div> | 167 </div> |
| 166 | 168 |
| 167 <div style="position: relative"> | 169 <div style="position: relative"> |
| (...skipping 13 matching lines...) Expand all Loading... |
| 181 </div> | 183 </div> |
| 182 </div> | 184 </div> |
| 183 | 185 |
| 184 <div style="position: relative"> | 186 <div style="position: relative"> |
| 185 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1
00"> | 187 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1
00"> |
| 186 <div class="sizedToGridArea thirdRowSpanning2Column3" data-offset-x="0" data
-offset-y="50" data-expected-width="100" data-expected-height="25"></div> | 188 <div class="sizedToGridArea thirdRowSpanning2Column3" data-offset-x="0" data
-offset-y="50" data-expected-width="100" data-expected-height="25"></div> |
| 187 </div> | 189 </div> |
| 188 | 190 |
| 189 <div style="position: relative"> | 191 <div style="position: relative"> |
| 190 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1
00"> | 192 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1
00"> |
| 191 <div class="sizedToGridArea underflowSpanning" data-offset-x="0" data-offset
-y="0" data-expected-width="100" data-expected-height="75"></div> | 193 <div class="sizedToGridArea underflowSpanning" data-offset-x="0" data-offset
-y="0" data-expected-width="300" data-expected-height="1325"></div> |
| 192 </div> | 194 </div> |
| 193 | 195 |
| 194 <!-- Check that the end span is ignored when two opposing spans are specified--> | 196 <!-- Check that the end span is ignored when two opposing spans are specified--> |
| 195 <div style="position: relative"> | 197 <div style="position: relative"> |
| 196 <div class="grid" id="fixedGrid" style="grid-auto-flow: row;"> | 198 <div class="grid" id="fixedGrid" style="grid-auto-flow: row;"> |
| 197 <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offse
t-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></d
iv> | 199 <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offse
t-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></d
iv> |
| 198 <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0"
data-expected-width="60" data-expected-height="105"></div> | 200 <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0"
data-expected-width="60" data-expected-height="105"></div> |
| 199 </div> | 201 </div> |
| 200 | 202 |
| 201 <div style="position: relative"> | 203 <div style="position: relative"> |
| 202 <div class="grid" id="fixedGrid" style="grid-auto-flow: column;"> | 204 <div class="grid" id="fixedGrid" style="grid-auto-flow: column;"> |
| 203 <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offse
t-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></d
iv> | 205 <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offse
t-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></d
iv> |
| 204 <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15"
data-expected-width="30" data-expected-height="210"></div> | 206 <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15"
data-expected-width="30" data-expected-height="210"></div> |
| 205 </div> | 207 </div> |
| 206 </body> | 208 </body> |
| 207 </html> | 209 </html> |
| OLD | NEW |