empty-pseudo-in-has.html (1257B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Selectors Invalidation: :empty in :has() argument</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 #subject { color: red } 10 #subject:has(:empty) { color: green } 11 #subject:has(:not(:empty)) { color: blue } 12 </style> 13 <div id="subject"></div> 14 <script> 15 const red = 'rgb(255, 0, 0)'; 16 const green = 'rgb(0, 128, 0)'; 17 const blue = 'rgb(0, 0, 255)'; 18 19 function testColor(test_name, color) { 20 test(function() { 21 assert_equals(getComputedStyle(subject).color, color); 22 }, test_name); 23 } 24 25 testColor("Empty #subject", red); 26 27 let child = document.createElement("div"); 28 child.id = "child"; 29 subject.appendChild(child); 30 31 testColor("Insert div#child to #subject", green); 32 33 child.appendChild(document.createElement("div")); 34 35 testColor("Insert div to div.#child", blue); 36 37 child.replaceChildren(); 38 testColor("Remove div from div.#child", green); 39 40 child.textContent = "Test"; 41 testColor("Insert text into div.#child", blue); 42 43 child.textContent = ""; 44 testColor("Remove text from div.#child", green); 45 </script>