back to project
root custom property
                .root-cp {
                    background:var(--green);
                }
            
non root custom property
                .non-root-cp {
                    background:var(--body-green);
                }
            
fallback
                .fallback {
                    background-color:var(--notdefined, green);
                }
            
other var as fallback
                .fallback-var {
                    background-color:var(--notdefined, var(--green));
                }
            
fallback var mixed, including round brackets (url())
                .fallback-var-mixed {
                    background:var(--notdefined, repeat-y var(--undefined, var(--green)) fixed url(x.y));
                }
            
multiple vars inside brackets (linear-gradient)
                .multiple-vars {
                    --my-green:green;
                    background: var(--green) linear-gradient(var(--green), var(--body-green), var(--my-green), transparent);
                }
            
other non root var as fallback
                .fallback-non-body-var {
                    background-color:var(--notdefined, var(--body-green));
                }
            
chaining
                .chaining {
                    --a:var(--green);
                    --b:var(--a);
                    --c:var(--b);
                    background-color:var(--c);
                }
            
nested calc
                .nested-calc {
                    --two:calc(1 + 1);
                    background-image: linear-gradient(green, green 50%, transparent 50%, transparent);
                    background-size: 100% calc(var(--two) * 100%);
                }
            
:hover (please hover to test)
                #hover {
                    background-color:#ccc;
                }
                #hover:hover {
                    background-color:var(--green);
                }
            
:target (please click to make it the target)
                #target {
                    background-color:#ccc;
                }
                #target:target {
                    background-color:var(--green);
                }
            
:focus (please click to get focus)
                #focus {
                    background-color:#ccc;
                }
                #focus:focus {
                    background-color:var(--green);
                }
            
::before
                .before::before {
                    content:'';
                    position:absolute;
                    top:0; left:0; right:0; bottom:0; z-index:0;
                    background-color:var(--green);
                }
            
::before and same property (background-color) on element
                .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);
                }
            
attribute (ie-style="")
                see the attribute in dev-tools
            
parent dom change
                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
                #svg rect {
                    fill:var(--green);
                }
            
js computedStyle.getPropertyValue
setProperty on own element
                #js_setP {
                    background-color:var(--myGreen);
                }
            
setProperty on body
                #bodyDynamic {
                    background-color:var(--dyn-body-green);
                }
            
setProperty on root
                #rootDynamic {
                    background-color:var(--dyn-root-green);
                }
            
setProperty on root delayed
                #rootDynamic_delayed {
                    background-color:var(--dyn-root-green-delayed);
                }
            
media-query
                @media (min-width: 10px) {
                    #media  {
                        background:var(--green);
                    }
                }
            
!important getter
                .important-getter {
                    background-color:var(--green) !important;
                }
                #important-getter {
                    background-color:var(--red);
                }
            
!important setter
                .important-setter {
                    background-color:var(--green);
                    --green:green !important;
                }
                #important-setter {
                    --green:red;
                }
            
non-inherited registered property
                body {
                    --not-inheriting-green:red;
                }
                #register-property-no-inherit {
                    background-color:var(--not-inheriting-green);
                }
            
"inherit" keyword
                #inherit-keyword {
                    --green:inherit;
                    background-color:var(--green);
                }
            
"inherit" keyword, overwrites "registerProperty"
                #inherit-keyword-overwrite-registerProperty {
                    --not-inheriting-green:green;
                }
                #inherit-keyword-overwrite-registerProperty .-box {
                    --not-inheriting-green:inherit;
                    background-color:var(--not-inheriting-green);
                }
            
later added html
                #addLater[active] {
                    background-color:var(--green);
                }