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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-justify-content.html

Issue 1031853002: [CSS Grid Layout] Content Distribution support for grid. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Missing layout test expectations file. Created 5 years, 8 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-content-alignment-overflow.html ('k') | LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <script src="../../resources/check-layout.js"></script> 5 <script src="../../resources/check-layout.js"></script>
6 <style> 6 <style>
7 body { 7 body {
8 margin: 0; 8 margin: 0;
9 } 9 }
10 10
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
48 justify-content: right; 48 justify-content: right;
49 } 49 }
50 50
51 .justifyContentFlexStart { 51 .justifyContentFlexStart {
52 justify-content: flex-start; 52 justify-content: flex-start;
53 } 53 }
54 54
55 .justifyContentFlexEnd { 55 .justifyContentFlexEnd {
56 justify-content: flex-end; 56 justify-content: flex-end;
57 } 57 }
58
59 .justifyContentEndTrue {
60 justify-content: end true;
61 }
62
63 .justifyContentCenterTrue {
64 justify-content: center true;
65 }
66
67 .justifyContentRightSafe {
68 justify-content: right safe;
69 }
70
71 .justifyContentLeftTrue {
72 justify-content: left true;
73 }
74
75 .justifyContentFlexStartTrue {
76 justify-content: flex-start true;
77 }
78
79 .justifyContentFlexEndSafe {
80 justify-content: flex-end safe;
81 }
82
83 .justifyContentSpaceBetween {
84 justify-content: space-between;
85 }
86
87 .justifyContentSpaceAround {
88 justify-content: space-around;
89 }
90
91 .justifyContentSpaceEvenly {
92 justify-content: space-evenly;
93 }
94
95 .justifyContentStretch {
96 justify-content: stretch;
97 }
98
99 .justifyContentSpaceBetweenLeft {
100 justify-content: space-between left;
101 }
102
103 .justifyContentSpaceAroundEnd {
104 justify-content: space-around end;
105 }
106
107 .justifyContentSpaceEvenlyRight {
108 justify-content: space-evenly right;
109 }
110
111 .justifyContentStretchEnd {
112 justify-content: stretch end;
113 }
114
115 </style> 58 </style>
116 </head> 59 </head>
117 <body onload="checkLayout('.grid')"> 60 <body onload="checkLayout('.grid')">
118 61
119 <p>This test checks that the justify-content property is applied correctly when using content-position values.</p> 62 <p>This test checks that the justify-content property is applied correctly when using content-position values.</p>
120 63
121 <div style="position: relative"> 64 <div style="position: relative">
122 <p>direction: LTR | justify-content: 'center'</p> 65 <p>direction: LTR | justify-content: 'center'</p>
123 <div class="grid justifyContentCenter" data-expected-width="200" data-expect ed-height="300"> 66 <div class="grid justifyContentCenter" data-expected-width="200" data-expect ed-height="300">
124 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div> 67 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after
181 <div style="position: relative"> 124 <div style="position: relative">
182 <p>direction: LTR | justify-content: 'flex-end'</p> 125 <p>direction: LTR | justify-content: 'flex-end'</p>
183 <div class="grid justifyContentFlexEnd" data-expected-width="200" data-expec ted-height="300"> 126 <div class="grid justifyContentFlexEnd" data-expected-width="200" data-expec ted-height="300">
184 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div> 127 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
185 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> 128 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
186 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100 " data-expected-width="50" data-expected-height="100"></div> 129 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100 " data-expected-width="50" data-expected-height="100"></div>
187 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div> 130 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
188 </div> 131 </div>
189 </div> 132 </div>
190 133
191 <!-- content-distribution values always fallback to content-position. -->
192 <div style="position: relative">
193 <p>direction: LTR | justify-content: 'space-between' (fallback to 'start')</ p>
194 <div class="grid justifyContentSpaceBetween" data-expected-width="200" data- expected-height="300">
195 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
196 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
197 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
198 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
199 </div>
200 </div>
201
202 <div style="position: relative">
203 <p>direction: LTR | justify-content: 'space-around' (fallback to 'center')</ p>
204 <div class="grid justifyContentSpaceAround" data-expected-width="200" data-e xpected-height="300">
205 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
206 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
207 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
208 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
209 </div>
210 </div>
211
212 <div style="position: relative">
213 <p>direction: LTR | justify-content: 'space-evenly' (fallback to 'center')</ p>
214 <div class="grid justifyContentSpaceEvenly" data-expected-width="200" data-e xpected-height="300">
215 <div class="cell firstRowFirstColumn" data-offset-x="50" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
216 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
217 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
218 <div class="cell secondRowSecondColumn" data-offset-x="100" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
219 </div>
220 </div>
221
222 <div style="position: relative">
223 <p>direction: LTR | justify-content: 'stretch' (fallback to start)</p>
224 <div class="grid justifyContentStretch" data-expected-width="200" data-expec ted-height="300">
225 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
226 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
227 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
228 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
229 </div>
230 </div>
231
232 <div style="position: relative">
233 <p>direction: LTR | justify-content: space-between left (fallback to left)</ p>
234 <div class="grid justifyContentSpaceBetweenLeft" data-expected-width="200" d ata-expected-height="300">
235 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
236 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
237 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
238 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
239 </div>
240 </div>
241
242 <div style="position: relative">
243 <p>direction: LTR | justify-content: 'space-around end' (fallback to end)</p >
244 <div class="grid justifyContentSpaceAroundEnd" data-expected-width="200" dat a-expected-height="300">
245 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
246 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
247 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100 " data-expected-width="50" data-expected-height="100"></div>
248 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
249 </div>
250 </div>
251
252 <div style="position: relative">
253 <p>direction: LTR | justify-content: 'space-evenly right' (fallback to 'righ t')</p>
254 <div class="grid justifyContentSpaceEvenlyRight" data-expected-width="200" d ata-expected-height="300">
255 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
256 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
257 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100 " data-expected-width="50" data-expected-height="100"></div>
258 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
259 </div>
260 </div>
261
262 <div style="position: relative">
263 <p>direction: LTR | justify-content: 'stretch end' (fallback to 'end')</p>
264 <div class="grid justifyContentStretchEnd" data-expected-width="200" data-ex pected-height="300">
265 <div class="cell firstRowFirstColumn" data-offset-x="100" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
266 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
267 <div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100 " data-expected-width="50" data-expected-height="100"></div>
268 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="100" data-expected-width="20" data-expected-height="40"></div>
269 </div>
270 </div>
271
272 <!-- Default alignment and initial values. --> 134 <!-- Default alignment and initial values. -->
273 <div style="position: relative"> 135 <div style="position: relative">
274 <p>direction: LTR | justify-content: 'auto' (resolved to 'start')</p> 136 <p>direction: LTR | justify-content: 'auto' (resolved to 'start')</p>
275 <div class="grid" data-expected-width="200" data-expected-height="300"> 137 <div class="grid" data-expected-width="200" data-expected-height="300">
276 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div> 138 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
277 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div> 139 <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
278 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 140 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
279 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div> 141 <div class="cell secondRowSecondColumn" data-offset-x="50" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
280 </div> 142 </div>
281 </div> 143 </div>
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after
326 <div class="grid directionRTL justifyContentEnd" data-expected-width="200" d ata-expected-height="300"> 188 <div class="grid directionRTL justifyContentEnd" data-expected-width="200" d ata-expected-height="300">
327 <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div> 189 <div class="cell firstRowFirstColumn" data-offset-x="80" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
328 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="50" data-expected-height="100"></div> 190 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="50" data-expected-height="100"></div>
329 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> 191 <div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div>
330 <div class="cell secondRowSecondColumn" data-offset-x="30" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div> 192 <div class="cell secondRowSecondColumn" data-offset-x="30" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div>
331 </div> 193 </div>
332 </div> 194 </div>
333 195
334 </body> 196 </body>
335 </html> 197 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html ('k') | LayoutTests/fast/css-grid-layout/grid-justify-content-distribution.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698