85bed48492604736c8bfe389a7226e781d83cd35
[WebKit-https.git] / LayoutTests / fast / css / parse-justify-self.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #justifySelfBaseline {
6     -webkit-justify-self: baseline;
7 }
8
9 #justifySelfStretch {
10     -webkit-justify-self: stretch;
11 }
12
13 #justifySelfStart {
14     -webkit-justify-self: start;
15 }
16
17 #justifySelfEnd {
18     -webkit-justify-self: end;
19 }
20
21 #justifySelfCenter {
22     -webkit-justify-self: center;
23 }
24
25 #justifySelfSelfStart {
26     -webkit-justify-self: self-start;
27 }
28
29 #justifySelfSelfEnd {
30     -webkit-justify-self: self-end;
31 }
32
33 #justifySelfLeft {
34     -webkit-justify-self: left;
35 }
36
37 #justifySelfRight {
38     -webkit-justify-self: right;
39 }
40
41 #justifySelfEndTrue {
42     -webkit-justify-self: end true;
43 }
44
45 #justifySelfCenterTrue {
46     -webkit-justify-self: center true;
47 }
48
49 #justifySelfSelfEndSafe {
50     -webkit-justify-self: self-end safe;
51 }
52
53 #justifySelfSelfStartSafe {
54     -webkit-justify-self: self-start safe;
55 }
56
57 #justifySelfRightSafe {
58     -webkit-justify-self: right safe;
59 }
60
61 #justifySelfLeftTrue {
62     -webkit-justify-self: left true;
63 }
64 </style>
65 <script src="../../resources/js-test.js"></script>
66 </head>
67 <body>
68 <div id="justifySelfBaseline"></div>
69 <div id="justifySelfStretch"></div>
70 <div id="justifySelfStart"></div>
71 <div id="justifySelfEnd"></div>
72 <div id="justifySelfCenter"></div>
73 <div id="justifySelfSelfStart"></div>
74 <div id="justifySelfSelfEnd"></div>
75 <div id="justifySelfLeft"></div>
76 <div id="justifySelfRight"></div>
77
78 <div id="justifySelfEndTrue"></div>
79 <div id="justifySelfCenterTrue"></div>
80 <div id="justifySelfSelfEndSafe"></div>
81 <div id="justifySelfSelfStartSafe"></div>
82 <div id="justifySelfRightSafe"></div>
83 <div id="justifySelfLeftTrue"></div>
84 <script>
85 description('Test that setting and getting justify-self works as expected');
86
87 debug("Test getting justify-self set through CSS");
88 var justifySelfBaseline = document.getElementById("justifySelfBaseline");
89 shouldBe("getComputedStyle(justifySelfBaseline, '').getPropertyValue('-webkit-justify-self')", "'baseline'");
90
91 var justifySelfStretch = document.getElementById("justifySelfStretch");
92 shouldBe("getComputedStyle(justifySelfStretch, '').getPropertyValue('-webkit-justify-self')", "'stretch'");
93
94 var justifySelfStart = document.getElementById("justifySelfStart");
95 shouldBe("getComputedStyle(justifySelfStart, '').getPropertyValue('-webkit-justify-self')", "'start'");
96
97 var justifySelfEnd = document.getElementById("justifySelfEnd");
98 shouldBe("getComputedStyle(justifySelfEnd, '').getPropertyValue('-webkit-justify-self')", "'end'");
99
100 var justifySelfCenter = document.getElementById("justifySelfCenter");
101 shouldBe("getComputedStyle(justifySelfCenter, '').getPropertyValue('-webkit-justify-self')", "'center'");
102
103 var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
104 shouldBe("getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('-webkit-justify-self')", "'self-end'");
105
106 var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
107 shouldBe("getComputedStyle(justifySelfSelfStart, '').getPropertyValue('-webkit-justify-self')", "'self-start'");
108
109 var justifySelfLeft = document.getElementById("justifySelfLeft");
110 shouldBe("getComputedStyle(justifySelfLeft, '').getPropertyValue('-webkit-justify-self')", "'left'");
111
112 var justifySelfRight = document.getElementById("justifySelfRight");
113 shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('-webkit-justify-self')", "'right'");
114
115 var justifySelfEndTrue = document.getElementById("justifySelfEndTrue");
116 shouldBe("getComputedStyle(justifySelfEndTrue, '').getPropertyValue('-webkit-justify-self')", "'end true'");
117
118 var justifySelfCenterTrue = document.getElementById("justifySelfCenterTrue");
119 shouldBe("getComputedStyle(justifySelfCenterTrue, '').getPropertyValue('-webkit-justify-self')", "'center true'");
120
121 var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
122 shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('-webkit-justify-self')", "'self-end safe'");
123
124 var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe");
125 shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('-webkit-justify-self')", "'self-start safe'");
126
127 var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
128 shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('-webkit-justify-self')", "'right safe'");
129
130 var justifySelfLeftTrue = document.getElementById("justifySelfLeftTrue");
131 shouldBe("getComputedStyle(justifySelfLeftTrue, '').getPropertyValue('-webkit-justify-self')", "'left true'");
132
133 debug("");
134 debug("Test initial value of justify-self through JS");
135 element = document.createElement("div");
136 document.body.appendChild(element);
137 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
138
139 debug("");
140 debug("Test getting and setting justify-self through JS");
141 element = document.createElement("div");
142 document.body.appendChild(element);
143 element.style.webkitJustifySelf = "center";
144 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'center'");
145
146 element = document.createElement("div");
147 document.body.appendChild(element);
148 element.style.webkitJustifySelf = "true start";
149 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'start true'");
150
151 element.style.webkitJustifySelf = "auto";
152 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
153
154 debug("");
155 debug("Test bad combinaisons of justify-self");
156 element = document.createElement("div");
157 document.body.appendChild(element);
158 element.style.webkitJustifySelf = "true auto";
159 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
160
161 element.style.webkitJustifySelf = "auto safe";
162 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
163
164 element.style.webkitJustifySelf = "auto left";
165 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
166
167 element.style.webkitJustifySelf = "baseline safe";
168 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
169
170 element.style.webkitJustifySelf = "baseline center";
171 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
172
173 element.style.webkitJustifySelf = "stretch true";
174 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
175
176 element.style.webkitJustifySelf = "stretch right";
177 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
178
179 element.style.webkitJustifySelf = "true true";
180 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
181
182 element.style.webkitJustifySelf = "true";
183 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
184
185 element.style.webkitJustifySelf = "true safe";
186 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
187
188 element.style.webkitJustifySelf = "center start";
189 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
190
191 element.style.webkitJustifySelf = "stretch true";
192 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
193
194 element.style.webkitJustifySelf = "safe stretch";
195 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
196
197 element.style.webkitJustifySelf = "baseline safe";
198 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
199
200 element.style.webkitJustifySelf = "true baseline";
201 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
202
203 element.style.webkitJustifySelf = "true safe";
204 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
205
206 element.style.webkitJustifySelf = "true safe left";
207 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
208
209 element.style.webkitJustifySelf = "true left safe";
210 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
211
212 element.style.webkitJustifySelf = "left safe true safe";
213 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
214
215 debug("");
216 debug("Test the value 'initial'");
217 element.style.webkitJustifySelf = "center";
218 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'center'");
219 element.style.webkitJustifySelf = "initial";
220 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'auto'");
221
222 debug("");
223 debug("Test the value 'inherit'");
224 parentElement = document.createElement("div");
225 document.body.appendChild(parentElement);
226 parentElement.style.webkitJustifySelf = "end";
227 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('-webkit-justify-self')", "'end'");
228
229 element = document.createElement("div");
230 parentElement.appendChild(element);
231 element.style.webkitJustifySelf = "inherit";
232 shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-justify-self')", "'end'");
233 </script>
234 </body>
235 </html>