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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-spanning-resolution.html

Issue 1529083006: [css-grid] Initial support for implicit grid before explicit grid (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Apply suggested changes Created 5 years 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
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <style> 4 <style>
5 .grid { 5 .grid {
6 grid-template-columns: 40% 60%; 6 grid-template-columns: 40% 60%;
7 grid-template-rows: 30% 70%; 7 grid-template-rows: 30% 70%;
8 width: 400px; 8 width: 400px;
9 height: 300px; 9 height: 300px;
10 grid-auto-columns: 200px;
11 grid-auto-rows: 250px;
10 } 12 }
11 13
12 #bigGrid { 14 #bigGrid {
13 grid-template-columns: 25% 25% 25% 25%; 15 grid-template-columns: 25% 25% 25% 25%;
14 grid-template-rows: 25% 25% 25% 25%; 16 grid-template-rows: 25% 25% 25% 25%;
15 height: 100px; 17 height: 100px;
16 width: 200px; 18 width: 200px;
17 } 19 }
18 20
19 #fixedGrid { 21 #fixedGrid {
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after
117 </div> 119 </div>
118 120
119 <div style="position: relative"> 121 <div style="position: relative">
120 <div class="grid" data-expected-width="400" data-expected-height="300"> 122 <div class="grid" data-expected-width="400" data-expected-height="300">
121 <div class="sizedToGridArea bothRowBothColumn" data-offset-x="0" data-offset -y="0" data-expected-width="400" data-expected-height="300"></div> 123 <div class="sizedToGridArea bothRowBothColumn" data-offset-x="0" data-offset -y="0" data-expected-width="400" data-expected-height="300"></div>
122 </div> 124 </div>
123 </div> 125 </div>
124 126
125 <div style="position: relative"> 127 <div style="position: relative">
126 <div class="grid" data-expected-width="400" data-expected-height="300"> 128 <div class="grid" data-expected-width="400" data-expected-height="300">
127 <div class="sizedToGridArea negativeOverflowRowFirstColumn" data-offset-x="0 " data-offset-y="0" data-expected-width="160" data-expected-height="90"></div> 129 <div class="sizedToGridArea negativeOverflowRowFirstColumn" data-offset-x="0 " data-offset-y="0" data-expected-width="160" data-expected-height="500"></div>
128 </div> 130 </div>
129 </div> 131 </div>
130 132
131 <div style="position: relative"> 133 <div style="position: relative">
132 <div class="grid" data-expected-width="400" data-expected-height="300"> 134 <div class="grid" data-expected-width="400" data-expected-height="300">
133 <div class="sizedToGridArea overflowRowFirstColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="160" data-expected-height="300"></div> 135 <div class="sizedToGridArea overflowRowFirstColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="160" data-expected-height="800"></div>
134 </div> 136 </div>
135 </div> 137 </div>
136 138
137 <div style="position: relative"> 139 <div style="position: relative">
138 <div class="grid" data-expected-width="400" data-expected-height="300"> 140 <div class="grid" data-expected-width="400" data-expected-height="300">
139 <div class="sizedToGridArea firstRowNegativeOverflowColumn" data-offset-x="0 " data-offset-y="0" data-expected-width="160" data-expected-height="90"></div> 141 <div class="sizedToGridArea firstRowNegativeOverflowColumn" data-offset-x="0 " data-offset-y="0" data-expected-width="400" data-expected-height="90"></div>
140 </div> 142 </div>
141 </div> 143 </div>
142 144
143 <div style="position: relative"> 145 <div style="position: relative">
144 <div class="grid" data-expected-width="400" data-expected-height="300"> 146 <div class="grid" data-expected-width="400" data-expected-height="300">
145 <div class="sizedToGridArea firstRowOverflowColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="400" data-expected-height="90"></div> 147 <div class="sizedToGridArea firstRowOverflowColumn" data-offset-x="0" data-o ffset-y="0" data-expected-width="800" data-expected-height="90"></div>
146 </div> 148 </div>
147 </div> 149 </div>
148 150
149 <div style="position: relative"> 151 <div style="position: relative">
150 <div class="grid" data-expected-width="400" data-expected-height="300"> 152 <div class="grid" data-expected-width="400" data-expected-height="300">
151 <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="160 " data-offset-y="0" data-expected-width="240" data-expected-height="90"></div> 153 <div class="sizedToGridArea firstAutoRowSecondAutoColumn" data-offset-x="160 " data-offset-y="0" data-expected-width="240" data-expected-height="90"></div>
152 </div> 154 </div>
153 </div> 155 </div>
154 156
155 <div style="position: relative"> 157 <div style="position: relative">
156 <div class="grid" data-expected-width="400" data-expected-height="300"> 158 <div class="grid" data-expected-width="400" data-expected-height="300">
157 <div class="sizedToGridArea autoSecondRowAutoFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="160" data-expected-height="90"></div> 159 <div class="sizedToGridArea autoSecondRowAutoFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="90"></div>
158 </div> 160 </div>
159 </div> 161 </div>
160 162
161 <div style="position: relative"> 163 <div style="position: relative">
162 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1 00"> 164 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1 00">
163 <div class="sizedToGridArea secondRowSecondColumnNoSpan" data-offset-x="50" data-offset-y="25" data-expected-width="50" data-expected-height="25"></div> 165 <div class="sizedToGridArea secondRowSecondColumnNoSpan" data-offset-x="50" data-offset-y="25" data-expected-width="50" data-expected-height="25"></div>
164 <div class="sizedToGridArea thirdRowThirdColumnNoSpan" data-offset-x="100" d ata-offset-y="50" data-expected-width="50" data-expected-height="25"></div> 166 <div class="sizedToGridArea thirdRowThirdColumnNoSpan" data-offset-x="100" d ata-offset-y="50" data-expected-width="50" data-expected-height="25"></div>
165 </div> 167 </div>
166 168
167 <div style="position: relative"> 169 <div style="position: relative">
(...skipping 13 matching lines...) Expand all
181 </div> 183 </div>
182 </div> 184 </div>
183 185
184 <div style="position: relative"> 186 <div style="position: relative">
185 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1 00"> 187 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1 00">
186 <div class="sizedToGridArea thirdRowSpanning2Column3" data-offset-x="0" data -offset-y="50" data-expected-width="100" data-expected-height="25"></div> 188 <div class="sizedToGridArea thirdRowSpanning2Column3" data-offset-x="0" data -offset-y="50" data-expected-width="100" data-expected-height="25"></div>
187 </div> 189 </div>
188 190
189 <div style="position: relative"> 191 <div style="position: relative">
190 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1 00"> 192 <div class="grid" id="bigGrid" data-expected-width="200" data-expected-height="1 00">
191 <div class="sizedToGridArea underflowSpanning" data-offset-x="0" data-offset -y="0" data-expected-width="100" data-expected-height="75"></div> 193 <div class="sizedToGridArea underflowSpanning" data-offset-x="0" data-offset -y="0" data-expected-width="300" data-expected-height="1325"></div>
192 </div> 194 </div>
193 195
194 <!-- Check that the end span is ignored when two opposing spans are specified--> 196 <!-- Check that the end span is ignored when two opposing spans are specified-->
195 <div style="position: relative"> 197 <div style="position: relative">
196 <div class="grid" id="fixedGrid" style="grid-auto-flow: row;"> 198 <div class="grid" id="fixedGrid" style="grid-auto-flow: row;">
197 <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offse t-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></d iv> 199 <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offse t-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></d iv>
198 <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0" data-expected-width="60" data-expected-height="105"></div> 200 <div class="sizedToGridArea doubleSpan" data-offset-x="10" data-offset-y="0" data-expected-width="60" data-expected-height="105"></div>
199 </div> 201 </div>
200 202
201 <div style="position: relative"> 203 <div style="position: relative">
202 <div class="grid" id="fixedGrid" style="grid-auto-flow: column;"> 204 <div class="grid" id="fixedGrid" style="grid-auto-flow: column;">
203 <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offse t-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></d iv> 205 <div class="sizedToGridArea" style="grid-column: 1; grid-row: 1;" data-offse t-x="0" data-offset-y="0" data-expected-width="10" data-expected-height="15"></d iv>
204 <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15" data-expected-width="30" data-expected-height="210"></div> 206 <div class="sizedToGridArea doubleSpan" data-offset-x="0" data-offset-y="15" data-expected-width="30" data-expected-height="210"></div>
205 </div> 207 </div>
206 </body> 208 </body>
207 </html> 209 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698