LayoutTests/css3/parse-alignment-of-root-elements.html

<!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>