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