OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <link href="resources/grid.css" rel="stylesheet"> | |
5 <script src="../../resources/check-layout.js"></script> | |
6 <style> | |
7 body { | |
8 margin: 0; | |
9 } | |
10 | |
11 .grid { | |
12 grid-template-columns: 100px 100px; | |
13 grid-template-rows: 200px 200px; | |
14 width: -webkit-fit-content; | |
15 margin-bottom: 20px; | |
16 } | |
17 | |
18 .cell { | |
Julien - ping for review
2014/10/08 15:21:47
Let's try better names:
cell -> widthAndHeightSet
jfernandez
2014/10/12 22:40:27
Done.
| |
19 width: 20px; | |
20 height: 40px; | |
21 } | |
22 | |
23 .cell1 { | |
24 width: 20px; | |
25 } | |
26 | |
27 .cell2 { | |
28 height: 40px; | |
29 } | |
30 | |
31 .item { | |
32 width: 8px; | |
33 height: 16px; | |
34 background: black; | |
35 } | |
36 | |
37 .alignItemsAuto { | |
38 align-items: auto; | |
39 } | |
40 | |
41 .alignItemsStretch { | |
42 align-items: stretch; | |
43 } | |
44 | |
45 .alignItemsStart { | |
46 align-items: start; | |
47 } | |
48 | |
49 .alignSelfAuto { | |
50 align-self: auto; | |
51 } | |
52 | |
53 .alignSelfStretch { | |
54 align-self: stretch; | |
55 } | |
56 | |
57 .alignSelfStart { | |
58 align-self: start; | |
59 } | |
60 | |
61 .justifyItemsAuto { | |
62 justify-items: auto; | |
63 } | |
64 | |
65 .justifyItemsStretch { | |
66 justify-items: stretch; | |
67 } | |
68 | |
69 .justifyItemsStart { | |
70 justify-items: start; | |
71 } | |
72 | |
73 .justifySelfAuto { | |
74 justify-self: auto; | |
75 } | |
76 | |
77 .justifySelfStretch { | |
78 justify-self: stretch; | |
79 } | |
80 | |
81 .justifySelfStart { | |
82 justify-self: start; | |
83 } | |
84 </style> | |
85 </head> | |
86 <body onload="checkLayout('.grid')"> | |
87 | |
88 <p>This test checks that the 'stretch' value is applied correctly for 'align' an d 'justify' properties.</p> | |
89 | |
90 <div style="position: relative"> | |
91 <div class="grid" data-expected-width="200" data-expected-height="400"> | |
92 <div class="alignSelfStretch justifySelfStart firstRowFirstColumn" data- offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="2 00"></div> | |
93 <div class="cell alignSelfStretch justifySelfStart firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-he ight="40"></div> | |
94 <div class="cell1 alignSelfStretch justifySelfStart secondRowFirstColumn " data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-h eight="200"></div> | |
95 <div class="cell2 alignSelfStretch justifySelfStart secondRowSecondColum n" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expect ed-height="40"></div> | |
96 </div> | |
97 </div> | |
98 | |
99 <div style="position: relative"> | |
100 <div class="grid" data-expected-width="200" data-expected-height="400"> | |
101 <div class="alignSelfStart justifySelfStretch firstRowFirstColumn" data- offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="0 "></div> | |
102 <div class="cell alignSelfStart justifySelfStretch firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-he ight="40"></div> | |
103 <div class="cell1 alignSelfStart justifySelfStretch secondRowFirstColumn " data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-h eight="0"></div> | |
104 <div class="cell2 alignSelfStart justifySelfStretch secondRowSecondColum n" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expect ed-height="40"></div> | |
105 </div> | |
106 </div> | |
107 | |
108 <div style="position: relative"> | |
109 <div class="grid" data-expected-width="200" data-expected-height="400"> | |
110 <div class="alignSelfStretch justifySelfStretch firstRowFirstColumn" dat a-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height= "200"></div> | |
111 <div class="cell alignSelfStretch justifySelfStretch firstRowSecondColum n" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected- height="40"></div> | |
112 <div class="cell1 alignSelfStretch justifySelfStretch secondRowFirstColu mn" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected -height="200"></div> | |
113 <div class="cell2 alignSelfStretch justifySelfStretch secondRowSecondCol umn" data-offset-x="100" data-offset-y="200" data-expected-width="100" data-expe cted-height="40"></div> | |
114 </div> | |
115 </div> | |
116 | |
117 <div style="position: relative"> | |
118 <div class="grid alignItemsStretch justifyItemsStart" data-expected-width="2 00" data-expected-height="400"> | |
119 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="200"></div> | |
120 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div> | |
121 <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y= "200" data-expected-width="20" data-expected-height="200"></div> | |
122 <div class="cell2 secondRowSecondColumn" data-offset-x="100" data-offset -y="200" data-expected-width="100" data-expected-height="40"></div> | |
123 </div> | |
124 </div> | |
125 | |
126 <div style="position: relative"> | |
127 <div class="grid alignItemsStart justifyItemsStretch" data-expected-width="2 00" data-expected-height="400"> | |
128 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="0"></div> | |
129 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div> | |
130 <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y= "200" data-expected-width="20" data-expected-height="0"></div> | |
131 <div class="cell2 secondRowSecondColumn" data-offset-x="100" data-offset -y="200" data-expected-width="100" data-expected-height="40"></div> | |
132 </div> | |
133 </div> | |
134 | |
135 <div style="position: relative"> | |
136 <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width= "200" data-expected-height="400"> | |
137 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="200"></div> | |
138 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div> | |
139 <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y= "200" data-expected-width="20" data-expected-height="200"></div> | |
140 <div class="cell2 secondRowSecondColumn" data-offset-x="100" data-offset -y="200" data-expected-width="100" data-expected-height="40"></div> | |
141 </div> | |
142 </div> | |
143 | |
144 <div style="position: relative"> | |
145 <div class="grid alignItemsAuto justifyItemsAuto" data-expected-width="200" data-expected-height="400"> | |
146 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="200"></div> | |
147 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div> | |
148 <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y= "200" data-expected-width="20" data-expected-height="200"></div> | |
149 <div class="cell2 secondRowSecondColumn" data-offset-x="100" data-offset -y="200" data-expected-width="100" data-expected-height="40"></div> | |
150 </div> | |
151 </div> | |
152 | |
153 <div style="position: relative"> | |
154 <div class="grid" data-expected-width="200" data-expected-height="400"> | |
155 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="200"></div> | |
156 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div> | |
157 <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y= "200" data-expected-width="20" data-expected-height="200"></div> | |
158 <div class="cell2 secondRowSecondColumn" data-offset-x="100" data-offset -y="200" data-expected-width="100" data-expected-height="40"></div> | |
159 </div> | |
160 </div> | |
161 | |
162 <div style="position: relative"> | |
163 <div class="grid" data-expected-width="200" data-expected-height="400"> | |
164 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="200"></div> | |
165 <div class="firstRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="200"></div> | |
166 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="100" data-expected-height="200"></div> | |
167 <div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="20 0" data-expected-width="100" data-expected-height="200"></div> | |
168 </div> | |
169 </div> | |
170 | |
171 <!-- RTL direction (it should not affect the block-flow direction). --> | |
172 <div style="position: relative"> | |
173 <div class="grid directionRTL alignItemsStretch justifyItemsStretch" data-ex pected-width="200" data-expected-height="400"> | |
174 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="100" data-expected-height="200"></div> | |
175 <div class="cell firstRowSecondColumn" data-offset-x="100" data-offset-y ="0" data-expected-width="20" data-expected-height="40"></div> | |
176 <div class="cell1 secondRowFirstColumn" data-offset-x="0" data-offset-y= "200" data-expected-width="20" data-expected-height="200"></div> | |
177 <div class="cell2 secondRowSecondColumn" data-offset-x="100" data-offset -y="200" data-expected-width="100" data-expected-height="40"></div> | |
178 </div> | |
179 </div> | |
180 | |
181 <!-- RTL direction (it should not affect the block-flow) with opposite direction s grid container vs grid item. --> | |
182 <div style="position: relative"> | |
183 <div class="grid alignItemsStretch justifyItemsStretch" data-expected-width= "200" data-expected-height="400"> | |
184 <div class="firstRowFirstColumn directionRTL" data-offset-x="0" data-of fset-y="0" data-expected-width="100" data-expected-height="200"></div> | |
185 <div class="cell firstRowSecondColumn directionRTL" data-offset-x="100" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> | |
186 <div class="cell1 secondRowFirstColumn directionRTL" data-offset-x="0" data-offset-y="200" data-expected-width="20" data-expected-height="200"></div> | |
187 <div class="cell2 secondRowSecondColumn directionRTL" data-offset-x="10 0" data-offset-y="200" data-expected-width="100" data-expected-height="40"></div > | |
188 </div> | |
189 </div> | |
190 | |
191 <!-- Vertical RL writing mode. --> | |
192 <div style="position: relative"> | |
193 <div class="grid verticalRL alignItemsStretch justifyItemsStretch" data-expe cted-width="400" data-expected-height="200"> | |
194 <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" d ata-expected-width="200" data-expected-height="100"></div> | |
195 <div class="cell firstRowSecondColumn" data-offset-x="380" data-offset-y ="100" data-expected-width="20" data-expected-height="40"></div> | |
196 <div class="cell1 secondRowFirstColumn" data-offset-x="180" data-offset- y="0" data-expected-width="20" data-expected-height="100"></div> | |
197 <div class="cell2 secondRowSecondColumn" data-offset-x="0" data-offset-y ="100" data-expected-width="200" data-expected-height="40"></div> | |
198 </div> | |
199 </div> | |
200 | |
201 <div style="position: relative"> | |
202 <div class="grid verticalRL" data-expected-width="400" data-expected-height= "200"> | |
203 <div class="firstRowFirstColumn" data-offset-x="200" data-offset-y="0" d ata-expected-width="200" data-expected-height="100"></div> | |
204 <div class="firstRowSecondColumn" data-offset-x="200" data-offset-y="100 " data-expected-width="200" data-expected-height="100"></div> | |
205 <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="0" da ta-expected-width="200" data-expected-height="100"></div> | |
206 <div class="secondRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> | |
207 </div> | |
208 </div> | |
209 | |
210 <!-- Vertical LR writing mode. --> | |
211 <div style="position: relative"> | |
212 <div class="grid verticalLR alignItemsStretch justifyItemsStretch" data-expe cted-width="400" data-expected-height="200"> | |
213 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="200" data-expected-height="100"></div> | |
214 <div class="cell firstRowSecondColumn" data-offset-x="0" data-offset-y=" 100" data-expected-width="20" data-expected-height="40"></div> | |
215 <div class="cell1 secondRowFirstColumn" data-offset-x="200" data-offset- y="0" data-expected-width="20" data-expected-height="100"></div> | |
216 <div class="cell2 secondRowSecondColumn" data-offset-x="200" data-offset -y="100" data-expected-width="200" data-expected-height="40"></div> | |
217 </div> | |
218 </div> | |
219 | |
220 <div style="position: relative"> | |
221 <div class="grid verticalLR" data-expected-width="400" data-expected-height= "200"> | |
222 <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" dat a-expected-width="200" data-expected-height="100"></div> | |
223 <div class="firstRowSecondColumn" data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100"></div> | |
224 <div class="secondRowFirstColumn" data-offset-x="200" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div> | |
225 <div class="secondRowSecondColumn" data-offset-x="200" data-offset-y="10 0" data-expected-width="200" data-expected-height="100"></div> | |
226 </div> | |
227 </div> | |
228 | |
229 </body> | |
230 </html> | |
OLD | NEW |