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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2-expected.html

Issue 2080643002: [css-grid] Implement repeat(auto-fit) (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Build (debug) fix 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
« third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html ('k') | third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp » ('j') | third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE HTML>
2 <!--
3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
5 -->
6 <html><head>
7 <meta charset="utf-8">
8 <title>Reference: repeat(auto-fill/auto-fit)</title>
9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/sh ow_bug.cgi?id=1118820">
10 <style type="text/css">
11 html,body {
12 color:black; background-color:white; font-size:16px;
13 }
14
15 .grid {
16 display: grid;
17 float: left;
18 position: relative;
19 border: 2px solid;
20 grid-auto-columns: 10px;
21 grid-auto-rows: 10px;
22 grid-auto-flow: column;
23 grid-gap: 2px;
24 margin-right: 2px;
25 padding-top: 3px;
26 padding-bottom: 2px;
27 }
28
29 .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
30 .r10,.r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
31 /* Original Mozilla test was .r01 { grid-template-rows: [a] repeat(1, [b] 0 [c]) 20px [d]; grid-gap:0;} */
32 /* They don't remove the grid line names when there are no repetitions. */
33 .r01 { grid-template-rows: [a] 20px [d]; grid-gap:0;}
34 .r01 a {grid-row-end:auto; }
35 .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
36 .r20 { width:22px; grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
37 .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; }
38 .r02 { grid-template-rows: [a d] 30px [e]; }
39 .r30,.r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f] ; }
40 .r03 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
41 .r003 { grid-template-rows: [a] repeat(1, [b] 0px [c]) [d] 30px [e] 30px [f]; }
42 .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
43 .r0a { grid-template-rows: [a d] 30px [e] 10px [f]; grid-gap:0; padding-bottom:4 px;}
44
45 fit .r0 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d]; }
46 fit .r1 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d]; }
47 fit .r2 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
48 /* Original Mozilla test was fit .r02 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e]; } */
49 /* They don't remove the grid line names when there are no repetitions. */
50 fit .r02 { grid-template-rows: [a d] 30px [e]; grid-gap:0;}
51 fit .r3 { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f]; }
52 /* Original Mozilla test was fit .r03 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; } */
53 /* They don't remove the grid line names when there are no repetitions. */
54 fit .r03 { grid-template-rows: [a d] 30px [e] 30px [f]; grid-gap:0; }
55 /* Original Mozilla test was fit .r003 { grid-template-rows: [a] repeat(1, [b] 0 [c]) [d] 30px [e] 30px [f]; grid-gap:0; padding-bottom:4px;} */
56 /* They don't remove the grid line names when there are no repetitions. */
57 fit .r003 { grid-template-rows: [a d] 30px [e] 30px [f]; grid-gap:0; padding-bot tom:4px;}
58 fit .ra { grid-template-rows: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 10px [f]; }
59
60 .w100 { height: 100px; }
61 .w3 { height: 3px; }
62 .w20 { height: 20px; }
63 .w50 { height: 50px; }
64 .w80 { height: 80px; }
65 .mw100 { min-height: 100px; }
66 .mw3 { height: 3px; }
67 .mw20 { height: 20px; }
68 .mw50 { min-height: 50px; }
69 .mw80 { min-height: 80px; }
70 .xw100 { max-height: 100px; }
71 .xw3 { height: 3px; }
72 .xw20 { height: 20px; }
73 .xw50 { max-height: 50px; }
74 .xw80 { max-height: 80px; }
75
76 .w { width:10px}
77
78 x {
79 height: 10px;
80 background: grey;
81 }
82 a {
83 position: absolute;
84 left:0; top:0; bottom:0; width: 3px;
85 background: black;
86 grid-row: c / c -1;
87 }
88 b {
89 position: absolute;
90 right:0; top:0; bottom:0; width: 3px;
91 background: brown;
92 grid-row: auto / c -1;
93 }
94
95 x:first-child {
96 background: lime;
97 }
98 x:last-child {
99 background: blue;
100 }
101
102 fill,fit {
103 float: left;
104 height: 400px;
105 }
106 </style>
107 </head>
108 <body>
109
110 <!-- The original 005 test from Mozilla had also tests for auto-fill. They were moved to part-1 as it
111 is not possible to fit all the contents in the viewport without scroll (req uired by reftests). -->
112
113 <fit>
114
115 <div class="grid r1 w20"><x></x><x></x><a></a><b></b><x></x></div>
116 <div class="grid r1 w3"><x></x><x></x><a></a><b></b><x></x></div>
117 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
118 <div class="grid r1 xw3"><x></x><x></x><a></a><b></b><x></x></div>
119 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
120 <div class="grid r1 mw3"><x></x><x></x><a></a><b></b><x></x></div>
121 <div class="grid r1 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
122 <div class="grid r1 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
123 <div class="grid r1 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
124 <div class="grid r1 xw20"><x></x><x></x><a></a><b></b><x></x></div>
125 <div class="grid r1 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
126 <div class="grid r1 mw20"><x></x><x></x><a></a><b></b><x></x></div>
127
128 <br clear="all">
129 <br clear="all">
130
131 <div class="grid r01 w w20"><a></a><b></b></div>
132 <div class="grid r01 w w3"><a></a><b></b></div>
133 <div class="grid r01 w xw20"><a></a><b></b></div>
134 <div class="grid r01 w xw3"><a></a><b></b></div>
135 <div class="grid r01 w mw20"><a></a><b></b></div>
136 <div class="grid r01 w mw3"><a></a><b></b></div>
137 <div class="grid r01 w w20 xw3"><a></a><b></b></div>
138 <div class="grid r01 w w3 mw20"><a></a><b></b></div>
139 <div class="grid r01 w w3 mw3"><a></a><b></b></div>
140 <div class="grid r01 w xw20"><a></a><b></b></div>
141 <div class="grid r01 w xw3 mw20"><a></a><b></b></div>
142 <div class="grid r01 w mw20"><a></a><b></b></div>
143
144 <div class="grid r10" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></ div>
145 <div class="grid r10" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
146 <div class="grid r10" style="min-height:0; height:0"><x></x><x></x><a></a><b></b ><x></x></div>
147 <div class="grid r10" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></ div>
148 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
149 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
150
151 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
152 <div class="grid w r01" style="height:0"><a></a><b></b></div>
153 <div class="grid w r01" style="min-height:0; height:0"><a></a><b></b></div>
154 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
155 <div class="grid w r01" style="max-height:0"><a></a><b></b></div>
156 <div class="grid w r0a"><a></a><b></b></div>
157
158 <br clear="all">
159 <br clear="all">
160
161 <div class="grid r20 w20"><x></x><x></x><a></a><b></b><x></x></div>
162 <div class="grid r20 w3"><x></x><x></x><a></a><b></b><x></x></div>
163 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
164 <div class="grid r20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
165 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
166 <div class="grid r20 mw3"><x></x><x></x><a></a><b></b><x></x></div>
167 <div class="grid r20 w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
168 <div class="grid r20 w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
169 <div class="grid r20 w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
170 <div class="grid r20 xw20"><x></x><x></x><a></a><b></b><x></x></div>
171 <div class="grid r20 xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
172 <div class="grid r20 mw20"><x></x><x></x><a></a><b></b><x></x></div>
173
174 <br clear="all">
175 <br clear="all">
176
177 <div class="grid r02 w w20"><a></a><b></b></div>
178 <div class="grid r02 w w3"><a></a><b></b></div>
179 <div class="grid r02 w xw20"><a></a><b></b></div>
180 <div class="grid r02 w xw3"><a></a><b></b></div>
181 <div class="grid r02 w mw20"><a></a><b></b></div>
182 <div class="grid r02 w mw3"><a></a><b></b></div>
183 <div class="grid r02 w w20 xw3"><a></a><b></b></div>
184 <div class="grid r02 w w3 mw20"><a></a><b></b></div>
185 <div class="grid r02 w w3 mw3"><a></a><b></b></div>
186 <div class="grid r02 w xw20"><a></a><b></b></div>
187 <div class="grid r02 w xw3 mw20"><a></a><b></b></div>
188 <div class="grid r02 w mw20"><a></a><b></b></div>
189
190 <div class="grid r20" style="min-height:0"><x></x><x></x><a></a><b></b><x></x></ div>
191 <div class="grid r20" style="height:0"><x></x><x></x><a></a><b></b><x></x></div>
192 <div class="grid r20" style="min-height:0; height:0"><x></x><x></x><a></a><b></b ><x></x></div>
193 <div class="grid r20" style="max-height:0"><x></x><x></x><a></a><b></b><x></x></ div>
194 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
195 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
196
197 <div class="grid w r02" style="min-height:0"><a></a><b></b></div>
198 <div class="grid w r02" style="height:0"><a></a><b></b></div>
199 <div class="grid w r02" style="min-height:0; height:0"><a></a><b></b></div>
200 <div class="grid w r02" style="max-height:0"><a></a><b></b></div>
201 <div class="grid w r02"><a></a><b></b></div>
202
203
204 <br clear="all">
205 <br clear="all">
206
207 <div class="grid r30 w w20"><x></x><x></x><a></a><b></b><x></x></div>
208 <div class="grid r30 w w3"><x></x><x></x><a></a><b></b><x></x></div>
209 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
210 <div class="grid r30 w xw3"><x></x><x></x><a></a><b></b><x></x></div>
211 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
212 <div class="grid r30 w mw3"><x></x><x></x><a></a><b></b><x></x></div>
213 <div class="grid r30 w w20 xw3"><x></x><x></x><a></a><b></b><x></x></div>
214 <div class="grid r30 w w3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
215 <div class="grid r30 w w3 mw3"><x></x><x></x><a></a><b></b><x></x></div>
216 <div class="grid r30 w xw20"><x></x><x></x><a></a><b></b><x></x></div>
217 <div class="grid r30 w xw3 mw20"><x></x><x></x><a></a><b></b><x></x></div>
218 <div class="grid r30 w mw20"><x></x><x></x><a></a><b></b><x></x></div>
219
220 <br clear="all">
221 <br clear="all">
222
223 <div class="grid r03 w w20"><a></a><b></b></div>
224 <div class="grid r03 w w3"><a></a><b></b></div>
225 <div class="grid r03 w xw20"><a></a><b></b></div>
226 <div class="grid r03 w xw3"><a></a><b></b></div>
227 <div class="grid r03 w mw20"><a></a><b></b></div>
228 <div class="grid r03 w mw3"><a></a><b></b></div>
229 <div class="grid r03 w w20 xw3"><a></a><b></b></div>
230 <div class="grid r03 w w3 mw20"><a></a><b></b></div>
231 <div class="grid r03 w w3 mw3"><a></a><b></b></div>
232 <div class="grid r03 w xw20"><a></a><b></b></div>
233 <div class="grid r03 w xw3 mw20"><a></a><b></b></div>
234 <div class="grid r03 w mw20"><a></a><b></b></div>
235
236 <div class="grid w r30" style="min-height:0"><x></x><x></x><a></a><b></b><x></x> </div>
237 <div class="grid w r30" style="height:0"><x></x><x></x><a></a><b></b><x></x></di v>
238 <div class="grid w r30" style="min-height:0; height:0"><x></x><x></x><a></a><b>< /b><x></x></div>
239 <div class="grid w r30" style="max-height:0"><x></x><x></x><a></a><b></b><x></x> </div>
240 <div class="grid r0"><x></x><x></x><a></a><b></b><x></x></div>
241 <div class="grid ra"><x></x><x></x><a></a><b></b><x></x></div>
242
243 <div class="grid w r003" style="min-height:0"><a></a><b></b></div>
244 <div class="grid w r03" style="height:0"><a></a><b></b></div>
245 <div class="grid w r03" style="min-height:0; height:0"><a></a><b></b></div>
246 <div class="grid w r03" style="max-height:0"><a></a><b></b></div>
247 <div class="grid w r003"><a></a><b></b></div>
248
249 </fit>
250
251
252 </body>
253 </html>
OLDNEW
« third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-expected.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-005-part-2.html ('k') | third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp » ('j') | third_party/WebKit/Source/core/css/ComputedStyleCSSValueMapping.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698