scope-visited.html (5916B)
1 <!DOCTYPE html> 2 <title>@scope - :visited</title> 3 <link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles"> 4 <link rel="help" href="https://drafts.csswg.org/selectors-4/#link"> 5 <link rel="match" href="scope-visited-ref.html"> 6 7 <!-- Sub-tests use ShadowDOM to stay isolated from eachother. --> 8 9 <!-- :visited via :scope in subject --> 10 <div> 11 <template shadowrootmode=open> 12 <a id=visited href=""> 13 Visited <span>Span</span> 14 </a> 15 <style> 16 /* The visited background-color magically gets the alpha of the 17 unvisited color, which by default is rgba(0, 0, 0, 0). Set alpha to 18 255 so that visited colors also gets this alpha. */ 19 * { background-color: rgba(255, 255, 255, 255); } 20 21 @scope (:visited) { 22 :scope { background-color: coral; } 23 } 24 @scope (:link) { 25 :scope { background-color: skyblue; } /* Does not match. */ 26 } 27 </style> 28 </template> 29 </div> 30 31 <!-- :link via :scope in subject --> 32 <div> 33 <template shadowrootmode=open> 34 <a id=unvisited href="x"> 35 Unvisited <span>Span</span> 36 </a> 37 <style> 38 * { background-color: rgba(255, 255, 255, 255); } 39 40 @scope (:link) { 41 :scope { background-color: skyblue; } 42 } 43 @scope (:visited) { 44 :scope { background-color: coral; } /* Does not match. */ 45 } 46 </style> 47 </template> 48 </div> 49 50 <!-- :visited via :scope in non-subject --> 51 <div> 52 <template shadowrootmode=open> 53 <a id=visited href=""> 54 Visited <span>Span</span> 55 </a> 56 <style> 57 * { background-color: rgba(255, 255, 255, 255); } 58 59 @scope (:visited) { 60 :scope span { background-color: coral; } 61 } 62 @scope (:link) { 63 :scope span { background-color: skyblue; } /* Does not match. */ 64 } 65 </style> 66 </template> 67 </div> 68 69 <!-- :link via :scope in non-subject --> 70 <div> 71 <template shadowrootmode=open> 72 <a id=unvisited href="x"> 73 Unvisited <span>Span</span> 74 </a> 75 <style> 76 * { background-color: rgba(255, 255, 255, 255); } 77 78 @scope (:link) { 79 :scope span { background-color: skyblue; } 80 } 81 @scope (:visited) { 82 :scope span { background-color: coral; } /* Does not match. */ 83 } 84 </style> 85 </template> 86 </div> 87 88 <!-- :visited in scope-end --> 89 <div> 90 <template shadowrootmode=open> 91 <main> 92 Main 93 <a id=visited href=""> 94 Visited <span>Span</span> 95 </a> 96 </main> 97 <style> 98 * { background-color: rgba(255, 255, 255, 255); } 99 100 @scope (main) to (:visited) { 101 /* Does not match, because #visited is not in scope. */ 102 :scope :visited { background-color: coral; } 103 } 104 @scope (main) { 105 :scope :link { background-color: skyblue; } /* Also doesn't match. */ 106 } 107 </style> 108 </template> 109 </div> 110 111 <!-- :visited in scope-end, unvisited link --> 112 <div> 113 <template shadowrootmode=open> 114 <main> 115 Main 116 <a id=unvisited href="x"> 117 Unvisited <span>Span</span> 118 </a> 119 </main> 120 <style> 121 * { background-color: rgba(255, 255, 255, 255); } 122 123 @scope (main) to (:visited) { 124 /* Does not match, because #unvisited does not match it. */ 125 :scope :visited { background-color: coral; } 126 } 127 @scope (main) { 128 /* Should match, because the scope-end selector (:visited) does not 129 match anything, hence we are in-scope. */ 130 :scope :link { background-color: skyblue; } 131 } 132 </style> 133 </template> 134 </div> 135 136 <!-- :link in scope-end --> 137 <div> 138 <template shadowrootmode=open> 139 <main> 140 Main 141 <a id=unvisited href="x"> 142 Unvisited <span>Span</span> 143 </a> 144 </main> 145 <style> 146 * { background-color: rgba(255, 255, 255, 255); } 147 148 @scope (main) to (:link) { 149 /* Does not match, because #unvisited is not in scope. */ 150 :scope :link { background-color: skyblue; } 151 } 152 @scope (main) { 153 :scope :visited { background-color: coral; } /* Also doesn't match. */ 154 } 155 </style> 156 </template> 157 </div> 158 159 <!-- :link in scope-end, visited link --> 160 <div> 161 <template shadowrootmode=open> 162 <main> 163 Main 164 <a id=visited href=""> 165 Visited <span>Span</span> 166 </a> 167 </main> 168 <style> 169 * { background-color: rgba(255, 255, 255, 255); } 170 171 @scope (main) to (:link) { 172 /* Does not match, because #visited does not match it. */ 173 :scope :link { background-color: skyblue; } 174 } 175 @scope (main) { 176 /* Should match, because the scope-end selector (:visited) does not 177 match anything, hence we are in-scope. */ 178 :scope :visited { background-color: coral; } 179 } 180 </style> 181 </template> 182 </div> 183 184 <!-- :visited within :visited --> 185 <div id=visited_in_visited> 186 <template shadowrootmode=open> 187 <main> 188 Main 189 <a href="" class="with_class_outer"> 190 Visited1 191 </a> 192 </main> 193 <style> 194 * { background-color: rgba(255, 255, 255, 255); } 195 196 /* Should not match since visited-link matching stops applying 197 once a link is seen. */ 198 @scope (:visited) { 199 :scope > :visited { background-color: coral; } 200 } 201 @scope (:visited) { 202 :visited > :scope { background-color: lightgrey; } 203 } 204 @scope(.with_class_inner) { 205 :visited > :scope { color: yellow; } 206 } 207 208 /* Should match */ 209 @scope(.with_class_outer) { 210 :scope > :visited { color: green; } 211 } 212 </style> 213 </template> 214 </div> 215 216 <script> 217 window.onload = () => { 218 // Insert the inner :visited link with JS, since the parser 219 // can't produce this. 220 let outer_a = visited_in_visited.shadowRoot.querySelector('main > a'); 221 222 let inner_a = document.createElement('a'); 223 inner_a.setAttribute('href', ''); 224 inner_a.setAttribute('class', 'with_class_inner'); 225 inner_a.textContent = 'Visited2'; 226 outer_a.append(inner_a); 227 } 228 </script>