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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column.html

Issue 920413002: [CSS Grid Layout] Support "sparse" in auto-placed items locked to a row/column (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fixing issues in the bots due to 0 key (using WTF::UnsignedWithZeroKeyHashTraits) Created 5 years, 10 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 | « LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html ('k') | LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column-expected.txt » ('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 <html>
3 <link href="resources/grid.css" rel="stylesheet">
4 <style>
5 .grid {
6 grid-auto-columns: 50px;
7 grid-auto-rows: 50px;
8 }
9
10 .firstRowAutoColumnSpanning2 {
11 background-color: maroon;
12 grid-column: span 2;
13 grid-row: 1;
14 }
15
16 .autoRowSpanning2FirstColumn {
17 background-color: aqua;
18 grid-column: 1;
19 grid-row: span 2;
20 }
21
22 .firstRowFourthColumn {
23 background-color: salmon;
24 grid-column: 4;
25 grid-row: 1;
26 }
27
28 .fourthRowFirstColumn {
29 background-color: salmon;
30 grid-column: 1;
31 grid-row: 4;
32 }
33
34 .secondRowThirdColumn {
35 background-color: red;
36 grid-column: 3;
37 grid-row: 2;
38 }
39 </style>
40 <script src="../../resources/check-layout.js"></script>
41 <body onload="checkLayout('.grid');">
42
43 <p>Thist test checks that sparse and dense packing modes are supported in auto-p lacement for fixed rows/columns.</p>
44
45 <div style="position: relative">
46 <div class="grid gridAutoFlowRowSparse">
47 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
48 <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x=" 100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div >
49 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="200" data -offset-y="0" data-expected-width="50" data-expected-height="50"></div>
50 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
51 </div>
52 </div>
53
54 <div style="position: relative">
55 <div class="grid gridAutoFlowRowSparse">
56 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
57 <div class="sizedToGridArea firstRowFourthColumn" data-offset-x="150" da ta-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
58 <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x=" 200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div >
59 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="300" data -offset-y="0" data-expected-width="50" data-expected-height="50"></div>
60 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="350" data -offset-y="0" data-expected-width="50" data-expected-height="50"></div>
61 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
62 </div>
63 </div>
64
65 <div style="position: relative">
66 <div class="grid gridAutoFlowRowSparse">
67 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
68 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
69 <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x=" 100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div >
70 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data -offset-y="0" data-expected-width="50" data-expected-height="50"></div>
71 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
72 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
73 </div>
74 </div>
75
76 <div style="position: relative">
77 <div class="grid gridAutoFlowRowSparse">
78 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
79 <div class="sizedToGridArea thirdRowSecondColumn" data-offset-x="50" dat a-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
80 <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x= "100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></d iv>
81 <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x=" 50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
82 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data -offset-y="0" data-expected-width="50" data-expected-height="50"></div>
83 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-o ffset-y="100" data-expected-width="50" data-expected-height="50"></div>
84 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
85 </div>
86 </div>
87
88 <div style="position: relative">
89 <div class="grid gridAutoFlowRowDense">
90 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
91 <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x=" 100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div >
92 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
93 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="50" data-expected-width="50" data-expected-height="50"></div>
94 </div>
95 </div>
96
97 <div style="position: relative">
98 <div class="grid gridAutoFlowRowDense">
99 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
100 <div class="sizedToGridArea firstRowFourthColumn" data-offset-x="150" da ta-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
101 <div class="sizedToGridArea firstRowAutoColumnSpanning2" data-offset-x=" 200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div >
102 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
103 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data -offset-y="0" data-expected-width="50" data-expected-height="50"></div>
104 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="50" data-expected-width="50" data-expected-height="50"></div>
105 </div>
106 </div>
107
108 <div style="position: relative">
109 <div class="grid gridAutoFlowRowDense">
110 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
111 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
112 <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x=" 100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div >
113 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
114 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="50" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
115 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="100" data-expected-width="50" data-expected-height="50"></div>
116 </div>
117 </div>
118
119 <div style="position: relative">
120 <div class="grid gridAutoFlowRowDense">
121 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
122 <div class="sizedToGridArea thirdRowSecondColumn" data-offset-x="50" dat a-offset-y="100" data-expected-width="50" data-expected-height="50"></div>
123 <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x= "100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></d iv>
124 <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x=" 50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
125 <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
126 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-o ffset-y="100" data-expected-width="50" data-expected-height="50"></div>
127 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data- offset-y="0" data-expected-width="50" data-expected-height="50"></div>
128 </div>
129 </div>
130
131 <div style="position: relative">
132 <div class="grid gridAutoFlowColumnSparse">
133 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
134 <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x=" 0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div >
135 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="200" data-expected-width="50" data-expected-height="50"></div>
136 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
137 </div>
138 </div>
139
140 <div style="position: relative">
141 <div class="grid gridAutoFlowColumnSparse">
142 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
143 <div class="sizedToGridArea fourthRowFirstColumn" data-offset-x="0" data -offset-y="150" data-expected-width="50" data-expected-height="50"></div>
144 <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x=" 0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div >
145 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="300" data-expected-width="50" data-expected-height="50"></div>
146 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="350" data-expected-width="50" data-expected-height="50"></div>
147 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
148 </div>
149 </div>
150
151 <div style="position: relative">
152 <div class="grid gridAutoFlowColumnSparse">
153 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
154 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
155 <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x=" 0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div >
156 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="150" data-expected-width="50" data-expected-height="50"></div>
157 <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
158 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
159 </div>
160 </div>
161
162 <div style="position: relative">
163 <div class="grid gridAutoFlowColumnSparse">
164 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
165 <div class="sizedToGridArea secondRowThirdColumn" data-offset-x="100" da ta-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
166 <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x= "50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></d iv>
167 <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x=" 0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
168 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="100" data-expected-width="50" data-expected-height="50"></div>
169 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="100" data -offset-y="0" data-expected-width="50" data-expected-height="50"></div>
170 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="50" data-expected-height="50"></div>
171 </div>
172 </div>
173
174 <div style="position: relative">
175 <div class="grid gridAutoFlowColumnDense">
176 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
177 <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x=" 0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div >
178 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
179 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
180 </div>
181 </div>
182
183 <div style="position: relative">
184 <div class="grid gridAutoFlowColumnDense">
185 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
186 <div class="sizedToGridArea fourthRowFirstColumn" data-offset-x="0" data -offset-y="150" data-expected-width="50" data-expected-height="50"></div>
187 <div class="sizedToGridArea autoRowSpanning2FirstColumn" data-offset-x=" 0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div >
188 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
189 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="100" data-expected-width="50" data-expected-height="50"></div>
190 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
191 </div>
192 </div>
193
194 <div style="position: relative">
195 <div class="grid gridAutoFlowColumnDense">
196 <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
197 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
198 <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x=" 0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div >
199 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
200 <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data -offset-y="50" data-expected-width="50" data-expected-height="50"></div>
201 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data- offset-y="0" data-expected-width="50" data-expected-height="50"></div>
202 </div>
203 </div>
204
205 <div style="position: relative">
206 <div class="grid gridAutoFlowColumnDense">
207 <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" dat a-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
208 <div class="sizedToGridArea secondRowThirdColumn" data-offset-x="100" da ta-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
209 <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x= "50" data-offset-y="100" data-expected-width="100" data-expected-height="50"></d iv>
210 <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x=" 0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
211 <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="50" data-expected-height="50"></div>
212 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="100" data -offset-y="0" data-expected-width="50" data-expected-height="50"></div>
213 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="100" data-expected-width="50" data-expected-height="50"></div>
214 </div>
215 </div>
216
217 </body>
218 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html ('k') | LayoutTests/fast/css-grid-layout/grid-item-auto-placement-fixed-row-column-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698