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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-container-percentage-columns.html

Issue 2033033002: [css-grid] Percentage columns can always be resolved during layout (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Get rid of hasDefiniteLogicalWidth() Created 4 years, 6 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
(Empty)
1 <!DOCTYPE html>
2 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
3 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
4 <link href="resources/grid.css" rel="stylesheet">
5 <style>
6 .wrapper {
7 position: relative;
8 clear: both;
9 }
10
11 .grid {
12 font: 10px/1 Ahem;
13 }
14
15 .float {
16 float: left;
17 }
18
19 .abspos {
20 position: absolute;
21 }
22
23 .fixedSize {
24 width: 200px;
25 height: 200px;
26 }
27
28 .oneColumn100 {
29 grid-template-columns: 100%;
30 }
31
32 .oneColumn50 {
33 grid-template-columns: 50%;
34 }
35
36 .twoColumns {
37 grid-template-columns: 50% 100px;
38 }
39 </style>
40 <script src="../../resources/testharness.js"></script>
41 <script src="../../resources/testharnessreport.js"></script>
42 <script src="../../resources/check-layout-th.js"></script>
43 <body onload="checkLayout('.grid')">
44 <div id="log"></div>
45
46 <p>This test checks that percentage columns are only indefinite during intrinsic size computation. Aftewards, they are properly resolved against the grid contai ner intrinsic sizes.</p>
47
48 <div class="wrapper">
49 <div class="grid float oneColumn100" data-expected-width="40" data-expected- height="10">
50 <div class="firstRowFirstColumn"
51 data-offset-x="0" data-offset-y="0" data-expected-width="40" data-ex pected-height="10">
52 XX X
53 </div>
54 </div>
55 </div>
56
57 <div class="wrapper">
58 <div class="grid abspos oneColumn100" data-expected-width="40" data-expected -height="10">
59 <div class="firstRowFirstColumn"
60 data-offset-x="0" data-offset-y="0" data-expected-width="40" data-ex pected-height="10">
61 XX X
62 </div>
63 </div>
64 </div>
65
66 <div class="wrapper">
67 <div class="grid max-content oneColumn100" data-expected-width="40" data-exp ected-height="10">
68 <div class="firstRowFirstColumn"
69 data-offset-x="0" data-offset-y="0" data-expected-width="40" data-ex pected-height="10">
70 XX X
71 </div>
72 </div>
73 </div>
74
75 <div class="wrapper">
76 <div class="grid fit-content oneColumn100" data-expected-width="40" data-exp ected-height="10">
77 <div class="firstRowFirstColumn"
78 data-offset-x="0" data-offset-y="0" data-expected-width="40" data-ex pected-height="10">
79 XX X
80 </div>
81 </div>
82 </div>
83
84 <div class="wrapper">
85 <div class="grid min-content oneColumn100" data-expected-width="20" data-exp ected-height="20">
86 <div class="firstRowFirstColumn"
87 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="20">
88 XX X
89 </div>
90 </div>
91 </div>
92
93 <div class="wrapper">
94 <div class="grid float oneColumn50" data-expected-width="40" data-expected-h eight="20">
95 <div class="firstRowFirstColumn"
96 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="20">
97 XX X
98 </div>
99 </div>
100 </div>
101
102 <div class="wrapper">
103 <div class="grid abspos oneColumn50" data-expected-width="40" data-expected- height="20">
104 <div class="firstRowFirstColumn"
105 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="20">
106 XX X
107 </div>
108 </div>
109 </div>
110
111 <div class="wrapper">
112 <div class="grid max-content oneColumn50" data-expected-width="40" data-expe cted-height="20">
113 <div class="firstRowFirstColumn"
114 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="20">
115 XX X
116 </div>
117 </div>
118 </div>
119
120 <div class="wrapper">
121 <div class="grid fit-content oneColumn50" data-expected-width="40" data-expe cted-height="20">
122 <div class="firstRowFirstColumn"
123 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="20">
124 XX X
125 </div>
126 </div>
127 </div>
128
129 <div class="wrapper">
130 <div class="grid min-content oneColumn50" data-expected-width="20" data-expe cted-height="20">
131 <div class="firstRowFirstColumn"
132 data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex pected-height="20">
133 XX X
134 </div>
135 </div>
136 </div>
137
138 <div class="wrapper">
139 <div class="grid float twoColumns" data-expected-width="140" data-expected-h eight="10">
140 <div class="firstRowFirstColumn"
141 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-ex pected-height="10">
142 XX X
143 </div>
144 <div class="firstRowSecondColumn"
145 data-offset-x="70" data-offset-y="0" data-expected-width="100" data- expected-height="10">
146 </div>
147 </div>
148 </div>
149
150 <div class="wrapper">
151 <div class="grid abspos twoColumns" data-expected-width="140" data-expected- height="10">
152 <div class="firstRowFirstColumn"
153 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-ex pected-height="10">
154 XX X
155 </div>
156 <div class="firstRowSecondColumn"
157 data-offset-x="70" data-offset-y="0" data-expected-width="100" data- expected-height="10">
158 </div>
159 </div>
160 </div>
161
162 <div class="wrapper">
163 <div class="grid max-content twoColumns" data-expected-width="140" data-expe cted-height="10">
164 <div class="firstRowFirstColumn"
165 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-ex pected-height="10">
166 XX X
167 </div>
168 <div class="firstRowSecondColumn"
169 data-offset-x="70" data-offset-y="0" data-expected-width="100" data- expected-height="10">
170 </div>
171 </div>
172 </div>
173
174 <div class="wrapper">
175 <div class="grid fit-content twoColumns" data-expected-width="140" data-expe cted-height="10">
176 <div class="firstRowFirstColumn"
177 data-offset-x="0" data-offset-y="0" data-expected-width="70" data-ex pected-height="10">
178 XX X
179 </div>
180 <div class="firstRowSecondColumn"
181 data-offset-x="70" data-offset-y="0" data-expected-width="100" data- expected-height="10">
182 </div>
183 </div>
184 </div>
185
186 <div class="wrapper">
187 <div class="grid min-content twoColumns" data-expected-width="120" data-expe cted-height="10">
188 <div class="firstRowFirstColumn"
189 data-offset-x="0" data-offset-y="0" data-expected-width="60" data-ex pected-height="10">
190 XX X
191 </div>
192 <div class="firstRowSecondColumn"
193 data-offset-x="60" data-offset-y="0" data-expected-width="100" data- expected-height="10">
194 </div>
195 </div>
196 </div>
197
198 <div class="wrapper">
199 <div class="grid float twoColumns" data-expected-width="100" data-expected-h eight="10">
200 <div class="firstRowFirstColumn"
201 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex pected-height="10">
202 </div>
203 <div class="firstRowSecondColumn"
204 data-offset-x="50" data-offset-y="0" data-expected-width="100" data- expected-height="10">
205 XX X
206 </div>
207 </div>
208 </div>
209
210 <div class="wrapper">
211 <div class="grid abspos twoColumns" data-expected-width="100" data-expected- height="10">
212 <div class="firstRowFirstColumn"
213 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex pected-height="10">
214 </div>
215 <div class="firstRowSecondColumn"
216 data-offset-x="50" data-offset-y="0" data-expected-width="100" data- expected-height="10">
217 XX X
218 </div>
219 </div>
220 </div>
221
222 <div class="wrapper">
223 <div class="grid max-content twoColumns" data-expected-width="100" data-expe cted-height="10">
224 <div class="firstRowFirstColumn"
225 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex pected-height="10">
226 </div>
227 <div class="firstRowSecondColumn"
228 data-offset-x="50" data-offset-y="0" data-expected-width="100" data- expected-height="10">
229 XX X
230 </div>
231 </div>
232 </div>
233
234 <div class="wrapper">
235 <div class="grid min-content twoColumns" data-expected-width="100" data-expe cted-height="10">
236 <div class="firstRowFirstColumn"
237 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex pected-height="10">
238 </div>
239 <div class="firstRowSecondColumn"
240 data-offset-x="50" data-offset-y="0" data-expected-width="100" data- expected-height="10">
241 XX X
242 </div>
243 </div>
244 </div>
245
246 <div class="wrapper">
247 <div class="grid fit-content twoColumns" data-expected-width="100" data-expe cted-height="10">
248 <div class="firstRowFirstColumn"
249 data-offset-x="0" data-offset-y="0" data-expected-width="50" data-ex pected-height="10">
250 </div>
251 <div class="firstRowSecondColumn"
252 data-offset-x="50" data-offset-y="0" data-expected-width="100" data- expected-height="10">
253 XX X
254 </div>
255 </div>
256 </div>
257
258 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698