[css-align] Implement the place-items shorthand
[WebKit-https.git] / LayoutTests / css3 / parse-place-items.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #placeItemsNormal {
6   place-items: normal;
7 }
8 #placeItemsCenterAuto {
9   place-items: center auto;
10 }
11 #placeItemsBaseline {
12   place-items: baseline;
13 }
14 #placeItemsFirstBaseline {
15   place-items: first baseline;
16 }
17 #placeItemsLastBaseline {
18   place-items: last baseline;
19 }
20 #placeItemsStart {
21   place-items: start;
22 }
23 #placeItemsFlexStart {
24   place-items: flex-start;
25 }
26 #placeItemsEnd {
27   place-items: end;
28 }
29 #placeItemsSelfStart {
30   place-items: self-start;
31 }
32 #placeItemsStretch {
33   place-items: stretch;
34 }
35 #placeItemsStartEnd {
36   place-items: start end;
37 }
38 #placeItemsStartSelfEnd {
39   place-items: start self-end;
40 }
41 #placeItemsStartBaseline {
42   place-items: start baseline;
43 }
44
45 <!-- Invalid CSS cases -->
46 #placeItemsEmpty {
47   place-items:;
48 }
49 #placeItemsAuto {
50   place-items: auto;
51 }
52 #placeItemsNone {
53   place-items: none;
54 }
55 #placeItemsSafe {
56   place-items: safe;
57 }
58 #placeItemsStartSafe {
59   place-items: start safe;
60 }
61 #placeItemsStartEndLeft {
62   place-items: start end left;
63 }
64 </style>
65 <script src="../resources/testharness.js"></script>
66 <script src="../resources/testharnessreport.js"></script>
67 <script src="resources/alignment-parsing-utils-th.js"></script>
68 </head>
69 <body>
70   <p>Test to verify that the new place-items alignment shorthand is parsed as expected and correctly sets the longhand values.</p>
71   <div id="log"></div>
72
73   <div id="placeItemsNormal"></div>
74   <div id="placeItemsCenterAuto"></div>
75   <div id="placeItemsBaseline"></div>
76   <div id="placeItemsFirstBaseline"></div>
77   <div id="placeItemsLastBaseline"></div>
78   <div id="placeItemsStart"></div>
79   <div id="placeItemsFlexStart"></div>
80   <div id="placeItemsEnd"></div>
81   <div id="placeItemsSelfStart"></div>
82   <div id="placeItemsStretch"></div>
83   <div id="placeItemsStartEnd"></div>
84   <div id="placeItemsStartSelfEnd"></div>
85   <div id="placeItemsStartBaseline"></div>
86
87   <div id="placeItemsEmpty"></div>
88   <div id="placeItemsAuto"></div>
89   <div id="placeItemsNone"></div>
90   <div id="placeItemsSafe"></div>
91   <div id="placeItemsStartSafe"></div>
92   <div id="placeItemsBaselineSafe"></div>
93   <div id="placeItemsStartEndLeft"></div>
94 <script>
95 function checkPlaceItemsValues(element, value, alignValue, justifyValue) {
96   var res = value.split(" ");
97   if (res.length < 2)
98     res[1] = res[0];
99   checkValues(element, "alignItems", "align-items", res[0], alignValue);
100   checkValues(element, "justifyItems", "justify-items", res[1], justifyValue);
101 }
102
103 function checkPlaceItemsValuesJS(value, alignValue, justifyValue)
104 {
105   element = document.createElement("div");
106   document.body.appendChild(element);
107   element.style.placeItems = value;
108   checkValues(element, "placeItems", "place-items", value, alignValue + ' ' + justifyValue)
109   checkPlaceItemsValues(element, value, alignValue, justifyValue)
110 }
111
112 function checkPlaceItemsValuesBadJS(value)
113 {
114   element.style.placeItems = "";
115   element.style.placeItems = value;
116   checkPlaceItemsValues(element, "", "normal", "normal")
117 }
118
119 test(function() {
120   checkValues(placeItemsNormal, "placeItems", "place-items", "", "normal normal");
121   checkPlaceItemsValues(placeItemsNormal, "", "normal", "normal");
122 }, "Test getting the Computed Value of place-items's longhand properties when setting 'normal' value through CSS.");
123
124 test(function() {
125   checkValues(placeItemsCenterAuto, "placeItems", "place-items", "", "center normal");
126   checkPlaceItemsValues(placeItemsCenterAuto, "", "center", "normal");
127 }, "Test getting the Computed Value of place-items's longhand properties when setting 'center auto' value through CSS.");
128
129 test(function() {
130   checkValues(placeItemsBaseline, "placeItems", "place-items", "", "baseline baseline");
131   checkPlaceItemsValues(placeItemsBaseline, "", "baseline", "baseline");
132 }, "Test getting the Computed Value of place-items's longhand properties when setting 'baseline' value through CSS.");
133
134 test(function() {
135   checkValues(placeItemsFirstBaseline, "placeItems", "place-items", "", "baseline baseline");
136   checkPlaceItemsValues(placeItemsFirstBaseline, "", "baseline", "baseline");
137 }, "Test getting the Computed Value of place-items's longhand properties when setting 'first baseline' value through CSS.");
138
139 test(function() {
140   checkValues(placeItemsLastBaseline, "placeItems", "place-items", "", "last baseline last baseline");
141   checkPlaceItemsValues(placeItemsLastBaseline, "", "last baseline", "last baseline");
142 }, "Test getting the Computed Value of place-items's longhand properties when setting 'last baseline' value through CSS.");
143
144 test(function() {
145   checkValues(placeItemsStart, "placeItems", "place-items", "", "start start");
146   checkPlaceItemsValues(placeItemsStart, "", "start", "start");
147 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start' value through CSS.");
148
149 test(function() {
150   checkValues(placeItemsFlexStart, "placeItems", "place-items", "", "flex-start flex-start");
151   checkPlaceItemsValues(placeItemsFlexStart, "", "flex-start", "flex-start");
152 }, "Test getting the Computed Value of place-items's longhand properties when setting 'flex-start' value through CSS.");
153
154 test(function() {
155   checkValues(placeItemsEnd, "placeItems", "place-items", "", "end end");
156   checkPlaceItemsValues(placeItemsEnd, "", "end", "end");
157 }, "Test getting the Computed Value of place-items's longhand properties when setting 'end' value through CSS.");
158
159 test(function() {
160   checkValues(placeItemsSelfStart, "placeItems", "place-items", "", "self-start self-start");
161   checkPlaceItemsValues(placeItemsSelfStart, "", "self-start", "self-start");
162 }, "Test getting the Computed Value of place-items's longhand properties when setting 'self-start' value through CSS.");
163
164 test(function() {
165   checkValues(placeItemsStretch, "placeItems", "place-items", "", "stretch stretch");
166   checkPlaceItemsValues(placeItemsStretch, "", "stretch", "stretch");
167 }, "Test getting the Computed Value of place-items's longhand properties when setting 'stretch' value through CSS.");
168
169 test(function() {
170   checkValues(placeItemsStartEnd, "placeItems", "place-items", "", "start end");
171   checkPlaceItemsValues(placeItemsStartEnd, "", "start", "end");
172 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start end' value through CSS.");
173
174 test(function() {
175   checkValues(placeItemsStartSelfEnd, "placeItems", "place-items", "", "start self-end");
176   checkPlaceItemsValues(placeItemsStartSelfEnd, "", "start", "self-end");
177 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start self-end' value through CSS.");
178
179 test(function() {
180   checkValues(placeItemsStartBaseline, "placeItems", "place-items", "", "start baseline");
181   checkPlaceItemsValues(placeItemsStartBaseline, "", "start", "baseline");
182 }, "Test getting the Computed Value of place-items's longhand properties when setting 'start baseline' value through CSS.");
183
184 test(function() {
185   checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
186   checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
187 }, "Test setting '' as incorrect value through CSS.");
188
189 test(function() {
190   checkValues(placeItemsAuto, "placeItems", "place-items", "", "normal normal");
191   checkPlaceItemsValues(placeItemsAuto, "", "normal", "normal");
192 }, "Test setting 'auto' as incorrect value through CSS.");
193
194 test(function() {
195   checkValues(placeItemsNone, "placeItems", "place-items", "", "normal normal");
196   checkPlaceItemsValues(placeItemsNone, "", "normal", "normal");
197 }, "Test setting 'none' as incorrect value through CSS.");
198
199 test(function() {
200   checkValues(placeItemsSafe, "placeItems", "place-items", "", "normal normal");
201   checkPlaceItemsValues(placeItemsSafe, "", "normal", "normal");
202 }, "Test setting 'safe' as incorrect value through CSS.");
203
204 test(function() {
205   checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal");
206   checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
207 }, "Test setting 'start safe' as incorrect value through CSS.");
208
209 test(function() {
210   checkValues(placeItemsStartSafe, "placeItems", "place-items", "", "normal normal");
211   checkPlaceItemsValues(placeItemsStartSafe, "", "normal", "normal");
212 }, "Test setting 'baseline safe' as incorrect value through CSS.");
213
214 test(function() {
215   checkValues(placeItemsStartEndLeft, "placeItems", "place-items", "", "normal normal");
216   checkPlaceItemsValues(placeItemsStartEndLeft, "", "normal", "normal");
217 }, "Test setting 'start end left' as incorrect value through CSS.");
218
219 test(function() {
220   checkPlaceItemsValuesJS("center", "center", "center");
221   checkPlaceItemsValuesJS("center start", "center", "start");
222   checkPlaceItemsValuesJS("self-start end", "self-start", "end");
223   checkPlaceItemsValuesJS("normal end", "normal", "end");
224 }, "Test setting values through JS.");
225
226 test(function() {
227   checkPlaceItemsValuesBadJS("auto normal", "normal", "normal");
228   checkPlaceItemsValuesBadJS("space-between", "normal", "normal");
229   checkPlaceItemsValuesBadJS("center safe", "normal", "normal");
230   checkPlaceItemsValuesBadJS("center self-start center", "normal", "normal");
231   checkPlaceItemsValuesBadJS("asrt", "normal", "normal");
232   checkPlaceItemsValuesBadJS("auto", "normal", "normal");
233   checkPlaceItemsValuesBadJS("10px", "normal", "normal");
234   checkPlaceItemsValuesBadJS("stretch safe", "normal", "normal");
235   checkPlaceItemsValuesBadJS("self-start start end", "normal", "normal");
236   checkPlaceItemsValuesBadJS("", "normal", "normal");
237 }, "Test setting incorrect values through JS.");
238
239 test(function() {
240   element = document.createElement("div");
241   document.body.appendChild(element);
242   checkValues(element, "placeItems", "place-items", "", "normal normal");
243   element.style.placeItems = "center";
244   checkPlaceItemsValues(element, "center", "center", "center");
245   element.style.placeItems = "initial";
246   checkValues(element, "placeItems", "place-items", "initial", "normal normal");
247   checkPlaceItemsValues(element, "initial", "normal", "normal");
248 }, "Test the 'initial' value of the place-items shorthand and its longhand properties' Computed value");
249
250 test(function() {
251   document.body.style.placeItems = "start";
252   var anotherElement = document.createElement("div");
253   document.body.appendChild(anotherElement);
254   checkPlaceItemsValues(anotherElement, "", "normal", "normal");
255   anotherElement.style.placeItems = "inherit";
256   checkPlaceItemsValues(anotherElement, "inherit", "start", "start");
257 }, "Test the 'inherit' value of the place-items shorthand and its longhand properties' Computed value");
258 </script>
259 </body>
260 </html>