inert-canvas-fallback-content.html (2384B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Focusability of inert inside canvas</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focusable-area"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#being-used-as-relevant-canvas-fallback-content"> 8 <link rel="help" href="https://github.com/whatwg/html/issues/7534"> 9 <meta name="assert" content=" 10 Checks that inert elements are not focusable 11 even when being used as relevant canvas fallback content, 12 even in a display:none subtree"> 13 <div id="log"></div> 14 <canvas> 15 <section> 16 <div tabindex="-1" data-focusable="true"> 17 normal `div` 18 </div> 19 <span tabindex="-1" data-focusable="true"> 20 normal `span` 21 </span> 22 <a href="#" data-focusable="true"> 23 normal `a` 24 </a> 25 </section> 26 <section style="display: none"> 27 <div tabindex="-1" data-focusable="false"> 28 `div` in `display: none` 29 </div> 30 <span tabindex="-1" data-focusable="false"> 31 `span` in `display: none` 32 </span> 33 <a href="#" data-focusable="false"> 34 `a` in `display: none` 35 </a> 36 </section> 37 <section inert> 38 <div tabindex="-1" data-focusable="false"> 39 inert `div` 40 </div> 41 <span tabindex="-1" data-focusable="false"> 42 inert `span` 43 </span> 44 <a href="#" data-focusable="false"> 45 inert `a` 46 </a> 47 </section> 48 <section inert style="display: none"> 49 <div tabindex="-1" data-focusable="false"> 50 inert `div` in `display: none` 51 </div> 52 <span tabindex="-1" data-focusable="false"> 53 inert `span` in `display: none` 54 </span> 55 <a href="#" data-focusable="false"> 56 inert `a` in `display: none` 57 </a> 58 </section> 59 </canvas> 60 <script src="/resources/testharness.js"></script> 61 <script src="/resources/testharnessreport.js"></script> 62 <script> 63 for (let element of document.querySelectorAll("[data-focusable]")) { 64 test(function() { 65 assert_not_equals(document.activeElement, element); 66 element.focus(); 67 if (JSON.parse(element.dataset.focusable)) { 68 assert_equals(document.activeElement, element); 69 } else { 70 assert_not_equals(document.activeElement, element); 71 } 72 }, element.textContent); 73 } 74 </script>