canvas-descendants-focusability-003.tentative.html (2301B)
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 rendered because of an 10 explicit 'display: none' style, but can if they are not rendered because of 11 a 'display: contents' style."> 12 <div id="log"></div> 13 <canvas> 14 <button hidden data-focusable="false"></button> 15 <section hidden tabindex="-1" data-focusable="false"> 16 <div tabindex="-1" data-focusable="false"></div> 17 <span tabindex="-1" data-focusable="false"></span> 18 <a href="#" data-focusable="false"></a> 19 </section> 20 <button style="display: contents" data-focusable="true"></button> 21 <section style="display: contents" tabindex="-1" data-focusable="true"> 22 <div style="display: contents" tabindex="-1" data-focusable="true"></div> 23 <span style="display: contents" tabindex="-1" data-focusable="true"></span> 24 <a style="display: contents" href="#" data-focusable="true"></a> 25 </section> 26 </canvas> 27 <script src="/resources/testharness.js"></script> 28 <script src="/resources/testharnessreport.js"></script> 29 <script> 30 setup(() => { 31 const canvas = document.querySelector("canvas"); 32 assert_greater_than(canvas.getClientRects().length, 0, "Canvas is rendered"); 33 }); 34 for (let element of document.querySelectorAll("[data-focusable]")) { 35 let title = element.cloneNode(false).outerHTML.toLowerCase(); 36 title = title.slice(0, title.lastIndexOf("<")); 37 test(function() { 38 assert_equals(element.getClientRects().length, 0, "Not rendered"); 39 assert_true(document.activeElement !== element, "Not initially focused"); 40 element.focus(); 41 if (JSON.parse(element.dataset.focusable)) { 42 assert_true(document.activeElement === element, "Should be focused"); 43 } else { 44 assert_true(document.activeElement !== element, "Shouldn't be focused"); 45 } 46 }, title); 47 } 48 </script>