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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-sizing-positioned-items.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: 100px 200px; 7 grid-template-columns: 100px 200px;
8 grid-template-rows: 50px 150px; 8 grid-template-rows: 50px 150px;
9 width: 100%; 9 width: 100%;
10 height: 100%; 10 height: 100%;
(...skipping 31 matching lines...) Expand 10 before | Expand all | Expand 10 after
42 grid-row: 1 / 2; 42 grid-row: 1 / 2;
43 } 43 }
44 44
45 .endSecondRowEndSecondColumn { 45 .endSecondRowEndSecondColumn {
46 background-color: orange; 46 background-color: orange;
47 grid-column-end: 3; 47 grid-column-end: 3;
48 grid-row-end: 3; 48 grid-row-end: 3;
49 } 49 }
50 50
51 </style> 51 </style>
52 <script src="../../resources/check-layout.js"></script> 52 <script src="../../resources/testharness.js"></script>
53 <script src="../../resources/testharnessreport.js"></script>
54 <script src="../../resources/check-layout-th.js"></script>
53 <body onload="checkLayout('.grid')"> 55 <body onload="checkLayout('.grid')">
56 <div id="log"></div>
54 57
55 <p>This test checks the different size options for absolutely positioned grid it ems.</p> 58 <p>This test checks the different size options for absolutely positioned grid it ems.</p>
56 59
57 <div class="unconstrainedContainer"> 60 <div class="unconstrainedContainer">
58 <div class="grid"> 61 <div class="grid">
59 <div class="absolute autoRowAutoColumn sizedToGridArea" 62 <div class="absolute autoRowAutoColumn sizedToGridArea"
60 data-offset-x="15" data-offset-y="15" data-expected-width="1030" dat a-expected-height="1030"> 63 data-offset-x="15" data-offset-y="15" data-expected-width="1030" dat a-expected-height="1030">
61 </div> 64 </div>
62 <div class="absolute secondRowSecondColumn sizedToGridArea" 65 <div class="absolute secondRowSecondColumn sizedToGridArea"
63 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat a-expected-height="965"> 66 data-offset-x="115" data-offset-y="65" data-expected-width="915" dat a-expected-height="965">
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after
115 </div> 118 </div>
116 <div class="absolute onlyFirstRowOnlyFirstColumn offsets" 119 <div class="absolute onlyFirstRowOnlyFirstColumn offsets"
117 data-offset-x="20" data-offset-y="30" data-expected-width="85" data- expected-height="15"> 120 data-offset-x="20" data-offset-y="30" data-expected-width="85" data- expected-height="15">
118 </div> 121 </div>
119 <div class="absolute endSecondRowEndSecondColumn offsets" 122 <div class="absolute endSecondRowEndSecondColumn offsets"
120 data-offset-x="5" data-offset-y="15" data-expected-width="300" data- expected-height="180"> 123 data-offset-x="5" data-offset-y="15" data-expected-width="300" data- expected-height="180">
121 </div> 124 </div>
122 </div> 125 </div>
123 </div> 126 </div>
124 127
128 <div class="unconstrainedContainer">
129 <div class="grid directionRTL">
130 <div class="absolute autoRowAutoColumn sizedToGridArea"
131 data-offset-x="-15" data-offset-y="15" data-expected-width="1030" da ta-expected-height="1030">
132 </div>
133 <div class="absolute secondRowSecondColumn sizedToGridArea"
134 data-offset-x="0" data-offset-y="65" data-expected-width="915" data- expected-height="965">
135 </div>
136 <div class="absolute onlyFirstRowOnlyFirstColumn sizedToGridArea"
137 data-offset-x="915" data-offset-y="15" data-expected-width="100" dat a-expected-height="50">
138 </div>
139 <div class="absolute endSecondRowEndSecondColumn sizedToGridArea"
140 data-offset-x="700" data-offset-y="15" data-expected-width="315" dat a-expected-height="215">
141 </div>
142 </div>
143 </div>
144
145 <div class="unconstrainedContainer">
146 <div class="grid directionRTL">
147 <div class="absolute autoRowAutoColumn lengthSize"
148 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="20">
149 </div>
150 <div class="absolute secondRowSecondColumn lengthSize"
151 data-offset-x="865" data-offset-y="65" data-expected-width="50" data -expected-height="20">
152 </div>
153 <div class="absolute onlyFirstRowOnlyFirstColumn lengthSize"
154 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="20">
155 </div>
156 <div class="absolute endSecondRowEndSecondColumn lengthSize"
157 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="20">
158 </div>
159 </div>
160 </div>
161
162 <div class="unconstrainedContainer">
163 <div class="grid directionRTL">
164 <div class="absolute autoRowAutoColumn percentageSize"
165 data-offset-x="500" data-offset-y="15" data-expected-width="515" dat a-expected-height="206">
166 </div>
167 <div class="absolute secondRowSecondColumn percentageSize"
168 data-offset-x="457.5" data-offset-y="65" data-expected-width="457.5" data-expected-height="193">
169 </div>
170 <div class="absolute onlyFirstRowOnlyFirstColumn percentageSize"
171 data-offset-x="965" data-offset-y="15" data-expected-width="50" data -expected-height="10">
172 </div>
173 <div class="absolute endSecondRowEndSecondColumn percentageSize"
174 data-offset-x="858" data-offset-y="15" data-expected-width="157.5" d ata-expected-height="43">
175 </div>
176 </div>
177 </div>
178
125 </body> 179 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698