focus-display-none-001.html (1917B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Selectors Level 4: focus</title> 4 <link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/selectors-4/#focus-pseudo"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#focus-fixup-rule"> 7 <meta name="assert" content="Checks ':focus' pseudo-class after 'display: none'."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <div id="wrapper"> 11 <input id="input"> 12 </div> 13 <script> 14 "use strict"; 15 16 const wrapper = document.getElementById("wrapper"); 17 const input = document.getElementById("input"); 18 19 async_test((t) => { 20 input.focus(); 21 window.requestAnimationFrame(() => { 22 t.step(() => assert_true(input.matches(":focus"), 23 "Check input matches ':focus' after being focused")); 24 25 input.style.display = "none"; 26 window.requestAnimationFrame(() => { 27 t.step(() => assert_false(input.matches(":focus"), 28 "Check input doesn't match ':focus' after getting 'display: none'")); 29 input.style.display = "inline"; 30 t.done(); 31 }); 32 }); 33 }, "Test ':focus' after 'display:none' on input"); 34 35 async_test((t) => { 36 input.focus(); 37 window.requestAnimationFrame(() => { 38 t.step(() => assert_true(input.matches(":focus"), 39 "Check input matches ':focus' after being focused")); 40 41 wrapper.style.display = "none"; 42 window.requestAnimationFrame(() => { 43 t.step(() => assert_false(input.matches(":focus"), 44 "Check input doesn't match ':focus' after parent got 'display: none'")); 45 wrapper.style.display = "block"; 46 t.done(); 47 }); 48 }); 49 }, "Test ':focus' after 'display:none' on input's parent"); 50 </script>