OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 .parent { | 3 .parent { |
4 display: flex; | 4 display: flex; |
5 justify-items: flex-end true; | 5 justify-items: flex-end unsafe; |
6 align-items: flex-start safe; | 6 align-items: flex-start safe; |
7 } | 7 } |
8 .parent .child { | 8 .parent .child { |
9 display: flex; | 9 display: flex; |
10 justify-self: flex-end true; | 10 justify-self: flex-end unsafe; |
11 align-self: flex-start safe; | 11 align-self: flex-start safe; |
12 } | 12 } |
13 #parentId { | 13 #parentId { |
14 justify-items: center; | 14 justify-items: center; |
15 align-items: stretch; | 15 align-items: stretch; |
16 } | 16 } |
17 #parentId .child { | 17 #parentId .child { |
18 justify-self: center; | 18 justify-self: center; |
19 align-self: stretch; | 19 align-self: stretch; |
20 } | 20 } |
21 </style> | 21 </style> |
22 <script src="../../resources/js-test.js"></script> | 22 <script src="../../resources/js-test.js"></script> |
23 <div class="parent"> | 23 <div class="parent"> |
24 <div id="childOfDefaultParent" class="child"></div> | 24 <div id="childOfDefaultParent" class="child"></div> |
25 </div> | 25 </div> |
26 <div id="parentId" class="parent"> | 26 <div id="parentId" class="parent"> |
27 <div id="childOfParentId" class="child"></div> | 27 <div id="childOfParentId" class="child"></div> |
28 </div> | 28 </div> |
29 <script src="resources/alignment-parsing-utils.js"></script> | 29 <script src="resources/alignment-parsing-utils.js"></script> |
30 <script> | 30 <script> |
31 description('Test overwriting justify-self and align-self works as expected'); | 31 description('Test overwriting justify-self and align-self works as expected'); |
32 | 32 |
33 var parent = document.getElementById("parentId"); | 33 var parent = document.getElementById("parentId"); |
34 shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('justify-it
ems')", "center"); | 34 shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('justify-it
ems')", "center"); |
35 shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('align-item
s')", "stretch"); | 35 shouldBeEqualToString("getComputedStyle(parent, '').getPropertyValue('align-item
s')", "stretch"); |
36 | 36 |
37 var childOfDefaultParent = document.getElementById("childOfDefaultParent"); | 37 var childOfDefaultParent = document.getElementById("childOfDefaultParent"); |
38 shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyVal
ue('justify-self')", "flex-end true"); | 38 shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyVal
ue('justify-self')", "flex-end unsafe"); |
39 shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyVal
ue('align-self')", "flex-start safe"); | 39 shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyVal
ue('align-self')", "flex-start safe"); |
40 | 40 |
41 var childOfParentId = document.getElementById("childOfParentId"); | 41 var childOfParentId = document.getElementById("childOfParentId"); |
42 shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('j
ustify-self')", "center"); | 42 shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('j
ustify-self')", "center"); |
43 shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('a
lign-self')", "stretch"); | 43 shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('a
lign-self')", "stretch"); |
44 </script> | 44 </script> |
OLD | NEW |