| <!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> |
