| 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 .smallGrid { | 5 .smallGrid { |
| 6 grid-template-columns: 50px 100px; | 6 grid-template-columns: 50px 100px; |
| 7 grid-template-rows: 50px 100px; | 7 grid-template-rows: 50px 100px; |
| 8 } | 8 } |
| 9 | 9 |
| 10 .bigGrid { | 10 .bigGrid { |
| 11 grid-template-columns: 50px 100px 150px 200px; | 11 grid-template-columns: 50px 100px 150px 200px; |
| 12 grid-template-rows: 50px 100px 150px 200px; | 12 grid-template-rows: 50px 100px 150px 200px; |
| 13 } | 13 } |
| 14 | 14 |
| 15 .overflowingRowFirstColumn { | 15 .overflowingRowFirstColumn { |
| 16 grid-row: auto / 10; | 16 grid-row: auto / 10; |
| 17 grid-column: 1; | 17 grid-column: 1; |
| 18 } | 18 } |
| 19 | 19 |
| 20 .secondRowOverflowingColumn { | 20 .secondRowOverflowingColumn { |
| 21 grid-row: 2; | 21 grid-row: 2; |
| 22 grid-column: auto / 8; | 22 grid-column: auto / 8; |
| 23 } | 23 } |
| 24 | 24 |
| 25 /* These 2 classes forces the grid to be sized after the grid-{end|after}, thus
end up in the | |
| 26 first row / columns. */ | |
| 27 .negativeOverflowingRowFirstColumn { | 25 .negativeOverflowingRowFirstColumn { |
| 28 grid-row: auto / -10; | 26 grid-row: auto / -10; |
| 29 grid-column: 1; | 27 grid-column: 1; |
| 30 } | 28 } |
| 31 | 29 |
| 32 .secondRowNegativeOverflowingColumn { | 30 .secondRowNegativeOverflowingColumn { |
| 33 grid-row: 2; | 31 grid-row: 2; |
| 34 grid-column: auto / -8; | 32 grid-column: auto / -8; |
| 35 } | 33 } |
| 36 | 34 |
| (...skipping 88 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 125 | 123 |
| 126 <div class="unconstrainedContainer"> | 124 <div class="unconstrainedContainer"> |
| 127 <div class="grid bigGrid gridAutoFlowRowDense"> | 125 <div class="grid bigGrid gridAutoFlowRowDense"> |
| 128 <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0"
data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XX
XXX XXXXX</div> | 126 <div class="sizedToGridArea overflowingRowFirstColumn" data-offset-x="0"
data-offset-y="500" data-expected-width="50" data-expected-height="30">XXXXX XX
XXX XXXXX</div> |
| 129 <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="5
00" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXX
X XXXXX XXXXX</div> | 127 <div class="sizedToGridArea secondRowOverflowingColumn" data-offset-x="5
00" data-offset-y="50" data-expected-width="170" data-expected-height="100">XXXX
X XXXXX XXXXX</div> |
| 130 </div> | 128 </div> |
| 131 </div> | 129 </div> |
| 132 | 130 |
| 133 <div class="unconstrainedContainer"> | 131 <div class="unconstrainedContainer"> |
| 134 <div class="grid bigGrid gridAutoFlowColumnDense"> | 132 <div class="grid bigGrid gridAutoFlowColumnDense"> |
| 135 <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offs
et-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX
XXX XXXXX XXXXX</div> | 133 <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offs
et-x="170" data-offset-y="0" data-expected-width="50" data-expected-height="30">
XXXXX XXXXX XXXXX</div> |
| 136 <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-off
set-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"
>XXXXX XXXXX XXXXX</div> | 134 <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-off
set-x="0" data-offset-y="80" data-expected-width="170" data-expected-height="100
">XXXXX XXXXX XXXXX</div> |
| 137 </div> | 135 </div> |
| 138 </div> | 136 </div> |
| 139 | 137 |
| 140 <div class="unconstrainedContainer"> | 138 <div class="unconstrainedContainer"> |
| 141 <div class="grid bigGrid gridAutoFlowRowDense"> | 139 <div class="grid bigGrid gridAutoFlowRowDense"> |
| 142 <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offs
et-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XX
XXX XXXXX XXXXX</div> | 140 <div class="sizedToGridArea negativeOverflowingRowFirstColumn" data-offs
et-x="170" data-offset-y="0" data-expected-width="50" data-expected-height="30">
XXXXX XXXXX XXXXX</div> |
| 143 <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-off
set-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"
>XXXXX XXXXX XXXXX</div> | 141 <div class="sizedToGridArea secondRowNegativeOverflowingColumn" data-off
set-x="0" data-offset-y="80" data-expected-width="170" data-expected-height="100
">XXXXX XXXXX XXXXX</div> |
| 144 </div> | 142 </div> |
| 145 </div> | 143 </div> |
| 146 | 144 |
| 147 </body> | 145 </body> |
| 148 </html> | 146 </html> |
| OLD | NEW |