mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 17:25:36 +00:00
f3e87e93f3
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
56 lines
1.7 KiB
HTML
56 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<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>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" });
|
|
|
|
// 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();
|
|
assert_equals((focusedElement === element), canFocus);
|
|
}
|
|
|
|
test(() => {
|
|
testCanFocus("#button-1", false);
|
|
testCanFocus("#button-2", false, shadowRoot);
|
|
}, "inert on Shadow host affects content in shadow");
|
|
</script>
|
|
</body>
|
|
</html>
|