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

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-001-expected.html

Issue 1920173002: Reland [css-grid] Implement auto-repeat computation (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 7 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html » ('j') | no next file with comments »
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; padding:0; margin:0;
13 }
14
15 .grid {
16 display: grid;
17 position: relative;
18 border: 1px solid;
19 grid-auto-rows: 10px;
20 grid-gap: 2px;
21 margin-bottom: 2px;
22 padding-right: 3px;
23 }
24 .r1 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d]; }
25 .r2 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
26 .r3 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [f]; }
27 fit .r1 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d]; }
28 fit .r2 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e]; }
29 fit .r3 { grid-template-columns: [a] repeat(3, [b] 20px [c]) [d] 30px [e] 30px [ f]; }
30
31 .w100 { width: 100px; }
32 .w50 { width: 50px; }
33 .w80 { width: 80px; }
34 .mw100 { min-width: 100px; }
35 .mw50 { min-width: 50px; }
36 .mw80 { min-width: 80px; }
37 .xw100 { max-width: 100px; }
38 .xw50 { max-width: 50px; }
39 .xw80 { max-width: 80px; }
40 .float { float: left; }
41
42 x {
43 height: 10px;
44 background: grey;
45 }
46 a {
47 position: absolute;
48 left:0; right:0; top:0; height: 3px;
49 background: black;
50 grid-column: c / c -1;
51 }
52 b {
53 position: absolute;
54 left:0; right:0; bottom:0; height: 3px;
55 background: brown;
56 grid-column: auto / c -1;
57 }
58
59 x:first-child {
60 background: lime;
61 }
62 x:last-child {
63 background: blue;
64 }
65
66 fill,fit {
67 float: left;
68 width: 400px;
69 }
70
71 .r1.c0 { grid-template-columns: none;}
72 .r1.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d];}
73 .r1.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d]; }
74 .r1.c4 { grid-template-columns: [a] repeat(4, [b] 20px [c]) [d]; }
75 .r1.c18 { grid-template-columns: [a] repeat(18, [b] 20px [c]) [d]; }
76
77 .r2.c16 { grid-template-columns: [a] repeat(16, [b] 20px [c]) [d] 30px [e]; }
78 .r2.c0 { grid-template-columns: 30px [e];}
79 .r2.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e]; }
80 .r2.c2 { grid-template-columns: [a] repeat(2, [b] 20px [c]) [d] 30px [e]; }
81
82 .r3.c15 { grid-template-columns: [a] repeat(15, [b] 20px [c]) [d] 30px [e] 30px [f]; }
83 .r3.c0 { grid-template-columns: [a d] 30px [e] 30px [f]; }
84 .r3.c1 { grid-template-columns: [a] repeat(1, [b] 20px [c]) [d] 30px [e] 30px [f ]; }
85
86 </style>
87 </head>
88 <body>
89
90 <fill>
91
92 <div class="grid r1 c18"><x></x><x></x><a></a><b></b><x></x></div>
93 <div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
94 <div class="grid r1 w100 c4"><x></x><x></x><a></a><b></b><x></x></div>
95 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
96 <div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div>
97 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
98 <div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div>
99 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
100 <div class="grid r1 mw50 float c2"><x></x><x></x><a></a><b></b><x></x></div>
101 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
102 <div class="grid r1 w100 mw50 float c4"><x></x><x></x><a></a><b></b><x></x></div >
103 <div class="grid r1 mw100 w50 float c4"><x></x><x></x><a></a><b></b><x></x></div >
104
105 <br clear="all">
106 <br clear="all">
107
108 <div class="grid r2 c16"><x></x><x></x><a></a><b></b><x></x></div>
109 <div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div>
110 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
111 <div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div>
112 <div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
113 <div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
114 <div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
115 <div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
116 <div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
117 <div class="grid r2 mw80 float c2"><x></x><x></x><a></a><b></b><x></x></div>
118 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
119 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
120
121 <br clear="all">
122 <br clear="all">
123
124 <div class="grid r3 c15"><x></x><x></x><a></a><b></b><x></x></div>
125 <div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div>
126 <div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div>
127 <div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div>
128 <div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
129 <div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
130 <div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
131 <div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
132 <div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div>
133 <div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div>
134 <div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div >
135 <div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x></div >
136
137 </fill>
138
139 <!-- <fit>
140
141 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
142 <div class="grid r1 float c1"><x></x><x></x><a></a><b></b><x></x></div>
143 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
144 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
145 <div class="grid r1 w50 c2"><x></x><x></x><a></a><b></b><x></x></div>
146 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
147 <div class="grid r1 xw50 c2"><x></x><x></x><a></a><b></b><x></x></div>
148 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
149 <div class="grid r1 mw50 float c2"><x></x><x></x><a></a><b></b><x></x></div >
150 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
151 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
152 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
153
154 <br clear="all">
155 <br clear="all">
156
157 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
158 <div class="grid r2 float c1"><x></x><x></x><a></a><b></b><x></x></div>
159 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
160 <div class="grid r2 w80 c2"><x></x><x></x><a></a><b></b><x></x></div>
161 <div class="grid r2 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
162 <div class="grid r2 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
163 <div class="grid r2 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
164 <div class="grid r2 w100 xw80 c2"><x></x><x></x><a></a><b></b><x></x></div>
165 <div class="grid r2 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div >
166 <div class="grid r2 mw80 float c2"><x></x><x></x><a></a><b></b><x></x></div >
167 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
168 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
169
170 <br clear="all">
171 <br clear="all">
172
173 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
174 <div class="grid r3 float c1"><x></x><x></x><a></a><b></b><x></x></div>
175 <div class="grid r3 w100 c1"><x></x><x></x><a></a><b></b><x></x></div>
176 <div class="grid r3 w80 c1"><x></x><x></x><a></a><b></b><x></x></div>
177 <div class="grid r3 w50 c1"><x></x><x></x><a></a><b></b><x></x></div>
178 <div class="grid r3 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
179 <div class="grid r3 xw50 c1"><x></x><x></x><a></a><b></b><x></x></div>
180 <div class="grid r3 w100 xw80 c1"><x></x><x></x><a></a><b></b><x></x></div>
181 <div class="grid r3 mw50 float c1"><x></x><x></x><a></a><b></b><x></x></div >
182 <div class="grid r3 mw80 float c1"><x></x><x></x><a></a><b></b><x></x></div >
183 <div class="grid r3 w100 mw50 float c1"><x></x><x></x><a></a><b></b><x></x> </div>
184 <div class="grid r3 mw100 w50 float c1"><x></x><x></x><a></a><b></b><x></x> </div>
185
186 <br clear="all">
187 <br clear="all">
188
189 </fit> -->
190
191
192 </body>
193 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698