summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html')
-rw-r--r--testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html329
1 files changed, 329 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html
new file mode 100644
index 000000000..d16831281
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/processing-a-keyframes-argument.html
@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>KeyframeEffectReadOnly constructor tests</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#processing-a-keyframes-argument">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../testcommon.js"></script>
+<script src="../../resources/keyframe-utils.js"></script>
+<body>
+<div id="log"></div>
+<div id="target"></div>
+<script>
+'use strict';
+
+// Test the "process a keyframe-like object" procedure.
+//
+// This file only tests the KeyframeEffectReadOnly constructor since it is
+// assumed that the implementation of the KeyframeEffect constructor,
+// Animatable.animate() method, and KeyframeEffect.setKeyframes() method will
+// all share common machinery and it is not necessary to test each method.
+
+// Test that only animatable properties are accessed
+
+var gNonAnimatableProps = [
+ 'animation', // Shorthands where all the longhand sub-properties are not
+ // animatable, are also not animatable.
+ 'animationDelay',
+ 'animationDirection',
+ 'animationDuration',
+ 'animationFillMode',
+ 'animationIterationCount',
+ 'animationName',
+ 'animationPlayState',
+ 'animationTimingFunction',
+ 'transition',
+ 'transitionDelay',
+ 'transitionDuration',
+ 'transitionProperty',
+ 'transitionTimingFunction',
+ 'display',
+ 'unsupportedProperty',
+];
+
+function TestKeyframe(testProp) {
+ var _propAccessCount = 0;
+
+ Object.defineProperty(this, testProp, {
+ get: function() { _propAccessCount++; },
+ enumerable: true
+ });
+
+ Object.defineProperty(this, 'propAccessCount', {
+ get: function() { return _propAccessCount; }
+ });
+}
+
+function GetTestKeyframeSequence(testProp) {
+ return [ new TestKeyframe(testProp) ]
+}
+
+gNonAnimatableProps.forEach(function(prop) {
+ test(function(t) {
+ var testKeyframe = new TestKeyframe(prop);
+
+ new KeyframeEffectReadOnly(null, testKeyframe);
+
+ assert_equals(testKeyframe.propAccessCount, 0, 'Accessor not called');
+ }, 'non-animatable property \'' + prop + '\' is not accessed when using'
+ + ' a property-indexed keyframe object');
+});
+
+gNonAnimatableProps.forEach(function(prop) {
+ test(function(t) {
+ var testKeyframes = GetTestKeyframeSequence(prop);
+
+ new KeyframeEffectReadOnly(null, testKeyframes);
+
+ assert_equals(testKeyframes[0].propAccessCount, 0, 'Accessor not called');
+ }, 'non-animatable property \'' + prop + '\' is not accessed when using'
+ + ' a keyframe sequence');
+});
+
+// Test equivalent forms of property indexed and sequenced keyframe syntax
+
+function assertEquivalentKeyframeSyntax(keyframesA, keyframesB) {
+ var processedKeyframesA = new KeyframeEffectReadOnly(null, keyframesA).getKeyframes();
+ var processedKeyframesB = new KeyframeEffectReadOnly(null, keyframesB).getKeyframes();
+ assert_frame_lists_equal(processedKeyframesA, processedKeyframesB);
+}
+
+var gEquivalentSyntaxTests = [
+ {
+ description: 'two properties with one value',
+ indexedKeyframes: {
+ left: '100px',
+ opacity: ['1'],
+ },
+ sequencedKeyframes: [
+ {left: '100px', opacity: '1'},
+ ],
+ },
+ {
+ description: 'two properties with three values',
+ indexedKeyframes: {
+ left: ['10px', '100px', '150px'],
+ opacity: ['1', '0', '1'],
+ },
+ sequencedKeyframes: [
+ {left: '10px', opacity: '1'},
+ {left: '100px', opacity: '0'},
+ {left: '150px', opacity: '1'},
+ ],
+ },
+ {
+ description: 'two properties with different numbers of values',
+ indexedKeyframes: {
+ left: ['0px', '100px', '200px'],
+ opacity: ['0', '1']
+ },
+ sequencedKeyframes: [
+ {left: '0px', opacity: '0'},
+ {left: '100px'},
+ {left: '200px', opacity: '1'},
+ ],
+ },
+ {
+ description: 'same offset applied to all keyframes',
+ indexedKeyframes: {
+ left: ['0px', '100px'],
+ offset: 0.5,
+ },
+ sequencedKeyframes: [
+ {left: '0px', offset: 0.5},
+ {left: '100px', offset: 0.5},
+ ],
+ },
+ {
+ description: 'same easing applied to all keyframes',
+ indexedKeyframes: {
+ left: ['10px', '100px', '150px'],
+ opacity: ['1', '0', '1'],
+ easing: 'ease',
+ },
+ sequencedKeyframes: [
+ {left: '10px', opacity: '1', easing: 'ease'},
+ {left: '100px', opacity: '0', easing: 'ease'},
+ {left: '150px', opacity: '1', easing: 'ease'},
+ ],
+ },
+ {
+ description: 'same composite applied to all keyframes',
+ indexedKeyframes: {
+ left: ['0px', '100px'],
+ composite: 'add',
+ },
+ sequencedKeyframes: [
+ {left: '0px', composite: 'add'},
+ {left: '100px', composite: 'add'},
+ ],
+ },
+];
+
+gEquivalentSyntaxTests.forEach(function({description, indexedKeyframes, sequencedKeyframes}) {
+ test(function(t) {
+ assertEquivalentKeyframeSyntax(indexedKeyframes, sequencedKeyframes);
+ }, 'Equivalent property indexed and sequenced keyframes: ' + description);
+});
+
+// Test handling of custom iterable objects.
+
+function createIterable(iterations) {
+ return {
+ [Symbol.iterator]() {
+ var i = 0;
+ return {
+ next() {
+ return iterations[i++];
+ },
+ };
+ },
+ };
+}
+
+test(() => {
+ var effect = new KeyframeEffect(null, createIterable([
+ {done: false, value: {left: '100px'}},
+ {done: false, value: {left: '300px'}},
+ {done: false, value: {left: '200px'}},
+ {done: true},
+ ]));
+ assert_frame_lists_equal(effect.getKeyframes(), [
+ {offset: null, computedOffset: 0, easing: 'linear', left: '100px'},
+ {offset: null, computedOffset: 0.5, easing: 'linear', left: '300px'},
+ {offset: null, computedOffset: 1, easing: 'linear', left: '200px'},
+ ]);
+}, 'Custom iterator with basic keyframes.');
+
+test(() => {
+ var keyframes = createIterable([
+ {done: false, value: {left: '100px'}},
+ {done: false, value: {left: '300px'}},
+ {done: false, value: {left: '200px'}},
+ {done: true},
+ ]);
+ keyframes.easing = 'ease-in-out';
+ keyframes.offset = '0.1';
+ var effect = new KeyframeEffect(null, keyframes);
+ assert_frame_lists_equal(effect.getKeyframes(), [
+ {offset: null, computedOffset: 0, easing: 'linear', left: '100px'},
+ {offset: null, computedOffset: 0.5, easing: 'linear', left: '300px'},
+ {offset: null, computedOffset: 1, easing: 'linear', left: '200px'},
+ ]);
+}, 'easing and offset are ignored on iterable objects.');
+
+test(() => {
+ var effect = new KeyframeEffect(null, createIterable([
+ {done: false, value: {left: '100px', top: '200px'}},
+ {done: false, value: {left: '300px'}},
+ {done: false, value: {left: '200px', top: '100px'}},
+ {done: true},
+ ]));
+ assert_frame_lists_equal(effect.getKeyframes(), [
+ {offset: null, computedOffset: 0, easing: 'linear', left: '100px', top: '200px'},
+ {offset: null, computedOffset: 0.5, easing: 'linear', left: '300px'},
+ {offset: null, computedOffset: 1, easing: 'linear', left: '200px', top: '100px'},
+ ]);
+}, 'Custom iterator with multiple properties specified.');
+
+test(() => {
+ var effect = new KeyframeEffect(null, createIterable([
+ {done: false, value: {left: '100px'}},
+ {done: false, value: {left: '250px', offset: 0.75}},
+ {done: false, value: {left: '200px'}},
+ {done: true},
+ ]));
+ assert_frame_lists_equal(effect.getKeyframes(), [
+ {offset: null, computedOffset: 0, easing: 'linear', left: '100px'},
+ {offset: 0.75, computedOffset: 0.75, easing: 'linear', left: '250px'},
+ {offset: null, computedOffset: 1, easing: 'linear', left: '200px'},
+ ]);
+}, 'Custom iterator with offset specified.');
+
+test(() => {
+ assert_throws({name: 'TypeError'}, function() {
+ new KeyframeEffect(null, createIterable([
+ {done: false, value: {left: '100px'}},
+ {done: false, value: 1234},
+ {done: false, value: {left: '200px'}},
+ {done: true},
+ ]));
+ });
+}, 'Custom iterator with non object keyframe should throw.');
+
+test(() => {
+ var effect = new KeyframeEffect(null, createIterable([
+ {done: false, value: {left: ['100px', '200px']}},
+ {done: true},
+ ]));
+ assert_frame_lists_equal(effect.getKeyframes(), [
+ {offset: null, computedOffset: 1, easing: 'linear', left: '100px,200px'}
+ ]);
+}, 'Custom iterator with value list in keyframe should give bizarre string representation of list.');
+
+test(function(t) {
+ var keyframe = {};
+ Object.defineProperty(keyframe, 'width', {value: '200px'});
+ Object.defineProperty(keyframe, 'height', {
+ value: '100px',
+ enumerable: true});
+ assert_equals(keyframe.width, '200px', 'width of keyframe is readable');
+ assert_equals(keyframe.height, '100px', 'height of keyframe is readable');
+ var anim = createDiv(t).animate([keyframe, {height: '200px'}], 1);
+ assert_frame_lists_equal(anim.effect.getKeyframes(), [
+ {offset: null, computedOffset: 0, easing: 'linear', height: '100px'},
+ {offset: null, computedOffset: 1, easing: 'linear', height: '200px'},
+ ]);
+}, 'Only enumerable properties on keyframes are considered');
+
+test(function(t) {
+ var KeyframeParent = function() { this.width = '100px'; };
+ KeyframeParent.prototype = { height: '100px' };
+ var Keyframe = function() { this.top = '100px'; };
+ Keyframe.prototype = Object.create(KeyframeParent.prototype);
+ Object.defineProperty(Keyframe.prototype, 'left', {
+ value: '100px',
+ enumerable: 'true'});
+ var keyframe = new Keyframe();
+ var anim = createDiv(t).animate([keyframe, {top: '200px'}], 1);
+ assert_frame_lists_equal(anim.effect.getKeyframes(), [
+ {offset: null, computedOffset: 0, easing: 'linear', top: '100px'},
+ {offset: null, computedOffset: 1, easing: 'linear', top: '200px'},
+ ]);
+}, 'Only properties defined directly on keyframes are considered');
+
+test(function(t) {
+ var keyframes = {};
+ Object.defineProperty(keyframes, 'width', ['100px', '200px']);
+ Object.defineProperty(keyframes, 'height', {
+ value: ['100px', '200px'],
+ enumerable: true});
+ var anim = createDiv(t).animate(keyframes, 1);
+ assert_frame_lists_equal(anim.effect.getKeyframes(), [
+ {offset: null, computedOffset: 0, easing: 'linear', height: '100px'},
+ {offset: null, computedOffset: 1, easing: 'linear', height: '200px'},
+ ]);
+}, 'Only enumerable properties on property indexed keyframes are considered');
+
+test(function(t) {
+ var KeyframesParent = function() { this.width = '100px'; };
+ KeyframesParent.prototype = { height: '100px' };
+ var Keyframes = function() { this.top = ['100px', '200px']; };
+ Keyframes.prototype = Object.create(KeyframesParent.prototype);
+ Object.defineProperty(Keyframes.prototype, 'left', {
+ value: ['100px', '200px'],
+ enumerable: 'true'});
+ var keyframes = new Keyframes();
+ var anim = createDiv(t).animate(keyframes, 1);
+ assert_frame_lists_equal(anim.effect.getKeyframes(), [
+ {offset: null, computedOffset: 0, easing: 'linear', top: '100px'},
+ {offset: null, computedOffset: 1, easing: 'linear', top: '200px'},
+ ]);
+}, 'Only properties defined directly on property indexed keyframes are considered');
+
+// FIXME: Test that properties are accessed in ascending order by Unicode
+// codepoint
+// (There is an existing test for this in
+// keyframe-effect/constructor.html that should be moved here.)
+
+</script>
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-03 21:09:24 +0000