49 lines
No EOL
2.2 KiB
HTML
49 lines
No EOL
2.2 KiB
HTML
<!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> |