[css-align][css-grid] Overflow alignment value 'true' renamed to 'unsafe'
[WebKit-https.git] / LayoutTests / fast / css / parse-justify-self.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 #justifySelfBaseline {
6     justify-self: baseline;
7 }
8
9 #justifySelfStretch {
10     justify-self: stretch;
11 }
12
13 #justifySelfStart {
14     justify-self: start;
15 }
16
17 #justifySelfEnd {
18     justify-self: end;
19 }
20
21 #justifySelfCenter {
22     justify-self: center;
23 }
24
25 #justifySelfSelfStart {
26     justify-self: self-start;
27 }
28
29 #justifySelfSelfEnd {
30     justify-self: self-end;
31 }
32
33 #justifySelfLeft {
34     justify-self: left;
35 }
36
37 #justifySelfRight {
38     justify-self: right;
39 }
40
41 #justifySelfEndUnsafe {
42     justify-self: end unsafe;
43 }
44
45 #justifySelfCenterUnsafe {
46     justify-self: center unsafe;
47 }
48
49 #justifySelfSelfEndSafe {
50     justify-self: self-end safe;
51 }
52
53 #justifySelfSelfStartSafe {
54     justify-self: self-start safe;
55 }
56
57 #justifySelfRightSafe {
58     justify-self: right safe;
59 }
60
61 #justifySelfLeftUnsafe {
62     justify-self: left unsafe;
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="justifySelfEndUnsafe"></div>
79 <div id="justifySelfCenterUnsafe"></div>
80 <div id="justifySelfSelfEndSafe"></div>
81 <div id="justifySelfSelfStartSafe"></div>
82 <div id="justifySelfRightSafe"></div>
83 <div id="justifySelfLeftUnsafe"></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('justify-self')", "'baseline'");
90
91 var justifySelfStretch = document.getElementById("justifySelfStretch");
92 shouldBe("getComputedStyle(justifySelfStretch, '').getPropertyValue('justify-self')", "'stretch'");
93
94 var justifySelfStart = document.getElementById("justifySelfStart");
95 shouldBe("getComputedStyle(justifySelfStart, '').getPropertyValue('justify-self')", "'start'");
96
97 var justifySelfEnd = document.getElementById("justifySelfEnd");
98 shouldBe("getComputedStyle(justifySelfEnd, '').getPropertyValue('justify-self')", "'end'");
99
100 var justifySelfCenter = document.getElementById("justifySelfCenter");
101 shouldBe("getComputedStyle(justifySelfCenter, '').getPropertyValue('justify-self')", "'center'");
102
103 var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd");
104 shouldBe("getComputedStyle(justifySelfSelfEnd, '').getPropertyValue('justify-self')", "'self-end'");
105
106 var justifySelfSelfStart = document.getElementById("justifySelfSelfStart");
107 shouldBe("getComputedStyle(justifySelfSelfStart, '').getPropertyValue('justify-self')", "'self-start'");
108
109 var justifySelfLeft = document.getElementById("justifySelfLeft");
110 shouldBe("getComputedStyle(justifySelfLeft, '').getPropertyValue('justify-self')", "'left'");
111
112 var justifySelfRight = document.getElementById("justifySelfRight");
113 shouldBe("getComputedStyle(justifySelfRight, '').getPropertyValue('justify-self')", "'right'");
114
115 var justifySelfEndUnsafe = document.getElementById("justifySelfEndUnsafe");
116 shouldBe("getComputedStyle(justifySelfEndUnsafe, '').getPropertyValue('justify-self')", "'end unsafe'");
117
118 var justifySelfCenterUnsafe = document.getElementById("justifySelfCenterUnsafe");
119 shouldBe("getComputedStyle(justifySelfCenterUnsafe, '').getPropertyValue('justify-self')", "'center unsafe'");
120
121 var justifySelfSelfEndSafe = document.getElementById("justifySelfSelfEndSafe");
122 shouldBe("getComputedStyle(justifySelfSelfEndSafe, '').getPropertyValue('justify-self')", "'self-end safe'");
123
124 var justifySelfSelfStartSafe = document.getElementById("justifySelfSelfStartSafe");
125 shouldBe("getComputedStyle(justifySelfSelfStartSafe, '').getPropertyValue('justify-self')", "'self-start safe'");
126
127 var justifySelfRightSafe = document.getElementById("justifySelfRightSafe");
128 shouldBe("getComputedStyle(justifySelfRightSafe, '').getPropertyValue('justify-self')", "'right safe'");
129
130 var justifySelfLeftUnsafe = document.getElementById("justifySelfLeftUnsafe");
131 shouldBe("getComputedStyle(justifySelfLeftUnsafe, '').getPropertyValue('justify-self')", "'left unsafe'");
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('justify-self')", "'start'");
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.justifySelf = "center";
144 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'center'");
145
146 element = document.createElement("div");
147 document.body.appendChild(element);
148 element.style.justifySelf = "unsafe start";
149 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start unsafe'");
150
151 element.style.justifySelf = "start";
152 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
153
154 debug("");
155 debug("Test bad combinations of justify-self");
156 element = document.createElement("div");
157 document.body.appendChild(element);
158 element.style.justifySelf = "start left";
159 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
160
161 element.style.justifySelf = "baseline safe";
162 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
163
164 element.style.justifySelf = "baseline center";
165 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
166
167 element.style.justifySelf = "stretch unsafe";
168 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
169
170 element.style.justifySelf = "stretch right";
171 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
172
173 element.style.justifySelf = "unsafe unsafe";
174 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
175
176 element.style.justifySelf = "unsafe";
177 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
178
179 element.style.justifySelf = "unsafe safe";
180 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
181
182 element.style.justifySelf = "center start";
183 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
184
185 element.style.justifySelf = "stretch unsafe";
186 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
187
188 element.style.justifySelf = "safe stretch";
189 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
190
191 element.style.justifySelf = "baseline safe";
192 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
193
194 element.style.justifySelf = "unsafe baseline";
195 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
196
197 element.style.justifySelf = "unsafe safe";
198 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
199
200 element.style.justifySelf = "unsafe safe left";
201 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
202
203 element.style.justifySelf = "unsafe left safe";
204 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
205
206 element.style.justifySelf = "left safe unsafe safe";
207 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
208
209 debug("");
210 debug("Test the value 'initial'");
211 element.style.justifySelf = "center";
212 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'center'");
213 element.style.justifySelf = "initial";
214 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'start'");
215
216 debug("");
217 debug("Test the value 'inherit'");
218 parentElement = document.createElement("div");
219 document.body.appendChild(parentElement);
220 parentElement.style.justifySelf = "end";
221 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('justify-self')", "'end'");
222
223 element = document.createElement("div");
224 parentElement.appendChild(element);
225 element.style.justifySelf = "inherit";
226 shouldBe("getComputedStyle(element, '').getPropertyValue('justify-self')", "'end'");
227 </script>
228 </body>
229 </html>