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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffect copy constructor</title>
<link rel="help"
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-keyframeeffect-source">
<link rel="help"
href="https://drafts.csswg.org/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly-source">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
test(t => {
const effect = new KeyframeEffect(createDiv(t), null);
const copiedEffect = new KeyframeEffect(effect);
assert_equals(copiedEffect.target, effect.target, 'same target');
}, 'Copied KeyframeEffect has the same target');
test(t => {
const effect =
new KeyframeEffect(null,
[ { marginLeft: '0px' },
{ marginLeft: '-20px', easing: 'ease-in',
offset: 0.1 },
{ marginLeft: '100px', easing: 'ease-out' },
{ marginLeft: '50px' } ]);
const copiedEffect = new KeyframeEffect(effect);
const keyframesA = effect.getKeyframes();
const keyframesB = copiedEffect.getKeyframes();
assert_equals(keyframesA.length, keyframesB.length, 'same keyframes length');
for (let i = 0; i < keyframesA.length; ++i) {
assert_equals(keyframesA[i].offset, keyframesB[i].offset,
`Keyframe ${i} has the same offset`);
assert_equals(keyframesA[i].computedOffset, keyframesB[i].computedOffset,
`Keyframe ${i} has the same computedOffset`);
assert_equals(keyframesA[i].easing, keyframesB[i].easing,
`Keyframe ${i} has the same easing`);
assert_equals(keyframesA[i].composite, keyframesB[i].composite,
`Keyframe ${i} has the same composite`);
assert_true(!!keyframesA[i].marginLeft,
`Original keyframe ${i} has a valid property value`);
assert_true(!!keyframesB[i].marginLeft,
`New keyframe ${i} has a valid property value`);
assert_equals(keyframesA[i].marginLeft, keyframesB[i].marginLeft,
`Keyframe ${i} has the same property value pair`);
}
}, 'Copied KeyframeEffect has the same keyframes');
test(t => {
const effect =
new KeyframeEffect(null, null, { iterationComposite: 'accumulate' });
const copiedEffect = new KeyframeEffect(effect);
assert_equals(copiedEffect.iterationComposite, effect.iterationComposite,
'same iterationCompositeOperation');
assert_equals(copiedEffect.composite, effect.composite,
'same compositeOperation');
}, 'Copied KeyframeEffect has the same KeyframeEffectOptions');
test(t => {
const effect = new KeyframeEffect(null, null,
{ duration: 100 * MS_PER_SEC,
delay: -1 * MS_PER_SEC,
endDelay: 2 * MS_PER_SEC,
fill: 'forwards',
iterationStart: 2,
iterations: 20,
easing: 'ease-out',
direction: 'alternate' } );
const copiedEffect = new KeyframeEffect(effect);
const timingA = effect.getTiming();
const timingB = copiedEffect.getTiming();
assert_not_equals(timingA, timingB, 'different timing objects');
assert_equals(timingA.delay, timingB.delay, 'same delay');
assert_equals(timingA.endDelay, timingB.endDelay, 'same endDelay');
assert_equals(timingA.fill, timingB.fill, 'same fill');
assert_equals(timingA.iterationStart, timingB.iterationStart,
'same iterationStart');
assert_equals(timingA.iterations, timingB.iterations, 'same iterations');
assert_equals(timingA.duration, timingB.duration, 'same duration');
assert_equals(timingA.direction, timingB.direction, 'same direction');
assert_equals(timingA.easing, timingB.easing, 'same easing');
}, 'Copied KeyframeEffect has the same timing content');
</script>
</body>
|
