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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-containing-block.html

Issue 1929483002: [css-grid] Fix static position for positioned grid items (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 months 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 | third_party/WebKit/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
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 5
6 .grid { 6 .grid {
7 grid-template-columns: 50px 100px 150px 200px; 7 grid-template-columns: 50px 100px 150px 200px;
8 grid-template-rows: 50px 100px 150px 200px; 8 grid-template-rows: 50px 100px 150px 200px;
9 width: 500px; 9 width: 500px;
10 height: 500px; 10 height: 500px;
(...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after
109 <script src="../../resources/testharness.js"></script> 109 <script src="../../resources/testharness.js"></script>
110 <script src="../../resources/testharnessreport.js"></script> 110 <script src="../../resources/testharnessreport.js"></script>
111 <script src="../../resources/check-layout-th.js"></script> 111 <script src="../../resources/check-layout-th.js"></script>
112 <body onload="checkLayout('.grid')"> 112 <body onload="checkLayout('.grid')">
113 <div id="log"></div> 113 <div id="log"></div>
114 114
115 <p>This test checks the behavior of the absolutely positioned elements with a gr id container as containing block.</p> 115 <p>This test checks the behavior of the absolutely positioned elements with a gr id container as containing block.</p>
116 116
117 <div class="grid"> 117 <div class="grid">
118 <div class="sizedToGridArea absolute autoRowAutoColumn" 118 <div class="sizedToGridArea absolute autoRowAutoColumn"
119 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp ected-height="530"> 119 data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expec ted-height="530">
120 </div> 120 </div>
121 <div class="sizedToGridArea absolute firstRowFirstColumn" 121 <div class="sizedToGridArea absolute firstRowFirstColumn"
122 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp ected-height="515"> 122 data-offset-x="15" data-offset-y="15" data-expected-width="515" data-exp ected-height="515">
123 </div> 123 </div>
124 <div class="sizedToGridArea absolute secondRowFirstColumn" 124 <div class="sizedToGridArea absolute secondRowFirstColumn"
125 data-offset-x="15" data-offset-y="65" data-expected-width="515" data-exp ected-height="465"> 125 data-offset-x="15" data-offset-y="65" data-expected-width="515" data-exp ected-height="465">
126 </div> 126 </div>
127 <div class="sizedToGridArea absolute firstRowSecondColumn" 127 <div class="sizedToGridArea absolute firstRowSecondColumn"
128 data-offset-x="65" data-offset-y="15" data-expected-width="465" data-exp ected-height="515"> 128 data-offset-x="65" data-offset-y="15" data-expected-width="465" data-exp ected-height="515">
129 </div> 129 </div>
130 <div class="sizedToGridArea absolute secondRowSecondColumn" 130 <div class="sizedToGridArea absolute secondRowSecondColumn"
131 data-offset-x="65" data-offset-y="65" data-expected-width="465" data-exp ected-height="465"> 131 data-offset-x="65" data-offset-y="65" data-expected-width="465" data-exp ected-height="465">
132 </div> 132 </div>
133 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" 133 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
134 data-offset-x="165" data-offset-y="165" data-expected-width="365" data-e xpected-height="350"> 134 data-offset-x="165" data-offset-y="165" data-expected-width="365" data-e xpected-height="350">
135 </div> 135 </div>
136 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Column s" 136 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Column s"
137 data-offset-x="165" data-offset-y="165" data-expected-width="350" data-e xpected-height="350"> 137 data-offset-x="165" data-offset-y="165" data-expected-width="350" data-e xpected-height="350">
138 </div> 138 </div>
139 </div> 139 </div>
140 140
141 <div class="grid"> 141 <div class="grid">
142 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows" 142 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
143 data-offset-x="15" data-offset-y="65" data-expected-width="315" data-exp ected-height="250"> 143 data-offset-x="0" data-offset-y="65" data-expected-width="315" data-expe cted-height="250">
144 </div> 144 </div>
145 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2 Columns" 145 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2 Columns"
146 data-offset-x="65" data-offset-y="65" data-expected-width="250" data-exp ected-height="250"> 146 data-offset-x="65" data-offset-y="65" data-expected-width="250" data-exp ected-height="250">
147 </div> 147 </div>
148 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 148 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
149 data-offset-x="15" data-offset-y="15" data-expected-width="165" data-exp ected-height="165"> 149 data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expec ted-height="165">
150 </div> 150 </div>
151 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" 151 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
152 data-offset-x="15" data-offset-y="15" data-expected-width="65" data-expe cted-height="165"> 152 data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expect ed-height="165">
153 </div> 153 </div>
154 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" 154 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
155 data-offset-x="15" data-offset-y="15" data-expected-width="165" data-exp ected-height="65"> 155 data-offset-x="0" data-offset-y="0" data-expected-width="165" data-expec ted-height="65">
156 </div> 156 </div>
157 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" 157 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
158 data-offset-x="15" data-offset-y="15" data-expected-width="65" data-expe cted-height="65"> 158 data-offset-x="0" data-offset-y="0" data-expected-width="65" data-expect ed-height="65">
159 </div> 159 </div>
160 </div> 160 </div>
161 161
162 <div class="grid"> 162 <div class="grid">
163 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" 163 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
164 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expe cted-height="50"> 164 data-offset-x="15" data-offset-y="15" data-expected-width="50" data-expe cted-height="50">
165 </div> 165 </div>
166 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" 166 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
167 data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expe cted-height="100"> 167 data-offset-x="15" data-offset-y="65" data-expected-width="50" data-expe cted-height="100">
168 </div> 168 </div>
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after
225 data-offset-x="190" data-offset-y="65" data-expected-width="365" dat a-expected-height="350"> 225 data-offset-x="190" data-offset-y="65" data-expected-width="365" dat a-expected-height="350">
226 </div> 226 </div>
227 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" 227 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
228 data-offset-x="145" data-offset-y="105" data-expected-width="350" da ta-expected-height="350"> 228 data-offset-x="145" data-offset-y="105" data-expected-width="350" da ta-expected-height="350">
229 </div> 229 </div>
230 </div> 230 </div>
231 </div> 231 </div>
232 232
233 <div class="grid directionRTL"> 233 <div class="grid directionRTL">
234 <div class="sizedToGridArea absolute autoRowAutoColumn" 234 <div class="sizedToGridArea absolute autoRowAutoColumn"
235 data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-ex pected-height="530"> 235 data-offset-x="0" data-offset-y="0" data-expected-width="530" data-expec ted-height="530">
236 </div> 236 </div>
237 <div class="sizedToGridArea absolute firstRowFirstColumn" 237 <div class="sizedToGridArea absolute firstRowFirstColumn"
238 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expe cted-height="515"> 238 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expe cted-height="515">
239 </div> 239 </div>
240 <div class="sizedToGridArea absolute secondRowFirstColumn" 240 <div class="sizedToGridArea absolute secondRowFirstColumn"
241 data-offset-x="0" data-offset-y="65" data-expected-width="515" data-expe cted-height="465"> 241 data-offset-x="0" data-offset-y="65" data-expected-width="515" data-expe cted-height="465">
242 </div> 242 </div>
243 <div class="sizedToGridArea absolute firstRowSecondColumn" 243 <div class="sizedToGridArea absolute firstRowSecondColumn"
244 data-offset-x="0" data-offset-y="15" data-expected-width="465" data-expe cted-height="515"> 244 data-offset-x="0" data-offset-y="15" data-expected-width="465" data-expe cted-height="515">
245 </div> 245 </div>
246 <div class="sizedToGridArea absolute secondRowSecondColumn" 246 <div class="sizedToGridArea absolute secondRowSecondColumn"
247 data-offset-x="0" data-offset-y="65" data-expected-width="465" data-expe cted-height="465"> 247 data-offset-x="0" data-offset-y="65" data-expected-width="465" data-expe cted-height="465">
248 </div> 248 </div>
249 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows" 249 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
250 data-offset-x="0" data-offset-y="165" data-expected-width="365" data-exp ected-height="350"> 250 data-offset-x="0" data-offset-y="165" data-expected-width="365" data-exp ected-height="350">
251 </div> 251 </div>
252 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Column s" 252 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Column s"
253 data-offset-x="15" data-offset-y="165" data-expected-width="350" data-ex pected-height="350"> 253 data-offset-x="15" data-offset-y="165" data-expected-width="350" data-ex pected-height="350">
254 </div> 254 </div>
255 </div> 255 </div>
256 256
257 <div class="grid directionRTL"> 257 <div class="grid directionRTL">
258 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows" 258 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
259 data-offset-x="200" data-offset-y="65" data-expected-width="315" data-ex pected-height="250"> 259 data-offset-x="215" data-offset-y="65" data-expected-width="315" data-ex pected-height="250">
260 </div> 260 </div>
261 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2 Columns" 261 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows2 Columns"
262 data-offset-x="215" data-offset-y="65" data-expected-width="250" data-ex pected-height="250"> 262 data-offset-x="215" data-offset-y="65" data-expected-width="250" data-ex pected-height="250">
263 </div> 263 </div>
264 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 264 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
265 data-offset-x="350" data-offset-y="15" data-expected-width="165" data-ex pected-height="165"> 265 data-offset-x="365" data-offset-y="0" data-expected-width="165" data-exp ected-height="165">
266 </div> 266 </div>
267 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn" 267 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
268 data-offset-x="450" data-offset-y="15" data-expected-width="65" data-exp ected-height="165"> 268 data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expe cted-height="165">
269 </div> 269 </div>
270 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn" 270 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
271 data-offset-x="350" data-offset-y="15" data-expected-width="165" data-ex pected-height="65"> 271 data-offset-x="365" data-offset-y="0" data-expected-width="165" data-exp ected-height="65">
272 </div> 272 </div>
273 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn" 273 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
274 data-offset-x="450" data-offset-y="15" data-expected-width="65" data-exp ected-height="65"> 274 data-offset-x="465" data-offset-y="0" data-expected-width="65" data-expe cted-height="65">
275 </div> 275 </div>
276 </div> 276 </div>
277 277
278 <div class="grid directionRTL"> 278 <div class="grid directionRTL">
279 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn" 279 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
280 data-offset-x="465" data-offset-y="15" data-expected-width="50" data-exp ected-height="50"> 280 data-offset-x="465" data-offset-y="15" data-expected-width="50" data-exp ected-height="50">
281 </div> 281 </div>
282 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn" 282 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
283 data-offset-x="465" data-offset-y="65" data-expected-width="50" data-exp ected-height="100"> 283 data-offset-x="465" data-offset-y="65" data-expected-width="50" data-exp ected-height="100">
284 </div> 284 </div>
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after
341 data-offset-x="25" data-offset-y="65" data-expected-width="365" data -expected-height="350"> 341 data-offset-x="25" data-offset-y="65" data-expected-width="365" data -expected-height="350">
342 </div> 342 </div>
343 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" 343 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
344 data-offset-x="-35" data-offset-y="105" data-expected-width="350" da ta-expected-height="350"> 344 data-offset-x="-35" data-offset-y="105" data-expected-width="350" da ta-expected-height="350">
345 </div> 345 </div>
346 </div> 346 </div>
347 </div> 347 </div>
348 348
349 </body> 349 </body>
350 </html> 350 </html>
OLDNEW
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/absolute-positioning-grid-container-parent.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698