link-pseudo-in-has.html (3836B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Selectors Invalidation: :link, :visited :any-link, pseudo-class 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 #parent { color: blue; } 10 #grandparent { color: blue; } 11 #parent:has(> :not(:link)) { color: grey; } 12 #parent:has(> :link) { color: green; } 13 #parent:has(> :visited) { color: red; } 14 #grandparent:has(:not(:any-link)) { color: grey; } 15 #grandparent:has(:any-link) { color: green; } 16 </style> 17 <div id="grandparent"></div> 18 <script> 19 const BLUE = "rgb(0, 0, 255)"; 20 const GREY = "rgb(128, 128, 128)"; 21 const GREEN = "rgb(0, 128, 0)"; 22 const RED = "rgb(255, 0, 0)"; 23 24 function checkColor(id, color, target_matches) { 25 let element = document.getElementById(id); 26 let message = ["location.hash ==", location.hash, ": #" + id, "should be", 27 color, (target_matches ? "with" : "without"), 28 ":target"].join(" "); 29 assert_equals(getComputedStyle(element).color, color, message); 30 } 31 32 promise_test(async () => { 33 assert_equals(getComputedStyle(grandparent).color, BLUE, 34 "grandparent should be blue without any element"); 35 36 let parent = document.createElement("div"); 37 parent.id = "parent"; 38 grandparent.appendChild(parent); 39 40 assert_equals(getComputedStyle(grandparent).color, GREY, 41 "grandparent should be grey after parent added"); 42 assert_equals(getComputedStyle(parent).color, BLUE, 43 "parent should be blue without any link"); 44 45 let div = document.createElement("div"); 46 parent.appendChild(div); 47 48 assert_equals(getComputedStyle(grandparent).color, GREY, 49 "grandparent should be grey after div added"); 50 assert_equals(getComputedStyle(parent).color, GREY, 51 "parent should be grey after div added"); 52 53 let visited = document.createElement("a"); 54 visited.href = ""; 55 parent.appendChild(visited); 56 57 assert_equals(getComputedStyle(grandparent).color, GREEN, 58 "grandparent should be green after visited link added"); 59 assert_equals(getComputedStyle(parent).color, GREEN, 60 "parent should be green after visited link added"); 61 62 let unvisited = document.createElement("a"); 63 unvisited.href = "unvisited"; 64 parent.appendChild(unvisited); 65 66 assert_equals(getComputedStyle(grandparent).color, GREEN, 67 "grandparent should be green after unvisited link added"); 68 assert_equals(getComputedStyle(parent).color, GREEN, 69 "parent should be green after unvisited link added"); 70 71 unvisited.remove(); 72 73 assert_equals(getComputedStyle(grandparent).color, GREEN, 74 "grandparent should be green after unvisited link removed"); 75 assert_equals(getComputedStyle(parent).color, GREEN, 76 "parent should be blue after unvisited link removed"); 77 78 visited.remove(); 79 80 assert_equals(getComputedStyle(grandparent).color, GREY, 81 "grandparent should be grey after visited link removed"); 82 assert_equals(getComputedStyle(parent).color, GREY, 83 "parent should be grey after visited link removed"); 84 85 div.remove(); 86 87 assert_equals(getComputedStyle(grandparent).color, GREY, 88 "grandparent should be grey after div removed"); 89 assert_equals(getComputedStyle(parent).color, BLUE, 90 "parent should be blue after div removed"); 91 92 parent.remove(); 93 94 assert_equals(getComputedStyle(grandparent).color, BLUE, 95 "grandparent should be blue after parent removed"); 96 }); 97 </script>