mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-22 09:45:41 +00:00
3184f30162
MozReview-Commit-ID: FvTMGjxfRXk --HG-- extra : rebase_source : 8f7fd0903c9ca2f545dce2633eb797345a7517f8
128 lines
5.2 KiB
HTML
128 lines
5.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8>
|
|
<title>Tests for setting effects by using Animation.effect</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src='../testcommon.js'></script>
|
|
</head>
|
|
<body>
|
|
<div id="log"></div>
|
|
<script type='text/javascript'>
|
|
|
|
'use strict';
|
|
|
|
test(function(t) {
|
|
var target = addDiv(t);
|
|
var anim = new Animation();
|
|
anim.effect = new KeyframeEffect(target,
|
|
{ marginLeft: [ '0px', '100px' ] },
|
|
100 * MS_PER_SEC);
|
|
anim.currentTime = 50 * MS_PER_SEC;
|
|
assert_equals(getComputedStyle(target).marginLeft, '50px');
|
|
}, 'After setting target effect on an animation with null effect, the ' +
|
|
'animation still works');
|
|
|
|
test(function(t) {
|
|
var target = addDiv(t);
|
|
target.style.marginLeft = '10px';
|
|
var anim = target.animate({ marginLeft: [ '0px', '100px' ] },
|
|
100 * MS_PER_SEC);
|
|
anim.currentTime = 50 * MS_PER_SEC;
|
|
assert_equals(getComputedStyle(target).marginLeft, '50px');
|
|
|
|
anim.effect = null;
|
|
assert_equals(getComputedStyle(target).marginLeft, '10px');
|
|
}, 'After setting null target effect, the computed style of the target ' +
|
|
'element becomes the initial value');
|
|
|
|
test(function(t) {
|
|
var target = addDiv(t);
|
|
var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
|
|
100 * MS_PER_SEC);
|
|
var animB = new Animation();
|
|
animA.currentTime = 50 * MS_PER_SEC;
|
|
animB.currentTime = 20 * MS_PER_SEC;
|
|
assert_equals(getComputedStyle(target).marginLeft, '50px',
|
|
'original computed style of the target element');
|
|
|
|
animB.effect = animA.effect;
|
|
assert_equals(getComputedStyle(target).marginLeft, '20px',
|
|
'new computed style of the target element');
|
|
}, 'After setting the target effect from an existing animation, the computed ' +
|
|
'style of the target effect should reflect the time of the updated ' +
|
|
'animation.');
|
|
|
|
test(function(t) {
|
|
var target = addDiv(t);
|
|
target.style.marginTop = '-10px';
|
|
var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
|
|
100 * MS_PER_SEC);
|
|
var animB = target.animate({ marginTop: [ '0px', '100px' ] },
|
|
50 * MS_PER_SEC);
|
|
animA.currentTime = 50 * MS_PER_SEC;
|
|
animB.currentTime = 10 * MS_PER_SEC;
|
|
assert_equals(getComputedStyle(target).marginLeft, '50px',
|
|
'original margin-left of the target element');
|
|
assert_equals(getComputedStyle(target).marginTop, '20px',
|
|
'original margin-top of the target element');
|
|
|
|
animB.effect = animA.effect;
|
|
assert_equals(getComputedStyle(target).marginLeft, '10px',
|
|
'new margin-left of the target element');
|
|
assert_equals(getComputedStyle(target).marginTop, '-10px',
|
|
'new margin-top of the target element');
|
|
}, 'After setting target effect with an animation to another animation which ' +
|
|
'also has an target effect and both animation effects target to the same ' +
|
|
'element, the computed style of this element should reflect the time and ' +
|
|
'effect of the animation that was set');
|
|
|
|
test(function(t) {
|
|
var targetA = addDiv(t);
|
|
var targetB = addDiv(t);
|
|
targetB.style.marginLeft = '-10px';
|
|
var animA = targetA.animate({ marginLeft: [ '0px', '100px' ] },
|
|
100 * MS_PER_SEC);
|
|
var animB = targetB.animate({ marginLeft: [ '0px', '100px' ] },
|
|
50 * MS_PER_SEC);
|
|
animA.currentTime = 50 * MS_PER_SEC;
|
|
animB.currentTime = 10 * MS_PER_SEC;
|
|
assert_equals(getComputedStyle(targetA).marginLeft, '50px',
|
|
'original margin-left of the first element');
|
|
assert_equals(getComputedStyle(targetB).marginLeft, '20px',
|
|
'original margin-left of the second element');
|
|
|
|
animB.effect = animA.effect;
|
|
assert_equals(getComputedStyle(targetA).marginLeft, '10px',
|
|
'new margin-left of the first element');
|
|
assert_equals(getComputedStyle(targetB).marginLeft, '-10px',
|
|
'new margin-left of the second element');
|
|
}, 'After setting target effect with an animation to another animation which ' +
|
|
'also has an target effect and these animation effects target to ' +
|
|
'different elements, the computed styles of the two elements should ' +
|
|
'reflect the time and effect of the animation that was set');
|
|
|
|
test(function(t) {
|
|
var target = addDiv(t);
|
|
var animA = target.animate({ marginLeft: [ '0px', '100px' ] },
|
|
50 * MS_PER_SEC);
|
|
var animB = target.animate({ marginTop: [ '0px', '50px' ] },
|
|
100 * MS_PER_SEC);
|
|
animA.currentTime = 20 * MS_PER_SEC;
|
|
animB.currentTime = 30 * MS_PER_SEC;
|
|
assert_equals(getComputedStyle(target).marginLeft, '40px');
|
|
assert_equals(getComputedStyle(target).marginTop, '15px');
|
|
|
|
var effectA = animA.effect;
|
|
animA.effect = animB.effect;
|
|
animB.effect = effectA;
|
|
assert_equals(getComputedStyle(target).marginLeft, '60px');
|
|
assert_equals(getComputedStyle(target).marginTop, '10px');
|
|
}, 'After swapping effects of two playing animations, both animations are ' +
|
|
'still running with the same current time');
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|