highlight-pseudos-visited-computed-001.html (1503B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle on visited</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style> 8 a::selection { 9 color: lime; 10 } 11 a::target-text { 12 color: lime; 13 } 14 a::search-text { 15 color: lime; 16 } 17 a::search-text:current { 18 color: red; 19 } 20 a::spelling-error { 21 color: lime; 22 } 23 a::grammar-error { 24 color: lime; 25 } 26 a::highlight(foo) { 27 color: lime; 28 } 29 a:visited::selection { 30 color: yellow; 31 } 32 a:visited::target-text { 33 color: yellow; 34 } 35 a:visited::search-text { 36 color: yellow; 37 } 38 a:visited::search-text:current { 39 color: red; 40 } 41 a:visited::spelling-error { 42 color: yellow; 43 } 44 a:visited::grammar-error { 45 color: yellow; 46 } 47 a:visited::highlight(foo) { 48 color: yellow; 49 } 50 </style> 51 <a id="target1" class="target" href=""></a> 52 <a id="target2" class="target" href="unvisited"></a> 53 <script> 54 for (const pseudo of ["::selection", "::target-text", "::search-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) { 55 for (const target of [target1, target2]) { 56 test(() => { 57 let style = getComputedStyle(target, pseudo); 58 assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime."); 59 }, `getComputedStyle() for ${pseudo} at #${target.id}`); 60 } 61 } 62 </script>