554 lines
20 KiB
HTML
554 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<title>Test shadow roots with slots</title>
|
|
|
|
<link rel="stylesheet" type="text/css"
|
|
href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
|
|
|
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
<script type="application/javascript"
|
|
src="../common.js"></script>
|
|
<script type="application/javascript"
|
|
src="../role.js"></script>
|
|
<script type="application/javascript"
|
|
src="../promisified-events.js"></script>
|
|
|
|
<script type="application/javascript">
|
|
async function _dynamicShadowTest(name, mutationFunc, expectedTree, reorder_targets) {
|
|
info(name);
|
|
|
|
let container = getNode(name);
|
|
let host = container.querySelector('.host');
|
|
|
|
document.body.offsetTop;
|
|
let event = reorder_targets ?
|
|
waitForEvents(reorder_targets.map(target => [EVENT_REORDER, target, name])) :
|
|
waitForEvent(EVENT_REORDER, host, name);
|
|
|
|
mutationFunc(container, host);
|
|
|
|
await event;
|
|
|
|
testAccessibleTree(container, expectedTree);
|
|
|
|
return true;
|
|
}
|
|
|
|
async function attachFlatShadow() {
|
|
await _dynamicShadowTest("attachFlatShadow",
|
|
(container, host) => {
|
|
host.attachShadow({ mode: "open" })
|
|
.appendChild(container.querySelector('.shadowtree').content.cloneNode(true));
|
|
}, { SECTION: [{ SECTION: [{ name: "red"} ] }] });
|
|
}
|
|
|
|
async function attachOneDeepShadow() {
|
|
await _dynamicShadowTest("attachOneDeepShadow",
|
|
(container, host) => {
|
|
host.attachShadow({ mode: "open" })
|
|
.appendChild(container.querySelector('.shadowtree').content.cloneNode(true));
|
|
}, { SECTION: [{ SECTION: [{ SECTION: [{ name: "red"} ] }] }] });
|
|
}
|
|
|
|
async function changeSlotFlat() {
|
|
await _dynamicShadowTest("changeSlotFlat",
|
|
(container) => {
|
|
container.querySelector('.red').removeAttribute('slot');
|
|
container.querySelector('.green').setAttribute('slot', 'myslot');
|
|
}, { SECTION: [{ SECTION: [{ name: "green"} ] }] });
|
|
}
|
|
|
|
async function changeSlotOneDeep() {
|
|
await _dynamicShadowTest("changeSlotOneDeep",
|
|
(container) => {
|
|
container.querySelector('.red').removeAttribute('slot');
|
|
container.querySelector('.green').setAttribute('slot', 'myslot');
|
|
}, { SECTION: [{ SECTION: [{ SECTION: [{ name: "green"} ] }] }] }, ["shadowdiv"]);
|
|
}
|
|
|
|
// Nested roots and slots
|
|
async function changeSlotNested() {
|
|
await _dynamicShadowTest("changeSlotNested",
|
|
(container) => {
|
|
testAccessibleTree(getNode("changeSlotNested"),
|
|
{ SECTION: [{ SECTION: [{ SECTION: [{ name: "red"} ] }] }] });
|
|
container.querySelector('.red').removeAttribute('slot');
|
|
container.querySelector('.green').setAttribute('slot', 'myslot');
|
|
}, { SECTION: [{ SECTION: [{ SECTION: [{ name: "green"} ] }] }] }, ["shadowdiv"]);
|
|
}
|
|
|
|
async function changeSlotSingleChild() {
|
|
await _dynamicShadowTest("changeSlotSingleChild",
|
|
(container) => {
|
|
container.querySelector('.red').setAttribute('slot', 'invalid');
|
|
}, { SECTION: [{ SECTION: [] }] });
|
|
}
|
|
|
|
async function changeSlotNoShadow() {
|
|
await _dynamicShadowTest("changeSlotNoShadow",
|
|
(container) => {
|
|
// Make sure changing the slot attribute doesn't remove an element
|
|
// even when it remains in the flat tree.
|
|
container.querySelector('.red').setAttribute('slot', 'invalid');
|
|
// We need a reorder to know when we're done here, so remove another
|
|
// child.
|
|
container.querySelector('.green').remove();
|
|
}, { SECTION: [{ SECTION: [{ name: "red"} ] }] });
|
|
}
|
|
|
|
// Dynamic mutations to both shadow root and shadow host subtrees
|
|
// testing/web-platform/tests/css/css-scoping/shadow-assign-dynamic-001.html
|
|
async function assignSlotDynamic() {
|
|
await _dynamicShadowTest("assignSlotDynamic",
|
|
(container, host) => {
|
|
host.shadowRoot.appendChild(container.querySelector('.shadowtree').content.cloneNode(true));
|
|
host.appendChild(container.querySelector('.lighttree').content.cloneNode(true));
|
|
}, { SECTION: [{ SECTION: [{ name: "slot1"}, { name: "slot2" } ] }] });
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-fallback-dynamic-001.html
|
|
async function shadowFallbackDynamic_1() {
|
|
await _dynamicShadowTest("shadowFallbackDynamic_1",
|
|
(container, host) => {
|
|
host.firstElementChild.remove();
|
|
}, { SECTION: [{ SECTION: [{ name: "green"} ] }] });
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-fallback-dynamic-002.html
|
|
async function shadowFallbackDynamic_2() {
|
|
await _dynamicShadowTest("shadowFallbackDynamic_2",
|
|
(container, host) => {
|
|
host.firstElementChild.removeAttribute("slot");
|
|
}, { SECTION: [{ SECTION: [{ name: "green"} ] }] });
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-fallback-dynamic-003.html
|
|
async function shadowFallbackDynamic_3() {
|
|
await _dynamicShadowTest("shadowFallbackDynamic_3",
|
|
(container, host) => {
|
|
host.appendChild(container.querySelector(".lighttree").content.cloneNode(true));
|
|
}, { SECTION: [{ SECTION: [{ name: "green"} ] }] });
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-fallback-dynamic-004.html
|
|
async function shadowFallbackDynamic_4() {
|
|
await _dynamicShadowTest("shadowFallbackDynamic_4",
|
|
(container, host) => {
|
|
host.shadowRoot.insertBefore(
|
|
container.querySelector(".moreshadowtree").
|
|
content.cloneNode(true), host.shadowRoot.firstChild);
|
|
}, { SECTION: [{ SECTION: [{ name: "slotparent2", children: [{ name: "green"} ] }, { name: "slotparent1" } ] }] });
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-fallback-dynamic-004.html
|
|
// This tests a case when the the slotted element would remain in the same accessible container
|
|
async function shadowFallbackDynamic_4_1() {
|
|
await _dynamicShadowTest("shadowFallbackDynamic_4_1",
|
|
(container, host) => {
|
|
host.shadowRoot.insertBefore(
|
|
container.querySelector(".moreshadowtree").
|
|
content.cloneNode(true), host.shadowRoot.firstChild);
|
|
}, { SECTION: [{ SECTION: [ { name: "green"}, { SEPARATOR: [] } ] }] });
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-fallback-dynamic-005.html
|
|
async function shadowFallbackDynamic_5() {
|
|
await _dynamicShadowTest("shadowFallbackDynamic_5",
|
|
(container, host) => {
|
|
host.firstElementChild.setAttribute("slot", "myotherslot");
|
|
}, { SECTION: [{ SECTION: [{ name: "green"} ] }] });
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-reassign-dynamic-002.html
|
|
async function shadowReassignDynamic_2() {
|
|
await _dynamicShadowTest("shadowReassignDynamic_2",
|
|
(container, host) => {
|
|
host.shadowRoot.querySelector("slot").setAttribute("name", "myslot");
|
|
}, { SECTION: [{ SECTION: [{ name: "green"} ] }] });
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-reassign-dynamic-003.html
|
|
async function shadowReassignDynamic_3() {
|
|
await _dynamicShadowTest("shadowReassignDynamic_3",
|
|
(container, host) => {
|
|
testAccessibleTree(container, { SECTION: [{ SECTION: [{ name: "green"}, { name: "red", children: [ { PUSHBUTTON: [] }]} ] }] });
|
|
host.shadowRoot.querySelector("slot[name]").removeAttribute("name");
|
|
|
|
}, { SECTION: [{ SECTION: [{ name: "green", children: [ { PUSHBUTTON: [] }]}, { name: "red"} ] }] },
|
|
[evt => evt.accessible.name == "green", evt => evt.accessible.name == "red"]);
|
|
}
|
|
|
|
// testing/web-platform/tests/css/css-scoping/shadow-reassign-dynamic-004.html
|
|
async function shadowReassignDynamic_4() {
|
|
await _dynamicShadowTest("shadowReassignDynamic_4",
|
|
(container, host) => {
|
|
host.shadowRoot.getElementById("slot").remove();
|
|
}, { SECTION: [{ SECTION: [{ name: "green"} ] }] });
|
|
}
|
|
|
|
function shadowProcessInvalidation() {
|
|
testAccessibleTree("shadowProcessInvalidation",
|
|
{ SECTION: [{
|
|
SECTION: [{
|
|
SECTION: [{ TEXT_LEAF: { name: "Hello "} },
|
|
{ TEXT: [{ TEXT_LEAF: { name: "World"} }] },
|
|
{ PUSHBUTTON: { name: "World"} }]
|
|
}]
|
|
}]
|
|
});
|
|
}
|
|
|
|
async function justAttachShadow() {
|
|
await _dynamicShadowTest("justAttachShadow",
|
|
(container, host) => {
|
|
host.attachShadow({ mode: "open" });
|
|
}, { SECTION: [{ SECTION: [] }] });
|
|
}
|
|
|
|
async function doTest() {
|
|
await attachFlatShadow();
|
|
|
|
await attachOneDeepShadow();
|
|
|
|
await changeSlotFlat();
|
|
|
|
await changeSlotOneDeep();
|
|
|
|
await changeSlotNested();
|
|
|
|
await changeSlotSingleChild();
|
|
|
|
await changeSlotNoShadow();
|
|
|
|
await assignSlotDynamic();
|
|
|
|
await shadowFallbackDynamic_1();
|
|
|
|
await shadowFallbackDynamic_2();
|
|
|
|
await shadowFallbackDynamic_3();
|
|
|
|
await shadowFallbackDynamic_4();
|
|
|
|
await shadowFallbackDynamic_4_1();
|
|
|
|
await shadowFallbackDynamic_5();
|
|
|
|
await shadowReassignDynamic_2();
|
|
|
|
await shadowReassignDynamic_3();
|
|
|
|
await shadowReassignDynamic_4();
|
|
|
|
shadowProcessInvalidation();
|
|
|
|
await justAttachShadow();
|
|
|
|
SimpleTest.finish();
|
|
}
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
addA11yLoadEvent(doTest);
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<p id="display"></p>
|
|
<div id="content" style="display: none"></div>
|
|
<pre id="test">
|
|
</pre>
|
|
<div id="attachFlatShadow">
|
|
<template class="shadowtree">
|
|
<style>::slotted(div) { width: 100px; height: 100px }</style>
|
|
<slot name="myslot">FAIL</slot>
|
|
</template>
|
|
<section class="host">
|
|
<div style="background: green" aria-label="green"></div>
|
|
<div style="background: red" aria-label="red" slot="myslot"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="attachOneDeepShadow">
|
|
<template class="shadowtree">
|
|
<style>::slotted(div) { width: 100px; height: 100px }</style>
|
|
<div id="shadowdiv">
|
|
<slot name="myslot">FAIL</slot>
|
|
</div>
|
|
</template>
|
|
<section class="host">
|
|
<div style="background: green" aria-label="green"></div>
|
|
<div style="background: red" aria-label="red" slot="myslot"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="changeSlotFlat">
|
|
<template class="shadowtree">
|
|
<style>::slotted(div) { width: 100px; height: 100px }</style>
|
|
<slot name="myslot">FAIL</slot>
|
|
</template>
|
|
<section class="host">
|
|
<div class="green" style="background: green" aria-label="green"></div>
|
|
<div class="red" style="background: red" aria-label="red" slot="myslot"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#changeSlotFlat > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#changeSlotFlat > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="changeSlotOneDeep">
|
|
<template class="shadowtree">
|
|
<style>::slotted(div) { width: 100px; height: 100px }</style>
|
|
<div id="shadowdiv">
|
|
<slot name="myslot">FAIL</slot>
|
|
</div>
|
|
</template>
|
|
<section class="host">
|
|
<div class="green" style="background: green" aria-label="green"></div>
|
|
<div class="red" style="background: red" aria-label="red" slot="myslot"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#changeSlotOneDeep > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#changeSlotOneDeep > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="changeSlotNested">
|
|
<template class="shadowtree outer">
|
|
<div id="shadowdiv">
|
|
<slot name="myslot">FAIL</slot>
|
|
</div>
|
|
</template>
|
|
<template class="shadowtree inner">
|
|
<style>::slotted(div) { width: 100px; height: 100px }</style>
|
|
<slot>FAIL</slot>
|
|
</template>
|
|
<section class="host">
|
|
<div class="green" style="background: green" aria-label="green"></div>
|
|
<div class="red" style="background: red" aria-label="red" slot="myslot"></div>
|
|
</section>
|
|
<script>
|
|
(function foo() {
|
|
let outerShadow =
|
|
document.querySelector("#changeSlotNested > .host").
|
|
attachShadow({ mode: "open" });
|
|
outerShadow.appendChild(
|
|
document.querySelector("#changeSlotNested > .shadowtree.outer").
|
|
content.cloneNode(true));
|
|
let innerShadow =
|
|
outerShadow.querySelector("#shadowdiv").
|
|
attachShadow({ mode: "open" });
|
|
innerShadow.appendChild(
|
|
document.querySelector("#changeSlotNested > .shadowtree.inner").
|
|
content.cloneNode(true));
|
|
})();
|
|
</script>
|
|
</div>
|
|
|
|
<div id="changeSlotSingleChild">
|
|
<template class="shadowtree">
|
|
<style>::slotted(div) { width: 100px; height: 100px }</style>
|
|
<slot></slot>
|
|
</template>
|
|
<section class="host">
|
|
<div class="red" style="background: red" aria-label="red"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#changeSlotSingleChild > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#changeSlotSingleChild > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="changeSlotNoShadow">
|
|
<section class="host">
|
|
<div class="red" style="background: red; width: 100px; height: 100px;" aria-label="red"></div>
|
|
<div class="green" style="background: green; width: 100px; height: 100px;" aria-label="green"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="assignSlotDynamic">
|
|
<template class="shadowtree">
|
|
<style>::slotted(div) { width: 50px; height: 100px }</style>
|
|
<slot name="slot1">FAIL</slot>
|
|
<slot name="slot2">FAIL</slot>
|
|
</template>
|
|
<template class="lighttree">
|
|
<div aria-label="slot1" slot="slot1"></div>
|
|
<div aria-label="slot2" slot="slot2"></div>
|
|
</template>
|
|
<section class="host"></section>
|
|
<script>
|
|
document.querySelector("#assignSlotDynamic > .host").attachShadow({ mode: "open" });
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowFallbackDynamic_1">
|
|
<template class="shadowtree">
|
|
<slot name="myslot">
|
|
<div aria-label="green" style="width: 100px; height: 100px; background: green"></div>
|
|
</slot>
|
|
</template>
|
|
<section class="host"><span slot="myslot">FAIL</span></section>
|
|
<script>
|
|
document.querySelector("#shadowFallbackDynamic_1 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowFallbackDynamic_1 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowFallbackDynamic_2">
|
|
<template class="shadowtree">
|
|
<slot name="myslot">
|
|
<div aria-label="green" style="width: 100px; height: 100px; background: green"></div>
|
|
</slot>
|
|
</template>
|
|
<section class="host"><span slot="myslot">FAIL</span></section>
|
|
<script>
|
|
document.querySelector("#shadowFallbackDynamic_2 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowFallbackDynamic_2 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowFallbackDynamic_3">
|
|
<template class="shadowtree">
|
|
<slot name="myslot">FAIL</slot>
|
|
</template>
|
|
<template class="lighttree">
|
|
<div aria-label="green" slot="myslot" style="width: 100px; height: 100px; background: green"></div>
|
|
</template>
|
|
<section class="host"></section>
|
|
<script>
|
|
document.querySelector("#shadowFallbackDynamic_3 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowFallbackDynamic_3 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowFallbackDynamic_4">
|
|
<template class="shadowtree">
|
|
<div aria-label="slotparent1"><slot name="myslot"></slot></div>
|
|
</template>
|
|
<template class="moreshadowtree">
|
|
<div aria-label="slotparent2"><slot name="myslot">FAIL</slot></div>
|
|
</template>
|
|
<section class="host">
|
|
<div slot="myslot" aria-label="green" style="width: 100px; height: 100px; background: green"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#shadowFallbackDynamic_4 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowFallbackDynamic_4 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowFallbackDynamic_4_1">
|
|
<template class="shadowtree">
|
|
<hr>
|
|
<slot name="myslot"></slot>
|
|
</template>
|
|
<template class="moreshadowtree">
|
|
<slot name="myslot">FAIL</slot>
|
|
</template>
|
|
<section class="host">
|
|
<div slot="myslot" aria-label="green" style="width: 100px; height: 100px; background: green"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#shadowFallbackDynamic_4_1 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowFallbackDynamic_4_1 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowFallbackDynamic_5">
|
|
<template class="shadowtree">
|
|
<slot name="myslot"></slot>
|
|
<slot name="myotherslot">FAIL</slot>
|
|
</template>
|
|
<section class="host">
|
|
<div slot="myslot" aria-label="green" style="width: 100px; height: 100px; background: green"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#shadowFallbackDynamic_5 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowFallbackDynamic_5 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowReassignDynamic_2">
|
|
<template class="shadowtree">
|
|
<style>::slotted(div) { width: 100px; height: 100px }</style>
|
|
<slot>FAIL</slot>
|
|
</template>
|
|
<section class="host">
|
|
<div slot="myslot" aria-label="green" style="width: 100px; height: 100px; background: green"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#shadowReassignDynamic_2 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowReassignDynamic_2 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowReassignDynamic_3">
|
|
<template class="shadowtree">
|
|
<div aria-label="green"><slot name="nomatch"></slot></div>
|
|
<div aria-label="red"><slot></slot></div>
|
|
</template>
|
|
<section class="host">
|
|
<div role="button"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#shadowReassignDynamic_3 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowReassignDynamic_3 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowReassignDynamic_4">
|
|
<template class="shadowtree">
|
|
<style>::slotted(div),div { width: 100px; height: 100px }</style>
|
|
<slot id="slot"></slot>
|
|
<slot>
|
|
<div aria-label="red" style="background: red"></div>
|
|
</slot>
|
|
</template>
|
|
<section class="host">
|
|
<div aria-label="green" style="background: green"></div>
|
|
</section>
|
|
<script>
|
|
document.querySelector("#shadowReassignDynamic_4 > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowReassignDynamic_4 > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="shadowProcessInvalidation">
|
|
<template class="shadowtree">
|
|
<div id="shadowdiv">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
<section class="host">Hello <span id="c">World</span><button aria-labelledby="c"></button></section>
|
|
<script>
|
|
document.querySelector("#shadowProcessInvalidation > .host")
|
|
.attachShadow({ mode: "open" })
|
|
.appendChild(document.querySelector("#shadowProcessInvalidation > .shadowtree").content.cloneNode(true));
|
|
</script>
|
|
</div>
|
|
|
|
<div id="justAttachShadow">
|
|
<section class="host">
|
|
<button></button>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="eventdump"></div>
|
|
</body>
|
|
</html>
|