<!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>
Codebase Browser
chromium