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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-positioned-items-implicit-grid.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 width: 200px; 7 width: 200px;
8 height: 200px; 8 height: 200px;
9 border: 5px solid black; 9 border: 5px solid black;
10 margin: 30px; 10 margin: 30px;
11 padding: 15px; 11 padding: 15px;
12 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */ 12 /* Ensures that the grid container is the containing block of the absolutely positioned grid children. */
13 position: relative; 13 position: relative;
14 } 14 }
15 15
16 .grid-columns-rows { 16 .grid-columns-rows {
17 grid-template-columns: 100px; 17 grid-template-columns: 100px;
18 grid-template-rows: 50px; 18 grid-template-rows: 50px;
19 } 19 }
20 20
21 .absolute { 21 .absolute {
22 position: absolute; 22 position: absolute;
23 } 23 }
24 24
25 </style> 25 </style>
26 <script src="../../resources/check-layout.js"></script> 26 <script src="../../resources/testharness.js"></script>
27 <script src="../../resources/testharnessreport.js"></script>
28 <script src="../../resources/check-layout-th.js"></script>
27 <body onload="checkLayout('.grid')"> 29 <body onload="checkLayout('.grid')">
30 <div id="log"></div>
28 31
29 <p>This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.</p> 32 <p>This test checks the behavior of the absolutely positioned grid items placed on the implicit grid.</p>
30 33
31 <div class="grid"> 34 <div class="grid">
32 <div class="sizedToGridArea absolute secondRowSecondColumn" 35 <div class="sizedToGridArea absolute secondRowSecondColumn"
33 data-offset-x="15" data-offset-y="15" data-expected-width="230" data-exp ected-height="230"> 36 data-offset-x="15" data-offset-y="15" data-expected-width="230" data-exp ected-height="230">
34 </div> 37 </div>
35 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 38 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
36 data-offset-x="15" data-offset-y="15" data-expected-width="230" data-exp ected-height="230"> 39 data-offset-x="15" data-offset-y="15" data-expected-width="230" data-exp ected-height="230">
37 </div> 40 </div>
38 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" 41 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
39 data-offset-x="15" data-offset-y="15" data-expected-width="230" data-exp ected-height="230"> 42 data-offset-x="15" data-offset-y="15" data-expected-width="230" data-exp ected-height="230">
40 </div> 43 </div>
41 </div> 44 </div>
42 45
43 <div class="grid grid-columns-rows"> 46 <div class="grid grid-columns-rows">
44 <div class="sizedToGridArea absolute secondRowSecondColumn" 47 <div class="sizedToGridArea absolute secondRowSecondColumn"
45 data-offset-x="115" data-offset-y="65" data-expected-width="115" data-ex pected-height="165"> 48 data-offset-x="115" data-offset-y="65" data-expected-width="115" data-ex pected-height="165">
46 </div> 49 </div>
47 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn" 50 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
48 data-offset-x="15" data-offset-y="15" data-expected-width="230" data-exp ected-height="230"> 51 data-offset-x="15" data-offset-y="15" data-expected-width="230" data-exp ected-height="230">
49 </div> 52 </div>
50 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn" 53 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
51 data-offset-x="115" data-offset-y="65" data-expected-width="115" data-ex pected-height="165"> 54 data-offset-x="115" data-offset-y="65" data-expected-width="115" data-ex pected-height="165">
52 </div> 55 </div>
53 </div> 56 </div>
54 57
58 <div class="grid directionRTL">
59 <div class="sizedToGridArea absolute secondRowSecondColumn"
60 data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-ex pected-height="230">
61 </div>
62 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
63 data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-ex pected-height="230">
64 </div>
65 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
66 data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-ex pected-height="230">
67 </div>
68 </div>
69
70 <div class="grid grid-columns-rows directionRTL">
71 <div class="sizedToGridArea absolute secondRowSecondColumn"
72 data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expe cted-height="165">
73 </div>
74 <div class="sizedToGridArea absolute endSecondRowEndSecondColumn"
75 data-offset-x="-15" data-offset-y="15" data-expected-width="230" data-ex pected-height="230">
76 </div>
77 <div class="sizedToGridArea absolute onlySecondRowOnlySecondColumn"
78 data-offset-x="0" data-offset-y="65" data-expected-width="115" data-expe cted-height="165">
79 </div>
80 </div>
81
55 </body> 82 </body>
56 </html> 83 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698