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