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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment.html

Issue 1488493003: [css-grid] refactoring of layout tests (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: 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
« third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
2 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
3 <link href="resources/grid-alignment.css" rel="stylesheet"> 4 <link href="resources/grid-alignment.css" rel="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel =stylesheet>
5 <script src="../../resources/check-layout.js"></script> 5 <script src="../../resources/check-layout.js"></script>
6 <script src="../../resources/js-test.js"></script> 6 <script src="../../resources/js-test.js"></script>
7 <style> 7 <style>
8 body { margin: 0px; } 8 body { margin: 0px; }
9 9
10 .grid100And200 { 10 .grid100And200 {
11 grid-template-columns: 100px 100px; 11 grid-template-columns: 100px 100px;
12 grid-template-rows: 200px 200px; 12 grid-template-rows: 200px 200px;
13 width: -webkit-fit-content;
14 position: relative; /* For the <p> comments */ 13 position: relative; /* For the <p> comments */
15 } 14 }
16 15
17 .grid50And100 { 16 .grid50And100 {
18 grid: 50px 50px / 100px 100px; 17 grid: 50px 50px / 100px 100px;
19 width: 200px; 18 width: 200px;
20 height: 300px; 19 height: 300px;
21 position: relative; /* For the <p> comments */ 20 position: relative; /* For the <p> comments */
22 } 21 }
23 22
24 .gridAuto20And40 { 23 .gridAuto20And40 {
25 grid-auto-columns: 20px; 24 grid-auto-columns: 20px;
26 grid-auto-rows: 40px; 25 grid-auto-rows: 40px;
27 width: 400px; 26 width: 400px;
28 height: 300px; 27 height: 300px;
29 position: relative; /* For the <p> comments */ 28 position: relative; /* For the <p> comments */
30 } 29 }
31 30
32 .gridWithPaddingBorder { 31 .gridWithPaddingBorder {
33 grid-template-columns: 100px 200px; 32 grid-template-columns: 100px 200px;
34 grid-template-rows: 200px 200px; 33 grid-template-rows: 200px 200px;
35 padding: 10px 15px 20px 30px; 34 padding: 10px 15px 20px 30px;
36 border-width: 5px 10px 15px 20px; 35 border-width: 5px 10px 15px 20px;
37 border-style: dotted; 36 border-style: dotted;
38 border-color: blue; 37 border-color: blue;
39 width: -webkit-fit-content;
40 position: relative; /* For the <p> comments */ 38 position: relative; /* For the <p> comments */
41 } 39 }
42 40
43 .gridWithAutoColumns { 41 .gridWithAutoColumns {
44 grid-auto-columns: 20px; 42 grid-auto-columns: 20px;
45 border: 2px solid black; 43 border: 2px solid black;
46 width: 10px; 44 width: 10px;
47 margin-left: 200px; 45 margin-left: 200px;
48 position: relative; 46 position: relative;
49 } 47 }
(...skipping 38 matching lines...) Expand 10 before | Expand all | Expand 10 after
88 .container { 86 .container {
89 position: relative; 87 position: relative;
90 } 88 }
91 89
92 </style> 90 </style>
93 91
94 <body onload="checkLayout('.grid')"> 92 <body onload="checkLayout('.grid')">
95 93
96 <!-- Check that gutters do not interfere with self alignment computation. --> 94 <!-- Check that gutters do not interfere with self alignment computation. -->
97 <div class="container"> 95 <div class="container">
98 <div class="grid grid100And200 alignItemsCenter gridRowColumnGaps" data-expe cted-width="221" data-expected-height="417"> 96 <div class="grid grid100And200 fit-content alignItemsCenter gridRowColumnGap s" data-expected-width="221" data-expected-height="417">
99 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da ta-offset-y="80" data-expected-width="20" data-expected-height="40"></div> 97 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da ta-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
100 <div class="cell firstRowSecondColumn" data-offset-x="121" data-offset-y ="80" data-expected-width="20" data-expected-height="40"></div> 98 <div class="cell firstRowSecondColumn" data-offset-x="121" data-offset-y ="80" data-expected-width="20" data-expected-height="40"></div>
101 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div > 99 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div >
102 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 121" data-offset-y="377" data-expected-width="20" data-expected-height="40"></di v> 100 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 121" data-offset-y="377" data-expected-width="20" data-expected-height="40"></di v>
103 </div> 101 </div>
104 </div> 102 </div>
105 103
106 <div class="container"> 104 <div class="container">
107 <div class="grid grid100And200 verticalLR gridRowColumnGaps" data-expected-w idth="417" data-expected-height="221"> 105 <div class="grid grid100And200 fit-content verticalLR gridRowColumnGaps" dat a-expected-width="417" data-expected-height="221">
108 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset -x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100"> 106 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset -x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
109 </div> 107 </div>
110 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-of fset-x="0" data-offset-y="121" data-expected-width="20" data-expected-height="40 "> 108 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-of fset-x="0" data-offset-y="121" data-expected-width="20" data-expected-height="40 ">
111 <div class="item"></div> 109 <div class="item"></div>
112 </div> 110 </div>
113 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offs et-x="180" data-offset-y="121" data-expected-width="20" data-expected-height="40 "> 111 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offs et-x="180" data-offset-y="121" data-expected-width="20" data-expected-height="40 ">
114 <div class="item"></div> 112 <div class="item"></div>
115 </div> 113 </div>
116 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-o ffset-x="307" data-offset-y="0" data-expected-width="20" data-expected-height="4 0"> 114 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-o ffset-x="307" data-offset-y="0" data-expected-width="20" data-expected-height="4 0">
117 <div class="item"></div> 115 <div class="item"></div>
118 </div> 116 </div>
119 <div class="cell alignSelfRight secondRowSecondColumn verticalRL" data-o ffset-x="217" data-offset-y="121" data-expected-width="20" data-expected-height= "40"> 117 <div class="cell alignSelfRight secondRowSecondColumn verticalRL" data-o ffset-x="217" data-offset-y="121" data-expected-width="20" data-expected-height= "40">
120 <div class="item"></div> 118 <div class="item"></div>
121 </div> 119 </div>
122 <div class="cell alignSelfLeft secondRowSecondColumn verticalRL" data-of fset-x="217" data-offset-y="121" data-expected-width="20" data-expected-height=" 40"> 120 <div class="cell alignSelfLeft secondRowSecondColumn verticalRL" data-of fset-x="217" data-offset-y="121" data-expected-width="20" data-expected-height=" 40">
123 <div class="item"></div> 121 <div class="item"></div>
124 </div> 122 </div>
125 </div> 123 </div>
126 </div> 124 </div>
127 125
128 <div class="container"> 126 <div class="container">
129 <div class="grid grid100And200 directionRTL gridRowColumnGaps" data-expecte d-width="221" data-expected-height="417"> 127 <div class="grid grid100And200 fit-content directionRTL gridRowColumnGaps" data-expected-width="221" data-expected-height="417">
130 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="121" d ata-offset-y="0" data-expected-width="100" data-expected-height="200"></div> 128 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="121" d ata-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
131 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80 " data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> 129 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80 " data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
132 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> 130 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
133 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="2 01" data-offset-y="297" data-expected-width="20" data-expected-height="40"></div > 131 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="2 01" data-offset-y="297" data-expected-width="20" data-expected-height="40"></div >
134 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="8 0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div> 132 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="8 0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
135 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="80 " data-offset-y="217" data-expected-width="20" data-expected-height="40"></div> 133 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="80 " data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
136 </div> 134 </div>
137 </div> 135 </div>
138 136
139 <!-- Check that gutters do not interfere with align-content computation. --> 137 <!-- Check that gutters do not interfere with align-content computation. -->
(...skipping 127 matching lines...) Expand 10 before | Expand all | Expand 10 after
267 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div> 265 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
268 <div class="secondRowFirstColumn" data-offset-x="303" data-offset-y="220 " data-expected-width="40" data-expected-height="20"></div> 266 <div class="secondRowFirstColumn" data-offset-x="303" data-offset-y="220 " data-expected-width="40" data-expected-height="20"></div>
269 <div class="secondRowSecondColumn" data-offset-x="303" data-offset-y="60 " data-expected-width="40" data-expected-height="20"></div> 267 <div class="secondRowSecondColumn" data-offset-x="303" data-offset-y="60 " data-expected-width="40" data-expected-height="20"></div>
270 </div> 268 </div>
271 </div> 269 </div>
272 270
273 <!-- Check that gutters do not interfere with align&justify computation when hav ing border, padding and margins. --> 271 <!-- Check that gutters do not interfere with align&justify computation when hav ing border, padding and margins. -->
274 <div class="container"> 272 <div class="container">
275 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br> 273 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br>
276 direction: LTR (parall) | align-items: 'self-start' | justify-items: 'se lf-start'</p> 274 direction: LTR (parall) | align-items: 'self-start' | justify-items: 'se lf-start'</p>
277 <div class="grid gridWithPaddingBorder directionLTR itemsSelfStart gridRowCo lumnGaps" data-expected-width="396" data-expected-height="467"> 275 <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfSta rt gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
278 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46 " data-offset-y="14" data-expected-width="20" data-expected-height="40"></div> 276 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46 " data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
279 <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="15 1" data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v> 277 <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="15 1" data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v>
280 <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30 " data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v> 278 <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30 " data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v>
281 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="16 7" data-offset-y="231" data-expected-width="20" data-expected-height="40"></div > 279 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="16 7" data-offset-y="231" data-expected-width="20" data-expected-height="40"></div >
282 </div> 280 </div>
283 </div> 281 </div>
284 282
285 <div class="container"> 283 <div class="container">
286 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br> 284 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br>
287 direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self- end'</p> 285 direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self- end'</p>
288 <div class="grid gridWithPaddingBorder directionLTR itemsSelfEnd gridRowColu mnGaps" data-expected-width="396" data-expected-height="467"> 286 <div class="grid gridWithPaddingBorder fit-content directionLTR itemsSelfEnd gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
289 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46 " data-offset-y="158" data-expected-width="20" data-expected-height="40"></div > 287 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46 " data-offset-y="158" data-expected-width="20" data-expected-height="40"></div >
290 <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="15 1" data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v> 288 <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="15 1" data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v>
291 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30 " data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v> 289 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30 " data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v>
292 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="16 7" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div > 290 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="16 7" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div >
293 </div> 291 </div>
294 </div> 292 </div>
295 293
296 <div class="container"> 294 <div class="container">
297 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br> 295 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br>
298 direction: RTL | align-items: 'right' | justify-items: 'right'</p> 296 direction: RTL | align-items: 'right' | justify-items: 'right'</p>
299 <div class="grid gridWithPaddingBorder directionRTL itemsRight gridRowColumn Gaps" data-expected-width="396" data-expected-height="467"> 297 <div class="grid gridWithPaddingBorder fit-content directionRTL itemsRight g ridRowColumnGaps" data-expected-width="396" data-expected-height="467">
300 <div class="cell firstRowFirstColumn" data-offset-x="323" data-offse t-y="14" data-expected-width="20" data-expected-height="40"></div> 298 <div class="cell firstRowFirstColumn" data-offset-x="323" data-offse t-y="14" data-expected-width="20" data-expected-height="40"></div>
301 <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offse t-y="10" data-expected-width="200" data-expected-height="200"></div> 299 <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offse t-y="10" data-expected-width="200" data-expected-height="200"></div>
302 <div class="stretch secondRowFirstColumn" data-offset-x="251" data-offse t-y="227" data-expected-width="100" data-expected-height="200"></div> 300 <div class="stretch secondRowFirstColumn" data-offset-x="251" data-offse t-y="227" data-expected-width="100" data-expected-height="200"></div>
303 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offse t-y="231" data-expected-width="20" data-expected-height="40"></div> 301 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offse t-y="231" data-expected-width="20" data-expected-height="40"></div>
304 </div> 302 </div>
305 </div> 303 </div>
306 304
307 <div class="container"> 305 <div class="container">
308 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br> 306 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br>
309 direction: RTL (parall) | align-items: 'self-start' | justify-items: 'se lf-start'</p> 307 direction: RTL (parall) | align-items: 'self-start' | justify-items: 'se lf-start'</p>
310 <div class="grid gridWithPaddingBorder directionRTL itemsSelfStart gridRowCo lumnGaps" data-expected-width="396" data-expected-height="467"> 308 <div class="grid gridWithPaddingBorder fit-content directionRTL itemsSelfSta rt gridRowColumnGaps" data-expected-width="396" data-expected-height="467">
311 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="32 3" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div > 309 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="32 3" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div >
312 <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30 " data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v> 310 <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30 " data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v>
313 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="25 1" data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v> 311 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="25 1" data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v>
314 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="20 2" data-offset-y="231" data-expected-width="20" data-expected-height="40"></di v> 312 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="20 2" data-offset-y="231" data-expected-width="20" data-expected-height="40"></di v>
315 </div> 313 </div>
316 </div> 314 </div>
317 315
318 <!-- Check behavior with negative free space --> 316 <!-- Check behavior with negative free space -->
319 <div class="container"> 317 <div class="container">
320 <p>Negative free space. justify-content: start</p> 318 <p>Negative free space. justify-content: start</p>
(...skipping 45 matching lines...) Expand 10 before | Expand all | Expand 10 after
366 <p>Negative free space. align-content: end</p> 364 <p>Negative free space. align-content: end</p>
367 <div class="grid gridWithAutoRows alignContentEnd gridRowColumnGaps" style=" margin-top: 125px" data-expected-width="24" data-expected-height="54"> 365 <div class="grid gridWithAutoRows alignContentEnd gridRowColumnGaps" style=" margin-top: 125px" data-expected-width="24" data-expected-height="54">
368 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y=" -104" data-expected-width="20" data-expected-height="40"></div> 366 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y=" -104" data-expected-width="20" data-expected-height="40"></div>
369 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y= "-47" data-expected-width="20" data-expected-height="40"></div> 367 <div class="cell secondRowFirstColumn" data-offset-x="0" data-offset-y= "-47" data-expected-width="20" data-expected-height="40"></div>
370 <div class="cell thirdRowFirstColumn" data-offset-x="0" data-offset-y=" 10" data-expected-width="20" data-expected-height="40"></div> 368 <div class="cell thirdRowFirstColumn" data-offset-x="0" data-offset-y=" 10" data-expected-width="20" data-expected-height="40"></div>
371 </div> 369 </div>
372 </div> 370 </div>
373 371
374 372
375 </body> 373 </body>
OLDNEW
« third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html ('K') | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-shrink-to-fit.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-auto-margins-alignment.html » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698