Source code

Revision control

Other Tools

Test Info:

  • This test ran 965 times in the preceding 7 days with an average run time of 0.44 secs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Test (Selectors): :focus behavior with shadow hosts & delegatesFocus </title>
<link rel="author" title="Rakina Zata Amni" href="rakina@chromium.org" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/shadow-utils.js"></script>
</head>
<body>
<script>
function createFocusableDiv() {
const div = document.createElement("div");
div.innerText = "foo";
div.tabIndex = 0;
return div;
}
function createShadowHost(delegatesFocus, container) {
const host = document.createElement("div");
host.attachShadow({ mode: "open", delegatesFocus: delegatesFocus });
container.appendChild(host);
return host;
}
const delegatesFocusValues = [true, false];
for (const delegatesFocus of delegatesFocusValues) {
test(() => {
resetFocus();
const host = createShadowHost(delegatesFocus, document.body);
const shadowChild = createFocusableDiv();
host.shadowRoot.appendChild(shadowChild);
shadowChild.focus();
assert_true(shadowChild.matches(":focus"), "element in shadow tree matches :focus");
assert_true(host.matches(":focus"), "host matches :focus");
}, `:focus applies to host with delegatesFocus=${delegatesFocus} when the shadow root's descendant has focus`);
test(() => {
resetFocus();
const host = createShadowHost(delegatesFocus, document.body);
const slotted = createFocusableDiv();
host.shadowRoot.appendChild(document.createElement("slot"));
host.appendChild(slotted);
slotted.focus();
assert_true(slotted.matches(":focus"), "slotted element matches :focus");
assert_false(host.matches(":focus"), "host matches :focus");
}, `:focus does not apply to host with delegatesFocus=${delegatesFocus} when slotted element has focus`);
for (const nestedDelegatesFocus of delegatesFocusValues) {
test(() => {
resetFocus();
const host = createShadowHost(delegatesFocus, document.body);
const nestedHost = createShadowHost(nestedDelegatesFocus, host.shadowRoot);
const nestedShadowChild = createFocusableDiv();
nestedHost.shadowRoot.appendChild(nestedShadowChild);
nestedShadowChild.focus();
assert_true(nestedShadowChild.matches(":focus"), "element in nested shadow tree matches :focus");
assert_true(nestedHost.matches(":focus"), "host of nested shadow tree matches focus");
assert_true(host.matches(":focus"), "topmost host matches focus");
}, `:focus applies to host with delegatesFocus=${delegatesFocus} when an element in a nested shadow tree with delegatesFocus=${nestedDelegatesFocus} is focused`);
}
}
</script>
</body>