mirror of
https://github.com/servo/servo.git
synced 2025-10-17 00:39:15 +01:00
94 lines
2.3 KiB
HTML
94 lines
2.3 KiB
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>
|