зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1596654 [wpt PR 20267] - Add an extra test to check that inert propagates into Shadow DOM as well as out via slots, a=testonly
Automatic update from web-platform-tests Add an extra test to check that inert propagates into Shadow DOM as well as out via slots Bug: 692360 Change-Id: I8e24c36fbc6b476cfb1f08c0c07b890487995a39 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1918793 Commit-Queue: Alice Boxhall <aboxhall@chromium.org> Reviewed-by: Meredith Lane <meredithl@chromium.org> Cr-Commit-Position: refs/heads/master@{#716831} -- wpt-commits: 3753e6678af4e2440b625cd104f6330c1e93a16d wpt-pr: 20267
This commit is contained in:
Alice Boxhall
moz-wptsync-bot
Родитель
37fe2b6fdd
Коммит
f3e87e93f3
|
|
@ -2,32 +2,44 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>inert inside ShadowRoot affects slotted content</title>
|
||||
<title>inert on Shadow host affects content in shadow</title>
|
||||
<link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>Button 1 should be inert, and Button 2 should not be inert.</div>
|
||||
<div id="shadow-host">
|
||||
<button slot="slot-1" id="button-1">Button 1 (inert)</button>
|
||||
<button slot="slot-2" id="button-2">Button 2 (not inert)</button>
|
||||
<div>Buttons 1 and 2 should be inert.</div>
|
||||
<div id="shadow-host" inert>
|
||||
<button id="button-1">Button 1 (inert)</button>
|
||||
</div>
|
||||
<script>
|
||||
/*
|
||||
Eventual flattened tree structure:
|
||||
|
||||
<div id="shadow-host" inert>
|
||||
#shadow-root (open)
|
||||
| <slot>
|
||||
: <button id="button-1">Button 1 (inert)</button> <!-- slotted -->
|
||||
| </slot>
|
||||
| <button id="button-2">Button 2 (inert)</button> <!-- in shadow -->
|
||||
</div>
|
||||
*/
|
||||
|
||||
const shadowHost = document.getElementById("shadow-host");
|
||||
const shadowRoot = shadowHost.attachShadow({ mode: "open" });
|
||||
const inertDiv = document.createElement("div");
|
||||
inertDiv.inert = true;
|
||||
shadowRoot.appendChild(inertDiv);
|
||||
const slot1 = document.createElement("slot");
|
||||
slot1.name = "slot-1";
|
||||
inertDiv.appendChild(slot1);
|
||||
const slot2 = document.createElement("slot");
|
||||
slot2.name = "slot-2";
|
||||
shadowRoot.appendChild(slot2);
|
||||
|
||||
function testCanFocus(selector, canFocus) {
|
||||
const element = document.querySelector(selector);
|
||||
// Button 1 will be slotted
|
||||
const slot = document.createElement("slot");
|
||||
shadowRoot.appendChild(slot);
|
||||
|
||||
const button2 = document.createElement("button");
|
||||
button2.id = "button-2";
|
||||
button2.textContent = "Button 2 (inert)";
|
||||
shadowRoot.appendChild(button2);
|
||||
|
||||
function testCanFocus(selector, canFocus, opt_context) {
|
||||
let context = opt_context || document;
|
||||
const element = context.querySelector(selector);
|
||||
let focusedElement = null;
|
||||
element.addEventListener("focus", function() { focusedElement = element; }, false);
|
||||
element.focus();
|
||||
|
|
@ -36,8 +48,8 @@
|
|||
|
||||
test(() => {
|
||||
testCanFocus("#button-1", false);
|
||||
testCanFocus("#button-2", true);
|
||||
}, "inert inside ShadowRoot affects slotted content");
|
||||
testCanFocus("#button-2", false, shadowRoot);
|
||||
}, "inert on Shadow host affects content in shadow");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>inert inside ShadowRoot affects slotted content</title>
|
||||
<link rel="author" title="Alice Boxhall" href="aboxhall@chromium.org">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>Button 1 should be inert, and Button 2 should not be inert.</div>
|
||||
<div id="shadow-host">
|
||||
<button slot="slot-1" id="button-1">Button 1 (inert)</button>
|
||||
<button slot="slot-2" id="button-2">Button 2 (not inert)</button>
|
||||
</div>
|
||||
<script>
|
||||
/*
|
||||
Eventual flattened tree structure:
|
||||
|
||||
<div id="shadow-host">
|
||||
#shadow-root (open)
|
||||
| <slot id="slot-1" inert>
|
||||
: <button id="button-1">Button 1</button> <!-- slotted -->
|
||||
| </slot>
|
||||
| <slot id="slot-2">
|
||||
: <button id="button-2">Button 2</button> <!-- slotted -->
|
||||
| </slot>
|
||||
</div>
|
||||
*/
|
||||
|
||||
const shadowHost = document.getElementById("shadow-host");
|
||||
const shadowRoot = shadowHost.attachShadow({ mode: "open" });
|
||||
|
||||
const slot1 = document.createElement("slot");
|
||||
slot1.name = "slot-1";
|
||||
slot1.inert = true;
|
||||
shadowRoot.appendChild(slot1);
|
||||
|
||||
const slot2 = document.createElement("slot");
|
||||
slot2.name = "slot-2";
|
||||
shadowRoot.appendChild(slot2);
|
||||
|
||||
function testCanFocus(selector, canFocus) {
|
||||
const element = document.querySelector(selector);
|
||||
let focusedElement = null;
|
||||
element.addEventListener("focus", function() { focusedElement = element; }, false);
|
||||
element.focus();
|
||||
assert_equals((focusedElement === element), canFocus);
|
||||
}
|
||||
|
||||
test(() => {
|
||||
testCanFocus("#button-1", false);
|
||||
testCanFocus("#button-2", true);
|
||||
}, "inert inside ShadowRoot affects slotted content");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Загрузка…
Ссылка в новой задаче