aboutsummaryrefslogtreecommitdiffstats
path: root/tests/wpt/web-platform-tests/css/css-properties-values-api
diff options
context:
space:
mode:
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-properties-values-api')
-rw-r--r--tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-revert.html46
1 files changed, 46 insertions, 0 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-revert.html b/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-revert.html
index 3d0473ea439..33c395d2c2f 100644
--- a/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-revert.html
+++ b/tests/wpt/web-platform-tests/css/css-properties-values-api/registered-property-revert.html
@@ -14,11 +14,33 @@
--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({
@@ -35,6 +57,20 @@ CSS.registerProperty({
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');
@@ -45,4 +81,14 @@ test(function(){
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>