blob: c40984bc039e87d3199af7bc97f499fbc9ac5495 [file] [log] [blame]
<!DOCTYPE html>
<title>Kuma Elements</title>
<body>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="base"></div>
<template id="temp">
<div id="outerDiv">
Can you
<div id="innerDiv" invisible>
see me?
</div>
</div>
</template>
<script>
let outerDiv = innerDiv = null;
'use strict';
function setUp() {
base.innerHTML = "";
const clone = document.importNode(temp.content, true);
base.appendChild(clone);
outerDiv = document.querySelector("#outerDiv");
innerDiv = document.querySelector("#innerDiv");
}
function assertIsDisplayed(el) {
assert_not_equals(el.offsetWidth, 0);
assert_not_equals(el.offsetHeight, 0);
}
function assertIsNotDisplayed(el) {
assert_equals(el.offsetWidth, 0);
assert_equals(el.offsetHeight, 0);
}
test(() => {
setUp();
assert_false(outerDiv.hasAttribute("invisible"));
assert_true(innerDiv.hasAttribute("invisible"));
outerDiv.setAttribute("invisible", "invisible");
assert_true(outerDiv.hasAttribute("invisible"));
outerDiv.removeAttribute("invisible");
assert_false(outerDiv.hasAttribute("invisible"));
}, "Setting/removing invisible attributes works");
test(() => {
setUp();
outerDiv.setAttribute("invisible", "x");
assert_equals(outerDiv.getAttribute("invisible"), "x");
assert_equals(outerDiv.invisible, "invisible");
assert_true(outerDiv.hasAttribute("invisible"));
outerDiv.setAttribute("invisible", "");
assert_equals(outerDiv.getAttribute("invisible"), "");
assert_equals(outerDiv.invisible, "invisible");
assert_true(outerDiv.hasAttribute("invisible"));
outerDiv.removeAttribute("invisible");
assert_equals(outerDiv.invisible, "");
outerDiv.setAttribute("invisible", "static");
assert_equals(outerDiv.getAttribute("invisible"), "static");
assert_equals(outerDiv.invisible, "static");
assert_true(outerDiv.hasAttribute("invisible"));
}, "Setting/removing invisible attribute preserves original value, but property returns only invisible/static");
test(() => {
setUp();
innerDiv.removeAttribute("invisible");
assertIsDisplayed(innerDiv);
outerDiv.setAttribute("invisible", "invisible");
assert_equals(getComputedStyle(outerDiv).display, "block", "outerDiv display=block");
assertIsNotDisplayed(outerDiv);
assert_equals(getComputedStyle(innerDiv).display, "block", "innerDiv display=block");
assertIsNotDisplayed(innerDiv);
outerDiv.removeAttribute("invisible");
assertIsDisplayed(outerDiv);
assertIsDisplayed(innerDiv);
}, "Inclusive descendants of an invisible element are not displayed");
test(() => {
setUp();
const host = document.createElement("span");
outerDiv.appendChild(host);
const shadowRoot = host.attachShadow({mode: "open"});
const slot = document.createElement("slot");
shadowRoot.appendChild(slot);
const slottedChild = document.createElement("p");
slottedChild.innerHTML = "I am <b>invisible</b>";
host.appendChild(slottedChild);
assertIsDisplayed(slottedChild);
slot.invisible = "invisible";
assertIsNotDisplayed(slottedChild);
}, "Flat tree descendants of an invisible element are not displayed");
</script>
</body>