| <!DOCTYPE html> |
| <style> |
| #justifyItemsBaseline { |
| justify-items: baseline; |
| } |
| |
| #justifyItemsFirstBaseline { |
| justify-items: first baseline; |
| } |
| |
| #justifyItemsLastBaseline { |
| justify-items: last baseline; |
| } |
| |
| #justifyItemsStretch { |
| justify-items: stretch; |
| } |
| |
| #justifyItemsNormal { |
| justify-items: normal; |
| } |
| |
| #justifyItemsStart { |
| justify-items: start; |
| } |
| |
| #justifyItemsEnd { |
| justify-items: end; |
| } |
| |
| #justifyItemsCenter { |
| justify-items: center; |
| } |
| |
| #justifyItemsSelfStart { |
| justify-items: self-start; |
| } |
| |
| #justifyItemsSelfEnd { |
| justify-items: self-end; |
| } |
| |
| #justifyItemsLeft { |
| justify-items: left; |
| } |
| |
| #justifyItemsRight { |
| justify-items: right; |
| } |
| |
| #justifyItemsFlexStart { |
| justify-items: flex-start; |
| } |
| |
| #justifyItemsFlexEnd { |
| justify-items: flex-end; |
| } |
| |
| #justifyItemsUnsafeEnd { |
| justify-items: unsafe end ; |
| } |
| |
| #justifyItemsUnsafeCenter { |
| justify-items: unsafe center ; |
| } |
| |
| #justifyItemsSafeSelfEnd { |
| justify-items: safe self-end; |
| } |
| |
| #justifyItemsSafeSelfStart { |
| justify-items: safe self-start; |
| } |
| |
| #justifyItemsSafeRight { |
| justify-items: safe right; |
| } |
| |
| #justifyItemsUnsafeLeft { |
| justify-items: unsafe left; |
| } |
| |
| #justifyItemsUnsafeFlexStart { |
| justify-items: unsafe flex-start; |
| } |
| |
| #justifyItemsSafeFlexEnd { |
| justify-items: safe flex-end; |
| } |
| |
| #justifyItemsLegacyLeft { |
| justify-items: legacy left; |
| } |
| |
| #justifyItemsLegacyCenter { |
| justify-items: legacy center; |
| } |
| |
| #justifyItemsLegacyRight { |
| justify-items: legacy right; |
| } |
| |
| #justifyItemsLeftLegacy { |
| justify-items: left legacy; |
| } |
| |
| #justifyItemsCenterLegacy { |
| justify-items: center legacy; |
| } |
| |
| #justifyItemsRightLegacy { |
| justify-items: right legacy; |
| } |
| </style> |
| <p>Test that setting and getting justify-items works as expected</p> |
| <div id="justifyItemsBaseline"></div> |
| <div id="justifyItemsFirstBaseline"></div> |
| <div id="justifyItemsLastBaseline"></div> |
| <div id="justifyItemsStretch"></div> |
| <div id="justifyItemsNormal"></div> |
| <div id="justifyItemsStart"></div> |
| <div id="justifyItemsEnd"></div> |
| <div id="justifyItemsCenter"></div> |
| <div id="justifyItemsSelfStart"></div> |
| <div id="justifyItemsSelfEnd"></div> |
| <div id="justifyItemsLeft"></div> |
| <div id="justifyItemsRight"></div> |
| <div id="justifyItemsFlexStart"></div> |
| <div id="justifyItemsFlexEnd"></div> |
| |
| <div id="justifyItemsUnsafeEnd"></div> |
| <div id="justifyItemsUnsafeCenter"></div> |
| <div id="justifyItemsSafeSelfEnd"></div> |
| <div id="justifyItemsSafeSelfStart"></div> |
| <div id="justifyItemsSafeRight"></div> |
| <div id="justifyItemsUnsafeLeft"></div> |
| <div id="justifyItemsUnsafeFlexStart"></div> |
| <div id="justifyItemsSafeFlexEnd"></div> |
| <div id="justifyItemsLegacyLeft"></div> |
| <div id="justifyItemsLegacyCenter"></div> |
| <div id="justifyItemsLegacyRight"></div> |
| <div id="justifyItemsLeftLegacy"></div> |
| <div id="justifyItemsCenterLegacy"></div> |
| <div id="justifyItemsRightLegacy"></div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="resources/alignment-parsing-utils-th.js"></script> |
| <script> |
| test(function() { |
| var justifyItemsBaseline = document.getElementById("justifyItemsBaseline"); |
| checkValues(justifyItemsBaseline, "justifyItems", "justify-items", "", "baseline"); |
| var justifyItemsFirstBaseline = document.getElementById("justifyItemsFirstBaseline"); |
| checkValues(justifyItemsFirstBaseline, "justifyItems", "justify-items", "", "baseline"); |
| var justifyItemsLastBaseline = document.getElementById("justifyItemsLastBaseline"); |
| checkValues(justifyItemsLastBaseline, "justifyItems", "justify-items", "", "last baseline"); |
| var justifyItemsStretch = document.getElementById("justifyItemsStretch"); |
| checkValues(justifyItemsStretch, "justifyItems", "justify-items", "", "stretch"); |
| var justifyItemsNormal = document.getElementById("justifyItemsNormal"); |
| checkValues(justifyItemsNormal, "justifyItems", "justify-items", "", "normal"); |
| var justifyItemsStart = document.getElementById("justifyItemsStart"); |
| checkValues(justifyItemsStart, "justifyItems", "justify-items", "", "start"); |
| var justifyItemsEnd = document.getElementById("justifyItemsEnd"); |
| checkValues(justifyItemsEnd, "justifyItems", "justify-items", "", "end"); |
| var justifyItemsCenter = document.getElementById("justifyItemsCenter"); |
| checkValues(justifyItemsCenter, "justifyItems", "justify-items", "", "center"); |
| var justifyItemsSelfEnd = document.getElementById("justifyItemsSelfEnd"); |
| checkValues(justifyItemsSelfEnd, "justifyItems", "justify-items", "", "self-end"); |
| var justifyItemsSelfStart = document.getElementById("justifyItemsSelfStart"); |
| checkValues(justifyItemsSelfStart, "justifyItems", "justify-items", "", "self-start"); |
| var justifyItemsLeft = document.getElementById("justifyItemsLeft"); |
| checkValues(justifyItemsLeft, "justifyItems", "justify-items", "", "left"); |
| var justifyItemsRight = document.getElementById("justifyItemsRight"); |
| checkValues(justifyItemsRight, "justifyItems", "justify-items", "", "right"); |
| var justifyItemsFlexStart = document.getElementById("justifyItemsFlexStart"); |
| checkValues(justifyItemsFlexStart, "justifyItems", "justify-items", "", "flex-start"); |
| var justifyItemsFlexEnd = document.getElementById("justifyItemsFlexEnd"); |
| checkValues(justifyItemsFlexEnd, "justifyItems", "justify-items", "", "flex-end"); |
| |
| var justifyItemsUnsafeEnd = document.getElementById("justifyItemsUnsafeEnd"); |
| checkValues(justifyItemsUnsafeEnd, "justifyItems", "justify-items", "", "unsafe end"); |
| var justifyItemsUnsafeCenter = document.getElementById("justifyItemsUnsafeCenter"); |
| checkValues(justifyItemsUnsafeCenter, "justifyItems", "justify-items", "", "unsafe center"); |
| var justifyItemsSafeSelfEnd = document.getElementById("justifyItemsSafeSelfEnd"); |
| checkValues(justifyItemsSafeSelfEnd, "justifyItems", "justify-items", "", "safe self-end"); |
| var justifyItemsSafeSelfStart = document.getElementById("justifyItemsSafeSelfStart"); |
| checkValues(justifyItemsSafeSelfStart, "justifyItems", "justify-items", "", "safe self-start"); |
| var justifyItemsSafeRight = document.getElementById("justifyItemsSafeRight"); |
| checkValues(justifyItemsSafeRight, "justifyItems", "justify-items", "", "safe right"); |
| var justifyItemsUnsafeLeft = document.getElementById("justifyItemsUnsafeLeft"); |
| checkValues(justifyItemsUnsafeLeft, "justifyItems", "justify-items", "", "unsafe left"); |
| var justifyItemsUnsafeFlexStart = document.getElementById("justifyItemsUnsafeFlexStart"); |
| checkValues(justifyItemsUnsafeFlexStart, "justifyItems", "justify-items", "", "unsafe flex-start"); |
| var justifyItemsSafeFlexEnd = document.getElementById("justifyItemsSafeFlexEnd"); |
| checkValues(justifyItemsSafeFlexEnd, "justifyItems", "justify-items", "", "safe flex-end"); |
| var justifyItemsLegacyLeft = document.getElementById("justifyItemsLegacyLeft"); |
| checkValues(justifyItemsLegacyLeft, "justifyItems", "justify-items", "", "legacy left"); |
| var justifyItemsLegacyCenter = document.getElementById("justifyItemsLegacyCenter"); |
| checkValues(justifyItemsLegacyCenter, "justifyItems", "justify-items", "", "legacy center"); |
| var justifyItemsLegacyRight = document.getElementById("justifyItemsLegacyRight"); |
| checkValues(justifyItemsLegacyRight, "justifyItems", "justify-items", "", "legacy right"); |
| var justifyItemsLeftLegacy = document.getElementById("justifyItemsLeftLegacy"); |
| checkValues(justifyItemsLeftLegacy, "justifyItems", "justify-items", "", "legacy left"); |
| var justifyItemsCenterLegacy = document.getElementById("justifyItemsCenterLegacy"); |
| checkValues(justifyItemsCenterLegacy, "justifyItems", "justify-items", "", "legacy center"); |
| var justifyItemsRightLegacy = document.getElementById("justifyItemsRightLegacy"); |
| checkValues(justifyItemsRightLegacy, "justifyItems", "justify-items", "", "legacy right"); |
| }, "Test getting justify-items set through CSS."); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkValues(element, "justifyItems", "justify-items", "", "normal"); |
| }, "Test initial value of justify-items through JS"); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.justifyItems = "center"; |
| checkValues(element, "justifyItems", "justify-items", "center", "center"); |
| |
| element.style.justifyItems = "unsafe start"; |
| checkValues(element, "justifyItems", "justify-items", "unsafe start", "unsafe start"); |
| |
| element.style.justifyItems = "safe flex-end"; |
| checkValues(element, "justifyItems", "justify-items", "safe flex-end", "safe flex-end"); |
| |
| element.style.justifyItems = "right legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy right", "legacy right"); |
| |
| element.style.justifyItems = "center legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy center", "legacy center"); |
| |
| element.style.justifyItems = "left legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy left", "legacy left"); |
| |
| element.style.justifyItems = "right"; |
| checkValues(element, "justifyItems", "justify-items", "right", "right"); |
| |
| element.style.justifyItems = "center"; |
| checkValues(element, "justifyItems", "justify-items", "center", "center"); |
| |
| element.style.justifyItems = "self-start"; |
| checkValues(element, "justifyItems", "justify-items", "self-start", "self-start"); |
| |
| element.style.justifyItems = "normal"; |
| checkValues(element, "justifyItems", "justify-items", "normal", "normal"); |
| |
| element.style.justifyItems = "legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy", "normal"); |
| |
| element.style.display = "flex"; |
| element.style.justifyItems = "legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy", "normal"); |
| |
| element.style.display = "grid"; |
| element.style.justifyItems = "legacy"; |
| checkValues(element, "justifyItems", "justify-items", "legacy", "normal"); |
| |
| element.style.justifyItems = "self-end"; |
| checkValues(element, "justifyItems", "justify-items", "self-end", "self-end"); |
| }, "Test getting and setting justify-items through JS"); |
| |
| test(function() { |
| document.documentElement.style.justifyItems = "legacy"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "legacy", "normal"); |
| }, "Test 'legacy' value resolution for the root node"); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| |
| checkBadValues(element, "justifyItems", "justify-items", "auto"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe auto"); |
| checkBadValues(element, "justifyItems", "justify-items", "auto safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "auto left"); |
| checkBadValues(element, "justifyItems", "justify-items", "normal unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "normal stretch"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline normal"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline center"); |
| checkBadValues(element, "justifyItems", "justify-items", "first baseline center"); |
| checkBadValues(element, "justifyItems", "justify-items", "last baseline center"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline last"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline first"); |
| checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "stretch right"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "center start"); |
| checkBadValues(element, "justifyItems", "justify-items", "stretch unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "safe stretch"); |
| checkBadValues(element, "justifyItems", "justify-items", "baseline safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe baseline"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe safe left"); |
| checkBadValues(element, "justifyItems", "justify-items", "unsafe left safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "left safe unsafe safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy start"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy end"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy right unsafe"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy auto"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy stretch"); |
| checkBadValues(element, "justifyItems", "justify-items", "safe legacy"); |
| checkBadValues(element, "justifyItems", "justify-items", "legacy left right"); |
| checkBadValues(element, "justifyItems", "justify-items", "start safe"); |
| checkBadValues(element, "justifyItems", "justify-items", "end unsafe"); |
| }, "Test bad combinations of justify-items"); |
| |
| test(function() { |
| element.style.display = ""; |
| checkInitialValues(element, "justifyItems", "justify-items", "legacy center", "normal"); |
| }, "Test the value 'initial'"); |
| |
| test(function() { |
| element.style.display = "grid"; |
| checkInitialValues(element, "justifyItems", "justify-items", "safe left", "normal"); |
| }, "Test the value 'initial' for grid containers"); |
| |
| test(function() { |
| element.style.display = "flex"; |
| checkInitialValues(element, "justifyItems", "justify-items", "unsafe right", "normal"); |
| }, "Test the value 'initial' for flex containers"); |
| |
| test(function() { |
| checkInheritValues("justifyItems", "justify-items", "end"); |
| checkInheritValues("justifyItems", "justify-items", "safe left"); |
| checkInheritValues("justifyItems", "justify-items", "unsafe center"); |
| }, "Test the value 'inherit'"); |
| |
| test(function() { |
| checkLegacyValues("justifyItems", "justify-items", "legacy left"); |
| checkLegacyValues("justifyItems", "justify-items", "legacy center"); |
| checkLegacyValues("justifyItems", "justify-items", "legacy right"); |
| }, "Test the legacy alignment"); |
| </script> |
