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

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 1309513008: [css-grid] Implement grid gutters (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebased patch for landing Created 5 years, 2 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-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 <link href="resources/grid.css" rel="stylesheet">
3 <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>
6 <script src="../../resources/js-test.js"></script>
7 <style>
8 body { margin: 0px; }
9
10 .grid100And200 {
11 grid-template-columns: 100px 100px;
12 grid-template-rows: 200px 200px;
13 width: -webkit-fit-content;
14 position: relative; /* For the <p> comments */
15 }
16
17 .grid50And100 {
18 grid: 50px 50px / 100px 100px;
19 width: 200px;
20 height: 300px;
21 position: relative; /* For the <p> comments */
22 }
23
24 .gridAuto20And40 {
25 grid-auto-columns: 20px;
26 grid-auto-rows: 40px;
27 width: 400px;
28 height: 300px;
29 position: relative; /* For the <p> comments */
30 }
31
32 .gridWithPaddingBorder {
33 grid-template-columns: 100px 200px;
34 grid-template-rows: 200px 200px;
35 padding: 10px 15px 20px 30px;
36 border-width: 5px 10px 15px 20px;
37 border-style: dotted;
38 border-color: blue;
39 width: -webkit-fit-content;
40 position: relative; /* For the <p> comments */
41 }
42
43 .stretch {
44 align-self: stretch;
45 justify-self: stretch;
46 }
47
48 .stretchedGrid { grid-auto-columns: auto; }
49
50 .gridRowColumnGaps {
51 grid-row-gap: 17px;
52 grid-column-gap: 21px;
53 }
54
55 div.grid > div { font: 10px/1 Ahem; }
56
57 .cell {
58 width: 20px;
59 height: 40px;
60 }
61
62 div.gridWithPaddingBorder > div.cell {
63 margin: 4px 8px 12px 16px;
64 }
65
66
67 .container {
68 position: relative;
69 }
70
71 </style>
72
73 <body onload="checkLayout('.grid')">
74
75 <!-- Check that gutters do not interfere with self alignment computation. -->
76 <div class="container">
77 <div class="grid grid100And200 alignItemsCenter gridRowColumnGaps" data-expe cted-width="221" data-expected-height="417">
78 <div class="cell alignSelfAuto firstRowFirstColumn" data-offset-x="0" da ta-offset-y="80" data-expected-width="20" data-expected-height="40"></div>
79 <div class="cell firstRowSecondColumn" data-offset-x="121" data-offset-y ="80" data-expected-width="20" data-expected-height="40"></div>
80 <div class="cell alignSelfSelfStart secondRowFirstColumn" data-offset-x= "0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div >
81 <div class="cell alignSelfSelfEnd secondRowSecondColumn" data-offset-x=" 121" data-offset-y="377" data-expected-width="20" data-expected-height="40"></di v>
82 </div>
83 </div>
84
85 <div class="container">
86 <div class="grid grid100And200 verticalLR gridRowColumnGaps" data-expected-w idth="417" data-expected-height="221">
87 <div class="alignSelfStretch firstRowFirstColumn verticalRL" data-offset -x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
88 </div>
89 <div class="cell alignSelfStart firstRowSecondColumn verticalRL" data-of fset-x="0" data-offset-y="121" data-expected-width="20" data-expected-height="40 ">
90 <div class="item"></div>
91 </div>
92 <div class="cell alignSelfEnd firstRowSecondColumn verticalRL" data-offs et-x="180" data-offset-y="121" data-expected-width="20" data-expected-height="40 ">
93 <div class="item"></div>
94 </div>
95 <div class="cell alignSelfCenter secondRowFirstColumn verticalRL" data-o ffset-x="307" data-offset-y="0" data-expected-width="20" data-expected-height="4 0">
96 <div class="item"></div>
97 </div>
98 <div class="cell alignSelfRight secondRowSecondColumn verticalRL" data-o ffset-x="217" data-offset-y="121" data-expected-width="20" data-expected-height= "40">
99 <div class="item"></div>
100 </div>
101 <div class="cell alignSelfLeft secondRowSecondColumn verticalRL" data-of fset-x="217" data-offset-y="121" data-expected-width="20" data-expected-height=" 40">
102 <div class="item"></div>
103 </div>
104 </div>
105 </div>
106
107 <div class="container">
108 <div class="grid grid100And200 directionRTL gridRowColumnGaps" data-expecte d-width="221" data-expected-height="417">
109 <div class="alignSelfStretch firstRowFirstColumn" data-offset-x="121" d ata-offset-y="0" data-expected-width="100" data-expected-height="200"></div>
110 <div class="cell alignSelfStart firstRowSecondColumn" data-offset-x="80 " data-offset-y="0" data-expected-width="20" data-expected-height="40"></div>
111 <div class="cell alignSelfEnd firstRowSecondColumn" data-offset-x="80" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div>
112 <div class="cell alignSelfCenter secondRowFirstColumn" data-offset-x="2 01" data-offset-y="297" data-expected-width="20" data-expected-height="40"></div >
113 <div class="cell alignSelfRight secondRowSecondColumn" data-offset-x="8 0" data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
114 <div class="cell alignSelfLeft secondRowSecondColumn" data-offset-x="80 " data-offset-y="217" data-expected-width="20" data-expected-height="40"></div>
115 </div>
116 </div>
117
118 <!-- Check that gutters do not interfere with align-content computation. -->
119 <div class="container">
120 <p>direction: LTR | align-content: 'center'</p>
121 <div class="grid grid50And100 alignContentCenter gridRowColumnGaps" data-exp ected-width="200" data-expected-height="300">
122 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="4 2" data-expected-width="20" data-expected-height="40"></div>
123 <div class="firstRowSecondColumn" data-offset-x="71" data-offset-y="42" data-expected-width="50" data-expected-height="100"></div>
124 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="159" data-expected-width="50" data-expected-height="100"></div>
125 <div class="cell secondRowSecondColumn" data-offset-x="71" data-offset-y ="159" data-expected-width="20" data-expected-height="40"></div>
126 </div>
127 </div>
128
129 <div class="container">
130 <p>direction: LTR | align-content: 'right'</p>
131 <div class="grid grid50And100 alignContentRight gridRowColumnGaps" data-expe cted-width="200" data-expected-height="300">
132 <div class="cell firstRowFirstColumn" data-offset-x="0" data-offset-y="0 " data-expected-width="20" data-expected-height="40"></div>
133 <div class="firstRowSecondColumn" data-offset-x="71" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
134 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
135 <div class="cell secondRowSecondColumn" data-offset-x="71" data-offset-y ="117" data-expected-width="20" data-expected-height="40"></div>
136 </div>
137 </div>
138
139 <div class="container">
140 <p>direction: RTL | align-content: 'right'</p>
141 <div class="grid grid50And100 directionRTL alignContentRight gridRowColumnGa ps" data-expected-width="200" data-expected-height="300">
142 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
143 <div class="firstRowSecondColumn" data-offset-x="79" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
144 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="117 " data-expected-width="50" data-expected-height="100"></div>
145 <div class="cell secondRowSecondColumn" data-offset-x="109" data-offset- y="117" data-expected-width="20" data-expected-height="40"></div>
146 </div>
147 </div>
148
149 <div class="container">
150 <p>direction: RTL | align-content: 'start'</p>
151 <div class="grid grid50And100 directionRTL alignContentStart gridRowColumnGa ps" data-expected-width="200" data-expected-height="300">
152 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
153 <div class="firstRowSecondColumn" data-offset-x="79" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
154 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="117 " data-expected-width="50" data-expected-height="100"></div>
155 <div class="cell secondRowSecondColumn" data-offset-x="109" data-offset- y="117" data-expected-width="20" data-expected-height="40"></div>
156 </div>
157 </div>
158
159 <!-- Check that gutters do not interfere with justify-content computation. -->
160 <div class="container">
161 <p>direction: LTR | justify-content: 'center'</p>
162 <div class="grid grid50And100 justifyContentCenter gridRowColumnGaps" data-e xpected-width="200" data-expected-height="300">
163 <div class="cell firstRowFirstColumn" data-offset-x="40" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
164 <div class="firstRowSecondColumn" data-offset-x="111" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
165 <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
166 <div class="cell secondRowSecondColumn" data-offset-x="111" data-offset- y="117" data-expected-width="20" data-expected-height="40"></div>
167 </div>
168 </div>
169
170 <div class="container">
171 <p>direction: LTR | justify-content: 'end'</p>
172 <div class="grid grid50And100 justifyContentEnd gridRowColumnGaps" data-expe cted-width="200" data-expected-height="300">
173 <div class="cell firstRowFirstColumn" data-offset-x="79" data-offset-y=" 0" data-expected-width="20" data-expected-height="40"></div>
174 <div class="firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div>
175 <div class="secondRowFirstColumn" data-offset-x="79" data-offset-y="117" data-expected-width="50" data-expected-height="100"></div>
176 <div class="cell secondRowSecondColumn" data-offset-x="150" data-offset- y="117" data-expected-width="20" data-expected-height="40"></div>
177 </div>
178 </div>
179
180 <div class="container">
181 <p>direction: RTL | justify-content: 'end'</p>
182 <div class="grid grid50And100 directionRTL justifyContentRight gridRowColumn Gaps" data-expected-width="200" data-expected-height="300">
183 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
184 <div class="firstRowSecondColumn" data-offset-x="79" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
185 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="117 " data-expected-width="50" data-expected-height="100"></div>
186 <div class="cell secondRowSecondColumn" data-offset-x="109" data-offset- y="117" data-expected-width="20" data-expected-height="40"></div>
187 </div>
188 </div>
189
190 <div class="container">
191 <p>direction: RTL | justify-content: 'start'</p>
192 <div class="grid grid50And100 directionRTL justifyContentStart gridRowColumn Gaps" data-expected-width="200" data-expected-height="300">
193 <div class="cell firstRowFirstColumn" data-offset-x="180" data-offset-y= "0" data-expected-width="20" data-expected-height="40"></div>
194 <div class="firstRowSecondColumn" data-offset-x="79" data-offset-y="0" d ata-expected-width="50" data-expected-height="100"></div>
195 <div class="secondRowFirstColumn" data-offset-x="150" data-offset-y="117 " data-expected-width="50" data-expected-height="100"></div>
196 <div class="cell secondRowSecondColumn" data-offset-x="109" data-offset- y="117" data-expected-width="20" data-expected-height="40"></div>
197 </div>
198 </div>
199
200 <!-- Check that gutters do not interfere with vertical justify-content computati on. -->
201
202 <div class="container">
203 <p>direction: RTL | justify-content: 'stretch'</p>
204 <div class="grid gridAuto20And40 stretchedGrid justifyContentStretch vertica lLR directionRTL gridRowColumnGaps" data-expected-width="400" data-expected-heig ht="300">
205 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="241" d ata-expected-width="40" data-expected-height="59"></div>
206 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="161" data-expected-width="40" data-expected-height="59"></div>
207 <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="80" da ta-expected-width="40" data-expected-height="60"></div>
208 <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="40" data-expected-height="59"></div>
209 <div class="secondRowFirstColumn" data-offset-x="57" data-offset-y="241" data-expected-width="40" data-expected-height="59"></div>
210 <div class="secondRowSecondColumn" data-offset-x="57" data-offset-y="161 " data-expected-width="40" data-expected-height="59"></div>
211 <div class="secondRowThirdColumn" data-offset-x="57" data-offset-y="80" data-expected-width="40" data-expected-height="60"></div>
212 <div class="secondRowFourthColumn" data-offset-x="57" data-offset-y="0" data-expected-width="40" data-expected-height="59"></div>
213 </div>
214 </div>
215
216 <div class="container">
217 <p>direction: LTR | justify-content: 'space-evenly'</p>
218 <div class="grid gridAuto20And40 justifyContentSpaceEvenly verticalLR direct ionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
219 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="231" d ata-expected-width="40" data-expected-height="20"></div>
220 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="140" data-expected-width="40" data-expected-height="20"></div>
221 <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="50" da ta-expected-width="40" data-expected-height="20"></div>
222 <div class="secondRowFirstColumn" data-offset-x="57" data-offset-y="231" data-expected-width="40" data-expected-height="20"></div>
223 <div class="secondRowSecondColumn" data-offset-x="57" data-offset-y="140 " data-expected-width="40" data-expected-height="20"></div>
224 <div class="secondRowThirdColumn" data-offset-x="57" data-offset-y="50" data-expected-width="40" data-expected-height="20"></div>
225 </div>
226 </div>
227
228 <div class="container">
229 <p>direction: LTR | justify-content: 'space-between'</p>
230 <div class="grid gridAuto20And40 justifyContentSpaceBetween verticalRL direc tionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
231 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="280" data-expected-width="40" data-expected-height="20"></div>
232 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="187 " data-expected-width="40" data-expected-height="20"></div>
233 <div class="firstRowThirdColumn" data-offset-x="360" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div>
234 <div class="firstRowFourthColumn" data-offset-x="360" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
235 <div class="secondRowFirstColumn" data-offset-x="303" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div>
236 <div class="secondRowSecondColumn" data-offset-x="303" data-offset-y="18 7" data-expected-width="40" data-expected-height="20"></div>
237 <div class="secondRowThirdColumn" data-offset-x="303" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div>
238 <div class="secondRowFourthColumn" data-offset-x="303" data-offset-y="0" data-expected-width="40" data-expected-height="20"></div>
239 </div>
240 </div>
241
242 <div class="container">
243 <p>direction: LTR | justify-content: 'space-around'</p>
244 <div class="grid gridAuto20And40 justifyContentSpaceAround verticalRL direct ionRTL gridRowColumnGaps" data-expected-width="400" data-expected-height="300">
245 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div>
246 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="60" data-expected-width="40" data-expected-height="20"></div>
247 <div class="secondRowFirstColumn" data-offset-x="303" data-offset-y="220 " data-expected-width="40" data-expected-height="20"></div>
248 <div class="secondRowSecondColumn" data-offset-x="303" data-offset-y="60 " data-expected-width="40" data-expected-height="20"></div>
249 </div>
250 </div>
251
252 <!-- Check that gutters do not interfere with align&justify computation when hav ing border, padding and margins. -->
253 <div class="container">
254 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br>
255 direction: LTR (parall) | align-items: 'self-start' | justify-items: 'se lf-start'</p>
256 <div class="grid gridWithPaddingBorder directionLTR itemsSelfStart gridRowCo lumnGaps" data-expected-width="396" data-expected-height="467">
257 <div class="directionLTR cell firstRowFirstColumn" data-offset-x="46 " data-offset-y="14" data-expected-width="20" data-expected-height="40"></div>
258 <div class="directionLTR stretch firstRowSecondColumn" data-offset-x="15 1" data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v>
259 <div class="directionLTR stretch secondRowFirstColumn" data-offset-x="30 " data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v>
260 <div class="directionLTR cell secondRowSecondColumn" data-offset-x="16 7" data-offset-y="231" data-expected-width="20" data-expected-height="40"></div >
261 </div>
262 </div>
263
264 <div class="container">
265 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br>
266 direction: LTR (ortho) | align-items: 'self-end' | justify-items: 'self- end'</p>
267 <div class="grid gridWithPaddingBorder directionLTR itemsSelfEnd gridRowColu mnGaps" data-expected-width="396" data-expected-height="467">
268 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="46 " data-offset-y="158" data-expected-width="20" data-expected-height="40"></div >
269 <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="15 1" data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v>
270 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="30 " data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v>
271 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="16 7" data-offset-y="375" data-expected-width="20" data-expected-height="40"></div >
272 </div>
273 </div>
274
275 <div class="container">
276 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br>
277 direction: RTL | align-items: 'right' | justify-items: 'right'</p>
278 <div class="grid gridWithPaddingBorder directionRTL itemsRight gridRowColumn Gaps" data-expected-width="396" data-expected-height="467">
279 <div class="cell firstRowFirstColumn" data-offset-x="323" data-offse t-y="14" data-expected-width="20" data-expected-height="40"></div>
280 <div class="stretch firstRowSecondColumn" data-offset-x="30" data-offse t-y="10" data-expected-width="200" data-expected-height="200"></div>
281 <div class="stretch secondRowFirstColumn" data-offset-x="251" data-offse t-y="227" data-expected-width="100" data-expected-height="200"></div>
282 <div class="cell secondRowSecondColumn" data-offset-x="202" data-offse t-y="231" data-expected-width="20" data-expected-height="40"></div>
283 </div>
284 </div>
285
286 <div class="container">
287 <p>border: 5px 10px 15px 20px | padding: 10px 15px 20px 30px | margin: 4px 8 px 12px 16px<br>
288 direction: RTL (parall) | align-items: 'self-start' | justify-items: 'se lf-start'</p>
289 <div class="grid gridWithPaddingBorder directionRTL itemsSelfStart gridRowCo lumnGaps" data-expected-width="396" data-expected-height="467">
290 <div class="directionRTL cell firstRowFirstColumn" data-offset-x="32 3" data-offset-y="14" data-expected-width="20" data-expected-height="40"></div >
291 <div class="directionRTL stretch firstRowSecondColumn" data-offset-x="30 " data-offset-y="10" data-expected-width="200" data-expected-height="200"></di v>
292 <div class="directionRTL stretch secondRowFirstColumn" data-offset-x="25 1" data-offset-y="227" data-expected-width="100" data-expected-height="200"></di v>
293 <div class="directionRTL cell secondRowSecondColumn" data-offset-x="20 2" data-offset-y="231" data-expected-width="20" data-expected-height="40"></di v>
294 </div>
295 </div>
296
297 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-justify-margin-border-padding-vertical-rl.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-alignment-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698