scope-focus.html (3005B)
1 <!DOCTYPE html> 2 <title>@scope and :focus</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 <main id=main></main> 9 10 <template id=test_subject> 11 <div> 12 <style> 13 @scope (.a:focus) { 14 :scope { z-index: 1; } 15 } 16 </style> 17 <div class=a tabindex=0>1</div> 18 </template> 19 <script> 20 promise_test(async (t) => { 21 t.add_cleanup(() => main.replaceChildren()); 22 main.append(test_subject.content.cloneNode(true)); 23 24 let a = main.querySelector('.a'); 25 26 assert_equals(getComputedStyle(a).zIndex, 'auto'); 27 await test_driver.bless('focus', () => a.focus()); 28 assert_equals(getComputedStyle(a).zIndex, '1'); 29 }, ':focus via :scope in subject'); 30 </script> 31 32 <template id=test_non_subject> 33 <div> 34 <style> 35 @scope (.a:focus) { 36 :scope .b { z-index: 1; } 37 } 38 </style> 39 <div class=a tabindex=0> 40 <div class=b>2</div> 41 </div> 42 </template> 43 <script> 44 promise_test(async (t) => { 45 t.add_cleanup(() => main.replaceChildren()); 46 main.append(test_non_subject.content.cloneNode(true)); 47 48 let a = main.querySelector('.a'); 49 let b = main.querySelector('.b'); 50 51 assert_equals(getComputedStyle(b).zIndex, 'auto'); 52 await test_driver.bless('focus', () => a.focus()); 53 assert_equals(getComputedStyle(b).zIndex, '1'); 54 }, ':focus via :scope in non-subject'); 55 </script> 56 57 <template id=test_subject_limit> 58 <div> 59 <style> 60 @scope (.a) to (:scope:focus) { 61 :scope { z-index: 1; } 62 } 63 </style> 64 <div class=a tabindex=0>3</div> 65 </template> 66 <script> 67 promise_test(async (t) => { 68 t.add_cleanup(() => main.replaceChildren()); 69 main.append(test_subject_limit.content.cloneNode(true)); 70 71 let a = main.querySelector('.a'); 72 73 assert_equals(getComputedStyle(a).zIndex, '1'); 74 await test_driver.bless('focus', () => a.focus()); 75 // After focus(), we're no longer in scope because the limit (to-selector) 76 // kicks in. 77 assert_equals(getComputedStyle(a).zIndex, 'auto'); 78 }, ':focus in limit, :scope in subject'); 79 </script> 80 81 <template id=test_non_subject_limit> 82 <div> 83 <style> 84 @scope (.a) to (.b:focus) { 85 .b { z-index: 1; } 86 } 87 </style> 88 <div class=a tabindex=0> 89 <div class=b tabindex=1>4</div> 90 </div> 91 </template> 92 <script> 93 promise_test(async (t) => { 94 t.add_cleanup(() => main.replaceChildren()); 95 main.append(test_non_subject_limit.content.cloneNode(true)); 96 97 let a = main.querySelector('.a'); 98 let b = main.querySelector('.b'); 99 100 assert_equals(getComputedStyle(b).zIndex, '1'); 101 await test_driver.bless('focus', () => b.focus()); 102 // After focus(), we're no longer in scope because the limit (to-selector) 103 // kicks in. 104 assert_equals(getComputedStyle(b).zIndex, 'auto'); 105 }, ':focus in intermediate limit, :scope in subject'); 106 </script>