canvas-descendants-focusability-001.html (1643B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Canvas descendants focusability</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/canvas.html#being-used-as-relevant-canvas-fallback-content"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focusable-area"> 7 <meta name="assert" content="Checks that elements being used as relevant canvas 8 fallback content can be focusable even if not rendered."> 9 <div id="log"></div> 10 <canvas> 11 <button data-focusable="true"></button> 12 <section data-focusable="false"> 13 <div data-focusable="false"></div> 14 <span data-focusable="false"></span> 15 <a data-focusable="false"></a> 16 </section> 17 <section tabindex="-1" data-focusable="true"> 18 <div tabindex="-1" data-focusable="true"></div> 19 <span tabindex="-1" data-focusable="true"></span> 20 <a href="#" data-focusable="true"></a> 21 </section> 22 </canvas> 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script> 26 for (let element of document.querySelectorAll("[data-focusable]")) { 27 let title = element.cloneNode(false).outerHTML.toLowerCase(); 28 title = title.slice(0, title.lastIndexOf("<")); 29 test(function() { 30 assert_true(document.activeElement !== element, "Not initially focused"); 31 element.focus(); 32 if (JSON.parse(element.dataset.focusable)) { 33 assert_true(document.activeElement === element, "Should be focused"); 34 } else { 35 assert_true(document.activeElement !== element, "Shouldn't be focused"); 36 } 37 }, title); 38 } 39 </script>