canvas-descendants-focusability-005.html (2536B)
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 canvas that represents 8 fallback content are not focusable if not rendered, as usual."> 9 <div id="log"></div> 10 <!-- Use a sandboxed iframe to disable scripting and make the canvas 11 represent its fallback content instead of embedded content. --> 12 <iframe sandbox="allow-same-origin" allow="focus-without-user-activation *" 13 srcdoc=' 14 <button data-focusable="true" a></button> 15 <canvas> 16 <button data-focusable="true"></button> 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 <button hidden data-focusable="false"></button> 23 <section tabindex="-1" hidden data-focusable="false"> 24 <div tabindex="-1" data-focusable="false"></div> 25 <span tabindex="-1" data-focusable="false"></span> 26 <a href="#" data-focusable="false"></a> 27 </section> 28 </canvas> 29 '></iframe> 30 <script src="/resources/testharness.js"></script> 31 <script src="/resources/testharnessreport.js"></script> 32 <script> 33 setup({ explicit_done: true }); 34 setup(async () => { 35 const iframe = document.querySelector("iframe"); 36 await new Promise(resolve => { 37 const win = iframe.contentWindow; 38 if (win.location.href === "about:blank" || 39 win.document.readyState !== "complete") { 40 iframe.addEventListener("load", resolve, {once: true}); 41 } else { 42 resolve(); 43 } 44 }); 45 const doc = iframe.contentDocument; 46 for (let element of doc.querySelectorAll("[data-focusable]")) { 47 let title = element.cloneNode(false).outerHTML.toLowerCase(); 48 title = title.slice(0, title.lastIndexOf("<")); 49 test(function() { 50 assert_true(doc.activeElement !== element, "Not initially focused"); 51 element.focus(); 52 if (JSON.parse(element.dataset.focusable)) { 53 assert_true(doc.activeElement === element, "Should be focused"); 54 } else { 55 assert_true(doc.activeElement !== element, "Shouldn't be focused"); 56 } 57 }, title); 58 } 59 done(); 60 }); 61 </script>