OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <link href="resources/grid.css" rel="stylesheet"> | |
4 <style> | |
5 | |
6 .grid { | |
7 grid-template-columns: 50px 100px 150px 200px; | |
8 grid-template-rows: 50px 100px 150px 200px; | |
9 width: 500px; | |
10 height: 500px; | |
11 border: 5px solid black; | |
12 margin: 10px; | |
13 padding: 15px; | |
Julien - ping for review
2014/11/18 21:12:44
Ideally we don't want border + margin == padding a
Manuel Rego
2014/11/19 15:18:29
Sure, I've modified it so now we have margin 30, p
| |
14 /* Ensures that the grid container is the contaning block of the grid childr en. */ | |
15 position: relative; | |
16 } | |
17 | |
18 .absolute { | |
19 position: absolute; | |
20 } | |
21 | |
22 .thirdRowThirdColumnSpanning2Rows { | |
23 grid-column: 3; | |
24 grid-row: 3 / span 2; | |
25 background-color: maroon; | |
26 } | |
27 | |
28 .thirdRowThirdColumnSpanning2Rows2Columns { | |
29 grid-column: 3 / span 2; | |
30 grid-row: 3 / span 2; | |
31 background-color: aqua; | |
32 } | |
33 | |
34 .endFirstRowEndFirstColumn { | |
35 background-color: blue; | |
36 grid-column-end: 2; | |
37 grid-row-end: 2; | |
38 } | |
39 | |
40 .endFirstRowEndSecondColumn { | |
41 background-color: lime; | |
42 grid-column-end: 3; | |
43 grid-row-end: 2; | |
44 } | |
45 | |
46 .endSecondRowEndFirstColumn { | |
47 background-color: purple; | |
48 grid-column-end: 2; | |
49 grid-row-end: 3; | |
50 } | |
51 | |
52 .endSecondRowEndSecondColumn { | |
53 background-color: orange; | |
54 grid-column-end: 3; | |
55 grid-row-end: 3; | |
56 } | |
57 | |
58 .endThirdRowEndThirdColumnSpanning2Rows { | |
59 grid-column-end: 4; | |
60 grid-row: span 2 / 4; | |
61 background-color: maroon; | |
62 } | |
63 | |
64 .endThirdRowEndThirdColumnSpanning2Rows2Columns { | |
65 grid-column: span 2 / 4; | |
66 grid-row: span 2 / 4; | |
67 background-color: aqua; | |
68 } | |
69 | |
70 .onlyFirstRowOnlyFirstColumn { | |
71 background-color: blue; | |
72 grid-column: 1 / 2; | |
73 grid-row: 1 / 2; | |
74 } | |
75 | |
76 .onlyFirstRowOnlySecondColumn { | |
77 background-color: lime; | |
78 grid-column: 2 / 3; | |
79 grid-row: 1 / 2; | |
80 } | |
81 | |
82 .onlySecondRowOnlyFirstColumn { | |
83 background-color: purple; | |
84 grid-column: 1 / 2; | |
85 grid-row: 2 / 3; | |
86 } | |
87 | |
88 .onlySecondRowOnlySecondColumn { | |
89 background-color: orange; | |
90 grid-column: 2 / 3; | |
91 grid-row: 2 / 3; | |
92 } | |
93 | |
94 .onlyThirdRowOnlyThirdColumnSpanning2Rows { | |
95 grid-column: 3 / 4; | |
96 grid-row: 3 / 5; | |
97 background-color: maroon; | |
98 } | |
99 | |
100 .onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns { | |
101 grid-column: 3 / 5; | |
102 grid-row: 3 / 5; | |
103 background-color: aqua; | |
104 } | |
105 | |
106 .offsetLeft25 { | |
107 left: 25px; | |
108 } | |
109 | |
110 .offsetRight50 { | |
111 right: 50px; | |
112 } | |
113 | |
114 .offsetTop75 { | |
115 top: 75px; | |
116 } | |
117 | |
118 .offsetBottom100 { | |
119 bottom: 100px; | |
120 } | |
121 | |
122 .offsetLeftMinus20 { | |
123 left: -20px; | |
124 } | |
125 | |
126 .offsetRightMinus40 { | |
127 right: -40px; | |
128 } | |
129 | |
130 .offsetTopMinus60 { | |
131 top: -60px; | |
132 } | |
133 | |
134 .offsetBottomMinus80 { | |
135 bottom: -80px; | |
136 } | |
137 | |
138 </style> | |
139 <script src="../../resources/check-layout.js"></script> | |
140 <body onload="checkLayout('.grid')"> | |
141 | |
142 <p>This test checks the behavior of the absolutely positioned grid children.</p> | |
143 | |
144 <div class="grid"> | |
145 <div class="sizedToGridArea absolute autoRowAutoColumn" | |
146 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp ected-height="530"> | |
147 </div> | |
148 <div class="sizedToGridArea absolute firstRowFirstColumn" | |
149 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp ected-height="515"> | |
150 </div> | |
151 <div class="sizedToGridArea absolute secondRowFirstColumn" | |
152 data-offset-x="15" data-offset-y="65" data-expected-width="515" data-exp ected-height="465"> | |
153 </div> | |
154 <div class="sizedToGridArea absolute firstRowSecondColumn" | |
155 data-offset-x="65" data-offset-y="15" data-expected-width="465" data-exp ected-height="515"> | |
156 </div> | |
157 <div class="sizedToGridArea absolute secondRowSecondColumn" | |
158 data-offset-x="65" data-offset-y="65" data-expected-width="465" data-exp ected-height="465"> | |
159 </div> | |
160 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" | |
161 data-offset-x="165" data-offset-y="165" data-expected-width="365" data-e xpected-height="350"> | |
162 </div> | |
163 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Column s" | |
164 data-offset-x="165" data-offset-y="165" data-expected-width="350" data-e xpected-height="350"> | |
165 </div> | |
166 </div> | |
167 | |
168 <div class="grid"> | |
169 <div> | |
170 <div class="sizedToGridArea absolute autoRowAutoColumn" | |
171 data-offset-x="15" data-offset-y="15" data-expected-width="530" data -expected-height="530"> | |
172 </div> | |
173 <div class="sizedToGridArea absolute firstRowFirstColumn" | |
174 data-offset-x="15" data-offset-y="15" data-expected-width="515" data -expected-height="515"> | |
175 </div> | |
176 <div class="sizedToGridArea absolute secondRowFirstColumn" | |
177 data-offset-x="15" data-offset-y="65" data-expected-width="515" data -expected-height="465"> | |
178 </div> | |
179 <div class="sizedToGridArea absolute firstRowSecondColumn" | |
180 data-offset-x="65" data-offset-y="15" data-expected-width="465" data -expected-height="515"> | |
181 </div> | |
182 <div class="sizedToGridArea absolute secondRowSecondColumn" | |
183 data-offset-x="65" data-offset-y="65" data-expected-width="465" data -expected-height="465"> | |
184 </div> | |
185 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" | |
186 data-offset-x="165" data-offset-y="165" data-expected-width="365" da ta-expected-height="350"> | |
187 </div> | |
188 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns" | |
189 data-offset-x="165" data-offset-y="165" data-expected-width="350" da ta-expected-height="350"> | |
190 </div> | |
191 </div> | |
192 </div> | |
193 | |
194 <div class="grid"> | |
195 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows" | |
196 data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expe cted-height="250"> | |
197 </div> | |
198 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2 Columns" | |
199 data-offset-x="65" data-offset-y="65" data-expected-width="250" data-exp ected-height="250"> | |
200 </div> | |
201 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" | |
202 data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expec ted-height="165"> | |
203 </div> | |
204 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" | |
205 data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expect ed-height="165"> | |
206 </div> | |
207 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" | |
208 data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expec ted-height="65"> | |
209 </div> | |
210 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" | |
211 data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expect ed-height="65"> | |
212 </div> | |
213 </div> | |
214 | |
215 <div class="grid"> | |
216 <div> | |
217 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2R ows" | |
218 data-offset-x="0" data-offset-y="65" data-expected-width="315" data- expected-height="250"> | |
219 </div> | |
220 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2R ows2Columns" | |
221 data-offset-x="65" data-offset-y="65" data-expected-width="250" data -expected-height="250"> | |
222 </div> | |
223 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" | |
224 data-offset-x="0" data-offset-y="0" data-expected-width="165" data-e xpected-height="165"> | |
225 </div> | |
226 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" | |
227 data-offset-x="0" data-offset-y="0" data-expected-width="65" data-ex pected-height="165"> | |
228 </div> | |
229 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" | |
230 data-offset-x="0" data-offset-y="0" data-expected-width="165" data-e xpected-height="65"> | |
231 </div> | |
232 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" | |
233 data-offset-x="0" data-offset-y="0" data-expected-width="65" data-ex pected-height="65"> | |
234 </div> | |
235 </div> | |
236 </div> | |
237 | |
238 <div class="grid"> | |
239 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" | |
240 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expe cted-height="50"> | |
241 </div> | |
242 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" | |
243 data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expe cted-height="100"> | |
244 </div> | |
245 <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn" | |
246 data-offset-x="65" data-offset-y="15" data-expected-width="100" data-exp ected-height="50"> | |
247 </div> | |
248 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" | |
249 data-offset-x="65" data-offset-y="65" data-expected-width="100" data-exp ected-height="100"> | |
250 </div> | |
251 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Row s2Columns" | |
252 data-offset-x="165" data-offset-y="165" data-expected-width="350" data-e xpected-height="350"> | |
253 </div> | |
254 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Row s" | |
255 data-offset-x="165" data-offset-y="165" data-expected-width="150" data-e xpected-height="350"> | |
256 </div> | |
257 </div> | |
258 | |
259 <div class="grid"> | |
260 <div> | |
261 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" | |
262 data-offset-x="15" data-offset-y="15" data-expected-width="50" data- expected-height="50"> | |
263 </div> | |
264 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" | |
265 data-offset-x="15" data-offset-y="65" data-expected-width="50" data- expected-height="100"> | |
266 </div> | |
267 <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn" | |
268 data-offset-x="65" data-offset-y="15" data-expected-width="100" data -expected-height="50"> | |
269 </div> | |
270 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" | |
271 data-offset-x="65" data-offset-y="65" data-expected-width="100" data -expected-height="100"> | |
272 </div> | |
273 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning 2Rows2Columns" | |
274 data-offset-x="165" data-offset-y="165" data-expected-width="350" da ta-expected-height="350"> | |
275 </div> | |
276 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning 2Rows" | |
277 data-offset-x="165" data-offset-y="165" data-expected-width="150" da ta-expected-height="350"> | |
278 </div> | |
279 </div> | |
280 </div> | |
281 | |
282 <div class="grid"> | |
283 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offsetTo p75" | |
284 data-offset-x="25" data-offset-y="75" data-expected-width="530" data-exp ected-height="530"> | |
285 </div> | |
286 <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinus40 offsetBottomMinus80" | |
287 data-offset-x="55" data-offset-y="95" data-expected-width="515" data-exp ected-height="515"> | |
288 </div> | |
289 <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offs etBottom100" | |
290 data-offset-x="-35" data-offset-y="-35" data-expected-width="515" data-e xpected-height="465"> | |
291 </div> | |
292 <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinus20 offsetTopMinus60" | |
293 data-offset-x="45" data-offset-y="-45" data-expected-width="465" data-ex pected-height="515"> | |
294 </div> | |
295 <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 off setTop75" | |
296 data-offset-x="15" data-offset-y="140" data-expected-width="465" data-ex pected-height="465"> | |
297 </div> | |
298 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows offset Left25 offsetBottom100" | |
299 data-offset-x="190" data-offset-y="65" data-expected-width="365" data-ex pected-height="350"> | |
300 </div> | |
301 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Column s offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" | |
302 data-offset-x="145" data-offset-y="105" data-expected-width="350" data-e xpected-height="350"> | |
303 </div> | |
304 </div> | |
305 | |
306 <div class="grid"> | |
307 <div> | |
308 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offs etTop75" | |
309 data-offset-x="25" data-offset-y="75" data-expected-width="530" data -expected-height="530"> | |
310 </div> | |
311 <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinu s40 offsetBottomMinus80" | |
312 data-offset-x="55" data-offset-y="95" data-expected-width="515" data -expected-height="515"> | |
313 </div> | |
314 <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" | |
315 data-offset-x="-35" data-offset-y="-35" data-expected-width="515" da ta-expected-height="465"> | |
316 </div> | |
317 <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinu s20 offsetTopMinus60" | |
318 data-offset-x="45" data-offset-y="-45" data-expected-width="465" dat a-expected-height="515"> | |
319 </div> | |
320 <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" | |
321 data-offset-x="15" data-offset-y="140" data-expected-width="465" dat a-expected-height="465"> | |
322 </div> | |
323 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows of fsetLeft25 offsetBottom100" | |
324 data-offset-x="190" data-offset-y="65" data-expected-width="365" dat a-expected-height="350"> | |
325 </div> | |
326 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" | |
327 data-offset-x="145" data-offset-y="105" data-expected-width="350" da ta-expected-height="350"> | |
328 </div> | |
329 </div> | |
330 </div> | |
331 | |
332 </body> | |
333 </html> | |
OLD | NEW |