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

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: Patch rebased and refactoring of alignment css rules. Created 4 years, 11 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
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 }
50 48
51 .gridWithAutoRows { 49 .gridWithAutoRows {
52 grid-auto-rows: 40px; 50 grid-auto-rows: 40px;
53 border: 2px solid black; 51 border: 2px solid black;
54 height: 50px; 52 height: 50px;
55 width: 20px; 53 width: 20px;
56 position: relative; 54 position: relative;
57 } 55 }
58 56
59 .stretch {
60 align-self: stretch;
61 justify-self: stretch;
62 }
63
64 .stretchedGrid { grid-auto-columns: auto; } 57 .stretchedGrid { grid-auto-columns: auto; }
65 58
66 .gridRowColumnGaps { 59 .gridRowColumnGaps {
67 grid-row-gap: 17px; 60 grid-row-gap: 17px;
68 grid-column-gap: 21px; 61 grid-column-gap: 21px;
69 } 62 }
70 63
71 div.grid > div { font: 10px/1 Ahem; } 64 div.grid > div { font: 10px/1 Ahem; }
72 65
73 .cell { 66 .cell {
(...skipping 14 matching lines...) Expand all
88 .container { 81 .container {
89 position: relative; 82 position: relative;
90 } 83 }
91 84
92 </style> 85 </style>
93 86
94 <body onload="checkLayout('.grid')"> 87 <body onload="checkLayout('.grid')">
95 88
96 <!-- Check that gutters do not interfere with self alignment computation. --> 89 <!-- Check that gutters do not interfere with self alignment computation. -->
97 <div class="container"> 90 <div class="container">
98 <div class="grid grid100And200 alignItemsCenter gridRowColumnGaps" data-expe cted-width="221" data-expected-height="417"> 91 <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> 92 <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> 93 <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 > 94 <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> 95 <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> 96 </div>
104 </div> 97 </div>
105 98
106 <div class="container"> 99 <div class="container">
107 <div class="grid grid100And200 verticalLR gridRowColumnGaps" data-expected-w idth="417" data-expected-height="221"> 100 <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"> 101 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset -x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
109 </div> 102 </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 "> 103 <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> 104 <div class="item"></div>
112 </div> 105 </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 "> 106 <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> 107 <div class="item"></div>
115 </div> 108 </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"> 109 <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> 110 <div class="item"></div>
118 </div> 111 </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"> 112 <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> 113 <div class="item"></div>
121 </div> 114 </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"> 115 <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> 116 <div class="item"></div>
124 </div> 117 </div>
125 </div> 118 </div>
126 </div> 119 </div>
127 120
128 <div class="container"> 121 <div class="container">
129 <div class="grid grid100And200 directionRTL gridRowColumnGaps" data-expecte d-width="221" data-expected-height="417"> 122 <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> 123 <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> 124 <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> 125 <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 > 126 <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> 127 <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> 128 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="80 " data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
136 </div> 129 </div>
137 </div> 130 </div>
138 131
139 <!-- Check that gutters do not interfere with align-content computation. --> 132 <!-- 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> 260 <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> 261 <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> 262 <div class="secondRowSecondColumn" data-offset-x="303" data-offset-y="60 " data-expected-width="40" data-expected-height="20"></div>
270 </div> 263 </div>
271 </div> 264 </div>
272 265
273 <!-- Check that gutters do not interfere with align&justify computation when hav ing border, padding and margins. --> 266 <!-- Check that gutters do not interfere with align&justify computation when hav ing border, padding and margins. -->
274 <div class="container"> 267 <div class="container">
275 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br> 268 <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> 269 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"> 270 <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> 271 <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> 272 <div class="directionLTR selfStretch firstRowSecondColumn" data-offset-x ="151" data-offset-y="10" data-expected-width="200" data-expected-height="200"> </div>
280 <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30 " data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v> 273 <div class="directionLTR selfStretch secondRowFirstColumn" data-offset-x ="30" data-offset-y="227" data-expected-width="100" data-expected-height="200"> </div>
281 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="16 7" data-offset-y="231" data-expected-width="20" data-expected-height="40"></div > 274 <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> 275 </div>
283 </div> 276 </div>
284 277
285 <div class="container"> 278 <div class="container">
286 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br> 279 <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> 280 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"> 281 <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 > 282 <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> 283 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x ="151" data-offset-y="10" data-expected-width="200" data-expected-height="200"> </div>
291 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30 " data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v> 284 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x ="30" data-offset-y="227" data-expected-width="100" data-expected-height="200"> </div>
292 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="16 7" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div > 285 <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> 286 </div>
294 </div> 287 </div>
295 288
296 <div class="container"> 289 <div class="container">
297 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br> 290 <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> 291 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"> 292 <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> 293 <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> 294 <div class="selfStretch firstRowSecondColumn" data-offset-x="30" data-o ffset-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> 295 <div class="selfStretch secondRowFirstColumn" data-offset-x="251" data-o ffset-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> 296 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offse t-y="231" data-expected-width="20" data-expected-height="40"></div>
304 </div> 297 </div>
305 </div> 298 </div>
306 299
307 <div class="container"> 300 <div class="container">
308 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br> 301 <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> 302 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"> 303 <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 > 304 <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> 305 <div class="directionRTL selfStretch firstRowSecondColumn" data-offset-x ="30" data-offset-y="10" data-expected-width="200" data-expected-height="200"> </div>
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> 306 <div class="directionRTL selfStretch secondRowFirstColumn" data-offset-x ="251" data-offset-y="227" data-expected-width="100" data-expected-height="200"> </div>
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> 307 <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> 308 </div>
316 </div> 309 </div>
317 310
318 <!-- Check behavior with negative free space --> 311 <!-- Check behavior with negative free space -->
319 <div class="container"> 312 <div class="container">
320 <p>Negative free space. justify-content: start</p> 313 <p>Negative free space. justify-content: start</p>
321 <div class="grid gridWithAutoColumns justifyContentStart gridRowColumnGaps" data-expected-width="14" data-expected-height="44"> 314 <div class="grid gridWithAutoColumns justifyContentStart gridRowColumnGaps" data-expected-width="14" data-expected-height="44">
322 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div> 315 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
323 <div class="cell firstRowSecondColumn" data-offset-x="41" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div> 316 <div class="cell firstRowSecondColumn" data-offset-x="41" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div>
(...skipping 42 matching lines...) Expand 10 before | Expand all | Expand 10 after
366 <p>Negative free space. align-content: end</p> 359 <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"> 360 <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> 361 <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> 362 <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> 363 <div class="cell thirdRowFirstColumn" data-offset-x="0" data-offset-y=" 10" data-expected-width="20" data-expected-height="40"></div>
371 </div> 364 </div>
372 </div> 365 </div>
373 366
374 367
375 </body> 368 </body>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698