| <!DOCTYPE html> |
| <style> |
| #alignSelfBaseline { |
| align-self: baseline; |
| } |
| |
| #alignSelfFirstBaseline { |
| align-self: first baseline; |
| } |
| |
| #alignSelfLastBaseline { |
| align-self: last baseline; |
| } |
| |
| #alignSelfStretch { |
| align-self: stretch; |
| } |
| |
| #alignSelfNormal { |
| align-self: normal; |
| } |
| |
| #alignSelfStart { |
| align-self: start; |
| } |
| |
| #alignSelfEnd { |
| align-self: end; |
| } |
| |
| #alignSelfCenter { |
| align-self: center; |
| } |
| |
| #alignSelfSelfStart { |
| align-self: self-start; |
| } |
| |
| #alignSelfSelfEnd { |
| align-self: self-end; |
| } |
| |
| #alignSelfFlexStart { |
| align-self: flex-start; |
| } |
| |
| #alignSelfFlexEnd { |
| align-self: flex-end; |
| } |
| |
| #alignSelfUnsafeEnd { |
| align-self: unsafe end ; |
| } |
| |
| #alignSelfUnsafeCenter { |
| align-self: unsafe center ; |
| } |
| |
| #alignSelfSafeSelfEnd { |
| align-self: safe self-end; |
| } |
| |
| #alignSelfSafeSelfStart { |
| align-self: safe self-start; |
| } |
| |
| #alignSelfUnsafeFlexStart { |
| align-self: unsafe flex-start; |
| } |
| |
| #alignSelfSafeFlexEnd { |
| align-self: safe flex-end; |
| } |
| </style> |
| <p>Test that setting and getting align-self works as expected</p> |
| <div id="alignSelfBaseline"></div> |
| <div id="alignSelfFirstBaseline"></div> |
| <div id="alignSelfLastBaseline"></div> |
| <div id="alignSelfStretch"></div> |
| <div id="alignSelfNormal"></div> |
| <div id="alignSelfStart"></div> |
| <div id="alignSelfEnd"></div> |
| <div id="alignSelfCenter"></div> |
| <div id="alignSelfSelfStart"></div> |
| <div id="alignSelfSelfEnd"></div> |
| <div id="alignSelfFlexStart"></div> |
| <div id="alignSelfFlexEnd"></div> |
| |
| <div id="alignSelfUnsafeEnd"></div> |
| <div id="alignSelfUnsafeCenter"></div> |
| <div id="alignSelfSafeSelfEnd"></div> |
| <div id="alignSelfSafeSelfStart"></div> |
| <div id="alignSelfUnsafeFlexStart"></div> |
| <div id="alignSelfSafeFlexEnd"></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 alignSelfBaseline = document.getElementById("alignSelfBaseline"); |
| checkValues(alignSelfBaseline, "alignSelf", "align-self", "", "baseline"); |
| var alignSelfFirstBaseline = document.getElementById("alignSelfFirstBaseline"); |
| checkValues(alignSelfFirstBaseline, "alignSelf", "align-self", "", "baseline"); |
| var alignSelfLastBaseline = document.getElementById("alignSelfLastBaseline"); |
| checkValues(alignSelfLastBaseline, "alignSelf", "align-self", "", "last baseline"); |
| var alignSelfStretch = document.getElementById("alignSelfStretch"); |
| checkValues(alignSelfStretch, "alignSelf", "align-self", "", "stretch"); |
| var alignSelfNormal = document.getElementById("alignSelfNormal"); |
| checkValues(alignSelfNormal, "alignSelf", "align-self", "", "normal"); |
| var alignSelfStart = document.getElementById("alignSelfStart"); |
| checkValues(alignSelfStart, "alignSelf", "align-self", "", "start"); |
| var alignSelfEnd = document.getElementById("alignSelfEnd"); |
| checkValues(alignSelfEnd, "alignSelf", "align-self", "", "end"); |
| var alignSelfCenter = document.getElementById("alignSelfCenter"); |
| checkValues(alignSelfCenter, "alignSelf", "align-self", "", "center"); |
| var alignSelfSelfEnd = document.getElementById("alignSelfSelfEnd"); |
| checkValues(alignSelfSelfEnd, "alignSelf", "align-self", "", "self-end"); |
| var alignSelfSelfStart = document.getElementById("alignSelfSelfStart"); |
| checkValues(alignSelfSelfStart, "alignSelf", "align-self", "", "self-start"); |
| var alignSelfFlexStart = document.getElementById("alignSelfFlexStart"); |
| checkValues(alignSelfFlexStart, "alignSelf", "align-self", "", "flex-start"); |
| var alignSelfFlexEnd = document.getElementById("alignSelfFlexEnd"); |
| checkValues(alignSelfFlexEnd, "alignSelf", "align-self", "", "flex-end"); |
| |
| var alignSelfUnsafeEnd = document.getElementById("alignSelfUnsafeEnd"); |
| checkValues(alignSelfUnsafeEnd, "alignSelf", "align-self", "", "unsafe end"); |
| var alignSelfUnsafeCenter = document.getElementById("alignSelfUnsafeCenter"); |
| checkValues(alignSelfUnsafeCenter, "alignSelf", "align-self", "", "unsafe center"); |
| var alignSelfSafeSelfEnd = document.getElementById("alignSelfSafeSelfEnd"); |
| checkValues(alignSelfSafeSelfEnd, "alignSelf", "align-self", "", "safe self-end"); |
| var alignSelfSafeSelfStart = document.getElementById("alignSelfSafeSelfStart"); |
| checkValues(alignSelfSafeSelfStart, "alignSelf", "align-self", "", "safe self-start"); |
| var alignSelfUnsafeFlexStart = document.getElementById("alignSelfUnsafeFlexStart"); |
| checkValues(alignSelfUnsafeFlexStart, "alignSelf", "align-self", "", "unsafe flex-start"); |
| var alignSelfSafeFlexEnd = document.getElementById("alignSelfSafeFlexEnd"); |
| checkValues(alignSelfSafeFlexEnd, "alignSelf", "align-self", "", "safe flex-end"); |
| }, "Test getting align-self set through CSS."); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkValues(element, "alignSelf", "align-self", "", "auto"); |
| }, "Test initial value of align-self through JS"); |
| |
| test(function() { |
| container = document.createElement("div"); |
| element = document.createElement("div"); |
| container.appendChild(element); |
| document.body.appendChild(container); |
| element.style.alignSelf = "center"; |
| checkValues(element, "alignSelf", "align-self", "center", "center"); |
| |
| element.style.alignSelf = "unsafe start"; |
| checkValues(element, "alignSelf", "align-self", "unsafe start", "unsafe start"); |
| |
| element.style.alignSelf = "safe flex-end"; |
| checkValues(element, "alignSelf", "align-self", "safe flex-end", "safe flex-end"); |
| |
| element.style.alignSelf = "center"; |
| checkValues(element, "alignSelf", "align-self", "center", "center"); |
| |
| element.style.alignSelf = "self-start"; |
| checkValues(element, "alignSelf", "align-self", "self-start", "self-start"); |
| |
| element.style.alignSelf = "normal"; |
| checkValues(element, "alignSelf", "align-self", "normal", "normal"); |
| |
| element.style.alignSelf = "auto"; |
| checkValues(element, "alignSelf", "align-self", "auto", "auto"); |
| |
| container.style.display = "flex"; |
| element.style.alignSelf = "auto"; |
| checkValues(element, "alignSelf", "align-self", "auto", "auto"); |
| |
| container.style.display = "grid"; |
| element.style.alignSelf = "auto"; |
| checkValues(element, "alignSelf", "align-self", "auto", "auto"); |
| |
| element.style.alignSelf = "self-end"; |
| checkValues(element, "alignSelf", "align-self", "self-end", "self-end"); |
| }, "Test getting and setting align-self through JS"); |
| |
| test(function() { |
| document.documentElement.style.alignSelf = "auto"; |
| checkValues(document.documentElement, "alignSelf", "align-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, "alignSelf", "align-self", "left"); |
| checkBadValues(element, "alignSelf", "align-self", "right"); |
| checkBadValues(element, "alignSelf", "align-self", "safe auto"); |
| checkBadValues(element, "alignSelf", "align-self", "auto left"); |
| checkBadValues(element, "alignSelf", "align-self", "safe right"); |
| checkBadValues(element, "alignSelf", "align-self", "normal unsafe"); |
| checkBadValues(element, "alignSelf", "align-self", "normal stretch"); |
| checkBadValues(element, "alignSelf", "align-self", "baseline normal"); |
| checkBadValues(element, "alignSelf", "align-self", "baseline safe"); |
| checkBadValues(element, "alignSelf", "align-self", "baseline center"); |
| checkBadValues(element, "alignSelf", "align-self", "first baseline center"); |
| checkBadValues(element, "alignSelf", "align-self", "last baseline center"); |
| checkBadValues(element, "alignSelf", "align-self", "baseline last"); |
| checkBadValues(element, "alignSelf", "align-self", "baseline first"); |
| checkBadValues(element, "alignSelf", "align-self", "stretch unsafe"); |
| checkBadValues(element, "alignSelf", "align-self", "stretch right"); |
| checkBadValues(element, "alignSelf", "align-self", "unsafe unsafe"); |
| checkBadValues(element, "alignSelf", "align-self", "unsafe safe"); |
| checkBadValues(element, "alignSelf", "align-self", "center start"); |
| checkBadValues(element, "alignSelf", "align-self", "stretch unsafe"); |
| checkBadValues(element, "alignSelf", "align-self", "safe stretch"); |
| checkBadValues(element, "alignSelf", "align-self", "baseline safe"); |
| checkBadValues(element, "alignSelf", "align-self", "unsafe baseline"); |
| checkBadValues(element, "alignSelf", "align-self", "unsafe safe left"); |
| checkBadValues(element, "alignSelf", "align-self", "unsafe left safe"); |
| checkBadValues(element, "alignSelf", "align-self", "left safe unsafe safe"); |
| checkBadValues(element, "alignSelf", "align-self", "legacy start"); |
| checkBadValues(element, "alignSelf", "align-self", "legacy end"); |
| checkBadValues(element, "alignSelf", "align-self", "legacy right unsafe"); |
| checkBadValues(element, "alignSelf", "align-self", "legacy auto"); |
| checkBadValues(element, "alignSelf", "align-self", "legacy stretch"); |
| checkBadValues(element, "alignSelf", "align-self", "legacy"); |
| checkBadValues(element, "alignSelf", "align-self", "legacy left right"); |
| checkBadValues(element, "alignSelf", "align-self", "start safe"); |
| checkBadValues(element, "alignSelf", "align-self", "end unsafe"); |
| }, "Test bad combinations of align-self"); |
| |
| test(function() { |
| container.style.display = ""; |
| checkInitialValues(element, "alignSelf", "align-self", "center", "auto"); |
| }, "Test the value 'initial'"); |
| |
| test(function() { |
| container.style.display = "grid"; |
| checkInitialValues(element, "alignSelf", "align-self", "safe start", "auto"); |
| }, "Test the value 'initial' for grid containers"); |
| |
| test(function() { |
| container.style.display = "flex"; |
| checkInitialValues(element, "alignSelf", "align-self", "unsafe end", "auto"); |
| }, "Test the value 'initial' for flex containers"); |
| |
| test(function() { |
| container.style.display = ""; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "alignSelf", "align-self", "start", "auto"); |
| }, "Test the value 'initial' for positioned elements"); |
| |
| test(function() { |
| container.style.display = "grid"; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "alignSelf", "align-self", "end", "auto"); |
| }, "Test the value 'initial' for positioned elements in grid containers"); |
| |
| test(function() { |
| container.style.display = "flex"; |
| element.style.position = "absolute"; |
| checkInitialValues(element, "alignSelf", "align-self", "end", "auto"); |
| }, "Test the value 'initial' for positioned elements in flex containers"); |
| |
| test(function() { |
| checkInheritValues("alignSelf", "align-self", "end"); |
| checkInheritValues("alignSelf", "align-self", "safe start"); |
| checkInheritValues("alignSelf", "align-self", "unsafe center"); |
| }, "Test the value 'inherit'"); |
| </script> |
