Make color-filter affect caret-color
[WebKit-https.git] / LayoutTests / css3 / parse-align-self.html
1 <!DOCTYPE html>
2 <style>
3 #alignSelfBaseline {
4     align-self: baseline;
5 }
6
7 #alignSelfFirstBaseline {
8     align-self: first baseline;
9 }
10
11 #alignSelfLastBaseline {
12     align-self: last baseline;
13 }
14
15 #alignSelfStretch {
16     align-self: stretch;
17 }
18
19 #alignSelfNormal {
20     align-self: normal;
21 }
22
23 #alignSelfStart {
24     align-self: start;
25 }
26
27 #alignSelfEnd {
28     align-self: end;
29 }
30
31 #alignSelfCenter {
32     align-self: center;
33 }
34
35 #alignSelfSelfStart {
36     align-self: self-start;
37 }
38
39 #alignSelfSelfEnd {
40     align-self: self-end;
41 }
42
43 #alignSelfFlexStart {
44     align-self: flex-start;
45 }
46
47 #alignSelfFlexEnd {
48     align-self: flex-end;
49 }
50
51 #alignSelfUnsafeEnd {
52     align-self: unsafe end ;
53 }
54
55 #alignSelfUnsafeCenter {
56     align-self: unsafe center ;
57 }
58
59 #alignSelfSafeSelfEnd {
60     align-self: safe self-end;
61 }
62
63 #alignSelfSafeSelfStart {
64     align-self: safe self-start;
65 }
66
67 #alignSelfUnsafeFlexStart {
68     align-self: unsafe flex-start;
69 }
70
71 #alignSelfSafeFlexEnd {
72     align-self: safe flex-end;
73 }
74 </style>
75 <p>Test that setting and getting align-self works as expected</p>
76 <div id="alignSelfBaseline"></div>
77 <div id="alignSelfFirstBaseline"></div>
78 <div id="alignSelfLastBaseline"></div>
79 <div id="alignSelfStretch"></div>
80 <div id="alignSelfNormal"></div>
81 <div id="alignSelfStart"></div>
82 <div id="alignSelfEnd"></div>
83 <div id="alignSelfCenter"></div>
84 <div id="alignSelfSelfStart"></div>
85 <div id="alignSelfSelfEnd"></div>
86 <div id="alignSelfFlexStart"></div>
87 <div id="alignSelfFlexEnd"></div>
88
89 <div id="alignSelfUnsafeEnd"></div>
90 <div id="alignSelfUnsafeCenter"></div>
91 <div id="alignSelfSafeSelfEnd"></div>
92 <div id="alignSelfSafeSelfStart"></div>
93 <div id="alignSelfUnsafeFlexStart"></div>
94 <div id="alignSelfSafeFlexEnd"></div>
95 <script src="../resources/testharness.js"></script>
96 <script src="../resources/testharnessreport.js"></script>
97 <script src="resources/alignment-parsing-utils-th.js"></script>
98 <script>
99 test(function() {
100     var alignSelfBaseline = document.getElementById("alignSelfBaseline");
101     checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline");
102     var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline");
103     checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline");
104     var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline");
105     checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last baseline");
106     var alignSelfStretch = document.getElementById("alignSelfStretch");
107     checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch");
108     var alignSelfNormal = document.getElementById("alignSelfNormal");
109     checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal");
110     var alignSelfStart = document.getElementById("alignSelfStart");
111     checkValues(alignSelfStart, "alignSelf", "align-self", "", "start");
112     var alignSelfEnd = document.getElementById("alignSelfEnd");
113     checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end");
114     var alignSelfCenter = document.getElementById("alignSelfCenter");
115     checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center");
116     var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd");
117     checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end");
118     var alignSelfSelfStart = document.getElementById("alignSelfSelfStart");
119     checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start");
120     var alignSelfFlexStart = document.getElementById("alignSelfFlexStart");
121     checkValues(alignSelfFlexStart, "alignSelf", "align-self", "", "flex-start");
122     var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd");
123     checkValues(alignSelfFlexEnd, "alignSelf", "align-self", "", "flex-end");
124
125     var alignSelfUnsafeEnd = document.getElementById("alignSelfUnsafeEnd");
126     checkValues(alignSelfUnsafeEnd, "alignSelf", "align-self", "", "unsafe end");
127     var alignSelfUnsafeCenter = document.getElementById("alignSelfUnsafeCenter");
128     checkValues(alignSelfUnsafeCenter, "alignSelf", "align-self", "", "unsafe center");
129     var alignSelfSafeSelfEnd = document.getElementById("alignSelfSafeSelfEnd");
130     checkValues(alignSelfSafeSelfEnd, "alignSelf", "align-self", "", "safe self-end");
131     var alignSelfSafeSelfStart = document.getElementById("alignSelfSafeSelfStart");
132     checkValues(alignSelfSafeSelfStart, "alignSelf", "align-self", "", "safe self-start");
133     var alignSelfUnsafeFlexStart = document.getElementById("alignSelfUnsafeFlexStart");
134     checkValues(alignSelfUnsafeFlexStart, "alignSelf", "align-self", "", "unsafe flex-start");
135     var alignSelfSafeFlexEnd = document.getElementById("alignSelfSafeFlexEnd");
136     checkValues(alignSelfSafeFlexEnd, "alignSelf", "align-self", "", "safe flex-end");
137 }, "Test getting align-self set through CSS.");
138
139 test(function() {
140     element = document.createElement("div");
141     document.body.appendChild(element);
142     checkValues(element, "alignSelf", "align-self", "", "auto");
143 }, "Test initial value of align-self through JS");
144
145 test(function() {
146     container = document.createElement("div");
147     element = document.createElement("div");
148     container.appendChild(element);
149     document.body.appendChild(container);
150     element.style.alignSelf = "center";
151     checkValues(element, "alignSelf", "align-self",  "center", "center");
152
153     element.style.alignSelf = "unsafe start";
154     checkValues(element, "alignSelf", "align-self",  "unsafe start", "unsafe start");
155
156     element.style.alignSelf = "safe flex-end";
157     checkValues(element, "alignSelf", "align-self",  "safe flex-end", "safe flex-end");
158
159     element.style.alignSelf = "center";
160     checkValues(element, "alignSelf", "align-self",  "center", "center");
161
162     element.style.alignSelf = "self-start";
163     checkValues(element, "alignSelf", "align-self",  "self-start", "self-start");
164
165     element.style.alignSelf = "normal";
166     checkValues(element, "alignSelf", "align-self",  "normal", "normal");
167
168     element.style.alignSelf = "auto";
169     checkValues(element, "alignSelf", "align-self",  "auto", "auto");
170
171     container.style.display = "flex";
172     element.style.alignSelf = "auto";
173     checkValues(element, "alignSelf", "align-self",  "auto", "auto");
174
175     container.style.display = "grid";
176     element.style.alignSelf = "auto";
177     checkValues(element, "alignSelf", "align-self",  "auto", "auto");
178
179     element.style.alignSelf = "self-end";
180     checkValues(element, "alignSelf", "align-self",  "self-end", "self-end");
181 }, "Test getting and setting align-self through JS");
182
183 test(function() {
184     document.documentElement.style.alignSelf = "auto";
185     checkValues(document.documentElement, "alignSelf", "align-self",  "auto", "auto");
186 }, "Test 'auto' value resolution for the root node");
187
188 test(function() {
189     container = document.createElement("div");
190     element = document.createElement("div");
191     container.appendChild(element);
192     document.body.appendChild(container);
193
194     checkBadValues(element, "alignSelf", "align-self",  "left");
195     checkBadValues(element, "alignSelf", "align-self",  "right");
196     checkBadValues(element, "alignSelf", "align-self",  "safe auto");
197     checkBadValues(element, "alignSelf", "align-self",  "auto left");
198     checkBadValues(element, "alignSelf", "align-self",  "safe right");
199     checkBadValues(element, "alignSelf", "align-self",  "normal unsafe");
200     checkBadValues(element, "alignSelf", "align-self",  "normal stretch");
201     checkBadValues(element, "alignSelf", "align-self",  "baseline normal");
202     checkBadValues(element, "alignSelf", "align-self",  "baseline safe");
203     checkBadValues(element, "alignSelf", "align-self",  "baseline center");
204     checkBadValues(element, "alignSelf", "align-self",  "first baseline center");
205     checkBadValues(element, "alignSelf", "align-self",  "last baseline center");
206     checkBadValues(element, "alignSelf", "align-self",  "baseline last");
207     checkBadValues(element, "alignSelf", "align-self",  "baseline first");
208     checkBadValues(element, "alignSelf", "align-self",  "stretch unsafe");
209     checkBadValues(element, "alignSelf", "align-self",  "stretch right");
210     checkBadValues(element, "alignSelf", "align-self",  "unsafe unsafe");
211     checkBadValues(element, "alignSelf", "align-self",  "unsafe safe");
212     checkBadValues(element, "alignSelf", "align-self",  "center start");
213     checkBadValues(element, "alignSelf", "align-self",  "stretch unsafe");
214     checkBadValues(element, "alignSelf", "align-self",  "safe stretch");
215     checkBadValues(element, "alignSelf", "align-self",  "baseline safe");
216     checkBadValues(element, "alignSelf", "align-self",  "unsafe baseline");
217     checkBadValues(element, "alignSelf", "align-self",  "unsafe safe left");
218     checkBadValues(element, "alignSelf", "align-self",  "unsafe left safe");
219     checkBadValues(element, "alignSelf", "align-self",  "left safe unsafe safe");
220     checkBadValues(element, "alignSelf", "align-self",  "legacy start");
221     checkBadValues(element, "alignSelf", "align-self",  "legacy end");
222     checkBadValues(element, "alignSelf", "align-self",  "legacy right unsafe");
223     checkBadValues(element, "alignSelf", "align-self",  "legacy auto");
224     checkBadValues(element, "alignSelf", "align-self",  "legacy stretch");
225     checkBadValues(element, "alignSelf", "align-self",  "legacy");
226     checkBadValues(element, "alignSelf", "align-self",  "legacy left right");
227     checkBadValues(element, "alignSelf", "align-self",  "start safe");
228     checkBadValues(element, "alignSelf", "align-self",  "end unsafe");
229 }, "Test bad combinations of align-self");
230
231 test(function() {
232     container.style.display = "";
233     checkInitialValues(element, "alignSelf", "align-self", "center", "auto");
234 }, "Test the value 'initial'");
235
236 test(function() {
237     container.style.display = "grid";
238     checkInitialValues(element, "alignSelf", "align-self", "safe start", "auto");
239 }, "Test the value 'initial' for grid containers");
240
241 test(function() {
242     container.style.display = "flex";
243     checkInitialValues(element, "alignSelf", "align-self", "unsafe end", "auto");
244 }, "Test the value 'initial' for flex containers");
245
246 test(function() {
247     container.style.display = "";
248     element.style.position = "absolute";
249     checkInitialValues(element, "alignSelf", "align-self", "start", "auto");
250 }, "Test the value 'initial' for positioned elements");
251
252 test(function() {
253     container.style.display = "grid";
254     element.style.position = "absolute";
255     checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
256 }, "Test the value 'initial' for positioned elements in grid containers");
257
258 test(function() {
259     container.style.display = "flex";
260     element.style.position = "absolute";
261     checkInitialValues(element, "alignSelf", "align-self", "end", "auto");
262 }, "Test the value 'initial' for positioned elements in flex containers");
263
264 test(function() {
265     checkInheritValues("alignSelf", "align-self", "end");
266     checkInheritValues("alignSelf", "align-self", "safe start");
267     checkInheritValues("alignSelf", "align-self", "unsafe center");
268 }, "Test the value 'inherit'");
269 </script>