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

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

Issue 1838173002: [css-grid] Refactor positioned children code (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 8 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
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 88 matching lines...) Expand 10 before | Expand all | Expand 10 after
99 99
100 .offsetTopMinus60 { 100 .offsetTopMinus60 {
101 top: -60px; 101 top: -60px;
102 } 102 }
103 103
104 .offsetBottomMinus80 { 104 .offsetBottomMinus80 {
105 bottom: -80px; 105 bottom: -80px;
106 } 106 }
107 107
108 </style> 108 </style>
109 <script src="../../resources/check-layout.js"></script> 109 <script src="../../resources/testharness.js"></script>
110 <script src="../../resources/testharnessreport.js"></script>
111 <script src="../../resources/check-layout-th.js"></script>
110 <body onload="checkLayout('.grid')"> 112 <body onload="checkLayout('.grid')">
113 <div id="log"></div>
111 114
112 <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>
113 116
114 <div class="grid"> 117 <div class="grid">
115 <div class="sizedToGridArea absolute autoRowAutoColumn" 118 <div class="sizedToGridArea absolute autoRowAutoColumn"
116 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp ected-height="530"> 119 data-offset-x="15" data-offset-y="15" data-expected-width="530" data-exp ected-height="530">
117 </div> 120 </div>
118 <div class="sizedToGridArea absolute firstRowFirstColumn" 121 <div class="sizedToGridArea absolute firstRowFirstColumn"
119 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">
120 </div> 123 </div>
(...skipping 99 matching lines...) Expand 10 before | Expand all | Expand 10 after
220 </div> 223 </div>
221 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows of fsetLeft25 offsetBottom100" 224 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows of fsetLeft25 offsetBottom100"
222 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">
223 </div> 226 </div>
224 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100" 227 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows2Co lumns offsetLeftMinus20 offsetRight50 offsetTopMinus60 offsetBottom100"
225 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">
226 </div> 229 </div>
227 </div> 230 </div>
228 </div> 231 </div>
229 232
233 <div class="grid directionRTL">
234 <div class="sizedToGridArea absolute autoRowAutoColumn"
235 data-offset-x="-15" data-offset-y="15" data-expected-width="530" data-ex pected-height="530">
236 </div>
237 <div class="sizedToGridArea absolute firstRowFirstColumn"
238 data-offset-x="0" data-offset-y="15" data-expected-width="515" data-expe cted-height="515">
239 </div>
240 <div class="sizedToGridArea absolute secondRowFirstColumn"
241 data-offset-x="0" data-offset-y="65" data-expected-width="515" data-expe cted-height="465">
242 </div>
243 <div class="sizedToGridArea absolute firstRowSecondColumn"
244 data-offset-x="0" data-offset-y="15" data-expected-width="465" data-expe cted-height="515">
245 </div>
246 <div class="sizedToGridArea absolute secondRowSecondColumn"
247 data-offset-x="0" data-offset-y="65" data-expected-width="465" data-expe cted-height="465">
248 </div>
249 <div class="sizedToGridArea absolute thirdRowThirdColumnSpanning2Rows"
250 data-offset-x="0" data-offset-y="165" data-expected-width="365" data-exp ected-height="350">
251 </div>
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">
254 </div>
255 </div>
256
257 <div class="grid directionRTL">
258 <div class="sizedToGridArea absolute endThirdRowEndThirdColumnSpanning2Rows"
259 data-offset-x="200" data-offset-y="65" data-expected-width="315" data-ex pected-height="250">
260 </div>
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">
263 </div>
264 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
265 data-offset-x="350" data-offset-y="15" data-expected-width="165" data-ex pected-height="165">
266 </div>
267 <div class="sizedToGridArea absolute endSecondRowEndFirstColumn"
268 data-offset-x="450" data-offset-y="15" data-expected-width="65" data-exp ected-height="165">
269 </div>
270 <div class="sizedToGridArea absolute endFirstRowEndSecondColumn"
271 data-offset-x="350" data-offset-y="15" data-expected-width="165" data-ex pected-height="65">
272 </div>
273 <div class="sizedToGridArea absolute endFirstRowEndFirstColumn"
274 data-offset-x="450" data-offset-y="15" data-expected-width="65" data-exp ected-height="65">
275 </div>
276 </div>
277
278 <div class="grid directionRTL">
279 <div class="sizedToGridArea absolute onlyFirstRowOnlyFirstColumn"
280 data-offset-x="465" data-offset-y="15" data-expected-width="50" data-exp ected-height="50">
281 </div>
282 <div class="sizedToGridArea absolute onlySecondRowOnlyFirstColumn"
283 data-offset-x="465" data-offset-y="65" data-expected-width="50" data-exp ected-height="100">
284 </div>
285 <div class="sizedToGridArea absolute onlyFirstRowOnlySecondColumn"
286 data-offset-x="365" data-offset-y="15" data-expected-width="100" data-ex pected-height="50">
287 </div>
288 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
289 data-offset-x="365" data-offset-y="65" data-expected-width="100" data-ex pected-height="100">
290 </div>
291 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Row s2Columns"
292 data-offset-x="15" data-offset-y="165" data-expected-width="350" data-ex pected-height="350">
293 </div>
294 <div class="sizedToGridArea absolute onlyThirdRowOnlyThirdColumnSpanning2Row s"
295 data-offset-x="215" data-offset-y="165" data-expected-width="150" data-e xpected-height="350">
296 </div>
297 </div>
298
230 </body> 299 </body>
231 </html> 300 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698