Source code

Revision control

Other Tools

1
<!DOCTYPE html>
2
<meta charset=utf-8>
3
<title>The effect value of a keyframe effect: Property values that depend on
4
their context (target element)</title>
6
<script src="/resources/testharness.js"></script>
7
<script src="/resources/testharnessreport.js"></script>
8
<script src="../../testcommon.js"></script>
9
<body>
10
<div id="log"></div>
11
<script>
12
'use strict';
13
14
test(t => {
15
const div = createDiv(t);
16
div.style.fontSize = '10px';
17
const animation = div.animate([ { marginLeft: '10em' },
18
{ marginLeft: '20em' } ], 1000);
19
animation.currentTime = 500;
20
assert_equals(getComputedStyle(div).marginLeft, '150px',
21
'Effect value before updating font-size');
22
div.style.fontSize = '20px';
23
assert_equals(getComputedStyle(div).marginLeft, '300px',
24
'Effect value after updating font-size');
25
}, 'Effect values reflect changes to font-size on element');
26
27
test(t => {
28
const parentDiv = createDiv(t);
29
const div = createDiv(t);
30
parentDiv.appendChild(div);
31
parentDiv.style.fontSize = '10px';
32
33
const animation = div.animate([ { marginLeft: '10em' },
34
{ marginLeft: '20em' } ], 1000);
35
animation.currentTime = 500;
36
assert_equals(getComputedStyle(div).marginLeft, '150px',
37
'Effect value before updating font-size on parent element');
38
parentDiv.style.fontSize = '20px';
39
assert_equals(getComputedStyle(div).marginLeft, '300px',
40
'Effect value after updating font-size on parent element');
41
}, 'Effect values reflect changes to font-size on parent element');
42
43
promise_test(t => {
44
const parentDiv = createDiv(t);
45
const div = createDiv(t);
46
parentDiv.appendChild(div);
47
parentDiv.style.fontSize = '10px';
48
const animation = div.animate([ { marginLeft: '10em' },
49
{ marginLeft: '20em' } ], 1000);
50
51
animation.pause();
52
animation.currentTime = 500;
53
parentDiv.style.fontSize = '20px';
54
55
return animation.ready.then(() => {
56
assert_equals(getComputedStyle(div).marginLeft, '300px',
57
'Effect value after updating font-size on parent element');
58
});
59
}, 'Effect values reflect changes to font-size when computed style is not'
60
+ ' immediately flushed');
61
62
promise_test(t => {
63
const divWith10pxFontSize = createDiv(t);
64
divWith10pxFontSize.style.fontSize = '10px';
65
const divWith20pxFontSize = createDiv(t);
66
divWith20pxFontSize.style.fontSize = '20px';
67
68
const div = createDiv(t);
69
div.remove(); // Detach
70
const animation = div.animate([ { marginLeft: '10em' },
71
{ marginLeft: '20em' } ], 1000);
72
animation.pause();
73
74
return animation.ready.then(() => {
75
animation.currentTime = 500;
76
77
divWith10pxFontSize.appendChild(div);
78
assert_equals(getComputedStyle(div).marginLeft, '150px',
79
'Effect value after attaching to font-size:10px parent');
80
divWith20pxFontSize.appendChild(div);
81
assert_equals(getComputedStyle(div).marginLeft, '300px',
82
'Effect value after attaching to font-size:20px parent');
83
});
84
}, 'Effect values reflect changes to font-size from reparenting');
85
86
test(t => {
87
const divA = createDiv(t);
88
divA.style.fontSize = '10px';
89
90
const divB = createDiv(t);
91
divB.style.fontSize = '20px';
92
93
const animation = divA.animate([ { marginLeft: '10em' },
94
{ marginLeft: '20em' } ], 1000);
95
animation.currentTime = 500;
96
assert_equals(getComputedStyle(divA).marginLeft, '150px',
97
'Effect value before updating target element');
98
99
animation.effect.target = divB;
100
assert_equals(getComputedStyle(divB).marginLeft, '300px',
101
'Effect value after updating target element');
102
}, 'Effect values reflect changes to target element');
103
104
</script>
105
</body>