| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script src="resources/alignment-parsing-utils-th.js"></script> |
| <html> |
| <body> |
| <p>Test to verify auto value resolution works as expected in root elements (eg. document root / shadow roots / slotted elements / elements inside slot)</p> |
| <div id="log"></div> |
| |
| <div id="host"> |
| <div id="slotted" slot="s1"></div> |
| </div> |
| <script> |
| |
| var block = document.getElementById("host"); |
| |
| console.log(""); |
| console.log("*** Test 'auto' value resolution for the document root node. ***"); |
| |
| test(function() { |
| document.documentElement.style.alignSelf = "center"; |
| checkValues(document.documentElement, "alignSelf", "align-self", "center", "center"); |
| document.documentElement.style.alignSelf = "auto"; |
| checkValues(document.documentElement, "alignSelf", "align-self", "auto", "auto"); |
| }, "Check out how the DOM's root element resolves the align-self 'auto' values."); |
| |
| test(function() { |
| document.documentElement.style.alignItems = "center"; |
| checkValues(document.documentElement, "alignItems", "align-items", "center", "center"); |
| document.body.style.alignItems = "auto"; // The 'auto' value is not valid for align-items. |
| document.body.style.alignSelf = "auto"; |
| checkValues(document.body, "alignItems", "align-items", "", "normal"); |
| checkValues(document.body, "alignSelf", "align-self", "auto", "auto"); |
| block.style.alignItems = ""; // Default value is 'normal' for align-items. |
| block.style.alignSelf = "auto"; |
| checkValues(block, "alignItems", "align-items", "", "normal"); |
| checkValues(block, "alignSelf", "align-self", "auto", "auto"); |
| }, "Check out how the DOM's root element align-items's value is used to resolve its children's align-self 'auto' values."); |
| |
| test(function() { |
| document.documentElement.style.alignItems = "auto"; // The 'auto' value is not valid for align-items. |
| checkValues(document.documentElement, "alignItems", "align-items", "center", "center"); |
| document.documentElement.style.alignItems = ""; // Default value is 'normal' for align-items. |
| checkValues(document.documentElement, "alignItems", "align-items", "", "normal"); |
| }, "Check out how the DOM's root element deals with 'auto' value in align-items."); |
| |
| test(function() { |
| 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", "auto"); |
| }, "Check out how the DOM's root element resolves the justify-self 'auto' values."); |
| |
| test(function() { |
| console.log(); |
| document.documentElement.style.justifyItems = "center"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "center", "center"); |
| document.body.style.justifyItems = "legacy"; |
| document.body.style.justifySelf = "auto"; |
| checkValues(document.body, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(document.body, "justifySelf", "justify-self", "auto", "auto"); |
| block.style.justifyItems = "legacy"; |
| block.style.justifySelf = "auto"; |
| checkValues(block, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(block, "justifySelf", "justify-self", "auto", "auto"); |
| }, "Check out how the DOM's root element justify-items's value is used to resolve its children's justify-self 'auto' values."); |
| |
| test(function() { |
| document.documentElement.style.justifyItems = "legacy"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(document.body, "justifySelf", "justify-self", "auto", "auto"); |
| checkValues(block, "justifySelf", "justify-self", "auto", "auto"); |
| }, "Check out how the DOM's root element deals with 'auto' value in justify-items."); |
| |
| test(function() { |
| document.documentElement.style.justifyItems = "legacy center"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); |
| document.body.style.justifyItems = "legacy"; |
| document.body.style.justifySelf = "auto"; |
| checkValues(document.body, "justifyItems", "justify-items", "legacy", "legacy center"); |
| checkValues(document.body, "justifySelf", "justify-self", "auto", "auto"); |
| block.style.justifyItems = "legacy"; |
| block.style.justifySelf = "auto"; |
| checkValues(block, "justifyItems", "justify-items", "legacy", "legacy center"); |
| checkValues(block, "justifySelf", "justify-self", "auto", "auto"); |
| }, "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."); |
| |
| test(function() { |
| document.documentElement.style.justifyItems = "legacy"; |
| checkValues(document.body, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(document.body, "justifySelf", "justify-self", "auto", "auto"); |
| checkValues(block, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(block, "justifySelf", "justify-self", "auto", "auto"); |
| }, "Check out how the DOM's root element recomputes its descendant's style when 'legacy' keyword is removed from its justify-items value."); |
| |
| console.log(""); |
| console.log("*** Test 'auto' value resolution for the shadow DOM root node. ***"); |
| |
| var shadowHost = document.getElementById("host") |
| var shadowRoot = shadowHost.attachShadow({mode:"open"}); |
| var shadowNode = document.createElement('div'); |
| shadowRoot.appendChild(shadowNode); |
| |
| console.log(""); |
| console.log(); |
| |
| test(function() { |
| shadowHost.style.alignItems = "center"; |
| shadowNode.style.alignItems = "end"; |
| checkValues(shadowHost, "alignItems", "align-items", "center", "center"); |
| checkValues(shadowNode, "alignItems", "align-items", "end", "end"); |
| shadowNode.style.alignItems = ""; |
| checkValues(shadowNode, "alignItems", "align-items", "", "normal"); |
| shadowNode.style.alignSelf = "auto"; |
| checkValues(shadowNode, "alignSelf", "align-self", "auto", "auto"); |
| }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for align-self."); |
| |
| test(function() { |
| shadowHost.style.justifyItems = "center"; |
| shadowNode.style.justifyItems = "right"; |
| checkValues(shadowHost, "justifyItems", "justify-items", "center", "center"); |
| checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); |
| shadowNode.style.justifyItems = ""; |
| checkValues(shadowNode, "justifyItems", "justify-items", "", "normal"); |
| shadowNode.style.justifySelf = "auto"; |
| checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto"); |
| }, "Shadow Node inherits from ShadowHost to resolve the 'auto' values for justify-self."); |
| |
| test(function() { |
| shadowHost.style.justifyItems = "legacy"; |
| shadowNode.style.justifyItems = "right"; |
| shadowNode.style.justifySelf = "auto"; |
| checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); |
| checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto"); |
| |
| checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal"); |
| document.documentElement.style.justifyItems = "legacy center"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); |
| checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "legacy center"); |
| checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); |
| checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto"); |
| shadowNode.style.justifyItems = "legacy"; |
| checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center"); |
| document.documentElement.style.justifyItems = "legacy"; |
| }, "Check out how the 'legacy' keyword in justify-items propagates from the DOM Tree to the Shadow Node."); |
| |
| |
| console.log(""); |
| console.log("*** Test 'auto' value resolution for the shadow DOM 'slotted' elements. ***"); |
| |
| var slotted = document.getElementById("slotted"); |
| |
| test(function() { |
| shadowHost.style.alignItems = "center"; |
| shadowNode.style.alignItems = "start"; |
| slotted.style.alignItems = "end"; |
| checkValues(slotted, "alignItems", "align-items", "end", "end"); |
| slotted.style.alignItems = ""; |
| checkValues(slotted, "alignItems", "align-items", "", "normal"); |
| slotted.style.alignSelf = "start"; |
| checkValues(slotted, "alignSelf", "align-self", "start", "start"); |
| slotted.style.alignSelf = "auto"; |
| checkValues(slotted, "alignSelf", "align-self", "auto", "auto"); |
| }, "Check out how align-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned."); |
| |
| test(function() { |
| shadowHost.style.justifyItems = "center"; |
| shadowNode.style.justifyItems = "right"; |
| slotted.style.justifyItems = "left"; |
| checkValues(slotted, "justifyItems", "justify-items", "left", "left"); |
| slotted.style.justifyItems = ""; |
| checkValues(slotted, "justifyItems", "justify-items", "", "normal"); |
| slotted.style.justifySelf = "start"; |
| checkValues(slotted, "justifySelf", "justify-self", "start", "start"); |
| slotted.style.justifySelf = "auto"; |
| checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); |
| }, "Check out how justify-self uses the 'shadowHost' as 'slotted' element's parent while 'slot' is not assigned."); |
| |
| test(function() { |
| shadowHost.style.justifyItems = "legacy"; |
| shadowNode.style.justifyItems = "right"; |
| checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); |
| document.documentElement.style.justifyItems = "legacy center"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); |
| checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "legacy center"); |
| slotted.style.justifyItems = "legacy"; |
| checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal"); |
| slotted.style.justifySelf = "auto"; |
| checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); |
| shadowNode.style.justifyItems = "legacy"; |
| checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center"); |
| checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); |
| document.documentElement.style.justifyItems = "legacy"; |
| }, "Check out how the 'legacy' keyword in justify-items affects the 'slotted' elements while 'slot' is not assigned."); |
| |
| // Slot element is assigned now. |
| var slot = document.createElement('slot'); |
| slot.setAttribute('name', 's1'); |
| shadowNode.appendChild(slot); |
| |
| test(function() { |
| shadowHost.style.alignItems = "center"; |
| shadowNode.style.alignItems = "end"; |
| slotted.style.alignItems = "start"; |
| checkValues(slotted, "alignItems", "align-items", "start", "start"); |
| slotted.style.alignItems = ""; |
| checkValues(slotted, "alignItems", "align-items", "", "normal"); |
| slotted.style.alignSelf = "start"; |
| checkValues(slotted, "alignSelf", "align-self", "start", "start"); |
| slotted.style.alignSelf = "auto"; |
| checkValues(slotted, "alignSelf", "align-self", "auto", "auto"); |
| }, "Check out how align-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned."); |
| |
| test(function() { |
| shadowHost.style.justifyItems = "center"; |
| shadowNode.style.justifyItems = "right"; |
| slotted.style.justifyItems = "left"; |
| checkValues(slotted, "justifyItems", "justify-items", "left", "left"); |
| slotted.style.justifyItems = ""; |
| checkValues(slotted, "justifyItems", "justify-items", "", "normal"); |
| slotted.style.justifySelf = "start"; |
| checkValues(slotted, "justifySelf", "justify-self", "start", "start"); |
| slotted.style.justifySelf = "auto"; |
| checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); |
| }, "Check out how justify-self uses the 'slot' element's parent (Shadow Node) as 'slotted' element' s parent after the 'slot' is assigned."); |
| |
| test(function() { |
| shadowHost.style.justifyItems = "legacy"; |
| shadowNode.style.justifyItems = "right"; |
| checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal"); |
| checkValues(shadowNode, "justifyItems", "justify-items", "right", "right"); |
| document.documentElement.style.justifyItems = "legacy center"; |
| checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center"); |
| checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "legacy center"); |
| slotted.style.justifyItems = "legacy"; |
| checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal"); // Shadow host is not the parent now, but ShadowNode. |
| slotted.style.justifySelf = "auto"; |
| checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Shadow host is not the parent now, but ShadowNode. |
| shadowNode.style.justifyItems = "legacy"; |
| checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center"); |
| checkValues(slotted, "justifyItems", "justify-items", "legacy", "legacy center"); // Now that shadowNode is auto, 'legacy' applies. |
| checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Now that shadowNode is auto, 'legacy' applies. |
| document.documentElement.style.justifyItems = "legacy"; |
| }, "Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned."); |
| |
| test(function() { |
| shadowHost.style.alignItems = "center"; |
| shadowNode.style.alignItems = "end"; |
| slot.style.alignItems = "start"; |
| checkValues(slot, "alignItems", "align-items", "start", "start"); |
| slot.style.alignItems = ""; |
| checkValues(slot, "alignItems", "align-items", "", "normal"); |
| slot.style.alignSelf = "start"; |
| checkValues(slot, "alignSelf", "align-self", "start", "start"); |
| slot.style.alignSelf = "auto"; |
| checkValues(slot, "alignSelf", "align-self", "auto", "auto"); |
| }, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the align-self 'auto' values because Blink does not support slots in the flat tree."); |
| |
| test(function() { |
| shadowHost.style.justifyItems = "center"; |
| shadowNode.style.justifyItems = "right"; |
| |
| slot.style.justifyItems = "left"; |
| checkValues(slot, "justifyItems", "justify-items", "left", "left"); |
| slot.style.justifyItems = "legacy"; |
| checkValues(slot, "justifyItems", "justify-items", "legacy", "normal"); |
| slot.style.justifySelf = "left"; |
| checkValues(slot, "justifySelf", "justify-self", "left", "left"); |
| slot.style.justifySelf = "auto"; |
| checkValues(slot, "justifySelf", "justify-self", "auto", "auto"); |
| }, "The 'slot' element should not use its parent inside the ShadowDOM tree to resolve the justify-self 'auto' values because Blink does not support slots in the flat tree."); |
| |
| </script> |
| |
| </body> |
| </html> |
