diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-properties-values-api/registered-property-revert.html')
-rw-r--r-- | testing/web-platform/tests/css/css-properties-values-api/registered-property-revert.html | 94 |
1 files changed, 94 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-properties-values-api/registered-property-revert.html b/testing/web-platform/tests/css/css-properties-values-api/registered-property-revert.html new file mode 100644 index 0000000000..33c395d2c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-properties-values-api/registered-property-revert.html @@ -0,0 +1,94 @@ +<!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> |