| <!DOCTYPE html> |
| <style> |
| #justifyContentAuto { |
| justify-content: auto; |
| } |
| |
| #justifyContentSpaceBetween { |
| justify-content: space-between; |
| } |
| |
| #justifyContentSpaceAround { |
| justify-content: space-around; |
| } |
| |
| #justifyContentSpaceEvenly { |
| justify-content: space-evenly; |
| } |
| |
| #justifyContentStretch { |
| justify-content: stretch; |
| } |
| |
| #justifyContentStart { |
| justify-content: start; |
| } |
| |
| #justifyContentEnd { |
| justify-content: end; |
| } |
| |
| #justifyContentCenter { |
| justify-content: center; |
| } |
| |
| #justifyContentLeft { |
| justify-content: left; |
| } |
| |
| #justifyContentRight { |
| justify-content: right; |
| } |
| |
| #justifyContentFlexStart { |
| justify-content: flex-start; |
| } |
| |
| #justifyContentFlexEnd { |
| justify-content: flex-end; |
| } |
| |
| #justifyContentUnsafeEnd { |
| justify-content: unsafe end ; |
| } |
| |
| #justifyContentUnsafeCenter { |
| justify-content: unsafe center ; |
| } |
| |
| #justifyContentSafeRight { |
| justify-content: safe right; |
| } |
| |
| #justifyContentUnsafeLeft { |
| justify-content: unsafe left; |
| } |
| |
| #justifyContentUnsafeFlexStart { |
| justify-content: unsafe flex-start; |
| } |
| |
| #justifyContentSafeFlexEnd { |
| justify-content: safe flex-end; |
| } |
| |
| <!-- Invalid CSS cases --> |
| #justifyContentBaseline { |
| justify-content: baseline; |
| } |
| |
| #justifyContentFirstBaseline { |
| justify-content: first baseline; |
| } |
| |
| #justifyContentLastBaseline { |
| justify-content: last baseline; |
| } |
| |
| #justifyContentSpaceBetweenLeft { |
| justify-content: space-between left; |
| } |
| |
| #justifyContentSpaceAroundCenter { |
| justify-content: space-around center; |
| } |
| |
| #justifyContentSpaceEvenlyRight { |
| justify-content: space-evenly right; |
| } |
| |
| #justifyContentStretchStartSafe { |
| justify-content: stretch start safe; |
| } |
| |
| #justifyContentSpaceAroundEndUnsafe { |
| justify-content: space-around end unsafe; |
| } |
| |
| #justifyContentSpaceEvenlyFlexStartSafe { |
| justify-content: space-evenly flex-start safe; |
| } |
| |
| #justifyContentSpaceBetweenSafe { |
| justify-content: space-between safe; |
| } |
| |
| #justifyContentSpaceBetweenStretch { |
| justify-content: space-between stretch; |
| } |
| |
| #justifyContentSafe { |
| justify-content: safe; |
| } |
| |
| #justifyContentRightSafeUnsafe { |
| justify-content: right safe unsafe; |
| } |
| |
| #justifyContentCenterLeft { |
| justify-content: center left; |
| } |
| </style> |
| <p>Test that setting and getting justify-content works as expected</p> |
| <div id="justifyContentAuto"></div> |
| <div id="justifyContentSpaceBetween"></div> |
| <div id="justifyContentSpaceAround"></div> |
| <div id="justifyContentSpaceEvenly"></div> |
| <div id="justifyContentStretch"></div> |
| <div id="justifyContentStart"></div> |
| <div id="justifyContentEnd"></div> |
| <div id="justifyContentCenter"></div> |
| <div id="justifyContentLeft"></div> |
| <div id="justifyContentRight"></div> |
| <div id="justifyContentFlexStart"></div> |
| <div id="justifyContentFlexEnd"></div> |
| <div id="justifyContentUnsafeEnd"></div> |
| <div id="justifyContentUnsafeCenter"></div> |
| <div id="justifyContentSafeSelfEnd"></div> |
| <div id="justifyContentSafeSelfStart"></div> |
| <div id="justifyContentSafeRight"></div> |
| <div id="justifyContentUnsafeLeft"></div> |
| <div id="justifyContentUnsafeFlexStart"></div> |
| <div id="justifyContentSafeFlexEnd"></div> |
| <div id="justifyContentEndUnsafe"></div> |
| <div id="justifyContentCenterUnsafe"></div> |
| <div id="justifyContentRightSafe"></div> |
| <div id="justifyContentLeftUnsafe"></div> |
| <div id="justifyContentFlexStartUnsafe"></div> |
| <div id="justifyContentFlexEndSafe"></div> |
| |
| <div id="justifyContentBaseline"></div> |
| <div id="justifyContentFirstBaseline"></div> |
| <div id="justifyContentLastBaseline"></div> |
| <div id="justifyContentSpaceBetweenLeft"></div> |
| <div id="justifyContentSpaceAroundCenter"></div> |
| <div id="justifyContentSpaceEvenlyRight"></div> |
| <div id="justifyContentStretchStartSafe"></div> |
| <div id="justifyContentSpaceAroundEndUnsafe"></div> |
| <div id="justifyContentSpaceEvenlyFlexStartSafe"></div> |
| <div id="justifyContentSpaceBetweenSafe"></div> |
| <div id="justifyContentSpaceBetweenStretch"></div> |
| <div id="justifyContentSafe"></div> |
| <div id="justifyContentRightSafeUnsafe"></div> |
| <div id="justifyContentCenterLeft"></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 justifyContentAuto = document.getElementById("justifyContentAuto"); |
| checkValues(justifyContentAuto, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSpaceBetween = document.getElementById("justifyContentSpaceBetween"); |
| checkValues(justifyContentSpaceBetween, "justifyContent", "justify-content", "", "space-between"); |
| var justifyContentSpaceAround = document.getElementById("justifyContentSpaceAround"); |
| checkValues(justifyContentSpaceAround, "justifyContent", "justify-content", "", "space-around"); |
| var justifyContentSpaceEvenly = document.getElementById("justifyContentSpaceEvenly"); |
| checkValues(justifyContentSpaceEvenly, "justifyContent", "justify-content", "", "space-evenly"); |
| var justifyContentStretch = document.getElementById("justifyContentStretch"); |
| checkValues(justifyContentStretch, "justifyContent", "justify-content", "", "stretch"); |
| var justifyContentStart = document.getElementById("justifyContentStart"); |
| checkValues(justifyContentStart, "justifyContent", "justify-content", "", "start"); |
| var justifyContentEnd = document.getElementById("justifyContentEnd"); |
| checkValues(justifyContentEnd, "justifyContent", "justify-content", "", "end"); |
| var justifyContentCenter = document.getElementById("justifyContentCenter"); |
| checkValues(justifyContentCenter, "justifyContent", "justify-content", "", "center"); |
| var justifyContentLeft = document.getElementById("justifyContentLeft"); |
| checkValues(justifyContentLeft, "justifyContent", "justify-content", "", "left"); |
| var justifyContentRight = document.getElementById("justifyContentRight"); |
| checkValues(justifyContentRight, "justifyContent", "justify-content", "", "right"); |
| var justifyContentFlexStart = document.getElementById("justifyContentFlexStart"); |
| checkValues(justifyContentFlexStart, "justifyContent", "justify-content", "", "flex-start"); |
| var justifyContentFlexEnd = document.getElementById("justifyContentFlexEnd"); |
| checkValues(justifyContentFlexEnd, "justifyContent", "justify-content", "", "flex-end"); |
| var justifyContentUnsafeEnd = document.getElementById("justifyContentUnsafeEnd"); |
| checkValues(justifyContentUnsafeEnd, "justifyContent", "justify-content", "", "unsafe end"); |
| var justifyContentUnsafeCenter = document.getElementById("justifyContentUnsafeCenter"); |
| checkValues(justifyContentUnsafeCenter, "justifyContent", "justify-content", "", "unsafe center"); |
| var justifyContentSafeRight = document.getElementById("justifyContentSafeRight"); |
| checkValues(justifyContentSafeRight, "justifyContent", "justify-content", "", "safe right"); |
| var justifyContentUnsafeLeft = document.getElementById("justifyContentUnsafeLeft"); |
| checkValues(justifyContentUnsafeLeft, "justifyContent", "justify-content", "", "unsafe left"); |
| var justifyContentUnsafeFlexStart = document.getElementById("justifyContentUnsafeFlexStart"); |
| checkValues(justifyContentUnsafeFlexStart, "justifyContent", "justify-content", "", "unsafe flex-start"); |
| var justifyContentSafeFlexEnd = document.getElementById("justifyContentSafeFlexEnd"); |
| checkValues(justifyContentSafeFlexEnd, "justifyContent", "justify-content", "", "safe flex-end"); |
| }, "Test getting justify-content values previously set through CSS."); |
| |
| test(function() { |
| var justifyContentBaseline = document.getElementById("justifyContentBaseline"); |
| checkValues(justifyContentBaseline, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentLastBaseline = document.getElementById("justifyContentFirstBaseline"); |
| checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentLastBaseline = document.getElementById("justifyContentLastBaseline"); |
| checkValues(justifyContentLastBaseline, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentEndUnsafe = document.getElementById("justifyContentEndUnsafe"); |
| checkValues(justifyContentEndUnsafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentCenterUnsafe = document.getElementById("justifyContentCenterUnsafe"); |
| checkValues(justifyContentCenterUnsafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentRightSafe = document.getElementById("justifyContentRightSafe"); |
| checkValues(justifyContentRightSafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentLeftUnsafe = document.getElementById("justifyContentLeftUnsafe"); |
| checkValues(justifyContentLeftUnsafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentFlexStartUnsafe = document.getElementById("justifyContentFlexStartUnsafe"); |
| checkValues(justifyContentFlexStartUnsafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentFlexEndSafe = document.getElementById("justifyContentFlexEndSafe"); |
| checkValues(justifyContentFlexEndSafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSpaceBetweenLeft = document.getElementById("justifyContentSpaceBetweenLeft"); |
| checkValues(justifyContentSpaceBetweenLeft, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSpaceAroundCenter = document.getElementById("justifyContentSpaceAroundCenter"); |
| checkValues(justifyContentSpaceAroundCenter, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSpaceEvenlyRight = document.getElementById("justifyContentSpaceEvenlyRight"); |
| checkValues(justifyContentSpaceEvenlyRight, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentStretchStartSafe = document.getElementById("justifyContentStretchStartSafe"); |
| checkValues(justifyContentStretchStartSafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSpaceAroundEndUnsafe = document.getElementById("justifyContentSpaceAroundEndUnsafe"); |
| checkValues(justifyContentSpaceAroundEndUnsafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSpaceEvenlyFlexStartSafe = document.getElementById("justifyContentSpaceEvenlyFlexStartSafe"); |
| checkValues(justifyContentSpaceEvenlyFlexStartSafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSpaceBetweenSafe = document.getElementById("justifyContentSpaceBetweenSafe"); |
| checkValues(justifyContentSpaceBetweenSafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSpaceBetweenStretch = document.getElementById("justifyContentSpaceBetweenStretch"); |
| checkValues(justifyContentSpaceBetweenStretch, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentSafe = document.getElementById("justifyContentSafe"); |
| checkValues(justifyContentSafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentRightSafeUnsafe = document.getElementById("justifyContentRightSafeUnsafe"); |
| checkValues(justifyContentRightSafeUnsafe, "justifyContent", "justify-content", "", "normal"); |
| var justifyContentCenterLeft = document.getElementById("justifyContentCenterLeft"); |
| checkValues(justifyContentCenterLeft, "justifyContent", "justify-content", "", "normal"); |
| }, "Test setting invalid values to justify-content through CSS."); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| checkValues(element, "justifyContent", "justify-content", "", "normal"); |
| }, "Test initial value of justify-content through JS"); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.justifyContent = "center"; |
| checkValues(element, "justifyContent", "justify-content", "center", "center"); |
| |
| element.style.justifyContent = "unsafe start"; |
| checkValues(element, "justifyContent", "justify-content", "unsafe start", "unsafe start"); |
| |
| element.style.justifyContent = "safe flex-end"; |
| checkValues(element, "justifyContent", "justify-content", "safe flex-end", "safe flex-end"); |
| |
| element.style.justifyContent = " unsafe right"; |
| checkValues(element, "justifyContent", "justify-content", "unsafe right", "unsafe right"); |
| |
| element.style.justifyContent = "normal"; |
| checkValues(element, "justifyContent", "justify-content", "normal", "normal"); |
| |
| element.style.display = "flex"; |
| element.style.justifyContent = "normal"; |
| checkValues(element, "justifyContent", "justify-content", "normal", "normal"); |
| |
| element.style.display = "grid"; |
| element.style.justifyContent = "normal"; |
| checkValues(element, "justifyContent", "justify-content", "normal", "normal"); |
| |
| element.style.justifyContent = "flex-end"; |
| checkValues(element, "justifyContent", "justify-content", "flex-end", "flex-end"); |
| }, "Test getting and setting justify-content through JS"); |
| |
| test(function() { |
| element = document.createElement("div"); |
| document.body.appendChild(element); |
| |
| checkBadValues(element, "justifyContent", "justify-content", ""); |
| checkBadValues(element, "justifyContent", "justify-content", "auto"); |
| checkBadValues(element, "justifyContent", "justify-content", "unsafe auto"); |
| checkBadValues(element, "justifyContent", "justify-content", "auto safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "auto left"); |
| checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "last-baseline center"); |
| checkBadValues(element, "justifyContent", "justify-content", "unsafe unsafe"); |
| checkBadValues(element, "justifyContent", "justify-content", "unsafe safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "center start"); |
| checkBadValues(element, "justifyContent", "justify-content", "baseline safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "unsafe baseline"); |
| checkBadValues(element, "justifyContent", "justify-content", "unsafe safe left"); |
| checkBadValues(element, "justifyContent", "justify-content", "unsafe left safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "left safe unsafe safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "start right space-between"); |
| checkBadValues(element, "justifyContent", "justify-content", "safe stretch"); |
| checkBadValues(element, "justifyContent", "justify-content", "normal space-between"); |
| checkBadValues(element, "justifyContent", "justify-content", "stretch normal"); |
| checkBadValues(element, "justifyContent", "justify-content", "stretch center"); |
| checkBadValues(element, "justifyContent", "justify-content", "space-between right safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "normal safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "space-around stretch"); |
| checkBadValues(element, "justifyContent", "justify-content", "end space-between start"); |
| checkBadValues(element, "justifyContent", "justify-content", "right safe left"); |
| checkBadValues(element, "justifyContent", "justify-content", "unsafe"); |
| checkBadValues(element, "justifyContent", "justify-content", "safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "start safe"); |
| checkBadValues(element, "justifyContent", "justify-content", "end unsafe"); |
| checkBadValues(element, "justifyContent", "justify-content", "baseline"); |
| checkBadValues(element, "justifyContent", "justify-content", "first baseline"); |
| checkBadValues(element, "justifyContent", "justify-content", "last baseline"); |
| }, "Test bad combinations of justify-content"); |
| |
| test(function() { |
| element.style.display = ""; |
| checkInitialValues(element, "justifyContent", "justify-content", "center", "normal"); |
| }, "Test the value 'initial'"); |
| |
| test(function() { |
| element.style.display = "grid"; |
| checkInitialValues(element, "justifyContent", "justify-content", "safe left", "normal"); |
| }, "Test the value 'initial' for grid containers"); |
| |
| test(function() { |
| element.style.display = "flex"; |
| checkInitialValues(element, "justifyContent", "justify-content", "unsafe right", "normal"); |
| }, "Test the value 'initial' for flex containers"); |
| |
| test(function() { |
| checkInheritValues("justifyContent", "justify-content", "end"); |
| checkInheritValues("justifyContent", "justify-content", "safe left"); |
| checkInheritValues("justifyContent", "justify-content", "unsafe center"); |
| }, "Test the value 'inherit'"); |
| </script> |
