import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions

View file

@ -0,0 +1,135 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests for discrete animation</title>
<link rel="help" href="http://w3c.github.io/web-animations/#animatable-as-string-section">
<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 div = createDiv(t);
var anim = div.animate({ fontStyle: [ 'normal', 'italic' ] },
{ duration: 1000, fill: 'forwards' });
assert_equals(getComputedStyle(div).fontStyle, 'normal',
'Animation produces \'from\' value at start of interval');
anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
assert_equals(getComputedStyle(div).fontStyle, 'normal',
'Animation produces \'from\' value just before the middle of'
+ ' the interval');
anim.currentTime++;
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'to\' value at exact middle of'
+ ' the interval');
anim.finish();
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'to\' value during forwards fill');
}, 'Test animating discrete values');
test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;
var anim = div.animate({ height: [ 'auto', '200px' ] },
{ duration: 1000, fill: 'forwards' });
assert_equals(getComputedStyle(div).height, originalHeight,
'Animation produces \'from\' value at start of interval');
anim.currentTime = anim.effect.getComputedTiming().duration / 2 - 1;
assert_equals(getComputedStyle(div).height, originalHeight,
'Animation produces \'from\' value just before the middle of'
+ ' the interval');
anim.currentTime++;
assert_equals(getComputedStyle(div).height, '200px',
'Animation produces \'to\' value at exact middle of'
+ ' the interval');
anim.finish();
assert_equals(getComputedStyle(div).height, '200px',
'Animation produces \'to\' value during forwards fill');
}, 'Test discrete animation is used when interpolation fails');
test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;
var anim = div.animate({ height: [ 'auto',
'200px',
'300px',
'auto',
'400px' ] },
{ duration: 1000, fill: 'forwards' });
// There are five values, so there are four pairs to try to interpolate.
// We test at the middle of each pair.
assert_equals(getComputedStyle(div).height, originalHeight,
'Animation produces \'from\' value at start of interval');
anim.currentTime = 125;
assert_equals(getComputedStyle(div).height, '200px',
'First non-interpolable pair uses discrete interpolation');
anim.currentTime += 250;
assert_equals(getComputedStyle(div).height, '250px',
'Second interpolable pair uses linear interpolation');
anim.currentTime += 250;
assert_equals(getComputedStyle(div).height, originalHeight,
'Third non-interpolable pair uses discrete interpolation');
anim.currentTime += 250;
assert_equals(getComputedStyle(div).height, '400px',
'Fourth non-interpolable pair uses discrete interpolation');
}, 'Test discrete animation is used only for pairs of values that cannot'
+ ' be interpolated');
test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;
// Easing: http://cubic-bezier.com/#.68,0,1,.01
// With this curve, we don't reach the 50% point until about 95% of
// the time has expired.
var anim = div.animate({ fontStyle: [ 'italic', 'oblique' ] },
{ duration: 1000, fill: 'forwards',
easing: 'cubic-bezier(0.68,0,1,0.01)' });
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'from\' value at start of interval');
anim.currentTime = 940;
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'from\' value at 94% of the iteration'
+ ' time');
anim.currentTime = 960;
assert_equals(getComputedStyle(div).fontStyle, 'oblique',
'Animation produces \'to\' value at 96% of the iteration'
+ ' time');
}, 'Test the 50% switch point for discrete animation is based on the'
+ ' effect easing');
test(function(t) {
var div = createDiv(t);
var originalHeight = getComputedStyle(div).height;
// Easing: http://cubic-bezier.com/#.68,0,1,.01
// With this curve, we don't reach the 50% point until about 95% of
// the time has expired.
var anim = div.animate([ { fontStyle: 'italic',
easing: 'cubic-bezier(0.68,0,1,0.01)' },
{ fontStyle: 'oblique' } ],
{ duration: 1000, fill: 'forwards' });
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'from\' value at start of interval');
anim.currentTime = 940;
assert_equals(getComputedStyle(div).fontStyle, 'italic',
'Animation produces \'from\' value at 94% of the iteration'
+ ' time');
anim.currentTime = 960;
assert_equals(getComputedStyle(div).fontStyle, 'oblique',
'Animation produces \'to\' value at 96% of the iteration'
+ ' time');
}, 'Test the 50% switch point for discrete animation is based on the'
+ ' keyframe easing');
</script>

View file

@ -0,0 +1,152 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Keyframe spacing tests on shapes</title>
<link rel="help" href="https://w3c.github.io/web-animations/#spacing-keyframes">
<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";
// Help function for testing the computed offsets by the distance array.
function assert_animation_offsets(anim, dist) {
const frames = anim.effect.getKeyframes();
const cumDist = dist.reduce( (prev, curr) => {
prev.push(prev.length == 0 ? curr : curr + prev[prev.length - 1]);
return prev;
}, []);
const total = cumDist[cumDist.length - 1];
for (var i = 0; i < frames.length; ++i) {
assert_equals(frames[i].computedOffset, cumDist[i] / total,
'computedOffset of frame ' + i);
}
}
test(function(t) {
var anim =
createDiv(t).animate([ { clipPath: 'circle(20px)' },
{ clipPath: 'ellipse(10px 20px)' },
{ clipPath: 'polygon(50px 0px, 100px 50px, ' +
' 50px 100px, 0px 50px)' },
{ clipPath: 'inset(20px round 10px)' } ],
{ spacing: 'paced(clip-path)' });
const frames = anim.effect.getKeyframes();
const slots = frames.length - 1;
for (var i = 0; i < frames.length; ++i) {
assert_equals(frames[i].computedOffset, i / slots,
'computedOffset of frame ' + i);
}
}, 'Test falling back to distribute spacing when using different basic shapes');
test(function(t) {
var anim =
createDiv(t).animate([ { clipPath: 'circle(10px)' },
{ clipPath: 'circle(20px) content-box' },
{ clipPath: 'circle(70px)' },
{ clipPath: 'circle(10px) padding-box' } ],
{ spacing: 'paced(clip-path)' });
const frames = anim.effect.getKeyframes();
const slots = frames.length - 1;
for (var i = 0; i < frames.length; ++i) {
assert_equals(frames[i].computedOffset, i / slots,
'computedOffset of frame ' + i);
}
}, 'Test falling back to distribute spacing when using different ' +
'reference boxes');
test(function(t) {
// 1st: circle(calc(20px) at calc(20px + 0%) calc(10px + 0%))
// 2nd: circle(calc(50px) at calc(10px + 0%) calc(10px + 0%))
// 3rd: circle(70px at calc(10px + 0%) calc(50px + 0%))
// 4th: circle(10px at calc(50px + 0%) calc(30px + 0%))
var anim =
createDiv(t).animate([ { clipPath: 'circle(calc(10px + 10px) ' +
' at 20px 10px)' },
{ clipPath: 'circle(calc(20px + 30px) ' +
' at 10px 10px)' },
{ clipPath: 'circle(70px at 10px 50px)' },
{ clipPath: 'circle(10px at 50px 30px)' } ],
{ spacing: 'paced(clip-path)' });
var dist = [ 0,
Math.sqrt(30 * 30 + 10 * 10),
Math.sqrt(20 * 20 + 40 * 40),
Math.sqrt(60 * 60 + 40 * 40 + 20 * 20) ];
assert_animation_offsets(anim, dist);
}, 'Test spacing on circle' );
test(function(t) {
// 1st: ellipse(20px calc(20px) at calc(0px + 50%) calc(0px + 50%))
// 2nd: ellipse(20px calc(50px) at calc(0px + 50%) calc(0px + 50%))
// 3rd: ellipse(30px 70px at calc(0px + 50%) calc(0px + 50%))
// 4th: ellipse(30px 10px at calc(0px + 50%) calc(0px + 50%))
var anim =
createDiv(t).animate([ { clipPath: 'ellipse(20px calc(10px + 10px))' },
{ clipPath: 'ellipse(20px calc(20px + 30px))' },
{ clipPath: 'ellipse(30px 70px)' },
{ clipPath: 'ellipse(30px 10px)' } ],
{ spacing: 'paced(clip-path)' });
var dist = [ 0,
Math.sqrt(30 * 30),
Math.sqrt(10 * 10 + 20 * 20),
Math.sqrt(60 * 60) ];
assert_animation_offsets(anim, dist);
}, 'Test spacing on ellipse' );
test(function(t) {
// 1st: polygon(nonzero, 50px 0px, 100px 50px, 50px 100px, 0px 50px)
// 2nd: polygon(nonzero, 40px 0px, 100px 70px, 10px 100px, 0px 70px)
// 3rd: polygon(nonzero, 100px 0px, 100px 100px, 10px 80px, 0px 50px)
// 4th: polygon(nonzero, 100px 100px, -10px 100px, 20px 80px, 20px 50px)
var anim =
createDiv(t).animate([ { clipPath: 'polygon(50px 0px, 100px 50px, ' +
' 50px 100px, 0px 50px)' },
{ clipPath: 'polygon(40px 0px, 100px 70px, ' +
' 10px 100px, 0px 70px)' },
{ clipPath: 'polygon(100px 0px, 100px 100px, ' +
' 10px 80px, 0px 50px)' },
{ clipPath: 'polygon(100px 100px, -10px 100px, ' +
' 20px 80px, 20px 50px)' } ],
{ spacing: 'paced(clip-path)' });
var dist = [ 0,
Math.sqrt(10 * 10 + 20 * 20 + 40 * 40 + 20 * 20),
Math.sqrt(60 * 60 + 30 * 30 + 20 * 20 + 20 * 20),
Math.sqrt(100 * 100 + 110 * 110 + 10 * 10 + 20 * 20) ];
assert_animation_offsets(anim, dist);
}, 'Test spacing on polygon' );
test(function(t) {
// Note: Rounding corners are 4 CSS pair values and
// each pair has x & y components.
// 1st: inset(5px 5px 5px 5px round 40px 30px 20px 5px / 40px 30px 20px 5px)
// 2nd: inset(10px 5px 10px 5px round 50px 60px / 50px 60px)
// 3rd: inset(40px 40px 40px 40px round 10px / 10px)
// 4th: inset(30px 40px 30px 40px round 20px / 20px)
var anim =
createDiv(t).animate([ { clipPath: 'inset(5px 5px 5px 5px ' +
' round 40px 30px 20px 5px)' },
{ clipPath: 'inset(10px 5px round 50px 60px)' },
{ clipPath: 'inset(40px 40px round 10px)' },
{ clipPath: 'inset(30px 40px round 20px)' } ],
{ spacing: 'paced(clip-path)' });
var dist = [ 0,
Math.sqrt(5 * 5 * 2 + (50 - 40) * (50 - 40) * 2 +
(60 - 30) * (60 - 30) * 2 +
(50 - 20) * (50 - 20) * 2 +
(60 - 5) * (60 - 5) * 2),
Math.sqrt(30 * 30 * 2 + 35 * 35 * 2 + (50 - 10) * (50 - 10) * 4 +
(60 - 10) * (60 - 10) * 4),
Math.sqrt(10 * 10 * 2 + (20 - 10) * (20 - 10) * 8) ];
assert_animation_offsets(anim, dist);
}, 'Test spacing on inset' );
</script>
</body>

View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Tests that property values respond to changes to their context</title>
<link rel="help" href="https://w3c.github.io/web-animations/#keyframes-section">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<script>
test(function(t) {
var div = createDiv(t);
div.style.fontSize = '10px';
var animation = div.animate([ { marginLeft: '10em' },
{ marginLeft: '20em' } ], 1000);
animation.currentTime = 500;
assert_equals(getComputedStyle(div).marginLeft, '150px',
'Effect value before updating font-size');
div.style.fontSize = '20px';
assert_equals(getComputedStyle(div).marginLeft, '300px',
'Effect value after updating font-size');
}, 'Effect values reflect changes to font-size on element');
test(function(t) {
var parentDiv = createDiv(t);
var div = createDiv(t);
parentDiv.appendChild(div);
parentDiv.style.fontSize = '10px';
var animation = div.animate([ { marginLeft: '10em' },
{ marginLeft: '20em' } ], 1000);
animation.currentTime = 500;
assert_equals(getComputedStyle(div).marginLeft, '150px',
'Effect value before updating font-size on parent element');
parentDiv.style.fontSize = '20px';
assert_equals(getComputedStyle(div).marginLeft, '300px',
'Effect value after updating font-size on parent element');
}, 'Effect values reflect changes to font-size on parent element');
promise_test(function(t) {
var parentDiv = createDiv(t);
var div = createDiv(t);
parentDiv.appendChild(div);
parentDiv.style.fontSize = '10px';
var animation = div.animate([ { marginLeft: '10em' },
{ marginLeft: '20em' } ], 1000);
animation.pause();
animation.currentTime = 500;
parentDiv.style.fontSize = '20px';
return animation.ready.then(function() {
assert_equals(getComputedStyle(div).marginLeft, '300px',
'Effect value after updating font-size on parent element');
});
}, 'Effect values reflect changes to font-size when computed style is not'
+ ' immediately flushed');
promise_test(function(t) {
var divWith10pxFontSize = createDiv(t);
divWith10pxFontSize.style.fontSize = '10px';
var divWith20pxFontSize = createDiv(t);
divWith20pxFontSize.style.fontSize = '20px';
var div = createDiv(t);
div.remove(); // Detach
var animation = div.animate([ { marginLeft: '10em' },
{ marginLeft: '20em' } ], 1000);
animation.pause();
return animation.ready.then(function() {
animation.currentTime = 500;
divWith10pxFontSize.appendChild(div);
assert_equals(getComputedStyle(div).marginLeft, '150px',
'Effect value after attaching to font-size:10px parent');
divWith20pxFontSize.appendChild(div);
assert_equals(getComputedStyle(div).marginLeft, '300px',
'Effect value after attaching to font-size:20px parent');
});
}, 'Effect values reflect changes to font-size from reparenting');
test(function(t) {
var divA = createDiv(t);
divA.style.fontSize = '10px';
var divB = createDiv(t);
divB.style.fontSize = '20px';
var animation = divA.animate([ { marginLeft: '10em' },
{ marginLeft: '20em' } ], 1000);
animation.currentTime = 500;
assert_equals(getComputedStyle(divA).marginLeft, '150px',
'Effect value before updating target element');
animation.effect.target = divB;
assert_equals(getComputedStyle(divB).marginLeft, '300px',
'Effect value after updating target element');
}, 'Effect values reflect changes to target element');
</script>
</body>

View file

@ -0,0 +1,391 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Keyframe spacing tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#spacing-keyframes">
<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([ { marginLeft: '0px' },
{ marginLeft: '-20px' },
{ marginLeft: '100px' },
{ marginLeft: '50px' } ],
{ duration: 100 * MS_PER_SEC });
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');
test(function(t) {
var anim = createDiv(t).animate([ { marginLeft: '0px' },
{ marginLeft: '-20px' },
{ marginLeft: '100px', offset: 0.5 },
{ marginLeft: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'distribute' });
var frames = anim.effect.getKeyframes();
assert_equals(frames[0].computedOffset, 0.0, '1st frame offset');
assert_equals(frames[1].computedOffset, 0.5 * 1 / 2, '2nd frame offset');
assert_equals(frames[2].computedOffset, 0.5, '3rd frame offset');
assert_equals(frames[3].computedOffset, 1.0, 'last frame offset');
}, 'Test distribute spacing with specific offsets');
test(function(t) {
var anim = createDiv(t).animate(null,
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin-left)' });
var frames = anim.effect.getKeyframes();
assert_equals(frames.length, 0, "empty keyframe list");
}, 'Test paced spacing without any keyframe');
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)' });
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');
test(function(t) {
var anim = createDiv(t).animate([ { marginLeft: '0px' },
{ marginLeft: '-20px' },
{ marginLeft: '100px', offset: 0.5 },
{ marginLeft: '120px' },
{ marginLeft: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin-left)' });
var frames = anim.effect.getKeyframes();
var cumDist1 = [ 0, 20, 140 ];
var cumDist2 = [ 0, 20, 90 ];
assert_equals(frames[1].computedOffset, 0.5 * cumDist1[1] / cumDist1[2],
'2nd frame offset');
assert_equals(frames[2].computedOffset, 0.5,
'3rd frame offset');
assert_equals(frames[3].computedOffset, 0.5 + 0.5 * cumDist2[1] / cumDist2[2],
'4th frame offset');
}, 'Test paced spacing with specific offsets');
test(function(t) {
var anim = createDiv(t).animate([ { marginLeft: '0px' },
{ marginLeft: '0px' },
{ marginLeft: '100px' },
{ marginLeft: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin-left)' });
var frames = anim.effect.getKeyframes();
var cumDist = [0, 0, 100, 150];
assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
'2nd frame offset');
assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
'3rd frame offset');
}, 'Test paced spacing if some paced property values are equal');
test(function(t) {
var anim = createDiv(t).animate([ { marginLeft: '0px' },
{ marginLeft: '0px' },
{ marginLeft: '0px' },
{ marginLeft: '0px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin-left)' });
var frames = anim.effect.getKeyframes();
var slots = frames.length - 1;
assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd frame offset');
assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd frame offset');
}, 'Test falling back to distribute spacing if all paced property value ' +
'are equal');
test(function(t) {
var anim = createDiv(t).animate([ { margin: '0px' },
{ marginTop: '-20px' },
{ marginLeft: '100px' },
{ margin: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin-left)' });
var frames = anim.effect.getKeyframes();
assert_equals(frames[1].computedOffset, frames[2].computedOffset * 1 / 2,
'2nd frame offset using distribute spacing');
assert_equals(frames[2].computedOffset, 100 / 150,
'3rd frame offset using paced spacing');
}, 'Test paced spacing if there a keyframe without the paced property');
test(function(t) {
var anim = createDiv(t).animate([ { margin: '0px' },
{ marginTop: '40px' },
{ marginTop: '-20px' },
{ marginLeft: '40px' },
{ marginTop: '60px' },
{ margin: '10px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin-left)' });
var frames = anim.effect.getKeyframes();
var cumDist = [0, 0, 0, 40, 40, 70];
assert_equals(frames[1].computedOffset, frames[3].computedOffset * 1 / 3,
'2nd frame offset using distribute spacing');
assert_equals(frames[2].computedOffset, frames[3].computedOffset * 2 / 3,
'3rd frame offset using distribute spacing');
assert_equals(frames[3].computedOffset, cumDist[3] / cumDist[5],
'4th frame offset using paced spacing');
assert_equals(frames[4].computedOffset,
frames[3].computedOffset +
(1 - frames[3].computedOffset) * 1 / 2,
'5th frame offset using distribute spacing');
}, 'Test paced spacing if a paced property that appears on only some ' +
'keyframes');
test(function(t) {
var anim = createDiv(t).animate([ { margin: '0px' },
{ marginTop: '-20px', offset: 0.5 },
{ marginLeft: '40px' },
{ marginLeft: '100px' },
{ margin: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin-left)' });
var frames = anim.effect.getKeyframes();
assert_equals(frames[2].computedOffset, 0.5 + 0.5 * 1 / 3,
'3rd frame offset using distribute spacing because it is the ' +
'first paceable keyframe');
assert_equals(frames[3].computedOffset,
frames[2].computedOffset +
(1.0 - frames[2].computedOffset) * 60 / 110,
'4th frame offset using paced spacing');
}, 'Test paced spacing if a paced property that appears on only some ' +
'keyframes and there is a specific offset');
test(function(t) {
var anim = createDiv(t).animate([ { margin: '0px' },
{ marginTop: '20px', offset: 0.2 },
{ marginTop: '40px' },
{ marginTop: '-20px' },
{ marginLeft: '-20px' },
{ marginLeft: '40px' },
{ marginTop: '60px' },
{ marginLeft: '100px' },
{ marginTop: '50px' },
{ marginTop: '100px', offset: 0.8 },
{ margin: '0px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin-left)' });
var frames = anim.effect.getKeyframes();
// Test distribute spacing in (A, Paced A] and [Paced B, frame B).
var slots = frames.length - 3;
var start = 0.2;
var diff = 0.8 - start;
assert_equals(frames[2].computedOffset, start + diff * 1.0 / slots,
'3nd frame offset using distribute spacing');
assert_equals(frames[3].computedOffset, start + diff * 2.0 / slots,
'4rd frame offset using distribute spacing');
assert_equals(frames[4].computedOffset, start + diff * 3.0 / slots,
'5th frame offset using distribute spacing because it is ' +
'the first paceable keyframe');
assert_equals(frames[7].computedOffset, start + diff * 6.0 / slots,
'8th frame offset using distribute spacing because it is ' +
'the last paceable keyframe');
assert_equals(frames[8].computedOffset, start + diff * 7.0 / slots,
'9th frame offset using distribute spacing');
// Test paced spacing and other null computed offsets in (Paced A, Paced B).
var cumDist = [0, 60, 60, 120];
assert_equals(frames[5].computedOffset,
frames[4].computedOffset + cumDist[2] / cumDist[3] *
(frames[7].computedOffset - frames[4].computedOffset),
'6th frame offset using paced spacing');
assert_equals(frames[6].computedOffset,
frames[5].computedOffset + 1.0 / 2.0 *
(frames[7].computedOffset - frames[5].computedOffset),
'7th frame offset using distribute spacing');
}, 'Test paced spacing where there are some keyframes without offsets and ' +
'without the paced property before the first paceable keyframe and ' +
'after the last paceable keyframe');
test(function(t) {
var anim = createDiv(t).animate([ { margin: '0px' },
{ margin: '-20px' },
{ margin: '100px' },
{ margin: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin)' });
var frames = anim.effect.getKeyframes();
var cumDist = [0, 20, 140, 190];
assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
'2nd frame offset');
assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
'3rd frame offset');
}, 'Test paced spacing for using shorthand property');
test(function(t) {
var anim =
createDiv(t).animate([ { marginLeft: '0px', marginRight: '0px',
marginTop: '10px', marginBottom: '10px' },
{ marginLeft: '-20px', marginRight: '-20px',
marginTop: '0px', marginBottom: '0px' },
{ marginLeft: '100px', marginRight: '100px',
marginTop: '-50px', marginBottom: '-50px' },
{ marginLeft: '50px', marginRight: '50px',
marginTop: '80px', marginBottom: '80px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin)' });
var frames = anim.effect.getKeyframes();
var dist = [ 0,
Math.sqrt(20 * 20 * 2 + 10 * 10 * 2),
Math.sqrt(120 * 120 * 2 + 50 * 50 * 2),
Math.sqrt(50 * 50 * 2 + 130 * 130 * 2) ];
var cumDist = [];
dist.reduce(function(prev, curr, i) { return cumDist[i] = prev + curr; }, 0);
assert_approx_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
0.0001, '2nd frame offset');
assert_approx_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
0.0001, '3rd frame offset');
}, 'Test paced spacing using shorthand property where only the longhand ' +
'components are specified');
test(function(t) {
var anim = createDiv(t).animate([ { marginLeft: '0px', marginTop: '0px' },
{ marginLeft: '-20px', marginTop: '-20px' },
{ marginLeft: '100px', marginTop: '100px' },
{ marginLeft: '50px', marginTop: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin)' });
var frames = anim.effect.getKeyframes();
var slots = frames.length - 1;
assert_equals(frames[1].computedOffset, 1 / slots, '2nd frame offset');
assert_equals(frames[2].computedOffset, 2 / slots, '3rd frame offset');
}, 'Test falling back to distribute spacing if all keyframe miss some ' +
'components');
test(function(t) {
var anim = createDiv(t).animate([ { margin: '0px' },
{ marginLeft: '-20px' },
{ marginTop: '40px' },
{ margin: '100px' },
{ margin: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin)' });
var frames = anim.effect.getKeyframes();
assert_equals(frames[1].computedOffset, frames[3].computedOffset * 1 / 3,
'2nd frame offset using distribute spacing');
assert_equals(frames[2].computedOffset, frames[3].computedOffset * 2 / 3,
'3rd frame offset using distribute spacing');
assert_equals(frames[3].computedOffset, 100 / 150,
'4th frame offset using paced spacing');
}, 'Test paced spacing only for keyframes specifying all longhand ' +
'components, and falling back to distribute spacing for the reset');
test(function(t) {
var anim = createDiv(t).animate([ { margin: '0px' },
{ marginLeft: '-20px' },
{ marginTop: '40px', offset: 0.5 },
{ margin: '100px' },
{ margin: '50px' } ],
{ duration: 100 * MS_PER_SEC,
spacing: 'paced(margin)' });
var frames = anim.effect.getKeyframes();
assert_equals(frames[1].computedOffset, 0.5 * 1 / 2,
'2nd frame offset using distribute spacing');
assert_equals(frames[3].computedOffset, 0.5 + 0.5 * 1 / 2,
'4th frame offset using distribute spacing because it is the ' +
'first paceable keyframe from a non-null offset keyframe');
}, 'Test paced spacing only for keyframes specifying all some components, ' +
'and falling back to distribute spacing for the reset with some specific ' +
'offsets');
// 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>

View file

@ -0,0 +1,114 @@
<!DOCTYPE html>
<meta charset=utf-8>
<title>Keyframe handling tests</title>
<link rel="help" href="https://w3c.github.io/web-animations/#the-effect-value-of-a-keyframe-animation-effect">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<body>
<div id="log"></div>
<div id="target"></div>
<script>
'use strict';
test(function(t) {
var div = createDiv(t);
var anim = div.animate([ { offset: 0, opacity: 0 },
{ offset: 0, opacity: 0.1 },
{ offset: 0, opacity: 0.2 },
{ offset: 1, opacity: 0.8 },
{ offset: 1, opacity: 0.9 },
{ offset: 1, opacity: 1 } ],
{ duration: 1000,
easing: 'cubic-bezier(0.5, -0.5, 0.5, 1.5)' });
assert_equals(getComputedStyle(div).opacity, '0.2',
'When progress is zero the last keyframe with offset 0 should'
+ ' be used');
// http://cubic-bezier.com/#.5,-0.5,.5,1.5
// At t=0.15, the progress should be negative
anim.currentTime = 150;
assert_equals(getComputedStyle(div).opacity, '0',
'When progress is negative, the first keyframe with a 0 offset'
+ ' should be used');
// At t=0.71, the progress should be just less than 1
anim.currentTime = 710;
assert_approx_equals(parseFloat(getComputedStyle(div).opacity), 0.8, 0.01,
'When progress is just less than 1, the first keyframe with an'
+ ' offset of 1 should be used as the interval endpoint');
// At t=0.85, the progress should be > 1
anim.currentTime = 850;
assert_equals(getComputedStyle(div).opacity, '1',
'When progress is greater than 1.0, the last keyframe with a 1'
+ ' offset should be used');
anim.finish();
assert_equals(getComputedStyle(div).opacity, '1',
'When progress is equal to 1.0, the last keyframe with a 1'
+ ' offset should be used');
}, 'Overlapping keyframes at 0 and 1 use the appropriate value when the'
+ ' progress is outside the range [0, 1]');
test(function(t) {
var div = createDiv(t);
var anim = div.animate([ { offset: 0, opacity: 0 },
{ offset: 0.5, opacity: 0.3 },
{ offset: 0.5, opacity: 0.5 },
{ offset: 0.5, opacity: 0.7 },
{ offset: 1, opacity: 1 } ], 1000);
anim.currentTime = 250;
assert_equals(getComputedStyle(div).opacity, '0.15',
'Before the overlap point, the first keyframe from the'
+ ' overlap point should be used as interval endpoint');
anim.currentTime = 500;
assert_equals(getComputedStyle(div).opacity, '0.7',
'At the overlap point, the last keyframe from the'
+ ' overlap point should be used as interval startpoint');
anim.currentTime = 750;
assert_equals(getComputedStyle(div).opacity, '0.85',
'After the overlap point, the last keyframe from the'
+ ' overlap point should be used as interval startpoint');
}, 'Overlapping keyframes between 0 and 1 use the appropriate value on each'
+ ' side of the overlap point');
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ visibility: ['hidden','visible'] },
{ duration: 100 * MS_PER_SEC, fill: 'both' });
anim.currentTime = 0;
assert_equals(getComputedStyle(div).visibility, 'hidden',
'Visibility when progress = 0.');
anim.currentTime = 10 * MS_PER_SEC + 1;
assert_equals(getComputedStyle(div).visibility, 'visible',
'Visibility when progress > 0 due to linear easing.');
anim.finish();
assert_equals(getComputedStyle(div).visibility, 'visible',
'Visibility when progress = 1.');
}, "Test visibility clamping behavior.");
test(function(t) {
var div = createDiv(t);
var anim = div.animate({ visibility: ['hidden', 'visible'] },
{ duration: 100 * MS_PER_SEC, fill: 'both',
easing: 'cubic-bezier(0.25, -0.6, 0, 0.5)' });
anim.currentTime = 0;
assert_equals(getComputedStyle(div).visibility, 'hidden',
'Visibility when progress = 0.');
// Timing function is below zero. So we expected visibility is hidden.
anim.currentTime = 10 * MS_PER_SEC + 1;
assert_equals(getComputedStyle(div).visibility, 'hidden',
'Visibility when progress < 0 due to cubic-bezier easing.');
anim.currentTime = 60 * MS_PER_SEC;
assert_equals(getComputedStyle(div).visibility, 'visible',
'Visibility when progress > 0 due to cubic-bezier easing.');
}, "Test visibility clamping behavior with an easing that has a negative component");
done();
</script>
</body>