1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<!DOCTYPE html>
<title>CSS Animations: revert-rule in keyframes, dynamic</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#revert-rule-keyword">
<link rel="help" href="https://drafts.csswg.org/css-animations/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@property --x {
syntax: "<length>";
inherits: false;
initial-value: 0px;
}
@keyframes anim {
from { width: revert-rule; }
to { width: 200px; }
}
@keyframes anim-custom {
from { --x: revert-rule; }
to { --x: 200px; }
}
#target {
width: 100px;
--x: 100px;
animation: anim 3600s steps(2, start),
anim-custom 3600s steps(2, start);
}
</style>
<div id=target></div>
<script>
test((t) => {
t.add_cleanup(() => { target.style = ''; });
assert_true(CSS.supports('color', 'revert-rule'));
assert_equals(getComputedStyle(target).width, '150px');
target.style.setProperty('width', '120px');
assert_equals(getComputedStyle(target).width, '160px');
}, 'revert-rule in keyframes, reverted-to value changing (standard property)');
test((t) => {
t.add_cleanup(() => { target.style = ''; });
assert_true(CSS.supports('color', 'revert-rule'));
assert_equals(getComputedStyle(target).getPropertyValue('--x'), '150px');
target.style.setProperty('--x', '120px');
assert_equals(getComputedStyle(target).getPropertyValue('--x'), '160px');
}, 'revert-rule in keyframes, reverted-to value changing (custom property)');
</script>
|
