mirror of
https://github.com/servo/servo.git
synced 2025-06-24 00:54:32 +01:00
391 lines
18 KiB
HTML
391 lines
18 KiB
HTML
<!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>
|