Source code
Revision control
Copy as Markdown
Other Tools
<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<body>
<script>
'use strict';
test(t => {
const anim = addDiv(t).animate(
{ marginLeft: ['0px', '10px'] },
{
duration: 100 * MS_PER_SEC,
iterations: 10,
iterationComposite: 'accumulate',
composite: 'add',
}
);
assert_false(
'iterationComposite' in anim.effect,
'The KeyframeEffect.iterationComposite member is not present'
);
assert_false(
'composite' in anim.effect,
'The KeyframeEffect.composite member is not present'
);
}, 'The iterationComposite and composite members are not present on Animation'
+ ' when the compositing pref is disabled');
test(t => {
const div = addDiv(t);
const anim = div.animate(
{ marginLeft: ['0px', '10px'] },
{
duration: 100 * MS_PER_SEC,
iterations: 10,
iterationComposite: 'accumulate',
}
);
anim.pause();
anim.currentTime = 200 * MS_PER_SEC;
assert_equals(
getComputedStyle(div).marginLeft,
'0px',
'Animated style should NOT accumulate'
);
}, 'KeyframeEffectOptions.iterationComposite should be ignored if the'
+ ' compositing pref is disabled');
test(t => {
const div = addDiv(t);
const anim1 = div.animate(
{ marginLeft: ['0px', '100px'] },
{ duration: 100 * MS_PER_SEC }
);
anim1.pause();
anim1.currentTime = 50 * MS_PER_SEC;
const anim2 = div.animate(
{ marginLeft: ['0px', '100px'] },
{ duration: 100 * MS_PER_SEC, composite: 'add' }
);
anim2.pause();
anim2.currentTime = 50 * MS_PER_SEC;
assert_equals(
getComputedStyle(div).marginLeft,
'50px',
'Animations should NOT add together'
);
}, 'KeyframeEffectOptions.composite should be ignored if the'
+ ' compositing pref is disabled');
test(t => {
const div = addDiv(t);
const anim1 = div.animate({ marginLeft: ['0px', '100px'] }, 100 * MS_PER_SEC);
anim1.pause();
anim1.currentTime = 50 * MS_PER_SEC;
const anim2 = div.animate(
[
{ marginLeft: '0px', composite: 'add' },
{ marginLeft: '100px', composite: 'add' },
],
100 * MS_PER_SEC
);
anim2.pause();
anim2.currentTime = 50 * MS_PER_SEC;
assert_equals(
getComputedStyle(div).marginLeft,
'50px',
'Animations should NOT add together'
);
}, 'composite member is ignored on keyframes when using array notation');
test(t => {
const div = addDiv(t);
const anim1 = div.animate(
{ marginLeft: ['0px', '100px'] },
100 * MS_PER_SEC
);
anim1.pause();
anim1.currentTime = 50 * MS_PER_SEC;
const anim2 = div.animate(
{ marginLeft: ['0px', '100px'], composite: ['add', 'add'] },
100 * MS_PER_SEC
);
anim2.pause();
anim2.currentTime = 50 * MS_PER_SEC;
assert_equals(
getComputedStyle(div).marginLeft,
'50px',
'Animations should NOT add together'
);
}, 'composite member is ignored on keyframes when using object notation');
test(t => {
const anim = addDiv(t).animate(
{ marginLeft: ['0px', '10px'] },
100 * MS_PER_SEC
);
for (let frame of anim.effect.getKeyframes()) {
assert_false(
'composite' in frame,
'The BaseComputedKeyframe.composite member is not present'
);
}
}, 'composite member is hidden from the result of ' +
'KeyframeEffect::getKeyframes()');
done();
</script>
</body>