summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html')
-rw-r--r--testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html391
1 files changed, 391 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
new file mode 100644
index 000000000..90e26d276
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
@@ -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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-27 13:53:36 +0000