--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -129690,34 +129690,16 @@
]
],
"web-animations/animation-model/animation-types/interpolation-per-property.html": [
[
"/web-animations/animation-model/animation-types/interpolation-per-property.html",
{}
]
],
- "web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
- [
- "/web-animations/animation-model/animation-types/spacing-keyframes-filters.html",
- {}
- ]
- ],
- "web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
- [
- "/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html",
- {}
- ]
- ],
- "web-animations/animation-model/animation-types/spacing-keyframes-transform.html": [
- [
- "/web-animations/animation-model/animation-types/spacing-keyframes-transform.html",
- {}
- ]
- ],
"web-animations/animation-model/combining-effects/effect-composition.html": [
[
"/web-animations/animation-model/combining-effects/effect-composition.html",
{}
]
],
"web-animations/animation-model/keyframe-effects/effect-value-context.html": [
[
@@ -129738,22 +129720,16 @@
]
],
"web-animations/animation-model/keyframe-effects/effect-value-visibility.html": [
[
"/web-animations/animation-model/keyframe-effects/effect-value-visibility.html",
{}
]
],
- "web-animations/animation-model/keyframe-effects/spacing-keyframes.html": [
- [
- "/web-animations/animation-model/keyframe-effects/spacing-keyframes.html",
- {}
- ]
- ],
"web-animations/interfaces/Animatable/animate.html": [
[
"/web-animations/interfaces/Animatable/animate.html",
{}
]
],
"web-animations/interfaces/Animatable/getAnimations.html": [
[
@@ -129978,34 +129954,22 @@
]
],
"web-animations/interfaces/KeyframeEffect/setTarget.html": [
[
"/web-animations/interfaces/KeyframeEffect/setTarget.html",
{}
]
],
- "web-animations/interfaces/KeyframeEffect/spacing.html": [
- [
- "/web-animations/interfaces/KeyframeEffect/spacing.html",
- {}
- ]
- ],
"web-animations/interfaces/KeyframeEffectReadOnly/copy-contructor.html": [
[
"/web-animations/interfaces/KeyframeEffectReadOnly/copy-contructor.html",
{}
]
],
- "web-animations/interfaces/KeyframeEffectReadOnly/spacing.html": [
- [
- "/web-animations/interfaces/KeyframeEffectReadOnly/spacing.html",
- {}
- ]
- ],
"web-animations/timing-model/animation-effects/active-time.html": [
[
"/web-animations/timing-model/animation-effects/active-time.html",
{}
]
],
"web-animations/timing-model/animation-effects/current-iteration.html": [
[
@@ -220021,28 +219985,16 @@
"web-animations/animation-model/animation-types/property-list.js": [
"9dfb34806dfd264bb1155830b0548d53fcae9007",
"support"
],
"web-animations/animation-model/animation-types/property-types.js": [
"ee3e5ae1923027f7e9dd80da11e765085a02c367",
"support"
],
- "web-animations/animation-model/animation-types/spacing-keyframes-filters.html": [
- "bd771a8a18245560221d92ea3495f81918c09848",
- "testharness"
- ],
- "web-animations/animation-model/animation-types/spacing-keyframes-shapes.html": [
- "03c3ab6815cfa96c07d5f95b6059fb276c50a25f",
- "testharness"
- ],
- "web-animations/animation-model/animation-types/spacing-keyframes-transform.html": [
- "c1c5c2ea4580948d00502a048f3e562c61006ab9",
- "testharness"
- ],
"web-animations/animation-model/combining-effects/effect-composition.html": [
"8ac06085132d822e908d48de4c1109b66323f19f",
"testharness"
],
"web-animations/animation-model/keyframe-effects/effect-value-context.html": [
"10d9ee521240475a1729c2facfcea8b50342614e",
"testharness"
],
@@ -220053,20 +220005,16 @@
"web-animations/animation-model/keyframe-effects/effect-value-transformed-distance.html": [
"a0f0dc7d2f4833a68c6f8a5f908c498b05c6b22e",
"testharness"
],
"web-animations/animation-model/keyframe-effects/effect-value-visibility.html": [
"b01c7c5145c183fdca80dec4ca1966b0f72a7003",
"testharness"
],
- "web-animations/animation-model/keyframe-effects/spacing-keyframes.html": [
- "318bc877791852b0829a3e10cb19e2a20a15adab",
- "testharness"
- ],
"web-animations/interfaces/Animatable/animate.html": [
"5f50ca1e8ab1fecdc6594310b4e386eec4738c6b",
"testharness"
],
"web-animations/interfaces/Animatable/getAnimations.html": [
"92503fce725fcffce188df9c8e1da9d9ca281213",
"testharness"
],
@@ -220186,17 +220134,17 @@
"3a626b145f4eb77e816b9020f6fc67630088a00b",
"testharness"
],
"web-animations/interfaces/KeyframeEffect/composite.html": [
"2580086b2da9b29d1645484c5ad4e59636a370e5",
"testharness"
],
"web-animations/interfaces/KeyframeEffect/constructor.html": [
- "1011b4146d1054ee6498cce1905230a10fdb9f96",
+ "2bc0a19e2ff3304dfea3286096db46821bca6c16",
"testharness"
],
"web-animations/interfaces/KeyframeEffect/copy-contructor.html": [
"e1dfb5c05807a37974ecce98bb8c683cc291bfe4",
"testharness"
],
"web-animations/interfaces/KeyframeEffect/getComputedTiming.html": [
"c9dcf7c17010e5495007e000b33aeb4dc89f92b7",
@@ -220210,31 +220158,23 @@
"6f561694e38420194fd1817ee965436348221d06",
"testharness"
],
"web-animations/interfaces/KeyframeEffect/setKeyframes.html": [
"2982bb6f57bb52c6e4e0483e4e47b22868a6010d",
"testharness"
],
"web-animations/interfaces/KeyframeEffect/setTarget.html": [
- "a8fe23e2645133e8fb29511d2d4df493a9928330",
- "testharness"
- ],
- "web-animations/interfaces/KeyframeEffect/spacing.html": [
- "2231741d51d2645b5ff97fc4ec6156d5bc6cd442",
+ "8c75e6605a134c96e261e5383414b7e15b32d121",
"testharness"
],
"web-animations/interfaces/KeyframeEffectReadOnly/copy-contructor.html": [
"8ef986f13e7fe7ffeb7403f647b4169ac0d6a138",
"testharness"
],
- "web-animations/interfaces/KeyframeEffectReadOnly/spacing.html": [
- "2eb6b663f4ec25284370d16042444c43edb80c02",
- "testharness"
- ],
"web-animations/resources/easing-tests.js": [
"5ef1183a4d3e12ad3edfe678c9fa002e7edce888",
"support"
],
"web-animations/resources/keyframe-utils.js": [
"ff5700466b5af6ffaad824437d6566003a22e25b",
"support"
],
deleted file mode 100644
--- a/testing/web-platform/meta/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html.ini
+++ /dev/null
@@ -1,3 +0,0 @@
-[spacing-keyframes-shapes.html]
- type: testharness
- prefs: [layout.css.clip-path-shapes.enabled:true]
deleted file mode 100644
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/spacing-keyframes-filters.html
+++ /dev/null
@@ -1,210 +0,0 @@
-<!DOCTYPE html>
-<meta charset=utf-8>
-<title>Keyframe spacing tests on filters</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([ { filter: 'blur(1px)'},
- { filter: 'none' }, // The default value is 0px.
- { filter: 'blur(10px)' },
- { filter: 'blur(8px)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, 1, 10, (10 - 8) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on blur' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'brightness(50%)'},
- { filter: 'none' }, // The default value is 1.
- { filter: 'brightness(2)' },
- { filter: 'brightness(175%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on brightness' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'contrast(50%)'},
- { filter: 'none' }, // The default value is 1.
- { filter: 'contrast(2)' },
- { filter: 'contrast(175%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on contrast' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'drop-shadow(10px 10px 10px blue)'},
- { filter: 'none' },
- // none filter: 'drop-shadow(0, 0, 0, rgba(0, 0, 0, 0))'
- { filter: 'drop-shadow(5px 5px 1px black)' },
- { filter: 'drop-shadow(20px 20px yellow)' } ],
- { spacing: 'paced(filter)' });
-
- // Blue: rgba(0, 0, 255, 1.0) = rgba( 0%, 0%, 100%, 100%).
- // Black: rgba(0, 0, 0, 1.0) = rgba( 0%, 0%, 0%, 100%).
- // Yellow: rgba(255, 255, 0, 1.0) = rgba(100%, 100%, 0%, 100%).
- var dist = [ 0,
- Math.sqrt(10 * 10 + 10 * 10 + 10 * 10 + (1 * 1 + 1 * 1)),
- Math.sqrt(5 * 5 + 5 * 5 + 1 * 1 + (1 * 1)),
- Math.sqrt(15 * 15 + 15 * 15 + 1 * 1 + (1 * 1 + 1 * 1)) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on drop-shadow' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'drop-shadow(10px 10px 10px)'},
- { filter: 'drop-shadow(0 0)' },
- { filter: 'drop-shadow(5px 5px 1px black)' },
- { filter: 'drop-shadow(20px 20px yellow)' } ],
- { spacing: 'paced(filter)' });
-
- // Black: rgba(0, 0, 0, 1.0) = rgba( 0%, 0%, 0%, 100%).
- // Yellow: rgba(255, 255, 0, 1.0) = rgba(100%, 100%, 0%, 100%).
- var dist = [ 0,
- Math.sqrt(10 * 10 + 10 * 10 + 10 * 10),
- 0, // The distance is zero because the 2nd frame uses no-color.
- Math.sqrt(15 * 15 + 15 * 15 + 1 * 1 + (1 * 1 + 1 * 1)) ];
- assert_animation_offsets(anim, dist);
-}, 'Test getting zero distance when computing distance between ' +
- 'color and no-color on drop-shadow');
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'grayscale(50%)'},
- { filter: 'none' }, // The default value is 0.
- // Values of grayscale over 100% are clamped to 1.
- { filter: 'grayscale(2)' },
- { filter: 'grayscale(75%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on grayscale' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'hue-rotate(180deg)'},
- { filter: 'none' }, // The default value is 0deg.
- { filter: 'hue-rotate(720deg)' },
- { filter: 'hue-rotate(-180deg)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, 180, 720, 720 + 180 ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on hue-rotate' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'invert(50%)'},
- { filter: 'none' }, // The default value is 0.
- // Values of invert over 100% are clamped to 1.
- { filter: 'invert(2)' },
- { filter: 'invert(75%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on invert' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'opacity(50%)'},
- { filter: 'none' }, // The default value is 1.
- // Values of opacity over 100% are clamped to 1.
- { filter: 'opacity(2)' },
- { filter: 'opacity(75%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, (1 - 0.5), (1 - 1), (1.0 - 0.75) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on opacity' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'saturate(50%)'},
- { filter: 'none' }, // The default value is 1.
- { filter: 'saturate(2)' },
- { filter: 'saturate(175%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, (1 - 0.5), (2 - 1), (2.0 - 1.75) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on saturate' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'sepia(50%)'},
- { filter: 'none' }, // The default value is 0.
- // Values of sepia over 100% are clamped to 1.
- { filter: 'sepia(2)' },
- { filter: 'sepia(75%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0, 0.5, 1, (1.0 - 0.75) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on sepia' );
-
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'grayscale(50%) opacity(100%) blur(5px)' },
- { filter: 'none' },
- // none filter: 'grayscale(0) opacity(1) blur(0px)'
- { filter: 'grayscale(100%) opacity(50%) blur(1px)' },
- { filter: 'grayscale(75%) opacity(50%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0,
- Math.sqrt(0.5 * 0.5 + 5 * 5),
- Math.sqrt(1 * 1 + 0.5 * 0.5 + 1 * 1),
- Math.sqrt(0.25 * 0.25 + 1 * 1) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on filter function lists with consistent sequence' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { filter: 'grayscale(50%) opacity(100%)' },
- { filter: 'opacity(10%) grayscale(50%)' },
- { filter: 'grayscale(100%) opacity(50%) blur(1px)' },
- { filter: 'grayscale(75%) opacity(50%)' } ],
- { spacing: 'paced(filter)' });
-
- var dist = [ 0,
- 0,
- 0,
- Math.sqrt(0.25 * 0.25 + 1 * 1) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on filter function lists with inconsistent sequence' );
-
-</script>
-</body>
deleted file mode 100644
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/spacing-keyframes-shapes.html
+++ /dev/null
@@ -1,152 +0,0 @@
-<!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>
deleted file mode 100644
--- a/testing/web-platform/tests/web-animations/animation-model/animation-types/spacing-keyframes-transform.html
+++ /dev/null
@@ -1,242 +0,0 @@
-<!DOCTYPE html>
-<meta charset=utf-8>
-<title>Keyframe spacing tests on transform</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";
-
-const pi = Math.PI;
-const cos = Math.cos;
-const sin = Math.sin;
-const tan = Math.tan;
-const sqrt = Math.sqrt;
-
-// Help function for testing the computed offsets by the distance array.
-function assert_animation_offsets(anim, dist) {
- const epsilon = 0.00000001;
- 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_approx_equals(frames[i].computedOffset, cumDist[i] / total,
- epsilon, 'computedOffset of frame ' + i);
- }
-}
-
-function getAngleDist(rotate1, rotate2) {
- function quaternion(axis, angle) {
- var x = axis[0] * sin(angle/2.0);
- var y = axis[1] * sin(angle/2.0);
- var z = axis[2] * sin(angle/2.0);
- var w = cos(angle/2.0);
- return { 'x': x, 'y': y, 'z': z, 'w': w };
- }
- var q1 = quaternion(rotate1.axis, rotate1.angle);
- var q2 = quaternion(rotate2.axis, rotate2.angle);
- var dotProduct = q1.x * q2.x + q1.y * q2.y + q1.z * q2.z + q1.w * q2.w;
- return 2.0 * Math.acos(dotProduct);
-}
-
-function createMatrix(elements, Is3D) {
- return (Is3D ? "matrix3d" : "matrix") + "(" + elements.join() + ")";
-}
-
-test(function(t) {
- var anim = createDiv(t).animate([ { transform: "none" },
- { transform: "translate(-20px)" },
- { transform: "translate(100px)" },
- { transform: "translate(50px)"} ],
- { spacing: "paced(transform)" });
- assert_animation_offsets(anim, [ 0, 20, 120, 50 ]);
-}, 'Test spacing on translate' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { transform: "none" },
- { transform: "translate3d(-20px, 10px, 100px)" },
- { transform: "translate3d(100px, 200px, 50px)" },
- { transform: "translate(50px, -10px)"} ],
- { spacing: "paced(transform)" });
- var dist = [ 0,
- sqrt(20 * 20 + 10 * 10 + 100 * 100),
- sqrt(120 * 120 + 190 * 190 + 50 * 50),
- sqrt(50 * 50 + 210 * 210 + 50 * 50) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on translate3d' );
-
-test(function(t) {
- var anim = createDiv(t).animate([ { transform: "scale(0.5)" },
- { transform: "scale(4.5)" },
- { transform: "scale(2.5)" },
- { transform: "none"} ],
- { spacing: "paced(transform)" });
- assert_animation_offsets(anim, [ 0, 4.0, 2.0, 1.5 ]);
-}, 'Test spacing on scale' );
-
-test(function(t) {
- var anim = createDiv(t).animate([ { transform: "scale(0.5, 0.5)" },
- { transform: "scale3d(4.5, 5.0, 2.5)" },
- { transform: "scale3d(2.5, 1.0, 2.0)" },
- { transform: "scale3d(1, 0.5, 1.0)"} ],
- { spacing:"paced(transform)" });
- var dist = [ 0,
- sqrt(4.0 * 4.0 + 4.5 * 4.5 + 1.5 * 1.5),
- sqrt(2.0 * 2.0 + 4.0 * 4.0 + 0.5 * 0.5),
- sqrt(1.5 * 1.5 + 0.5 * 0.5 + 1.0 * 1.0) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on scale3d' );
-
-test(function(t) {
- var anim = createDiv(t).animate([ { transform: "rotate(60deg)" },
- { transform: "none" },
- { transform: "rotate(720deg)" },
- { transform: "rotate(-360deg)"} ],
- { spacing: "paced(transform)" });
- assert_animation_offsets(anim, [ 0, 60, 720, 1080 ]);
-}, 'Test spacing on rotate' );
-
-test(function(t) {
- var anim = createDiv(t).animate([ { transform: "rotate3d(1,0,0,60deg)" },
- { transform: "rotate3d(1,0,0,70deg)" },
- { transform: "rotate3d(0,0,1,-110deg)" },
- { transform: "rotate3d(1,0,0,219deg)"} ],
- { spacing: "paced(transform)" });
- var dist = [ 0,
- getAngleDist({ axis: [1,0,0], angle: 60 * pi / 180 },
- { axis: [1,0,0], angle: 70 * pi / 180 }),
- getAngleDist({ axis: [0,1,0], angle: 70 * pi / 180 },
- { axis: [0,0,1], angle: -110 * pi / 180 }),
- getAngleDist({ axis: [0,0,1], angle: -110 * pi / 180 },
- { axis: [1,0,0], angle: 219 * pi / 180 }) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on rotate3d' );
-
-test(function(t) {
- var anim = createDiv(t).animate([ { transform: "skew(60deg)" },
- { transform: "none" },
- { transform: "skew(-90deg)" },
- { transform: "skew(90deg)"} ],
- { spacing: "paced(transform)" });
- assert_animation_offsets(anim, [ 0, 60, 90, 180 ]);
-}, 'Test spacing on skew' );
-
-test(function(t) {
- var anim = createDiv(t).animate([ { transform: "skew(60deg, 30deg)" },
- { transform: "none" },
- { transform: "skew(-90deg, 60deg)" },
- { transform: "skew(90deg, 60deg)"} ],
- { spacing: "paced(transform)" });
- var dist = [ 0,
- sqrt(60 * 60 + 30 * 30),
- sqrt(90 * 90 + 60 * 60),
- sqrt(180 * 180 + 0) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on skew along both X and Y' );
-
-test(function(t) {
- // We calculate the distance of two perspective functions by converting them
- // into two matrix3ds, and then do matrix decomposition to get two
- // perspective vectors, so the equivalent perspective vectors are:
- // perspective 1: (0, 0, -1/128, 1);
- // perspective 2: (0, 0, -1/infinity = 0, 1);
- // perspective 3: (0, 0, -1/1024, 1);
- // perspective 4: (0, 0, -1/32, 1);
- var anim = createDiv(t).animate([ { transform: "perspective(128px)" },
- { transform: "none" },
- { transform: "perspective(1024px)" },
- { transform: "perspective(32px)"} ],
- { spacing: "paced(transform)" });
- assert_animation_offsets(anim, [ 0, 1/128, 1/1024, 1/32 - 1/1024 ]);
-}, 'Test spacing on perspective' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { transform: "none" },
- { transform: "rotate(180deg) translate(0px)" },
- { transform: "rotate(180deg) translate(1000px)" },
- { transform: "rotate(360deg) translate(1000px)"} ],
- { spacing: "paced(transform)" });
- var dist = [ 0,
- sqrt(pi * pi + 0),
- sqrt(1000 * 1000),
- sqrt(pi * pi + 0) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on matched transform lists' );
-
-test(function(t) {
- // matrix1 => translate(100px, 50px), skewX(60deg).
- // matrix2 => translate(1000px), rotate(180deg).
- // matrix3 => translate(1000px), scale(1.5, 0.7).
- const matrix1 = createMatrix([ 1, 0, tan(pi/4.0), 1, 100, 50 ]);
- const matrix2 = createMatrix([ cos(pi), sin(pi),
- -sin(pi), cos(pi),
- 1000, 0 ]);
- const matrix3 = createMatrix([ 1.5, 0, 0, 0.7, 1000, 0 ]);
- var anim = createDiv(t).animate([ { transform: "none" },
- { transform: matrix1 },
- { transform: matrix2 },
- { transform: matrix3 } ],
- { spacing: "paced(transform)" });
- var dist = [ 0,
- sqrt(100 * 100 + 50 * 50 + pi/4 * pi/4),
- sqrt(900 * 900 + 50 * 50 + pi * pi + pi/4 * pi/4),
- sqrt(pi * pi + 0.5 * 0.5 + 0.3 * 0.3) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on matrix' );
-
-test(function(t) {
- // matrix1 => translate3d(100px, 50px, -10px), skew(60deg).
- // matrix2 => translate3d(1000px, 0, 0), rotate3d(1, 0, 0, 180deg).
- // matrix3 => translate3d(1000px, 0, 0), scale3d(1.5, 0.7, 2.2).
- const matrix1 = createMatrix([ 1, 0, 0, 0,
- tan(pi/4.0), 1, 0, 0,
- 0, 0, 1, 0,
- 100, 50, -10, 1 ], true);
- const matrix2 = createMatrix([ 1, 0, 0, 0,
- 0, cos(pi), sin(pi), 0,
- 0, -sin(pi), cos(pi), 0,
- 1000, 0, 0, 1 ], true);
- const matrix3 = createMatrix([ 1.5, 0, 0, 0,
- 0, 0.7, 0, 0,
- 0, 0, 2.2, 0,
- 1000, 0, 0, 1 ], true);
- var anim = createDiv(t).animate([ { transform: "none" },
- { transform: matrix1 },
- { transform: matrix2 },
- { transform: matrix3 } ],
- { spacing: "paced(transform)" });
- var dist = [ 0,
- sqrt(100 * 100 + 50 * 50 + 10 * 10 + pi/4 * pi/4),
- sqrt(900 * 900 + 50 * 50 + 10 * 10 + pi/4 * pi/4 + pi * pi),
- sqrt(0.5 * 0.5 + 0.3 * 0.3 + 1.2 * 1.2 + pi * pi) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on matrix3d' );
-
-test(function(t) {
- var anim =
- createDiv(t).animate([ { transform: "none" },
- { transform: "translate(100px, 50px) skew(45deg)" },
- { transform: "translate(1000px) " +
- "rotate3d(1, 0, 0, 180deg)" },
- { transform: "translate(1000px) " +
- "scale3d(2.5, 0.5, 0.7)" } ],
- { spacing: "paced(transform)" });
-
- var dist = [ 0,
- sqrt(100 * 100 + 50 * 50 + pi/4 * pi/4),
- sqrt(900 * 900 + 50 * 50 + pi/4 * pi/4 + pi * pi),
- sqrt(1.5 * 1.5 + 0.5 * 0.5 + 0.3 * 0.3 + pi * pi) ];
- assert_animation_offsets(anim, dist);
-}, 'Test spacing on mismatched transform list' );
-
-</script>
-</body>
deleted file mode 100644
--- a/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/spacing-keyframes.html
+++ /dev/null
@@ -1,391 +0,0 @@
-<!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>
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/constructor.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/constructor.html
@@ -223,18 +223,16 @@ test(function(t) {
assert_equals(timing.iterationStart, 0.0, "default iterationStart");
assert_equals(timing.duration, "auto", "default duration");
assert_equals(timing.direction, "normal", "default direction");
assert_equals(timing.easing, "linear", "default easing");
assert_equals(effect.composite, "replace", "default composite");
assert_equals(effect.iterationComposite, "replace",
"default iterationComposite");
- assert_equals(effect.spacing, "distribute",
- "default spacing");
}, "a KeyframeEffectReadOnly constructed without any " +
"KeyframeEffectOptions object");
gKeyframeEffectOptionTests.forEach(function(stest) {
test(function(t) {
var effect = new KeyframeEffectReadOnly(target,
{ left: ["10px", "20px"] },
stest.input);
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html
@@ -80,81 +80,10 @@ test(function(t) {
// This makes sure the animation property is changed correctly on new
// targeted element.
anim.currentTime = 75 * MS_PER_SEC;
assert_equals(getComputedStyle(b).marginLeft, '75px',
'Value of 2nd target (currently targeted) after ' +
'changing the animation current time.');
}, 'Test setting target from a valid target to another target');
-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.target = null;
-
- 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 falling back to distribute spacing mode after setting null target');
-
-test(function(t) {
- var effect = new KeyframeEffect(null,
- [ { marginLeft: '0px' },
- { marginLeft: '-20px' },
- { marginLeft: '100px' },
- { marginLeft: '50px' } ],
- { duration: 100 * MS_PER_SEC,
- spacing: 'paced(margin-left)' });
- var frames = 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 mode if there is no context ' +
- 'element');
-
-test(function(t) {
- var div1 = createDiv(t);
- var div2 = createDiv(t);
- div1.style.marginLeft = '-20px';
- div2.style.marginLeft = '-50px';
- var child1 = document.createElement('div');
- var child2 = document.createElement('div');
- div1.appendChild(child1);
- div2.appendChild(child2);
- // body
- // / \
- // div1 div2
- // (-20px) (-50px)
- // | |
- // child1 child2
- var anim = child1.animate([ { marginLeft: '0px' },
- { marginLeft: 'inherit' },
- { 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[1].computedOffset, cumDist[1] / cumDist[3],
- '2nd frame offset');
- assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
- '3rd frame offset');
-
- anim.effect.target = child2;
- frames = anim.effect.getKeyframes();
- cumDist = [0, 50, 200, 250];
- assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
- '2nd frame offset after setting a new target');
- assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
- '3rd frame offset after setting a new target');
-}, 'Test paced spacing mode after setting a new target');
-
</script>
</body>
deleted file mode 100644
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/spacing.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!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>
deleted file mode 100644
--- a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffectReadOnly/spacing.html
+++ /dev/null
@@ -1,239 +0,0 @@
-<!DOCTYPE html>
-<meta charset=utf-8>
-<title>KeyframeEffectReadOnly spacing attribute tests</title>
-<link rel="help"
-href="https://w3c.github.io/web-animations/#dom-keyframeeffectreadonly-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) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: '' });
- });
-}, 'Test throwing TypeError if using empty string');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'dist' });
- });
-}, 'Test throwing TypeError if not using the correct keyword');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: ' paced(margin-left)' });
- });
-}, 'Test throwing TypeError if adding leading spaces');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(margin-left) ' });
- });
-}, 'Test throwing TypeError if adding trailing spaces');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced( margin-left)' });
- });
-}, 'Test throwing TypeError if adding leading spaces before the ' +
- 'paced property');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(margin-left )' });
- });
-}, 'Test throwing TypeError if adding trailing spaces after the ' +
- 'paced property');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced()' });
- });
-}, 'Test throwing TypeError if these is no paced property');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(.margin)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'a period');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(1margin)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'a number');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(\\)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'an invalid escape');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(\\\fmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'an invalid escape (FF)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(\\\rmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'an invalid escape (CR)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(\\\nmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'an invalid escape (LF)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(- )' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'a leading minus and an invalid name-start code point');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(-\\)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'a leading minus and an invalid escape');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(-\\\fmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'a leading minus and an invalid escape (FF)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(-\\\rmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'a leading minus and an invalid escape (CR)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(-\\\nmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident started string with ' +
- 'a leading minus and an invalid escape (LF)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(--\\)' });
- });
-}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
- 'escape');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(--\\\fmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
- 'escape (FF)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(--\\\rmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
- 'escape (CR)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(--\\\nmargin)' });
- });
-}, 'Test throwing TypeError if using a non-ident string with an invalid ' +
- 'escape (LF)');
-
-test(function(t) {
- assert_throws(new TypeError, function() {
- createDiv(t).animate(null, { spacing: 'paced(margin.left)' });
- });
-}, 'Test throwing TypeError if using a non-ident string with an invalid name ' +
- 'code point');
-
-test(function(t) {
- var anim = createDiv(t).animate(null, { 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, { spacing: 'paced(\\.margin)' });
- assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
-}, 'Test falling back to distribute spacing if using a unrecognized property ' +
- 'which starts with a valid escape (Full stop)');
-
-test(function(t) {
- var anim = createDiv(t).animate(null, { spacing: 'paced(\\ margin)' });
- assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
-}, 'Test falling back to distribute spacing if using a unrecognized property ' +
- 'which starts with a valid escape (white space)');
-
-test(function(t) {
- var anim = createDiv(t).animate(null, { spacing: 'paced(_margin)' });
- assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
-}, 'Test falling back to distribute spacing if using a unrecognized property ' +
- 'which starts with a valid escape (low line)');
-
-test(function(t) {
- var anim = createDiv(t).animate(null, { spacing: 'paced(-_margin)' });
- assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
-}, 'Test falling back to distribute spacing if using a unrecognized property ' +
- 'which starts with a minus and a low line');
-
-test(function(t) {
- var anim = createDiv(t).animate(null, { spacing: 'paced(-\\.margin)' });
- assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
-}, 'Test falling back to distribute spacing if using a unrecognized property ' +
- 'which starts with a minus and a valid escape');
-
-test(function(t) {
- var anim = createDiv(t).animate(null, { 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, { spacing: 'paced(animation)' });
- assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
-}, 'Test falling back to distribute spacing if using a non-animatable ' +
- 'shorthand property');
-
-test(function(t) {
- var anim = createDiv(t).animate(null,
- { 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);
- assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
-}, 'Test default value of spacing');
-
-test(function(t) {
- var anim = createDiv(t).animate(null, { 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, { spacing: 'paced(margin-left)' });
- assert_equals(anim.effect.spacing, 'paced(margin-left)', 'spacing mode');
-}, 'Test spacing value if setting paced');
-
-</script>
-</body>