Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(158)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children.html

Issue 637033003: [CSS Grid Layout] Fix positioned grid children position and size (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Remove FIXME Created 6 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/absolutely-positioned-grid-children-expected.txt » ('j') | Source/core/rendering/RenderGrid.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698