summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.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/setTarget.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/setTarget.html')
-rw-r--r--testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html160
1 files changed, 160 insertions, 0 deletions
diff --git a/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html
new file mode 100644
index 000000000..2b07d3de6
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/interfaces/KeyframeEffect/setTarget.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Writable effect.target tests</title>
+<link rel="help"
+ href="https://w3c.github.io/web-animations/#dom-keyframeeffect-target">
+<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";
+
+var gKeyFrames = { 'marginLeft': ['0px', '100px'] };
+
+test(function(t) {
+ var div = createDiv(t);
+ var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
+ effect.target = div;
+
+ var anim = new Animation(effect, document.timeline);
+ anim.play();
+
+ anim.currentTime = 50 * MS_PER_SEC;
+ assert_equals(getComputedStyle(div).marginLeft, '50px',
+ 'Value at 50% progress');
+}, 'Test setting target before constructing the associated animation');
+
+test(function(t) {
+ var div = createDiv(t);
+ div.style.marginLeft = '10px';
+ var effect = new KeyframeEffect(null, gKeyFrames, 100 * MS_PER_SEC);
+ var anim = new Animation(effect, document.timeline);
+ anim.play();
+
+ anim.currentTime = 50 * MS_PER_SEC;
+ assert_equals(getComputedStyle(div).marginLeft, '10px',
+ 'Value at 50% progress before setting new target');
+ effect.target = div;
+ assert_equals(getComputedStyle(div).marginLeft, '50px',
+ 'Value at 50% progress after setting new target');
+}, 'Test setting target from null to a valid target');
+
+test(function(t) {
+ var div = createDiv(t);
+ div.style.marginLeft = '10px';
+ var anim = div.animate(gKeyFrames, 100 * MS_PER_SEC);
+
+ anim.currentTime = 50 * MS_PER_SEC;
+ assert_equals(getComputedStyle(div).marginLeft, '50px',
+ 'Value at 50% progress before clearing the target')
+
+ anim.effect.target = null;
+ assert_equals(getComputedStyle(div).marginLeft, '10px',
+ 'Value after clearing the target')
+}, 'Test setting target from a valid target to null');
+
+test(function(t) {
+ var a = createDiv(t);
+ var b = createDiv(t);
+ a.style.marginLeft = '10px';
+ b.style.marginLeft = '20px';
+ var anim = a.animate(gKeyFrames, 100 * MS_PER_SEC);
+
+ anim.currentTime = 50 * MS_PER_SEC;
+ assert_equals(getComputedStyle(a).marginLeft, '50px',
+ 'Value of 1st element (currently targeted) before ' +
+ 'changing the effect target');
+ assert_equals(getComputedStyle(b).marginLeft, '20px',
+ 'Value of 2nd element (currently not targeted) before ' +
+ 'changing the effect target');
+ anim.effect.target = b;
+ assert_equals(getComputedStyle(a).marginLeft, '10px',
+ 'Value of 1st element (currently not targeted) after ' +
+ 'changing the effect target');
+ assert_equals(getComputedStyle(b).marginLeft, '50px',
+ 'Value of 2nd element (currently targeted) after ' +
+ 'changing the effect target');
+
+ // 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>
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-04 09:33:39 +0000