wpt / css / css-properties-values-api / registered-property-revert.html

Status: FAIL | Duration: 52ms | Subtests: 0/1 | Open test on wpt.live | wpt.fyi

TestTest Source

/css/css-properties-values-api/registered-property-revert.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1" />
<link rel="help" href="https://drafts.csswg.org/css-cascade/#default" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
    #parent {
        --inherited: 10px;
        --non-inherited: 10px;
    }
    #child {
        --inherited: 20px;
        --non-inherited: 20px;
        --inherited: revert;
        --non-inherited: revert;
    }

    @keyframes revert_animation {
        from {
            --animated-inherited: revert;
            --animated-non-inherited: revert;
        }
        to {
            --animated-inherited: 100px;
            --animated-non-inherited: 100px;
        }
    }

    #animated_parent {
        --animated-inherited: 0px;
    }
    #animated_child {
        animation: revert_animation 10s -5s linear paused;
    }
</style>
<div id=parent>
    <div id=child>
    </div>
</div>
<div id=animated_parent>
    <div id=animated_child>
    </div>
</div>
<script>

CSS.registerProperty({
    name: "--inherited",
    syntax: "<length>",
    initialValue: "0px",
    inherits: true
});

CSS.registerProperty({
    name: "--non-inherited",
    syntax: "<length>",
    initialValue: "0px",
    inherits: false
});

CSS.registerProperty({
    name: "--animated-non-inherited",
    syntax: "<length>",
    initialValue: "0px",
    inherits: false
});

CSS.registerProperty({
    name: "--animated-inherited",
    syntax: "<length>",
    initialValue: "10000px",
    inherits: true
});

test(function(){
    let cs = getComputedStyle(child);
    assert_equals(cs.getPropertyValue('--inherited'), '10px');
}, 'Inherited registered custom property can be reverted');

test(function(){
    let cs = getComputedStyle(child);
    assert_equals(cs.getPropertyValue('--non-inherited'), '0px');
}, 'Non-inherited registered custom property can be reverted');

test(function(){
    let cs = getComputedStyle(animated_child);
    assert_equals(cs.getPropertyValue('--animated-non-inherited'), '50px');
}, 'Non-inherited registered custom property can be reverted in animation');

test(function(){
    let cs = getComputedStyle(animated_child);
    assert_equals(cs.getPropertyValue('--animated-inherited'), '50px');
}, 'Inherited registered custom property can be reverted in animation');

</script>