| <!DOCTYPE html> |
| <style> |
| .parent { |
| display: flex; |
| } |
| .parent .child { |
| display: flex; |
| justify-content: unsafe flex-end; |
| align-content: safe center; |
| } |
| #parentId .child { |
| justify-content: space-between; |
| align-content: space-around; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| <div class="parent"> |
| <div id="childOfDefaultParent" class="child"></div> |
| </div> |
| <div id="parentId" class="parent"> |
| <div id="childOfParentId" class="child"></div> |
| </div> |
| <script src="resources/alignment-parsing-utils.js"></script> |
| <script> |
| description('Test overwriting justify-content and align-content works as expected'); |
| |
| var childOfDefaultParent = document.getElementById("childOfDefaultParent"); |
| shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('justify-content')", "unsafe flex-end"); |
| shouldBeEqualToString("getComputedStyle(childOfDefaultParent, '').getPropertyValue('align-content')", "safe center"); |
| |
| var childOfParentId = document.getElementById("childOfParentId"); |
| shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('justify-content')", "space-between"); |
| shouldBeEqualToString("getComputedStyle(childOfParentId, '').getPropertyValue('align-content')", "space-around"); |
| </script> |
