scroll-matches-focus.html (1347B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>:focus applies before scrolling into view</title> 4 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1775451"> 5 <link href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 6 <link href="https://mozilla.com" title="Mozilla"> 7 <script src=/resources/testharness.js></script> 8 <script src=/resources/testharnessreport.js></script> 9 <style> 10 body { 11 margin: 0; 12 } 13 .padding { 14 height: 200vh; 15 background-color: purple; 16 } 17 #focusable { 18 z-index: 0; 19 position: absolute; 20 top: 0; 21 left: 0; 22 } 23 #focusable:focus { 24 z-index: 1; 25 left: auto; 26 top: auto; 27 } 28 </style> 29 <div class="padding"></div> 30 <div id="focusable" tabindex=0>I am focusable</div> 31 <div class="padding"></div> 32 <script> 33 onload = function() { 34 async_test(function(t) { 35 let focusable = document.getElementById("focusable"); 36 assert_equals(getComputedStyle(focusable).zIndex, "0", "focusable style is correct"); 37 38 window.addEventListener("scroll", t.step_func_done(function(e) { 39 assert_equals(document.activeElement, focusable, "activeElement should be set"); 40 assert_true(focusable.matches(":focus"), ":focus should match by the time we scroll"); 41 assert_equals(getComputedStyle(focusable).zIndex, "1", "focusable style is correct"); 42 }), { once: true }); 43 44 focusable.focus(); 45 }); 46 }; 47 </script>