2016-05-30 08:14:31 +00:00
<!DOCTYPE html>
2017-07-10 23:56:21 +00:00
< script src = "../resources/testharness.js" > < / script >
< script src = "../resources/testharnessreport.js" > < / script >
< script src = "resources/alignment-parsing-utils-th.js" > < / script >
2016-05-30 08:14:31 +00:00
< html >
< body >
2017-07-10 23:56:21 +00:00
< 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 >
2016-05-30 08:14:31 +00:00
< div id = "host" >
< div id = "slotted" slot = "s1" > < / div >
< / div >
< script >
var block = document.getElementById("host");
2017-07-10 23:56:21 +00:00
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");
2018-02-09 14:57:12 +00:00
document.body.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
document.body.style.justifySelf = "auto";
2018-02-09 14:57:12 +00:00
checkValues(document.body, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
2018-02-09 14:57:12 +00:00
block.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
block.style.justifySelf = "auto";
2018-02-09 14:57:12 +00:00
checkValues(block, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
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() {
2018-02-09 14:57:12 +00:00
document.documentElement.style.justifyItems = "legacy";
checkValues(document.documentElement, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
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");
2018-02-09 14:57:12 +00:00
document.body.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
document.body.style.justifySelf = "auto";
2018-02-09 14:57:12 +00:00
checkValues(document.body, "justifyItems", "justify-items", "legacy", "legacy center");
2017-07-10 23:56:21 +00:00
checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
2018-02-09 14:57:12 +00:00
block.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
block.style.justifySelf = "auto";
2018-02-09 14:57:12 +00:00
checkValues(block, "justifyItems", "justify-items", "legacy", "legacy center");
2017-07-10 23:56:21 +00:00
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() {
2018-02-09 14:57:12 +00:00
document.documentElement.style.justifyItems = "legacy";
checkValues(document.body, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
checkValues(document.body, "justifySelf", "justify-self", "auto", "auto");
2018-02-09 14:57:12 +00:00
checkValues(block, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
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";
2018-02-09 14:57:12 +00:00
shadowNode.style.alignItems = "end";
2017-07-10 23:56:21 +00:00
checkValues(shadowHost, "alignItems", "align-items", "center", "center");
2018-02-09 14:57:12 +00:00
checkValues(shadowNode, "alignItems", "align-items", "end", "end");
2017-07-10 23:56:21 +00:00
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() {
2018-02-09 14:57:12 +00:00
shadowHost.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
shadowNode.style.justifyItems = "right";
shadowNode.style.justifySelf = "auto";
2018-02-09 14:57:12 +00:00
checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
2018-02-09 14:57:12 +00:00
checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
document.documentElement.style.justifyItems = "legacy center";
checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center");
2018-02-09 14:57:12 +00:00
checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "legacy center");
2017-07-10 23:56:21 +00:00
checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
checkValues(shadowNode, "justifySelf", "justify-self", "auto", "auto");
2018-02-09 14:57:12 +00:00
shadowNode.style.justifyItems = "legacy";
checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center");
document.documentElement.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
}, "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";
2018-02-09 14:57:12 +00:00
shadowNode.style.alignItems = "start";
slotted.style.alignItems = "end";
checkValues(slotted, "alignItems", "align-items", "end", "end");
slotted.style.alignItems = "";
checkValues(slotted, "alignItems", "align-items", "", "normal");
2017-07-10 23:56:21 +00:00
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() {
2018-02-09 14:57:12 +00:00
shadowHost.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
shadowNode.style.justifyItems = "right";
2018-02-09 14:57:12 +00:00
checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
document.documentElement.style.justifyItems = "legacy center";
checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center");
2018-02-09 14:57:12 +00:00
checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "legacy center");
slotted.style.justifyItems = "legacy";
checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
slotted.style.justifySelf = "auto";
checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
2018-02-09 14:57:12 +00:00
shadowNode.style.justifyItems = "legacy";
checkValues(shadowNode, "justifyItems", "justify-items", "legacy", "legacy center");
checkValues(slotted, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
checkValues(slotted, "justifySelf", "justify-self", "auto", "auto");
2018-02-09 14:57:12 +00:00
document.documentElement.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
}, "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";
2018-02-09 14:57:12 +00:00
shadowNode.style.alignItems = "end";
slotted.style.alignItems = "start";
checkValues(slotted, "alignItems", "align-items", "start", "start");
2017-07-10 23:56:21 +00:00
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() {
2018-02-09 14:57:12 +00:00
shadowHost.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
shadowNode.style.justifyItems = "right";
2018-02-09 14:57:12 +00:00
checkValues(shadowHost, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
checkValues(shadowNode, "justifyItems", "justify-items", "right", "right");
document.documentElement.style.justifyItems = "legacy center";
checkValues(document.documentElement, "justifyItems", "justify-items", "legacy center", "legacy center");
2018-02-09 14:57:12 +00:00
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.
2017-07-10 23:56:21 +00:00
slotted.style.justifySelf = "auto";
checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Shadow host is not the parent now, but ShadowNode.
2018-02-09 14:57:12 +00:00
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.
2017-07-10 23:56:21 +00:00
checkValues(slotted, "justifySelf", "justify-self", "auto", "auto"); // Now that shadowNode is auto, 'legacy' applies.
2018-02-09 14:57:12 +00:00
document.documentElement.style.justifyItems = "legacy";
2017-07-10 23:56:21 +00:00
}, "Check out how the 'legacy' keyword affects the 'slotted' elements after the 'slot' is assigned.");
test(function() {
shadowHost.style.alignItems = "center";
2018-02-09 14:57:12 +00:00
shadowNode.style.alignItems = "end";
slot.style.alignItems = "start";
checkValues(slot, "alignItems", "align-items", "start", "start");
2017-07-10 23:56:21 +00:00
slot.style.alignItems = "";
checkValues(slot, "alignItems", "align-items", "", "normal");
2018-02-09 14:57:12 +00:00
slot.style.alignSelf = "start";
checkValues(slot, "alignSelf", "align-self", "start", "start");
2017-07-10 23:56:21 +00:00
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");
2018-02-09 14:57:12 +00:00
slot.style.justifyItems = "legacy";
checkValues(slot, "justifyItems", "justify-items", "legacy", "normal");
2017-07-10 23:56:21 +00:00
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.");
2016-05-30 08:14:31 +00:00
< / script >
< / body >
< / html >