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 |