OLD | NEW |
---|---|
(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"> | |
jfernandez
2015/09/09 21:07:45
Nit: can we make numbers easier to compute manuall
jfernandez
2015/09/09 21:07:45
Nit: It may be good idea to add some text to be re
svillar
2015/09/10 11:55:45
Actually I chose those on purpose in order to more
| |
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-heçight="40"></div> | |
jfernandez
2015/09/09 21:07:45
heçight ??
svillar
2015/09/10 11:55:44
Ups. will change it
| |
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> | |
jfernandez
2015/09/09 21:07:45
Are we managed correctly this case ? I don't see a
svillar
2015/09/10 11:55:45
Oh because I forgot to add them :)
| |
204 <div class="grid gridAuto20And40 stretchedGrid justifyContentStretch vertica lLR directionRTL" data-expected-width="400" data-expected-height="300"> | |
205 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="225" d ata-expected-width="40" data-expected-height="75"></div> | |
206 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="150" data-expected-width="40" data-expected-height="75"></div> | |
207 <div class="firstRowThirdColumn" data-offset-x="0" data-offset-y="75" da ta-expected-width="40" data-expected-height="75"></div> | |
208 <div class="firstRowFourthColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="40" data-expected-height="75"></div> | |
209 <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="225" data-expected-width="40" data-expected-height="75"></div> | |
210 <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="150 " data-expected-width="40" data-expected-height="75"></div> | |
211 <div class="secondRowThirdColumn" data-offset-x="40" data-offset-y="75" data-expected-width="40" data-expected-height="75"></div> | |
212 <div class="secondRowFourthColumn" data-offset-x="40" data-offset-y="0" data-expected-width="40" data-expected-height="75"></div> | |
213 </div> | |
214 </div> | |
215 | |
216 <div class="container"> | |
217 <p>direction: LTR | justify-content: 'space-evenly'</p> | |
jfernandez
2015/09/09 21:07:45
ditto.
svillar
2015/09/10 11:55:45
Ditto :).
| |
218 <div class="grid gridAuto20And40 justifyContentSpaceEvenly verticalLR direct ionRTL" data-expected-width="400" data-expected-height="300"> | |
219 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="220" 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="60" da ta-expected-width="40" data-expected-height="20"></div> | |
222 <div class="secondRowFirstColumn" data-offset-x="40" data-offset-y="220" data-expected-width="40" data-expected-height="20"></div> | |
223 <div class="secondRowSecondColumn" data-offset-x="40" data-offset-y="140 " data-expected-width="40" data-expected-height="20"></div> | |
224 <div class="secondRowThirdColumn" data-offset-x="40" data-offset-y="60" 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> | |
jfernandez
2015/09/09 21:07:45
ditto.
svillar
2015/09/10 11:55:45
Ditto
| |
230 <div class="grid gridAuto20And40 justifyContentSpaceBetween verticalRL direc tionRTL" 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="320" data-offset-y="280 " data-expected-width="40" data-expected-height="20"></div> | |
236 <div class="secondRowSecondColumn" data-offset-x="320" data-offset-y="18 7" data-expected-width="40" data-expected-height="20"></div> | |
237 <div class="secondRowThirdColumn" data-offset-x="320" data-offset-y="93" data-expected-width="40" data-expected-height="20"></div> | |
238 <div class="secondRowFourthColumn" data-offset-x="320" 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> | |
jfernandez
2015/09/09 21:07:44
ditto.
svillar
2015/09/10 11:55:44
Ditto
| |
244 <div class="grid gridAuto20And40 justifyContentSpaceAround verticalRL direct ionRTL" data-expected-width="400" data-expected-height="300"> | |
245 <div class="firstRowFirstColumn" data-offset-x="360" data-offset-y="215" data-expected-width="40" data-expected-height="20"></div> | |
246 <div class="firstRowSecondColumn" data-offset-x="360" data-offset-y="65" data-expected-width="40" data-expected-height="20"></div> | |
247 <div class="secondRowFirstColumn" data-offset-x="320" data-offset-y="215 " data-expected-width="40" data-expected-height="20"></div> | |
248 <div class="secondRowSecondColumn" data-offset-x="320" data-offset-y="65 " 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"> | |
jfernandez
2015/09/09 21:07:45
I see that stretched items fill the gutters space,
svillar
2015/09/10 11:55:45
Hmm only spanning items should fill the gutters sp
svillar
2015/09/10 13:49:26
How do you see that? Heights and widths do not inc
jfernandez
2015/09/11 08:11:09
Yeah, you are right. It looks correct.
| |
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> | |
OLD | NEW |