74 lines
2.3 KiB
HTML
74 lines
2.3 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8" />
|
|
<title>Focusability of inert inside canvas</title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focusable-area">
|
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert">
|
|
<link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#being-used-as-relevant-canvas-fallback-content">
|
|
<link rel="help" href="https://github.com/whatwg/html/issues/7534">
|
|
<meta name="assert" content="
|
|
Checks that inert elements are not focusable
|
|
even when being used as relevant canvas fallback content,
|
|
even in a display:none subtree">
|
|
<div id="log"></div>
|
|
<canvas>
|
|
<section>
|
|
<div tabindex="-1" data-focusable="true">
|
|
normal `div`
|
|
</div>
|
|
<span tabindex="-1" data-focusable="true">
|
|
normal `span`
|
|
</span>
|
|
<a href="#" data-focusable="true">
|
|
normal `a`
|
|
</a>
|
|
</section>
|
|
<section style="display: none">
|
|
<div tabindex="-1" data-focusable="false">
|
|
`div` in `display: none`
|
|
</div>
|
|
<span tabindex="-1" data-focusable="false">
|
|
`span` in `display: none`
|
|
</span>
|
|
<a href="#" data-focusable="false">
|
|
`a` in `display: none`
|
|
</a>
|
|
</section>
|
|
<section inert>
|
|
<div tabindex="-1" data-focusable="false">
|
|
inert `div`
|
|
</div>
|
|
<span tabindex="-1" data-focusable="false">
|
|
inert `span`
|
|
</span>
|
|
<a href="#" data-focusable="false">
|
|
inert `a`
|
|
</a>
|
|
</section>
|
|
<section inert style="display: none">
|
|
<div tabindex="-1" data-focusable="false">
|
|
inert `div` in `display: none`
|
|
</div>
|
|
<span tabindex="-1" data-focusable="false">
|
|
inert `span` in `display: none`
|
|
</span>
|
|
<a href="#" data-focusable="false">
|
|
inert `a` in `display: none`
|
|
</a>
|
|
</section>
|
|
</canvas>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script>
|
|
for (let element of document.querySelectorAll("[data-focusable]")) {
|
|
test(function() {
|
|
assert_not_equals(document.activeElement, element);
|
|
element.focus();
|
|
if (JSON.parse(element.dataset.focusable)) {
|
|
assert_equals(document.activeElement, element);
|
|
} else {
|
|
assert_not_equals(document.activeElement, element);
|
|
}
|
|
}, element.textContent);
|
|
}
|
|
</script>
|