.root-cp { background:var(--green); }
.non-root-cp { background:var(--body-green); }
.fallback { background-color:var(--notdefined, green); }
.fallback-var { background-color:var(--notdefined, var(--green)); }
.fallback-var-mixed { background:var(--notdefined, repeat-y var(--undefined, var(--green)) fixed url(x.y)); }
.multiple-vars { --my-green:green; background: var(--green) linear-gradient(var(--green), var(--body-green), var(--my-green), transparent); }
.fallback-non-body-var { background-color:var(--notdefined, var(--body-green)); }
.chaining { --a:var(--green); --b:var(--a); --c:var(--b); background-color:var(--c); }
.nested-calc { --two:calc(1 + 1); background-image: linear-gradient(green, green 50%, transparent 50%, transparent); background-size: 100% calc(var(--two) * 100%); }
#hover { background-color:#ccc; } #hover:hover { background-color:var(--green); }
#hover_root { background-color:var(--root-hover-green); } :root { --root-hover-green:red; } :root:hover { --root-hover-green:green; }
#target { background-color:#ccc; } #target:target { background-color:var(--green); }
#focus { background-color:#ccc; } #focus:focus { background-color:var(--green); }
.before::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; z-index:0; background-color:var(--green); }
.beforeAndElement::before { content:''; position:absolute; bottom:0; top:0; left:0; right:0; z-index:0; background-color:var(--body-green); } .beforeAndElement.beforeAndElement { background-color:var(--red); }
see the attribute in dev-tools
body { --dom-changed-green:red; /* todo? if this is not set, the polyfill does not know that this test is a target */ } body.dom_changed { --dom-changed-green:green; } .dom_change { background-color:var(--dom-changed-green); }
#svg rect { fill:var(--green); }
#js_setP { background-color:var(--myGreen); }
#bodyDynamic { background-color:var(--dyn-body-green); }
#rootDynamic { background-color:var(--dyn-root-green); }
#rootDynamic_delayed { background-color:var(--dyn-root-green-delayed); }
@media (min-width: 10px) { #media { background:var(--green); } }
.important-getter { background-color:var(--green) !important; } #important-getter { background-color:var(--red); }
.important-setter { background-color:var(--green); --green:green !important; } #important-setter { --green:red; }
body { --not-inheriting-green:red; } #register-property-no-inherit { background-color:var(--not-inheriting-green); }
#inherit-keyword { --green:inherit; background-color:var(--green); }
#inherit-keyword-overwrite-registerProperty { --not-inheriting-green:green; } #inherit-keyword-overwrite-registerProperty .-box { --not-inheriting-green:inherit; background-color:var(--not-inheriting-green); }
#addLater[active] { background-color:var(--green); }
#specificity_id { background-color:green; } .specificity_id { background-color:var(--red); }
.specificity_class.specificity_class { background-color:green; } .specificity_class { background-color:var(--red); }
.specificity_imortant { background-color:green !important; } #specificity_imortant { background-color:var(--red); }
.specificity_cp_before { background-color:var(--red); } .specificity_cp_before { background-color:green; }
.specificity_cp_after { background-color:red; } .specificity_cp_after { background-color:var(--green); }
.specificity_cp_before_non_root { background-color:var(--body-red); } .specificity_cp_before_non_root { background-color:green; }
.specificity_cp_after_non_root { background-color:red; } .specificity_cp_after_non_root { background-color:var(--body-green); }