subject-has-invalidation-with-display-none-anchor-element.html (1060B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Selectors Invalidation: subject :has() invalidation with display: none anchor element</title> 4 <link rel="author" title="Byungwoo Lee" href="blee@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/selectors/#relational"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 #target:has(~ input:checked) { display: none; } 10 </style> 11 <p>Click checkbox</p> 12 <div id="target">PASS</div> 13 <input type="checkbox" id="checkme"> 14 <label for="checkme">Check me!</label> 15 <script> 16 test(function() { 17 checkme.checked = false; 18 assert_equals(getComputedStyle(target).display, "block", 19 "target display should be empty"); 20 21 checkme.checked = true; 22 assert_equals(getComputedStyle(target).display, "none", 23 "target display should be none"); 24 25 checkme.checked = false; 26 assert_equals(getComputedStyle(target).display, "block", 27 "target display should be empty again"); 28 }); 29 </script>