blob: 8f1e2c5c9017c199df2eb45ae1d2f3e7daa69c14 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!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>
|
