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 border: 5px solid black; | |
10 margin: 10px; | |
11 padding: 15px; | |
12 } | |
13 | |
14 .unconstrainedContainer { | |
15 /* For accurate x / y offset. */ | |
16 position: relative; | |
17 } | |
18 | |
19 .absolute { | |
20 position: absolute; | |
21 } | |
22 | |
23 .thirdRowThirdColumnSpanning2Rows { | |
24 grid-column: 3; | |
25 grid-row: 3 / span 2; | |
26 background-color: maroon; | |
27 } | |
28 | |
29 .thirdRowThirdColumnSpanning2Rows2Columns { | |
30 grid-column: 3 / span 2; | |
31 grid-row: 3 / span 2; | |
32 background-color: aqua; | |
33 } | |
34 | |
35 .endFirstRowEndFirstColumn { | |
36 background-color: blue; | |
37 grid-column-end: 2; | |
38 grid-row-end: 2; | |
39 } | |
40 | |
41 .endFirstRowEndSecondColumn { | |
42 background-color: lime; | |
43 grid-column-end: 3; | |
44 grid-row-end: 2; | |
45 } | |
46 | |
47 .endSecondRowEndFirstColumn { | |
48 background-color: purple; | |
49 grid-column-end: 2; | |
50 grid-row-end: 3; | |
51 } | |
52 | |
53 .endSecondRowEndSecondColumn { | |
54 background-color: orange; | |
55 grid-column-end: 3; | |
56 grid-row-end: 3; | |
57 } | |
58 | |
59 .endThirdRowEndThirdColumnSpanning2Rows { | |
60 grid-column-end: 4; | |
61 grid-row: span 2 / 4; | |
62 background-color: maroon; | |
63 } | |
64 | |
65 .endThirdRowEndThirdColumnSpanning2Rows2Columns { | |
66 grid-column: span 2 / 4; | |
67 grid-row: span 2 / 4; | |
68 background-color: aqua; | |
69 } | |
70 | |
71 .onlyFirstRowOnlyFirstColumn { | |
72 background-color: blue; | |
73 grid-column: 1 / 2; | |
74 grid-row: 1 / 2; | |
75 } | |
76 | |
77 .onlyFirstRowOnlySecondColumn { | |
78 background-color: lime; | |
79 grid-column: 2 / 3; | |
80 grid-row: 1 / 2; | |
81 } | |
82 | |
83 .onlySecondRowOnlyFirstColumn { | |
84 background-color: purple; | |
85 grid-column: 1 / 2; | |
86 grid-row: 2 / 3; | |
87 } | |
88 | |
89 .onlySecondRowOnlySecondColumn { | |
90 background-color: orange; | |
91 grid-column: 2 / 3; | |
92 grid-row: 2 / 3; | |
93 } | |
94 | |
95 .onlyThirdRowOnlyThirdColumnSpanning2Rows { | |
96 grid-column: 3 / 4; | |
97 grid-row: 3 / 5; | |
98 background-color: maroon; | |
99 } | |
100 | |
101 .onlyThirdRowOnlyThirdColumnSpanning2Rows2Columns { | |
102 grid-column: 3 / 5; | |
103 grid-row: 3 / 5; | |
104 background-color: aqua; | |
105 } | |
106 | |
107 .offsetLeft25 { | |
108 left: 25px; | |
109 } | |
110 | |
111 .offsetRight50 { | |
112 right: 50px; | |
113 } | |
114 | |
115 .offsetTop75 { | |
116 top: 75px; | |
117 } | |
118 | |
119 .offsetBottom100 { | |
120 bottom: 100px; | |
121 } | |
122 | |
123 .offsetLeftMinus20 { | |
124 left: -20px; | |
125 } | |
126 | |
127 .offsetRightMinus40 { | |
128 right: -40px; | |
129 } | |
130 | |
131 .offsetTopMinus60 { | |
132 top: -60px; | |
133 } | |
134 | |
135 .offsetBottomMinus80 { | |
136 bottom: -80px; | |
137 } | |
138 | |
139 </style> | |
140 <script src="../../resources/check-layout.js"></script> | |
141 <body onload="checkLayout('.grid')"> | |
142 | |
143 <p>This test checks the behavior of the absolutely positioned grid items.</p> | |
144 | |
145 <div class="unconstrainedContainer"> | |
146 <div class="grid"> | |
147 <div class="sizedToGridArea absolute autoRowAutoColumn" | |
148 data-offset-x="15" data-offset-y="5" data-expected-width="530" data- expected-height="530"> | |
149 </div> | |
150 <div class="sizedToGridArea absolute firstRowFirstColumn" | |
151 data-offset-x="30" data-offset-y="20" data-expected-width="515" data -expected-height="515"> | |
152 </div> | |
153 <div class="sizedToGridArea absolute secondRowFirstColumn" | |
154 data-offset-x="30" data-offset-y="70" data-expected-width="515" data -expected-height="465"> | |
155 </div> | |
156 <div class="sizedToGridArea absolute firstRowSecondColumn" | |
157 data-offset-x="80" data-offset-y="20" data-expected-width="465" data -expected-height="515"> | |
158 </div> | |
159 <div class="sizedToGridArea absolute secondRowSecondColumn" | |
160 data-offset-x="80" data-offset-y="70" data-expected-width="465" data -expected-height="465"> | |
161 </div> | |
162 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" | |
163 data-offset-x="180" data-offset-y="170" data-expected-width="365" da ta-expected-height="350"> | |
164 </div> | |
165 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns" | |
166 data-offset-x="180" data-offset-y="170" data-expected-width="350" da ta-expected-height="350"> | |
167 </div> | |
168 </div> | |
169 </div> | |
170 | |
171 <div class="unconstrainedContainer"> | |
172 <div class="grid"> | |
173 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2R ows" | |
174 data-offset-x="15" data-offset-y="70" data-expected-width="315" data -expected-height="250"> | |
175 </div> | |
176 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2R ows2Columns" | |
177 data-offset-x="80" data-offset-y="70" data-expected-width="250" data -expected-height="250"> | |
178 </div> | |
179 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" | |
180 data-offset-x="15" data-offset-y="5" data-expected-width="165" data- expected-height="165"> | |
181 </div> | |
182 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" | |
183 data-offset-x="15" data-offset-y="5" data-expected-width="65" data-e xpected-height="165"> | |
184 </div> | |
185 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" | |
186 data-offset-x="15" data-offset-y="5" data-expected-width="165" data- expected-height="65"> | |
187 </div> | |
188 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" | |
189 data-offset-x="15" data-offset-y="5" data-expected-width="65" data-e xpected-height="65"> | |
190 </div> | |
191 </div> | |
192 </div> | |
193 | |
194 <div class="unconstrainedContainer"> | |
195 <div class="grid"> | |
196 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" | |
197 data-offset-x="30" data-offset-y="20" data-expected-width="50" data- expected-height="50"> | |
198 </div> | |
199 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" | |
200 data-offset-x="30" data-offset-y="70" data-expected-width="50" data- expected-height="100"> | |
201 </div> | |
202 <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn" | |
203 data-offset-x="80" data-offset-y="20" data-expected-width="100" data -expected-height="50"> | |
204 </div> | |
205 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" | |
206 data-offset-x="80" data-offset-y="70" data-expected-width="100" data -expected-height="100"> | |
207 </div> | |
208 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning 2Rows2Columns" | |
209 data-offset-x="180" data-offset-y="170" data-expected-width="350" da ta-expected-height="350"> | |
210 </div> | |
211 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning 2Rows" | |
212 data-offset-x="180" data-offset-y="170" data-expected-width="150" da ta-expected-height="350"> | |
213 </div> | |
214 </div> | |
215 </div> | |
216 | |
217 <div class="unconstrainedContainer"> | |
218 <div class="grid"> | |
Julien - ping for review
2014/10/23 15:24:43
In these examples, the grid container is not the c
Manuel Rego
2014/10/23 21:51:12
Thanks for the link, now I think I've got it.
| |
219 <div class="sizedToGridArea absolute autoRowAutoColumn offsetLeft25 offs etTop75" | |
220 data-offset-x="40" data-offset-y="80" data-expected-width="530" data -expected-height="530"> | |
221 </div> | |
222 <div class="sizedToGridArea absolute firstRowFirstColumn offsetRightMinu s40 offsetBottomMinus80" | |
223 data-offset-x="70" data-offset-y="100" data-expected-width="515" dat a-expected-height="515"> | |
224 </div> | |
225 <div class="sizedToGridArea absolute secondRowFirstColumn offsetRight50 offsetBottom100" | |
226 data-offset-x="-20" data-offset-y="-30" data-expected-width="515" da ta-expected-height="465"> | |
227 </div> | |
228 <div class="sizedToGridArea absolute firstRowSecondColumn offsetLeftMinu s20 offsetTopMinus60" | |
229 data-offset-x="60" data-offset-y="-40" data-expected-width="465" dat a-expected-height="515"> | |
230 </div> | |
231 <div class="sizedToGridArea absolute secondRowSecondColumn offsetRight50 offsetTop75" | |
232 data-offset-x="30" data-offset-y="145" data-expected-width="465" dat a-expected-height="465"> | |
233 </div> | |
234 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows of fsetLeft25 offsetBottom100" | |
235 data-offset-x="205" data-offset-y="70" data-expected-width="365" dat a-expected-height="350"> | |
236 </div> | |
237 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" | |
238 data-offset-x="160" data-offset-y="110" data-expected-width="350" da ta-expected-height="350"> | |
239 </div> | |
240 </div> | |
241 </div> | |
242 | |
243 </body> | |
244 </html> | |
OLD | NEW |