| <!DOCTYPE html> |
| <style> |
| #justifySelfBaseline { |
| justify-self: baseline; |
| } |
| |
| #justifySelfFirstBaseline { |
| justify-self: first baseline; |
| } |
| |
| #justifySelfLastBaseline { |
| justify-self: last baseline; |
| } |
| |
| #justifySelfStretch { |
| justify-self: stretch; |
| } |
| |
| #justifySelfNormal { |
| justify-self: normal; |
| } |
| |
| #justifySelfStart { |
| justify-self: start; |
| } |
| |
| #justifySelfEnd { |
| justify-self: end; |
| } |
| |
| #justifySelfCenter { |
| justify-self: center; |
| } |
| |
| #justifySelfSelfStart { |
| justify-self: self-start; |
| } |
| |
| #justifySelfSelfEnd { |
| justify-self: self-end; |
| } |
| |
| #justifySelfLeft { |
| justify-self: left; |
| } |
| |
| #justifySelfRight { |
| justify-self: right; |
| } |
| |
| #justifySelfFlexStart { |
| justify-self: flex-start; |
| } |
| |
| #justifySelfFlexEnd { |
| justify-self: flex-end; |
| } |
| |
| #justifySelfUnsafeEnd { |
| justify-self: unsafe end ; |
| } |
| |
| #justifySelfUnsafeCenter { |
| justify-self: unsafe center ; |
| } |
| |
| #justifySelfSafeSelfEnd { |
| justify-self: safe self-end; |
| } |
| |
| #justifySelfSafeSelfStart { |
| justify-self: safe self-start; |
| } |
| |
| #justifySelfSafeRight { |
| justify-self: safe right; |
| } |
| |
| #justifySelfUnsafeLeft { |
| justify-self: unsafe left; |
| } |
| |
| #justifySelfUnsafeFlexStart { |
| justify-self: unsafe flex-start; |
| } |
| |
| #justifySelfSafeFlexEnd { |
| justify-self: safe flex-end; |
| } |
| </style> |
| <p>Test that setting and getting justify-self works as expected</p> |
| <div id="justifySelfBaseline"></div> |
| <div id="justifySelfFirstBaseline"></div> |
| <div id="justifySelfLastBaseline"></div> |
| <div id="justifySelfStretch"></div> |
| <div id="justifySelfNormal"></div> |
| <div id="justifySelfStart"></div> |
| <div id="justifySelfEnd"></div> |
| <div id="justifySelfCenter"></div> |
| <div id="justifySelfSelfStart"></div> |
| <div id="justifySelfSelfEnd"></div> |
| <div id="justifySelfLeft"></div> |
| <div id="justifySelfRight"></div> |
| <div id="justifySelfFlexStart"></div> |
| <div id="justifySelfFlexEnd"></div> |
| |
| <div id="justifySelfUnsafeEnd"></div> |
| <div id="justifySelfUnsafeCenter"></div> |
| <div id="justifySelfSafeSelfEnd"></div> |
| <div id="justifySelfSafeSelfStart"></div> |
| <div id="justifySelfSafeRight"></div> |
| <div id="justifySelfUnsafeLeft"></div> |
| <div id="justifySelfUnsafeFlexStart"></div> |
| <div id="justifySelfSafeFlexEnd"></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 justifySelfBaseline = document.getElementById("justifySelfBaseline"); |
| checkValues(justifySelfBaseline, "justifySelf", "justify-self", "", "baseline"); |
| var justifySelfFirstBaseline = document.getElementById("justifySelfFirstBaseline"); |
| checkValues(justifySelfFirstBaseline, "justifySelf", "justify-self", "", "baseline"); |
| var justifySelfLastBaseline = document.getElementById("justifySelfLastBaseline"); |
| checkValues(justifySelfLastBaseline, "justifySelf", "justify-self", "", "last baseline"); |
| var justifySelfStretch = document.getElementById("justifySelfStretch"); |
| checkValues(justifySelfStretch, "justifySelf", "justify-self", "", "stretch"); |
| var justifySelfNormal = document.getElementById("justifySelfNormal"); |
| checkValues(justifySelfNormal, "justifySelf", "justify-self", "", "normal"); |
| var justifySelfStart = document.getElementById("justifySelfStart"); |
| checkValues(justifySelfStart, "justifySelf", "justify-self", "", "start"); |
| var justifySelfEnd = document.getElementById("justifySelfEnd"); |
| checkValues(justifySelfEnd, "justifySelf", "justify-self", "", "end"); |
| var justifySelfCenter = document.getElementById("justifySelfCenter"); |
| checkValues(justifySelfCenter, "justifySelf", "justify-self", "", "center"); |
| var justifySelfSelfEnd = document.getElementById("justifySelfSelfEnd"); |
| checkValues(justifySelfSelfEnd, "justifySelf", "justify-self", "", "self-end"); |
| var justifySelfSelfStart = document.getElementById("justifySelfSelfStart"); |
| checkValues(justifySelfSelfStart, "justifySelf", "justify-self", "", "self-start"); |
| var justifySelfLeft = document.getElementById("justifySelfLeft"); |
| checkValues(justifySelfLeft, "justifySelf", "justify-self", "", "left"); |
| var justifySelfRight = document.getElementById("justifySelfRight"); |
| checkValues(justifySelfRight, "justifySelf", "justify-self", "", "right"); |
| var justifySelfFlexStart = document.getElementById("justifySelfFlexStart"); |
| checkValues(justifySelfFlexStart, "justifySelf", "justify-self", "", "flex-start"); |
| var justifySelfFlexEnd = document.getElementById("justifySelfFlexEnd"); |
| checkValues(justifySelfFlexEnd, "justifySelf", "justify-self", "", "flex-end"); |
| |
| var justifySelfUnsafeEnd = document.getElementById("justifySelfUnsafeEnd"); |
| checkValues(justifySelfUnsafeEnd, "justifySelf", "justify-self", "", "unsafe end"); |
| var justifySelfUnsafeCenter = document.getElementById("justifySelfUnsafeCenter"); |
| checkValues(justifySelfUnsafeCenter, "justifySelf", "justify-self", "", "unsafe center"); |
| var justifySelfSafeSelfEnd = document.getElementById("justifySelfSafeSelfEnd"); |
| checkValues(justifySelfSafeSelfEnd, "justifySelf", "justify-self", "", "safe self-end"); |
| var justifySelfSafeSelfStart = document.getElementById("justifySelfSafeSelfStart"); |
| checkValues(justifySelfSafeSelfStart, "justifySelf", "justify-self", "", "safe self-start"); |
| var justifySelfSafeRight = document.getElementById("justifySelfSafeRight"); |
| checkValues(justifySelfSafeRight, "justifySelf", "justify-self", "", "safe right"); |
| var justifySelfUnsafeLeft = document.getElementById("justifySelfUnsafeLeft"); |
| checkValues(justifySelfUnsafeLeft, "justifySelf", "justify-self", "", "unsafe left"); |
| var justifySelfUnsafeFlexStart = document.getElementById("justifySelfUnsafeFlexStart"); |
| checkValues(justifySelfUnsafeFlexStart, "justifySelf", "justify-self", "", "unsafe flex-start"); |
| var justifySelfSafeFlexEnd = document.getElementById("justifySelfSafeFlexEnd"); |
| checkValues(justifySelfSafeFlexEnd, "justifySelf", "justify-self", "", "safe flex-end"); |
| }, "Test getting justify-self set through CSS."); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkValues(element, "justifySelf", "justify-self", "", "auto"); |
| }, "Test initial value of justify-self through JS"); |
| |
| test(function() { |
| container = document.createElement("div"); |
| element = document.createElement("div"); |
| container.appendChild(element); |
| document.body.appendChild(container); |
| element.style.justifySelf = "center"; |
| checkValues(element, "justifySelf", "justify-self", "center", "center"); |
| |
| element.style.justifySelf = "unsafe start"; |
| checkValues(element, "justifySelf", "justify-self", "unsafe start", "unsafe start"); |
| |
| element.style.justifySelf = "safe flex-end"; |
| checkValues(element, "justifySelf", "justify-self", "safe flex-end", "safe flex-end"); |
| |
| element.style.justifySelf = "right"; |
| checkValues(element, "justifySelf", "justify-self", "right", "right"); |
| |
| element.style.justifySelf = "center"; |
| checkValues(element, "justifySelf", "justify-self", "center", "center"); |
| |
| element.style.justifySelf = "self-start"; |
| checkValues(element, "justifySelf", "justify-self", "self-start", "self-start"); |
| |
| element.style.justifySelf = "normal"; |
| checkValues(element, "justifySelf", "justify-self", "normal", "normal"); |
| |
| element.style.justifySelf = "auto"; |
| checkValues(element, "justifySelf", "justify-self", "auto", "auto"); |
| |
| container.style.display = "flex"; |
| element.style.justifySelf = "auto"; |
| checkValues(element, "justifySelf", "justify-self", "auto", "auto"); |
| |
| container.style.display = "grid"; |
| element.style.justifySelf = "auto"; |
| checkValues(element, "justifySelf", "justify-self", "auto", "auto"); |
| |
| element.style.justifySelf = "self-end"; |
| checkValues(element, "justifySelf", "justify-self", "self-end", "self-end"); |
| }, "Test getting and setting justify-self through JS"); |
| |
| test(function() { |
| document.documentElement.style.justifySelf = "auto"; |
| checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "auto"); |
| }, "Test 'auto' value resolution for the root node"); |
| |
| test(function() { |
| container = document.createElement("div"); |
| element = document.createElement("div"); |
| container.appendChild(element); |
| document.body.appendChild(container); |
| |
| checkBadValues(element, "justifySelf", "justify-self", "auto safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "auto left"); |
| checkBadValues(element, "justifySelf", "justify-self", "normal unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "normal stretch"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline normal"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline center"); |
| checkBadValues(element, "justifySelf", "justify-self", "first baseline center"); |
| checkBadValues(element, "justifySelf", "justify-self", "last baseline center"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline last"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline first"); |
| checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "stretch right"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "center start"); |
| checkBadValues(element, "justifySelf", "justify-self", "stretch unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "safe stretch"); |
| checkBadValues(element, "justifySelf", "justify-self", "baseline safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe baseline"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe safe left"); |
| checkBadValues(element, "justifySelf", "justify-self", "unsafe left safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "left safe unsafe safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy start"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy end"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy right unsafe"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy auto"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy stretch"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy"); |
| checkBadValues(element, "justifySelf", "justify-self", "legacy left right"); |
| checkBadValues(element, "justifySelf", "justify-self", "start safe"); |
| checkBadValues(element, "justifySelf", "justify-self", "end unsafe"); |
| }, "Test bad combinations of justify-self"); |
| |
| test(function() { |
| container.style.display = ""; |
| checkInitialValues(element, "justifySelf", "justify-self", "center", "auto"); |
| }, "Test the value 'initial'"); |
| |
| test(function() { |
| container.style.display = "grid"; |
| checkInitialValues(element, "justifySelf", "justify-self", "safe left", "auto"); |
| }, "Test the value 'initial' for grid containers"); |
| |
| test(function() { |
| container.style.display = "flex"; |
| checkInitialValues(element, "justifySelf", "justify-self", "unsafe right", "auto"); |
| }, "Test the value 'initial' for flex containers"); |
| |
| test(function() { |
| container.style.display = ""; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "justifySelf", "justify-self", "left", "auto"); |
| }, "Test the value 'initial' for positioned elements"); |
| |
| test(function() { |
| container.style.display = "grid"; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "justifySelf", "justify-self", "right", "auto"); |
| }, "Test the value 'initial' for positioned elements in grid containers"); |
| |
| test(function() { |
| container.style.display = "flex"; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "justifySelf", "justify-self", "end", "auto"); |
| }, "Test the value 'initial' for positioned elements in grid containers 2"); |
| |
| test(function() { |
| checkInheritValues("justifySelf", "justify-self", "end"); |
| checkInheritValues("justifySelf", "justify-self", "safe left"); |
| checkInheritValues("justifySelf", "justify-self", "unsafe center"); |
| }, "Test the value 'inherit'"); |
| </script> |
