<!doctype html>
<html>
<head>
<title>Testing focus for display: contents</title>
<link rel="help" href="https://drafts.csswg.org/css-display-4/#box-generation">
<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/testdriver-actions.js"></script>
</head>
<body>
<!-- Dec 2023 notes for "display: contents" testing:
- Per CSS spec, setting "display: contents" must not alter an element's semantics (https://www.w3.org/TR/css-display-3/#valdef-display-contents):
"As only the box tree is affected, any semantics based on the document tree, such as selector-matching, event handling, and
property inheritance, are not affected."
-->
<h1>Testing focusability of display: contents</h1>
<button style="display: contents;" class="ex-focusable" data-testname="button with display: contents is focusable">x</button>
<div role="button" tabindex="0" style="display: contents;" class="ex-focusable" data-testname="div with role button, tabindex=0 and display: contents is focusable"></div>
<div role="button" tabindex="-1" style="display: contents;" class="ex-focusable" data-testname="div with role button, tabindex=-1 and display: contents is focusable"></div>
<a href="#" style="display: contents;" class="ex-focusable" data-testname="link with display: contents is focusable">x</a>
<span role="link" tabindex="0" style="display: contents;" class="ex-focusable" data-testname="span with role link, tabindex=0 and display: contents is focusable"></span>
<script>
verifyElementsAreFocusable();
function verifyElementsAreFocusable() {
const els = document.querySelectorAll(".ex-focusable");
if (!els.length) {
throw `Selector passed in verifyElementsAreFocusable should match at least one element.`;
}
for (const el of els) {
let testName = el.getAttribute("data-testname");
test(() => {
el.focus();
assert_equals(document.activeElement, el, "Element is focusable with element.focus()");
}, `${testName}`);
}
};
</script>
</body>
</html>
Codebase Browser
chromium