css/css-properties-values-api/property-cascade.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#the-registerproperty-function" />
<meta name="assert" content="Verifies that registering a property does not affect the cascade" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style>

#outer { color: rgb(1, 1, 1); }
#inner {
    --my-color: rgb(2, 2, 2);
    --my-color: url(not-a-color);
    color: var(--my-color);
}

</style>

<div id=outer>
    <div id=inner></div>
</div>

<script>

test(function(){
    // Because var(--my-color) is invalid, our color declaration should behave
    // like color:unset, i.e. it should compute to the inherited color.
    assert_equals(getComputedStyle(inner).color, 'rgb(1, 1, 1)');

    CSS.registerProperty({
        name: '--my-color',
        syntax: '<color>',
        initialValue: 'rgb(3, 3, 3)',
        inherits: false
    });

    // After registering, var(--my-color) is still invalid. The important thing
    // here is that the computed value of color is the initialValue of
    // --my-color, and not rgb(2, 2, 2).
    assert_equals(getComputedStyle(inner).color, 'rgb(3, 3, 3)');
}, 'Registering a property does not affect cascade');

test(function(){
    CSS.registerProperty({
        name: '--my-color-2',
        syntax: '<color>',
        initialValue: 'rgb(4, 4, 4)',
        inherits: false
    });

    let element = document.createElement('div');
    element.style = `
        --my-color-2: rgb(2, 2, 2);
        --my-color-2: url(not-a-color);
        color: var(--my-color-2);
    `;

    outer.appendChild(element);

    assert_equals(getComputedStyle(element).color, 'rgb(4, 4, 4)');
}, 'Registering a property does not affect parsing');


</script>