canvas-descendants-focusability-004.tentative.html (2067B)
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 <link rel="help" href="https://github.com/whatwg/html/issues/7534"> 8 <meta name="assert" content="Checks that elements being used as relevant canvas 9 fallback content can't be focusable if they are not in the flat tree."> 10 <div id="log"></div> 11 <canvas> 12 <section id="shadow-host"> 13 <button data-focusable="false"></button> 14 <section tabindex="-1" data-focusable="false"> 15 <div tabindex="-1" data-focusable="false"></div> 16 <span tabindex="-1" data-focusable="false"></span> 17 <a href="#" data-focusable="false"></a> 18 </section> 19 </section> 20 </canvas> 21 <script src="/resources/testharness.js"></script> 22 <script src="/resources/testharnessreport.js"></script> 23 <script> 24 setup(() => { 25 const canvas = document.querySelector("canvas"); 26 assert_greater_than(canvas.getClientRects().length, 0, "Canvas is rendered"); 27 const shadowHost = document.getElementById("shadow-host"); 28 const shadowRoot = shadowHost.attachShadow({ mode: "open" }); 29 const slot = document.createElement("slot"); 30 slot.name = "slot"; 31 shadowRoot.appendChild(slot); 32 }); 33 for (let element of document.querySelectorAll("[data-focusable]")) { 34 let title = element.cloneNode(false).outerHTML.toLowerCase(); 35 title = title.slice(0, title.lastIndexOf("<")); 36 test(function() { 37 assert_equals(element.getClientRects().length, 0, "Not rendered"); 38 assert_true(document.activeElement !== element, "Not initially focused"); 39 element.focus(); 40 if (JSON.parse(element.dataset.focusable)) { 41 assert_true(document.activeElement === element, "Should be focused"); 42 } else { 43 assert_true(document.activeElement !== element, "Shouldn't be focused"); 44 } 45 }, title); 46 } 47 </script>