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

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-002.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-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.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>CSS Grid Test: 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 <link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-repeat-auto-f ill">
11 <link rel="match" href="grid-repeat-auto-fill-fit-002-ref.html">
12 <style type="text/css">
13 html,body {
14 color:black; background-color:white; font-size:16px; padding:0; margin:0;
15 }
16
17 .grid {
18 display: grid;
19 float: left;
20 position: relative;
21 border: 1px solid;
22 grid-auto-columns: 10px;
23 grid-auto-rows: 10px;
24 grid-auto-flow: row;
25 grid-gap: 2px;
26 margin-right: 2px;
27 padding-top: 3px;
28 }
29 .r1 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d]; }
30 .r2 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e]; }
31 .r3 { grid-template-rows: [a] repeat(auto-fill, [b] 20px [c]) [d] 30px [e] 30px [f]; }
32 fit .r1 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d]; }
33 fit .r2 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e]; }
34 fit .r3 { grid-template-rows: [a] repeat(auto-fit, [b] 20px [c]) [d] 30px [e] 30 px [f]; }
35
36 .w100 { height: 100px; }
37 .w50 { height: 50px; }
38 .w80 { height: 80px; }
39 .mw100 { min-height: 100px; }
40 .mw50 { min-height: 50px; }
41 .mw80 { min-height: 80px; }
42 .xw100 { max-height: 100px; }
43 .xw50 { max-height: 50px; }
44 .xw80 { max-height: 80px; }
45 .float { float: left; }
46
47 x {
48 width: 10px;
49 background: grey;
50 }
51 a {
52 position: absolute;
53 left:0; top:0; bottom:0; width: 3px;
54 background: black;
55 grid-row: c / c -1;
56 }
57 b {
58 position: absolute;
59 right:0; top:0; bottom:0; width: 3px;
60 background: brown;
61 grid-row: auto / c -1;
62 }
63
64 x:first-child {
65 background: lime;
66 }
67 x:last-child {
68 background: blue;
69 }
70
71 fill,fit {
72 float: left;
73 height: 400px;
74 }
75 </style>
76 </head>
77 <body>
78
79 <fill>
80
81 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
82 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
83 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
84 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
85 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
86 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
87 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
88 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
89 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
90 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
91 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
92 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
93
94 <br clear="all">
95 <br clear="all">
96
97 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
98 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
99 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
100 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
101 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
102 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
103 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
104 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
105 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
106 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
107 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
108 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
109
110 <br clear="all">
111 <br clear="all">
112
113 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
114 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
115 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
116 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
117 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
118 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
119 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
120 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
121 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
122 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
123 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
124 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></div>
125
126 </fill>
127
128 <!-- TODO(svillar): uncomment these tests when enabling auto-fit. -->
129 <!-- <fit>
130
131 <div class="grid r1"><x></x><x></x><a></a><b></b><x></x></div>
132 <div class="grid r1 float"><x></x><x></x><a></a><b></b><x></x></div>
133 <div class="grid r1 w100"><x></x><x></x><a></a><b></b><x></x></div>
134 <div class="grid r1 w80"><x></x><x></x><a></a><b></b><x></x></div>
135 <div class="grid r1 w50"><x></x><x></x><a></a><b></b><x></x></div>
136 <div class="grid r1 xw80"><x></x><x></x><a></a><b></b><x></x></div>
137 <div class="grid r1 xw50"><x></x><x></x><a></a><b></b><x></x></div>
138 <div class="grid r1 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
139 <div class="grid r1 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
140 <div class="grid r1 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
141 <div class="grid r1 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
142 <div class="grid r1 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
143
144 <br clear="all">
145 <br clear="all">
146
147 <div class="grid r2"><x></x><x></x><a></a><b></b><x></x></div>
148 <div class="grid r2 float"><x></x><x></x><a></a><b></b><x></x></div>
149 <div class="grid r2 w100"><x></x><x></x><a></a><b></b><x></x></div>
150 <div class="grid r2 w80"><x></x><x></x><a></a><b></b><x></x></div>
151 <div class="grid r2 w50"><x></x><x></x><a></a><b></b><x></x></div>
152 <div class="grid r2 xw80"><x></x><x></x><a></a><b></b><x></x></div>
153 <div class="grid r2 xw50"><x></x><x></x><a></a><b></b><x></x></div>
154 <div class="grid r2 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
155 <div class="grid r2 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
156 <div class="grid r2 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
157 <div class="grid r2 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
158 <div class="grid r2 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
159
160 <br clear="all">
161 <br clear="all">
162
163 <div class="grid r3"><x></x><x></x><a></a><b></b><x></x></div>
164 <div class="grid r3 float"><x></x><x></x><a></a><b></b><x></x></div>
165 <div class="grid r3 w100"><x></x><x></x><a></a><b></b><x></x></div>
166 <div class="grid r3 w80"><x></x><x></x><a></a><b></b><x></x></div>
167 <div class="grid r3 w50"><x></x><x></x><a></a><b></b><x></x></div>
168 <div class="grid r3 xw80"><x></x><x></x><a></a><b></b><x></x></div>
169 <div class="grid r3 xw50"><x></x><x></x><a></a><b></b><x></x></div>
170 <div class="grid r3 w100 xw80"><x></x><x></x><a></a><b></b><x></x></div>
171 <div class="grid r3 mw50 float"><x></x><x></x><a></a><b></b><x></x></div>
172 <div class="grid r3 mw80 float"><x></x><x></x><a></a><b></b><x></x></div>
173 <div class="grid r3 w100 mw50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
174 <div class="grid r3 mw100 w50 float"><x></x><x></x><a></a><b></b><x></x></d iv>
175
176 <br clear="all">
177 <br clear="all">
178
179 </fit> -->
180
181
182 </body>
183 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-001-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/mozilla/grid-repeat-auto-fill-fit-002-expected.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698