canvas-descendants-focusability-002.html (1716B)
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 descendants of a non-rendered canvas 8 aren't relevant canvas fallback content, so they aren't focusable."> 9 <div id="log"></div> 10 <canvas hidden> 11 <button data-focusable="false"></button> 12 <section tabindex="-1" data-focusable="false"> 13 <div tabindex="-1" data-focusable="false"></div> 14 <span tabindex="-1" data-focusable="false"></span> 15 <a href="#" data-focusable="false"></a> 16 </section> 17 </canvas> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script> 21 setup(() => { 22 const canvas = document.querySelector("canvas"); 23 assert_equals(canvas.getClientRects().length, 0, "Canvas not rendered"); 24 }); 25 for (let element of document.querySelectorAll("[data-focusable]")) { 26 let title = element.cloneNode(false).outerHTML.toLowerCase(); 27 title = title.slice(0, title.lastIndexOf("<")); 28 test(function() { 29 assert_equals(element.getClientRects().length, 0, "Not rendered"); 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>