variable-css-wide-keywords.html (9466B)
1 <!DOCTYPE html> 2 <head> 3 <title>CSS Custom Properties: Using CSS-wide keywords</title> 4 <link rel="help" href="https://drafts.csswg.org/css-variables/#defining-variables"> 5 <meta name="assert" content="The CSS-wide keywords can be used in custom properties, with the same meaning as in any another property." /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 body { 10 --is-initial: initial; 11 12 --should-not-inherit: tomato; 13 --should-inherit: lightgreen; 14 15 --registered-inherits-should-not-inherit: tomato; 16 --registered-should-not-inherit: tomato; 17 --registered-inherits-should-inherit: lightgreen; 18 --registered-should-inherit: lightgreen; 19 --registered-should-revert: tomato; 20 --registered-inherits-should-revert: tomato; 21 } 22 @property --registered-inherits-should-not-inherit { 23 syntax: '<color>'; 24 initial-value: lightgreen; 25 inherits: true; 26 } 27 @property --registered-should-not-inherit { 28 syntax: '<color>'; 29 initial-value: lightgreen; 30 inherits: false; 31 } 32 @property --registered-inherits-should-inherit { 33 syntax: '<color>'; 34 initial-value: tomato; 35 inherits: true; 36 } 37 @property --registered-should-inherit { 38 syntax: '<color>'; 39 initial-value: tomato; 40 inherits: false; 41 } 42 @property --registered-should-revert { 43 syntax: '<color>'; 44 initial-value: orange; 45 inherits: false; 46 } 47 @property --registered-inherits-should-revert { 48 syntax: '<color>'; 49 initial-value: orange; 50 inherits: true; 51 } 52 </style> 53 54 <!-- Tests for values of unregistered custom properties --> 55 <div class="test" style=" 56 background: var(--should-not-inherit, lightgreen); 57 --should-not-inherit: initial; 58 "> 59 `initial` as a value for an unregistered custom property 60 </div> 61 62 <div class="test" style=" 63 background: var(--should-inherit, tomato); 64 --should-inherit: inherit; 65 "> 66 `inherit` as a value for an unregistered custom property 67 </div> 68 69 <div class="test" style=" 70 background: var(--should-inherit, tomato); 71 --should-inherit: unset; 72 "> 73 `unset` as a value for an unregistered custom property 74 </div> 75 76 <div class="test" style=" 77 background: var(--should-inherit, tomato); 78 --should-inherit: revert; 79 "> 80 `revert` as a value for an unregistered custom property 81 </div> 82 83 <style> 84 #regular-revert-layer { 85 @layer { 86 --should-not-inherit: lightgreen; 87 } 88 @layer { 89 --should-not-inherit: revert-layer; 90 } 91 } 92 </style> 93 <div class="test" id="regular-revert-layer" style=" 94 background: var(--should-not-inherit); 95 "> 96 `revert-layer` as a value for an unregistered custom property 97 </div> 98 99 100 <!-- Tests for values of registered custom properties --> 101 102 <div class="test" style=" 103 background: var(--registered-should-not-inherit); 104 --registered-should-not-inherit: initial; 105 "> 106 `initial` as a value for a non-inheriting registered custom property 107 </div> 108 109 <div class="test" style=" 110 background: var(--registered-inherits-should-not-inherit); 111 --registered-inherits-should-not-inherit: initial; 112 "> 113 `initial` as a value for an inheriting registered custom property 114 </div> 115 116 <div class="test" style=" 117 background: var(--registered-should-inherit); 118 --registered-should-inherit: inherit; 119 "> 120 `inherit` as a value for a non-inheriting registered custom property 121 </div> 122 123 <div class="test" style=" 124 background: var(--registered-inherits-should-inherit); 125 --registered-inherits-should-inherit: inherit; 126 "> 127 `inherit` as a value for an inheriting registered custom property 128 </div> 129 130 <div class="test" style=" 131 background: var(--registered-should-not-inherit); 132 --registered-should-not-inherit: unset; 133 "> 134 `unset` as a value for a non-inheriting registered custom property 135 </div> 136 137 <div class="test" style=" 138 background: var(--registered-inherits-should-inherit); 139 --registered-inherits-should-inherit: unset; 140 "> 141 `unset` as a value for an inheriting registered custom property 142 </div> 143 144 <div class="test" style=" 145 background: var(--registered-should-not-inherit); 146 --registered-should-not-inherit: revert; 147 "> 148 `revert` as a value for a non-inheriting registered custom property 149 </div> 150 151 <div class="test" style=" 152 background: var(--registered-inherits-should-inherit); 153 --registered-inherits-should-inherit: revert; 154 "> 155 `revert` as a value for an inheriting registered custom property 156 </div> 157 158 <style> 159 #registered-revert-layer { 160 @layer { 161 --registered-should-revert: lightgreen; 162 } 163 @layer { 164 --registered-should-revert: revert-layer; 165 } 166 } 167 </style> 168 <div class="test" id="registered-revert-layer" style=" 169 background: var(--registered-should-revert); 170 "> 171 `revert-layer` as a value for a non-inheriting registered custom property 172 </div> 173 174 <style> 175 #registered-revert-layer-inherits { 176 @layer { 177 --registered-inherits-should-revert: lightgreen; 178 } 179 @layer { 180 --registered-inherits-should-revert: revert-layer; 181 } 182 } 183 </style> 184 <div class="test" id="registered-revert-layer-inherits" style=" 185 background: var(--registered-inherits-should-revert); 186 "> 187 `revert-layer` as a value for an inheriting registered custom property 188 </div> 189 190 191 <!-- Tests for `var()` fallbacks of unregistered custom properties --> 192 193 <div class="test" style=" 194 background: var(--should-not-inherit, lightgreen); 195 --should-not-inherit: var(--is-initial, initial); 196 "> 197 `initial` as a `var()` fallback for an unregistered custom property 198 </div> 199 200 <div class="test" style=" 201 background: var(--should-inherit, tomato); 202 --should-inherit: var(--is-initial, inherit); 203 "> 204 `inherit` as a `var()` fallback for an unregistered custom property 205 </div> 206 207 <div class="test" style=" 208 background: var(--should-inherit, tomato); 209 --should-inherit: var(--is-initial, unset); 210 "> 211 `unset` as a `var()` fallback for an unregistered custom property 212 </div> 213 214 <div class="test" style=" 215 background: var(--should-inherit, tomato); 216 --should-inherit: var(--is-initial, unset); 217 "> 218 `revert` as a `var()` fallback for an unregistered custom property 219 </div> 220 221 <style> 222 #regular-fallback-revert-layer { 223 @layer { 224 --should-not-inherit: lightgreen; 225 } 226 @layer { 227 --should-not-inherit: var(--is-initial, revert-layer); 228 } 229 } 230 </style> 231 <div class="test" id="regular-fallback-revert-layer" style=" 232 background: var(--should-not-inherit); 233 "> 234 `revert-layer` as a `var()` fallback for an unregistered custom property 235 </div> 236 237 238 <!-- Tests for `var()` fallbacks of registered custom properties --> 239 240 <div class="test" style=" 241 background: var(--registered-should-not-inherit); 242 --registered-should-not-inherit: var(--is-initial, initial); 243 "> 244 `initial` as a `var()` fallback for a non-inheriting registered custom property 245 </div> 246 247 <div class="test" style=" 248 background: var(--registered-inherits-should-not-inherit); 249 --registered-inherits-should-not-inherit: var(--is-initial, initial); 250 "> 251 `initial` as a `var()` fallback for an inheriting registered custom property 252 </div> 253 254 <div class="test" style=" 255 background: var(--registered-should-inherit); 256 --registered-should-inherit: var(--is-initial, inherit); 257 "> 258 `inherit` as a `var()` fallback for a non-inheriting registered custom property 259 </div> 260 261 <div class="test" style=" 262 background: var(--registered-inherits-should-inherit); 263 --registered-inherits-should-inherit: var(--is-initial, inherit); 264 "> 265 `inherit` as a `var()` fallback for an inheriting registered custom property 266 </div> 267 268 <div class="test" style=" 269 background: var(--registered-should-not-inherit); 270 --registered-should-not-inherit: var(--is-initial, unset); 271 "> 272 `unset` as a `var()` fallback for a non-inheriting registered custom property 273 </div> 274 275 <div class="test" style=" 276 background: var(--registered-inherits-should-inherit); 277 --registered-inherits-should-inherit: var(--is-initial, unset); 278 "> 279 `unset` as a `var()` fallback for an inheriting registered custom property 280 </div> 281 282 <div class="test" style=" 283 background: var(--registered-should-not-inherit); 284 --registered-should-not-inherit: var(--is-initial, revert); 285 "> 286 `revert` as a `var()` fallback for a non-inheriting registered custom property 287 </div> 288 289 <div class="test" style=" 290 background: var(--registered-inherits-should-inherit); 291 --registered-inherits-should-inherit: var(--is-initial, revert); 292 "> 293 `revert` as a `var()` fallback for an inheriting registered custom property 294 </div> 295 296 <style> 297 #registered-fallback-revert-layer { 298 @layer { 299 --registered-should-revert: lightgreen; 300 } 301 @layer { 302 --registered-should-revert: var(--is-initial, revert-layer); 303 } 304 } 305 </style> 306 <div class="test" id="registered-fallback-revert-layer" style=" 307 background: var(--registered-should-revert); 308 "> 309 `revert-layer` as a `var()` fallback for a non-inheriting registered custom property 310 </div> 311 312 <style> 313 #registered-fallback-revert-layer-inherits { 314 @layer { 315 --registered-inherits-should-revert: lightgreen; 316 } 317 @layer { 318 --registered-inherits-should-revert: var(--is-initial, revert-layer); 319 } 320 } 321 </style> 322 <div class="test" id="registered-fallback-revert-layer-inherits" style=" 323 background: var(--registered-inherits-should-revert); 324 "> 325 `revert-layer` as a `var()` fallback for an inheriting registered custom property 326 </div> 327 328 <pre id="out"></pre> 329 <script> 330 [...document.querySelectorAll('.test')].map(el => test(() => assert_equals(getComputedStyle(el).getPropertyValue('background-color'), 'rgb(144, 238, 144)'), el.textContent.trim())); 331 </script>