[css-align][css-grid] Overflow alignment value 'true' renamed to 'unsafe'
[WebKit-https.git] / LayoutTests / css3 / overwrite-self-alignment.html
1 <!DOCTYPE html>
2 <style>
3 .parent {
4    display: -webkit-flex;
5    justify-items: flex-end unsafe;
6    align-items: flex-start safe;
7 }
8 .parent .child {
9    display: -webkit-flex;
10    justify-self: flex-end unsafe;
11    align-self: flex-start safe;
12 }
13 #parentId {
14    justify-items: center;
15    align-items: stretch;
16 }
17 #parentId .child {
18    justify-self: center;
19    align-self: stretch;
20 }
21 </style>
22 <script src="../resources/js-test.js"></script>
23 <div class="parent">
24     <div id="childOfDefaultParent" class="child"></div>
25 </div>
26 <div id="parentId" class="parent">
27     <div id="childOfParentId" class="child"></div>
28 </div>
29 <script src="resources/alignment-parsing-utils.js"></script>
30 <script>
31 description('Test overwriting justify-self and align-self works as expected');
32
33 var parent = document.getElementById("parentId");
34 shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('justify-items')", "center");
35 shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('align-items')", "stretch");
36
37 var childOfDefaultParent = document.getElementById("childOfDefaultParent");
38 shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-self')", "flex-end unsafe");
39 shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-self')", "flex-start safe");
40
41 var childOfParentId = document.getElementById("childOfParentId");
42 shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('justify-self')", "center");
43 shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('align-self')", "stretch");
44 </script>