dynamic-inert-on-focused-element.html (2426B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>Dynamic inertness on focused element</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule"> 6 <meta name="assert" content="If a focused element becomes inert, it stops being focused."> 7 <div id="log"></div> 8 9 <div class="test-wrapper" data-name="<input> that gets 'inert' attribute"> 10 <input class="becomes-inert check-focus"> 11 </div> 12 13 <div class="test-wrapper" data-name="<input> whose parent gets 'inert' attribute"> 14 <div class="becomes-inert"> 15 <input class="check-focus"> 16 </div> 17 </div> 18 19 <div class="test-wrapper" data-name="<button> that gets 'inert' attribute"> 20 <button class="becomes-inert check-focus">foo</button> 21 </div> 22 23 <div class="test-wrapper" data-name="<div> that gets 'inert' attribute"> 24 <div class="becomes-inert check-focus" tabindex="-1"></div> 25 </div> 26 27 <div class="test-wrapper" data-name="<div> whose parent gets 'inert' attribute"> 28 <div class="becomes-inert"> 29 <div class="check-focus" tabindex="-1">bar</div> 30 </div> 31 </div> 32 33 <div class="test-wrapper" data-name="<div> whose grandparent gets 'inert' attribute"> 34 <div class="becomes-inert"> 35 <p> 36 <span class="check-focus" tabindex="-1">baz</span> 37 </p> 38 </div> 39 </div> 40 41 <script src="/resources/testharness.js"></script> 42 <script src="/resources/testharnessreport.js"></script> 43 <script> 44 function nextRepaint() { 45 return new Promise(resolve => { 46 requestAnimationFrame(() => { 47 requestAnimationFrame(resolve); 48 }); 49 }); 50 } 51 52 const loaded = new Promise(resolve => { 53 addEventListener("load", resolve, {once: true}); 54 }); 55 promise_setup(() => loaded); 56 57 for (const testWrapper of document.querySelectorAll(".test-wrapper")) { 58 const becomesInert = testWrapper.querySelector(".becomes-inert"); 59 const checkFocus = testWrapper.querySelector(".check-focus"); 60 promise_test(async function() { 61 checkFocus.focus(); 62 assert_equals(document.activeElement, checkFocus, "The element is focused"); 63 64 becomesInert.inert = true; 65 66 // The focus fixup rule should blur the element since it's no longer focusable. 67 // In Chromium this happens after a repaint (https://crbug.com/1275097). 68 await nextRepaint(); 69 assert_equals(document.activeElement, document.body, "The element stops being focused"); 70 }, testWrapper.dataset.name); 71 } 72 </script>