| <!DOCTYPE html> |
| <script src="../resources/js-test.js"></script> |
| <html> |
| <body> |
| <div id="host"> |
| <div id="slotted" slot="s1"></div> |
| </div> |
| <script src="resources/alignment-parsing-utils.js"></script> |
| <script> |
| description('Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside<slot>)'); |
| |
| var block = document.getElementById("host"); |
| |
| debug(""); |
| debug("*** Test 'auto' value resolution for the document root node. ***"); |
| |
| debug(""); |
| debug("Check out how the DOM's root element resolves the align-self 'auto' values."); |
| document.documentElement.style.webkitAlignSelf = "center"; |
| checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "center", "center"); |
| document.documentElement.style.webkitAlignSelf = "auto"; |
| checkValues(document.documentElement, "webkitAlignSelf", "-webkit-align-self", "auto", "normal"); |
| |
| debug(""); |
| debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values."); |
| document.documentElement.style.webkitAlignItems = "center"; |
| checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center"); |
| document.body.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items. |
| document.body.style.webkitAlignSelf = "auto"; |
| checkValues(document.body, "webkitAlignItems", "-webkit-align-items", "", "normal"); |
| checkValues(document.body, "webkitAlignSelf", "-webkit-align-self", "auto", "center"); |
| block.style.webkitAlignItems = ""; // Default value is 'normal' for align-items. |
| block.style.webkitAlignSelf = "auto"; |
| checkValues(block, "webkitAlignItems", "-webkit-align-items", "", "normal"); |
| checkValues(block, "webkitAlignSelf", "-webkit-align-self", "auto", "normal"); |
| |
| debug(""); |
| debug("Check out how the DOM's root element deals with 'auto' value in align-items."); |
| document.documentElement.style.webkitAlignItems = "auto"; // The 'auto' value is not valid for align-items. |
| checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "center", "center"); |
| document.documentElement.style.webkitAlignItems = ""; // Default value is 'normal' for align-items. |
| checkValues(document.documentElement, "webkitAlignItems", "-webkit-align-items", "", "normal"); |
| |
| debug(""); |
| debug("Check out how the DOM's root element resolves the justify-self 'auto' values."); |
| document.documentElement.style.justifySelf = "left"; |
| checkValues(document.documentElement, "justifySelf", "justify-self", "left", "left"); |
| document.documentElement.style.justifySelf = "auto"; |
| checkValues(document.documentElement, "justifySelf", "justify-self", "auto", "normal"); |
| |
| debug(""); |
| debug("Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values."); |
| document.documentElement.style.justifyItems = "center"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center"); |
| document.body.style.justifyItems = "auto"; |
| document.body.style.justifySelf = "auto"; |
| checkValues(document.body, "justifyItems", "justify-items", "auto", "normal"); |
| checkValues(document.body, "justifySelf", "justify-self", "auto", "center"); |
| block.style.justifyItems = "auto"; |
| block.style.justifySelf = "auto"; |
| checkValues(block, "justifyItems", "justify-items", "auto", "normal"); |
| checkValues(block, "justifySelf", "justify-self", "auto", "normal"); |
| |
| debug(""); |
| debug("Check out how the DOM's root element deals with 'auto' value in justify-items."); |
| document.documentElement.style.justifyItems = "auto"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "auto", "normal"); |
| checkValues(document.body, "justifySelf", "justify-self", "auto", "normal"); |
| checkValues(block, "justifySelf", "justify-self", "auto", "normal"); |
| |
| debug(""); |
| debug("Check out how the DOM's root element justify-items's value with 'legacy' keyword is used to resolve any descendant's justify-items 'auto' values."); |
| document.documentElement.style.justifyItems = "legacy center"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); |
| document.body.style.justifyItems = "auto"; |
| document.body.style.justifySelf = "auto"; |
| checkValues(document.body, "justifyItems", "justify-items", "auto", "legacy center"); |
| checkValues(document.body, "justifySelf", "justify-self", "auto", "center"); |
| block.style.justifyItems = "auto"; |
| block.style.justifySelf = "auto"; |
| checkValues(block, "justifyItems", "justify-items", "auto", "legacy center"); |
| checkValues(block, "justifySelf", "justify-self", "auto", "center"); |
| |
| debug(""); |
| debug("Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value."); |
| document.documentElement.style.justifyItems = "auto"; |
| checkValues(document.body, "justifyItems", "justify-items", "auto", "normal"); |
| checkValues(document.body, "justifySelf", "justify-self", "auto", "normal"); |
| checkValues(block, "justifyItems", "justify-items", "auto", "normal"); |
| checkValues(block, "justifySelf", "justify-self", "auto", "normal"); |
| |
| </script> |
| |
| </body> |
| </html> |
