mirror of
https://github.com/servo/servo.git
synced 2025-08-14 18:05:36 +01:00
Update web-platform-tests to revision e8bfc205e36ad699601212cd50083870bad9a75d
This commit is contained in:
Ms2ger
parent
65dd6d4340
commit
ccdb0a3458
1428 changed files with 118036 additions and 9786 deletions
|
|
@ -322,7 +322,70 @@ test(function(t) {
|
|||
'and falling back to distribute spacing for the reset with some specific ' +
|
||||
'offsets');
|
||||
|
||||
// Bug 1276193: Test for mixing percent and pixel values.
|
||||
// Tests for setting spacing by KeyframeEffect.spacing.
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate([ { marginLeft: '0px' },
|
||||
{ marginLeft: '-20px' },
|
||||
{ marginLeft: '100px' },
|
||||
{ marginLeft: '50px' } ],
|
||||
{ duration: 100 * MS_PER_SEC });
|
||||
|
||||
anim.effect.spacing = 'paced(margin-left)';
|
||||
|
||||
var frames = anim.effect.getKeyframes();
|
||||
var cumDist = [0, 20, 140, 190];
|
||||
assert_equals(frames[0].computedOffset, 0.0,
|
||||
'1st frame offset');
|
||||
assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
|
||||
'2nd frame offset');
|
||||
assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
|
||||
'3rd frame offset');
|
||||
assert_equals(frames[3].computedOffset, 1.0,
|
||||
'last frame offset');
|
||||
}, 'Test paced spacing by setter');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate([ { marginLeft: '0px' },
|
||||
{ marginLeft: '-20px' },
|
||||
{ marginLeft: '100px' },
|
||||
{ marginLeft: '50px' } ],
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
spacing: 'paced(margin-left)' });
|
||||
|
||||
anim.effect.spacing = 'distribute';
|
||||
|
||||
var frames = anim.effect.getKeyframes();
|
||||
var slots = frames.length - 1;
|
||||
assert_equals(frames[0].computedOffset, 0.0, '1st frame offset');
|
||||
assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset');
|
||||
assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset');
|
||||
assert_equals(frames[3].computedOffset, 1.0, 'last frame offset');
|
||||
}, 'Test distribute spacing by setter');
|
||||
|
||||
test(function(t) {
|
||||
var anim =
|
||||
createDiv(t).animate([ { marginLeft: '0px', borderRadius: '0%' },
|
||||
{ marginLeft: '-20px', borderRadius: '50%' },
|
||||
{ marginLeft: '100px', borderRadius: '25%' },
|
||||
{ marginLeft: '50px', borderRadius: '100%' } ],
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
spacing: 'paced(margin-left)' });
|
||||
|
||||
anim.effect.spacing = 'paced(border-radius)';
|
||||
|
||||
var frames = anim.effect.getKeyframes();
|
||||
var cumDist = [0, 50, 50 + 25, 50 + 25 + 75];
|
||||
|
||||
assert_equals(frames[0].computedOffset, 0.0,
|
||||
'1st frame offset');
|
||||
assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
|
||||
'2nd frame offset');
|
||||
assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
|
||||
'3rd frame offset');
|
||||
assert_equals(frames[3].computedOffset, 1.0,
|
||||
'last frame offset');
|
||||
}, 'Test paced spacing by changing the paced property');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Animation.effect tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#dom-animation-effect">
|
||||
<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(function(t) {
|
||||
var anim = new Animation();
|
||||
assert_equals(anim.effect, null, "initial effect is null");
|
||||
|
||||
var newEffect = new KeyframeEffectReadOnly(createDiv(t), null);
|
||||
anim.effect = newEffect;
|
||||
assert_equals(anim.effect, newEffect, "new effect is set");
|
||||
}, "effect is set correctly.");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -13,11 +13,16 @@
|
|||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var animation = div.animate({}, 100 * MS_PER_SEC);
|
||||
assert_equals(animation.id, '', 'id for CSS Animation is initially empty');
|
||||
animation.id = 'anim'
|
||||
assert_equals(animation.id, '', 'id for Animation is initially empty');
|
||||
}, 'Animation.id initial value');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var animation = div.animate({}, 100 * MS_PER_SEC);
|
||||
animation.id = 'anim';
|
||||
|
||||
assert_equals(animation.id, 'anim', 'animation.id reflects the value set');
|
||||
}, 'Animation.id for CSS Animations');
|
||||
}, 'Animation.id setter');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -107,12 +107,8 @@ test(function(t) {
|
|||
assert_equals(getComputedStyle(div).opacity, '0.5',
|
||||
'set currentTime same as endTime');
|
||||
|
||||
anim.currentTime = 9999;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5',
|
||||
'set currentTime during duration');
|
||||
|
||||
anim.currentTime = 10000;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.5',
|
||||
assert_equals(getComputedStyle(div).opacity, '0',
|
||||
'set currentTime after endTime');
|
||||
}, 'change currentTime when fill forwards and endDelay is negative');
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,10 @@ interface AnimationTimeline {
|
|||
};
|
||||
</script>
|
||||
<script type="text/plain" id="DocumentTimeline-IDL">
|
||||
[Constructor (DOMHighResTimeStamp originTime)]
|
||||
dictionary DocumentTimelineOptions {
|
||||
DOMHighResTimeStamp originTime = 0;
|
||||
};
|
||||
[Constructor (optional DocumentTimelineOptions options)]
|
||||
interface DocumentTimeline : AnimationTimeline {
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -11,24 +11,32 @@
|
|||
"use strict";
|
||||
|
||||
test(function(t) {
|
||||
var timeline = new DocumentTimeline(0);
|
||||
var timeline = new DocumentTimeline();
|
||||
|
||||
assert_times_equal(timeline.currentTime, document.timeline.currentTime);
|
||||
}, 'zero origin time');
|
||||
}, 'An origin time of zero is used when none is supplied');
|
||||
|
||||
test(function(t) {
|
||||
var timeline = new DocumentTimeline(10 * MS_PER_SEC);
|
||||
var timeline = new DocumentTimeline({ originTime: 0 });
|
||||
assert_times_equal(timeline.currentTime, document.timeline.currentTime);
|
||||
}, 'A zero origin time produces a document timeline with a current time ' +
|
||||
'identical to the default document timeline');
|
||||
|
||||
test(function(t) {
|
||||
var timeline = new DocumentTimeline({ originTime: 10 * MS_PER_SEC });
|
||||
|
||||
assert_times_equal(timeline.currentTime,
|
||||
(document.timeline.currentTime - 10 * MS_PER_SEC));
|
||||
}, 'positive origin time');
|
||||
}, 'A positive origin time makes the document timeline\'s current time lag ' +
|
||||
'behind the default document timeline');
|
||||
|
||||
test(function(t) {
|
||||
var timeline = new DocumentTimeline(-10 * MS_PER_SEC);
|
||||
var timeline = new DocumentTimeline({ originTime: -10 * MS_PER_SEC });
|
||||
|
||||
assert_times_equal(timeline.currentTime,
|
||||
(document.timeline.currentTime + 10 * MS_PER_SEC));
|
||||
}, 'negative origin time');
|
||||
}, 'A negative origin time makes the document timeline\'s current time run ' +
|
||||
'ahead of the default document timeline');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -189,10 +189,10 @@ var gEndTimeTests = [
|
|||
{ desc: "an non-zero duration and negative delay greater than active " +
|
||||
"duration",
|
||||
input: { duration: 1000, iterations: 2, delay: -3000 },
|
||||
expected: -1000 },
|
||||
expected: 0 },
|
||||
{ desc: "a zero duration and negative delay",
|
||||
input: { duration: 0, iterations: 2, delay: -1000 },
|
||||
expected: -1000 }
|
||||
expected: 0 }
|
||||
];
|
||||
|
||||
gEndTimeTests.forEach(function(stest) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,693 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect.iterationComposite tests</title>
|
||||
<link rel="help" href="https://w3c.github.io/web-animations/#effect-accumulation-section">
|
||||
<script src=/resources/testharness.js></script>
|
||||
<script src=/resources/testharnessreport.js></script>
|
||||
<script src="../../testcommon.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ marginLeft: ['0px', '10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '5px',
|
||||
'Animated margin-left style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '20px',
|
||||
'Animated margin-left style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '25px',
|
||||
'Animated margin-left style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <length> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var parent = createDiv(t);
|
||||
parent.style.width = '100px';
|
||||
var div = createDiv(t);
|
||||
parent.appendChild(div);
|
||||
|
||||
var anim =
|
||||
div.animate({ width: ['0%', '50%'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '25px',
|
||||
'Animated width style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).width, '100px',
|
||||
'Animated width style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '125px',
|
||||
'Animated width style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <percentage> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ color: ['rgb(0, 0, 0)', 'rgb(120, 120, 120)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(60, 60, 60)',
|
||||
'Animated color style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(240, 240, 240)',
|
||||
'Animated color style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(255, 255, 255)',
|
||||
'Animated color style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <color> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ color: ['rgb(0, 120, 0)', 'rgb(60, 60, 60)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(30, 90, 30)',
|
||||
'Animated color style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(120, 240, 120)',
|
||||
'Animated color style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
// The green color is (240 + 180) / 2 = 210
|
||||
assert_equals(getComputedStyle(div).color, 'rgb(150, 210, 150)',
|
||||
'Animated color style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <color> type animation that green component is ' +
|
||||
'decreasing');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ flexGrow: [0, 10] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).flexGrow, '5',
|
||||
'Animated flex-grow style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).flexGrow, '20',
|
||||
'Animated flex-grow style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).flexGrow, '25',
|
||||
'Animated flex-grow style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <number> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
div.style.position = 'absolute';
|
||||
var anim =
|
||||
div.animate({ clip: ['rect(0px, 0px, 0px, 0px)',
|
||||
'rect(10px, 10px, 10px, 10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).clip, 'rect(5px, 5px, 5px, 5px)',
|
||||
'Animated clip style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).clip, 'rect(20px, 20px, 20px, 20px)',
|
||||
'Animated clip style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).clip, 'rect(25px, 25px, 25px, 25px)',
|
||||
'Animated clip style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <shape> type animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ width: ['calc(0vw + 0px)', 'calc(0vw + 10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '5px',
|
||||
'Animated calc width style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).width, '20px',
|
||||
'Animated calc width style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '25px',
|
||||
'Animated calc width style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <calc()> value animation');
|
||||
|
||||
test(function(t) {
|
||||
var parent = createDiv(t);
|
||||
parent.style.width = '100px';
|
||||
var div = createDiv(t);
|
||||
parent.appendChild(div);
|
||||
|
||||
var anim =
|
||||
div.animate({ width: ['calc(0% + 0px)', 'calc(10% + 10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width, '10px',
|
||||
// 100px * 5% + 5px
|
||||
'Animated calc width style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).width,
|
||||
'40px', // 100px * (10% + 10%) + (10px + 10px)
|
||||
'Animated calc width style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).width,
|
||||
'50px', // (40px + 60px) / 2
|
||||
'Animated calc width style at 50s of the third iteration');
|
||||
}, 'iterationComposite of <calc()> value animation that the values can\'t' +
|
||||
'be reduced');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ opacity: [0, 0.4] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.2',
|
||||
'Animated opacity style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).opacity, '0.8',
|
||||
'Animated opacity style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).opacity, '1', // (0.8 + 1.2) * 0.5
|
||||
'Animated opacity style at 50s of the third iteration');
|
||||
}, 'iterationComposite of opacity animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ boxShadow: ['rgb(0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgb(120, 120, 120) 10px 10px 10px 0px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).boxShadow,
|
||||
'rgb(60, 60, 60) 5px 5px 5px 0px',
|
||||
'Animated box-shadow style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).boxShadow,
|
||||
'rgb(240, 240, 240) 20px 20px 20px 0px',
|
||||
'Animated box-shadow style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).boxShadow,
|
||||
'rgb(255, 255, 255) 25px 25px 25px 0px',
|
||||
'Animated box-shadow style at 50s of the third iteration');
|
||||
}, 'iterationComposite of box-shadow animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['blur(0px)', 'blur(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter, 'blur(5px)',
|
||||
'Animated filter blur style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter, 'blur(20px)',
|
||||
'Animated filter blur style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter, 'blur(25px)',
|
||||
'Animated filter blur style at 50s of the third iteration');
|
||||
}, 'iterationComposite of filter blur animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['brightness(1)',
|
||||
'brightness(180%)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(1.4)',
|
||||
'Animated filter brightness style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(2.6)', // brightness(1) + brightness(0.8) + brightness(0.8)
|
||||
'Animated filter brightness style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(3)', // (brightness(2.6) + brightness(3.4)) * 0.5
|
||||
'Animated filter brightness style at 50s of the third iteration');
|
||||
}, 'iterationComposite of filter brightness for different unit animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['brightness(0)',
|
||||
'brightness(1)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(0.5)',
|
||||
'Animated filter brightness style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(0)', // brightness(1) is an identity element, not accumulated.
|
||||
'Animated filter brightness style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(0.5)', // brightness(1) is an identity element, not accumulated.
|
||||
'Animated filter brightness style at 50s of the third iteration');
|
||||
}, 'iterationComposite of filter brightness animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['drop-shadow(rgb(0, 0, 0) 0px 0px 0px)',
|
||||
'drop-shadow(rgb(120, 120, 120) 10px 10px 10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'drop-shadow(rgb(60, 60, 60) 5px 5px 5px)',
|
||||
'Animated filter drop-shadow style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'drop-shadow(rgb(240, 240, 240) 20px 20px 20px)',
|
||||
'Animated filter drop-shadow style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'drop-shadow(rgb(255, 255, 255) 25px 25px 25px)',
|
||||
'Animated filter drop-shadow style at 50s of the third iteration');
|
||||
}, 'iterationComposite of filter drop-shadow animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['brightness(1) contrast(1)',
|
||||
'brightness(2) contrast(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(1.5) contrast(1.5)',
|
||||
'Animated filter list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(3) contrast(3)',
|
||||
'Animated filter list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'brightness(3.5) contrast(3.5)',
|
||||
'Animated filter list at 50s of the third iteration');
|
||||
}, 'iterationComposite of same filter list animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['brightness(1) contrast(1)',
|
||||
'contrast(2) brightness(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'contrast(2) brightness(2)', // discrete
|
||||
'Animated filter list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
// We can't accumulate 'contrast(2) brightness(2)' onto
|
||||
// the first list 'brightness(1) contrast(1)' because of
|
||||
// mismatch of the order.
|
||||
'brightness(1) contrast(1)',
|
||||
'Animated filter list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
// We *can* accumulate 'contrast(2) brightness(2)' onto
|
||||
// the same list 'contrast(2) brightness(2)' here.
|
||||
'contrast(4) brightness(4)', // discrete
|
||||
'Animated filter list at 50s of the third iteration');
|
||||
}, 'iterationComposite of discrete filter list because of mismatch ' +
|
||||
'of the order');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ filter: ['sepia(0)',
|
||||
'sepia(1) contrast(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'sepia(0.5) contrast(1.5)',
|
||||
'Animated filter list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'sepia(2) contrast(3)',
|
||||
'Animated filter list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).filter,
|
||||
'sepia(2.5) contrast(3.5)',
|
||||
'Animated filter list at 50s of the third iteration');
|
||||
}, 'iterationComposite of different length filter list animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['rotate(0deg)', 'rotate(180deg)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg)
|
||||
'Animated transform(rotate) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg)
|
||||
'Animated transform(rotate) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg)
|
||||
'Animated transform(rotate) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform(rotate) animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['scale(0)', 'scale(1)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element,
|
||||
// not accumulated.
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity
|
||||
// element, not accumulated.
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform: [ scale(0), scale(1) ] animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['scale(1)', 'scale(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1))
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform: [ scale(1), scale(2) ] animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['scale(0)', 'scale(2)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 0, 0)', // scale(1)
|
||||
'Animated transform(scale) style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2)
|
||||
'Animated transform(scale) style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5
|
||||
'Animated transform(scale) style at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform: scale(2) animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ transform: ['rotate(0deg) translateX(0px)',
|
||||
'rotate(180deg) translateX(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px)
|
||||
'Animated transform list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px)
|
||||
'Animated transform list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px)
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform list animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
// The transform list whose order is mismatched is compounded,
|
||||
// so below animation is the same as;
|
||||
// from matrix(2, 0, 0, 2, 0, 0) to matrix(3, 0, 0, 3, 30, 0)
|
||||
var anim =
|
||||
div.animate({ transform: ['translateX(0px) scale(2)',
|
||||
'scale(3) translateX(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(2.5, 0, 0, 2.5, 15, 0)', // scale(2.5) (0px + 30px*2) / 2
|
||||
'Animated transform list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(4, 0, 0, 4, 60, 0)', // scale(2+(3-2)*2) (0px + 30px*2)
|
||||
'Animated transform list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(5.5, 0, 0, 5.5, 135, 0)', // scale(4+7)/2 (60px + 210px)
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform list animation whose order is mismatched');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
// Even if each transform list does not have functions which exist in
|
||||
// other pair of the list, we don't fill any missing functions at all,
|
||||
// it's just computed as compounded matrices
|
||||
// Below animation is the same as;
|
||||
// from matrix(1, 0, 0, 1, 0, 0) to matrix(2, 0, 0, 2, 20, 0)
|
||||
var anim =
|
||||
div.animate({ transform: ['translateX(0px)',
|
||||
'scale(2) translateX(10px)'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(1.5, 0, 0, 1.5, 10, 0)', // scale(1.5) (0px + 10px*2) / 2
|
||||
'Animated transform list at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(3, 0, 0, 3, 40, 0)', // scale(1+(2-1)*2) (0px + 20px*2)
|
||||
'Animated transform list at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).transform,
|
||||
'matrix(3.5, 0, 0, 3.5, 80, 0)', // scale(3+4)/2 (40px + 20px)
|
||||
'Animated transform list at 50s of the third iteration');
|
||||
}, 'iterationComposite of transform list animation whose order is mismatched');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ marginLeft: ['10px', '20px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '15px',
|
||||
'Animated margin-left style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '50px', // 10px + 20px + 20px
|
||||
'Animated margin-left style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '55px', // (50px + 60px) * 0.5
|
||||
'Animated margin-left style at 50s of the third iteration');
|
||||
}, 'iterationComposite starts with non-zero value animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim =
|
||||
div.animate({ marginLeft: ['10px', '-10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime = anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft,
|
||||
'0px',
|
||||
'Animated margin-left style at 50s of the first iteration');
|
||||
anim.currentTime = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft,
|
||||
'-10px', // 10px + -10px + -10px
|
||||
'Animated margin-left style at 0s of the third iteration');
|
||||
anim.currentTime += anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft,
|
||||
'-20px', // (-10px + -30px) * 0.5
|
||||
'Animated margin-left style at 50s of the third iteration');
|
||||
}, 'iterationComposite with negative final value animation');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ marginLeft: ['0px', '10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime =
|
||||
anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '25px',
|
||||
'Animated style at 50s of the third iteration');
|
||||
|
||||
anim.effect.iterationComposite = 'replace';
|
||||
assert_equals(getComputedStyle(div).marginLeft, '5px',
|
||||
'Animated style at 50s of the third iteration');
|
||||
|
||||
anim.effect.iterationComposite = 'accumulate';
|
||||
assert_equals(getComputedStyle(div).marginLeft, '25px',
|
||||
'Animated style at 50s of the third iteration');
|
||||
}, 'interationComposite changes');
|
||||
|
||||
test(function(t) {
|
||||
var div = createDiv(t);
|
||||
var anim = div.animate({ marginLeft: ['0px', '10px'] },
|
||||
{ duration: 100 * MS_PER_SEC,
|
||||
easing: 'linear',
|
||||
iterations: 10,
|
||||
iterationComposite: 'accumulate' });
|
||||
anim.pause();
|
||||
|
||||
anim.currentTime =
|
||||
anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '25px',
|
||||
'Animated style at 50s of the third iteration');
|
||||
|
||||
// double its duration.
|
||||
anim.effect.timing.duration = anim.effect.timing.duration * 2;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '12.5px',
|
||||
'Animated style at 25s of the first iteration');
|
||||
|
||||
// half of original.
|
||||
anim.effect.timing.duration = anim.effect.timing.duration / 4;
|
||||
assert_equals(getComputedStyle(div).marginLeft, '50px',
|
||||
'Animated style at 50s of the fourth iteration');
|
||||
}, 'duration changes with iterationComposite(accumulate)');
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>KeyframeEffect spacing attribute tests</title>
|
||||
<link rel="help"
|
||||
href="https://w3c.github.io/web-animations/#dom-keyframeeffect-spacing">
|
||||
<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(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
assert_throws(new TypeError, function() {
|
||||
anim.effect.spacing = '';
|
||||
});
|
||||
}, 'Test throwing TypeError if using empty string');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
assert_throws(new TypeError, function() {
|
||||
anim.effect.spacing = 'dist';
|
||||
});
|
||||
}, 'Test throwing TypeError if not using the correct keyword');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'paced(A)';
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a unrecognized property');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'paced(--bg-color)';
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using CSS variables');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'paced(animation-duration)';
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test falling back to distribute spacing if using a non-animatable ' +
|
||||
'property');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'distribute';
|
||||
assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
|
||||
}, 'Test spacing value if setting distribute');
|
||||
|
||||
test(function(t) {
|
||||
var anim = createDiv(t).animate(null);
|
||||
anim.effect.spacing = 'paced(transform)';
|
||||
assert_equals(anim.effect.spacing, 'paced(transform)', 'spacing mode');
|
||||
}, 'Test spacing value if setting paced');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -158,3 +158,19 @@ function waitForAnimationFrames(frameCount) {
|
|||
window.requestAnimationFrame(handleFrame);
|
||||
});
|
||||
}
|
||||
|
||||
// Continually calls requestAnimationFrame until |minDelay| has elapsed
|
||||
// as recorded using document.timeline.currentTime (i.e. frame time not
|
||||
// wall-clock time).
|
||||
function waitForAnimationFramesWithDelay(minDelay) {
|
||||
var startTime = document.timeline.currentTime;
|
||||
return new Promise(function(resolve) {
|
||||
(function handleFrame() {
|
||||
if (document.timeline.currentTime - startTime >= minDelay) {
|
||||
resolve();
|
||||
} else {
|
||||
window.requestAnimationFrame(handleFrame);
|
||||
}
|
||||
}());
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ test(function(t) {
|
|||
var anim = createDiv(t).animate(null, { duration: 1000,
|
||||
iterations: 2.3,
|
||||
delay: 500,
|
||||
endDelay: -3000,
|
||||
endDelay: -2500,
|
||||
fill: 'forwards' });
|
||||
anim.finish();
|
||||
assert_equals(anim.effect.getComputedTiming().currentIteration, 0);
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@ test(function(t) {
|
|||
var animation = createDiv(t).animate(null, { duration: 1, delay: -1 });
|
||||
|
||||
[ { currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'active' },
|
||||
{ currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
|
|
@ -121,7 +121,8 @@ test(function(t) {
|
|||
var animation = createDiv(t).animate(null, { duration: 1, endDelay: -2 });
|
||||
|
||||
[ { currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'after' } ]
|
||||
{ currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
|
|
@ -133,8 +134,8 @@ test(function(t) {
|
|||
delay: 1,
|
||||
endDelay: -1 });
|
||||
|
||||
[ { currentTime: 0, phase: 'before' },
|
||||
{ currentTime: 1, phase: 'active' },
|
||||
[ { currentTime: 0, phase: 'before' },
|
||||
{ currentTime: 1, phase: 'active' },
|
||||
{ currentTime: 2, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
|
|
@ -147,8 +148,9 @@ test(function(t) {
|
|||
delay: -1,
|
||||
endDelay: -1 });
|
||||
|
||||
[ { currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'after' } ]
|
||||
[ { currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
|
|
@ -160,8 +162,10 @@ test(function(t) {
|
|||
delay: -1,
|
||||
endDelay: -2 });
|
||||
|
||||
[ { currentTime: -3, phase: 'before' },
|
||||
{ currentTime: -2, phase: 'after' } ]
|
||||
[ { currentTime: -3, phase: 'before' },
|
||||
{ currentTime: -2, phase: 'before' },
|
||||
{ currentTime: -1, phase: 'before' },
|
||||
{ currentTime: 0, phase: 'after' } ]
|
||||
.forEach(function(test) {
|
||||
assert_phase_at_time(animation, test.phase, test.currentTime);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Setting the target effect tests</title>
|
||||
<link rel='help' href='https://w3c.github.io/web-animations/#setting-the-target-effect'>
|
||||
<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';
|
||||
|
||||
promise_test(function(t) {
|
||||
var anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
|
||||
100 * MS_PER_SEC);
|
||||
assert_equals(anim.playState, 'pending');
|
||||
|
||||
var retPromise = anim.ready.then(function() {
|
||||
assert_unreached('ready promise is fulfilled');
|
||||
}).catch(function(err) {
|
||||
assert_equals(err.name, 'AbortError',
|
||||
'ready promise is rejected with AbortError');
|
||||
});
|
||||
|
||||
anim.effect = null;
|
||||
assert_equals(anim.playState, 'paused');
|
||||
|
||||
return retPromise;
|
||||
}, 'If new effect is null and old effect is not null, we reset the pending ' +
|
||||
'tasks and ready promise is rejected');
|
||||
|
||||
promise_test(function(t) {
|
||||
var anim = new Animation();
|
||||
anim.pause();
|
||||
assert_equals(anim.playState, 'pending');
|
||||
|
||||
anim.effect = new KeyframeEffectReadOnly(createDiv(t),
|
||||
{ marginLeft: [ '0px', '100px' ] },
|
||||
100 * MS_PER_SEC);
|
||||
assert_equals(anim.playState, 'pending');
|
||||
|
||||
return anim.ready.then(function() {
|
||||
assert_equals(anim.playState, 'paused');
|
||||
});
|
||||
}, 'If animation has a pending pause task, reschedule that task to run ' +
|
||||
'as soon as animation is ready.');
|
||||
|
||||
promise_test(function(t) {
|
||||
var anim = new Animation();
|
||||
anim.play();
|
||||
assert_equals(anim.playState, 'pending');
|
||||
|
||||
anim.effect = new KeyframeEffectReadOnly(createDiv(t),
|
||||
{ marginLeft: [ '0px', '100px' ] },
|
||||
100 * MS_PER_SEC);
|
||||
assert_equals(anim.playState, 'pending');
|
||||
|
||||
return anim.ready.then(function() {
|
||||
assert_equals(anim.playState, 'running');
|
||||
});
|
||||
}, 'If animation has a pending play task, reschedule that task to run ' +
|
||||
'as soon as animation is ready to play new effect.');
|
||||
|
||||
promise_test(function(t) {
|
||||
var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
|
||||
100 * MS_PER_SEC);
|
||||
var animB = new Animation();
|
||||
|
||||
return animA.ready.then(function() {
|
||||
animB.effect = animA.effect;
|
||||
assert_equals(animA.effect, null);
|
||||
assert_equals(animA.playState, 'finished');
|
||||
});
|
||||
}, 'When setting the effect of an animation to the effect of an existing ' +
|
||||
'animation, the existing animation\'s target effect should be set to null.');
|
||||
|
||||
test(function(t) {
|
||||
var animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
|
||||
100 * MS_PER_SEC);
|
||||
var animB = new Animation();
|
||||
var effect = animA.effect;
|
||||
animA.currentTime = 50 * MS_PER_SEC;
|
||||
animB.currentTime = 20 * MS_PER_SEC;
|
||||
assert_equals(effect.getComputedTiming().progress, 0.5,
|
||||
'Original timing comes from first animation');
|
||||
animB.effect = effect;
|
||||
assert_equals(effect.getComputedTiming().progress, 0.2,
|
||||
'After setting the effect on a different animation, ' +
|
||||
'it uses the new animation\'s timing');
|
||||
}, 'After setting the target effect of animation to the target effect of an ' +
|
||||
'existing animation, the target effect\'s timing is updated to reflect ' +
|
||||
'the current time of the new animation.');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
@ -10,27 +10,11 @@
|
|||
<script>
|
||||
'use strict';
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// NOTE TO THE POOR PERSON WHO HAS TO MERGE THIS WITH THE TEST OF THE SAME
|
||||
// NAME FROM BLINK
|
||||
// TESTS FOR UPDATING THE HOLD TIME
|
||||
//
|
||||
// There is a pull request from Blink at:
|
||||
//
|
||||
// https://github.com/w3c/web-platform-tests/pull/3328
|
||||
//
|
||||
// which this file will surely conflict with.
|
||||
//
|
||||
// However, those tests cover a different part of the same algorithm. They
|
||||
// are mostly concerned with testing events and promises rather than the
|
||||
// timing part of the algorithm.
|
||||
//
|
||||
// The tests below cover the first part of the algorithm. So, please keep both
|
||||
// sets of tests and delete this comment. Preferably put the tests in this
|
||||
// file first.
|
||||
//
|
||||
// Thank you!
|
||||
//
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
// CASE 1: playback rate > 0 and current time >= target effect end
|
||||
// (Also the start time is resolved and there is pending task)
|
||||
|
|
@ -43,9 +27,9 @@ promise_test(function(t) {
|
|||
// otherwise we don't have a resolved start time. We test the case
|
||||
// where the start time is unresolved in a subsequent test.
|
||||
return anim.ready.then(function() {
|
||||
// Seek to 1ms before the target end and wait a frame (> 16ms)
|
||||
// Seek to 1ms before the target end and then wait 1ms
|
||||
anim.currentTime = 100 * MS_PER_SEC - 1;
|
||||
return waitForAnimationFrames(1);
|
||||
return waitForAnimationFramesWithDelay(1);
|
||||
}).then(function() {
|
||||
assert_equals(anim.currentTime, 100 * MS_PER_SEC,
|
||||
'Hold time is set to target end clamping current time');
|
||||
|
|
@ -96,9 +80,9 @@ promise_test(function(t) {
|
|||
anim.playbackRate = -1;
|
||||
anim.play(); // Make sure animation is not initially finished
|
||||
return anim.ready.then(function() {
|
||||
// Seek to 1ms before 0 end and wait a frame (> 16ms)
|
||||
// Seek to 1ms before 0 and then wait 1ms
|
||||
anim.currentTime = 1;
|
||||
return waitForAnimationFrames(1);
|
||||
return waitForAnimationFramesWithDelay(1);
|
||||
}).then(function() {
|
||||
assert_equals(anim.currentTime, 0 * MS_PER_SEC,
|
||||
'Hold time is set to zero clamping current time');
|
||||
|
|
@ -327,5 +311,100 @@ test(function(t) {
|
|||
}, 'Updating the finished state when start time is unresolved and'
|
||||
+ ' did seek = true');
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
//
|
||||
// TESTS FOR RUNNING FINISH NOTIFICATION STEPS
|
||||
//
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
function waitForFinishEventAndPromise(animation) {
|
||||
var eventPromise = new Promise(function(resolve) {
|
||||
animation.onfinish = function() { resolve(); }
|
||||
});
|
||||
return Promise.all([eventPromise, animation.finished]);
|
||||
}
|
||||
|
||||
promise_test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
animation.onfinish =
|
||||
t.unreached_func('Seeking to finish should not fire finish event');
|
||||
animation.finished.then(
|
||||
t.unreached_func('Seeking to finish should not resolve finished promise'));
|
||||
animation.currentTime = 1;
|
||||
animation.currentTime = 0;
|
||||
animation.pause();
|
||||
return waitForAnimationFrames(3);
|
||||
}, 'Finish notification steps don\'t run when the animation seeks to finish'
|
||||
+ ' and then seeks back again');
|
||||
|
||||
promise_test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
return animation.ready.then(function() {
|
||||
return waitForFinishEventAndPromise(animation);
|
||||
});
|
||||
}, 'Finish notification steps run when the animation completes normally');
|
||||
|
||||
promise_test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
return animation.ready.then(function() {
|
||||
animation.currentTime = 10;
|
||||
return waitForFinishEventAndPromise(animation);
|
||||
});
|
||||
}, 'Finish notification steps run when the animation seeks past finish');
|
||||
|
||||
promise_test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
return animation.ready.then(function() {
|
||||
// Register for notifications now since once we seek away from being
|
||||
// finished the 'finished' promise will be replaced.
|
||||
var finishNotificationSteps = waitForFinishEventAndPromise(animation);
|
||||
animation.finish();
|
||||
animation.currentTime = 0;
|
||||
animation.pause();
|
||||
return finishNotificationSteps;
|
||||
});
|
||||
}, 'Finish notification steps run when the animation completes with .finish(),'
|
||||
+ ' even if we then seek away');
|
||||
|
||||
promise_test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
var initialFinishedPromise = animation.finished;
|
||||
|
||||
return animation.finished.then(function(target) {
|
||||
animation.currentTime = 0;
|
||||
assert_not_equals(initialFinishedPromise, animation.finished);
|
||||
});
|
||||
}, 'Animation finished promise is replaced after seeking back to start');
|
||||
|
||||
promise_test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
var initialFinishedPromise = animation.finished;
|
||||
|
||||
return animation.finished.then(function(target) {
|
||||
animation.play();
|
||||
assert_not_equals(initialFinishedPromise, animation.finished);
|
||||
});
|
||||
}, 'Animation finished promise is replaced after replaying from start');
|
||||
|
||||
async_test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
animation.onfinish = function(event) {
|
||||
animation.currentTime = 0;
|
||||
animation.onfinish = function(event) {
|
||||
t.done();
|
||||
};
|
||||
};
|
||||
}, 'Animation finish event is fired again after seeking back to start');
|
||||
|
||||
async_test(function(t) {
|
||||
var animation = createDiv(t).animate(null, 1);
|
||||
animation.onfinish = function(event) {
|
||||
animation.play();
|
||||
animation.onfinish = function(event) {
|
||||
t.done();
|
||||
};
|
||||
};
|
||||
}, 'Animation finish event is fired again after replaying from start');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue