.root-cp { background:var(--green); }
body { --non-root-cp:green; } .non-root-cp { background:var(--non-root-cp); }
.fallback { background-color:var(--notdefined, green); }
.chaining { --a:var(--green); --b:var(--a); --c:var(--b); background-color:var(--c); }
#hover { background-color:#ccc; } #hover:hover { background-color:var(--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); }
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); }
@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-inherited:red; } #register-property-no-inherit { background-color:var(--not-inherited); }
#addLater[active] { background-color:green; }