CSS Custom Properties IE11 Test

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);
                }