Bug 1291468 - Part 1: Tests for effect/keyframe composite(accumulate). r?birtles
MozReview-Commit-ID: KdXlW57VB3o
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -39572,16 +39572,22 @@
}
],
"web-animations/animation-model/animation-types/spacing-keyframes-transform.html": [
{
"path": "web-animations/animation-model/animation-types/spacing-keyframes-transform.html",
"url": "/web-animations/animation-model/animation-types/spacing-keyframes-transform.html"
}
],
+ "web-animations/animation-model/combining-effects/effect-composition.html": [
+ {
+ "path": "web-animations/animation-model/combining-effects/effect-composition.html",
+ "url": "/web-animations/animation-model/combining-effects/effect-composition.html"
+ }
+ ],
"web-animations/interfaces/KeyframeEffect/copy-contructor.html": [
{
"path": "web-animations/interfaces/KeyframeEffect/copy-contructor.html",
"url": "/web-animations/interfaces/KeyframeEffect/copy-contructor.html"
}
],
"web-animations/interfaces/KeyframeEffectReadOnly/copy-contructor.html": [
{
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/animation-model/combining-effects/effect-composition.html.ini
@@ -0,0 +1,13 @@
+[composite.html]
+ [Accumulate onto the base value]
+ expected: FAIL
+
+ [Accumulate onto an underlying animation value]
+ expected: FAIL
+
+ [Composite when mixing accumulate and replace]
+ expected: FAIL
+
+ [Composite specified on a keyframe overrides the composite mode of the effect]
+ expected: FAIL
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>Test for effect composition</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#effect-composition">
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<script src="../../testcommon.js"></script>
+<div id="log"></div>
+<script>
+'use strict';
+
+test(function(t) {
+ var div = createDiv(t);
+ div.style.marginLeft = '10px';
+ var anim =
+ div.animate({ marginLeft: ['0px', '10px'], composite: 'accumulate' }, 100);
+
+ anim.currentTime = 50;
+ assert_equals(getComputedStyle(div).marginLeft, '15px',
+ 'Animated margin-left style at 50%');
+}, 'Accumulate onto the base value');
+
+test(function(t) {
+ var div = createDiv(t);
+ var anims = [];
+ anims.push(div.animate({ marginLeft: ['10px', '20px'],
+ composite: 'replace' },
+ 100));
+ anims.push(div.animate({ marginLeft: ['0px', '10px'],
+ composite: 'accumulate' },
+ 100));
+
+ anims.forEach(function(anim) {
+ anim.currentTime = 50;
+ });
+
+ assert_equals(getComputedStyle(div).marginLeft, '20px',
+ 'Animated style at 50%');
+}, 'Accumulate onto an underlying animation value');
+
+test(function(t) {
+ var div = createDiv(t);
+ div.style.marginLeft = '10px';
+ var anim =
+ div.animate([{ marginLeft: '10px', composite: 'accumulate' },
+ { marginLeft: '30px', composite: 'replace' }],
+ 100);
+
+ anim.currentTime = 50;
+ assert_equals(getComputedStyle(div).marginLeft, '25px',
+ 'Animated style at 50%');
+}, 'Composite when mixing accumulate and replace');
+
+test(function(t) {
+ var div = createDiv(t);
+ div.style.marginLeft = '10px';
+ var anim =
+ div.animate([{ marginLeft: '10px', composite: 'replace' },
+ { marginLeft: '20px' }],
+ { duration: 100 , composite: 'accumulate' });
+
+ anim.currentTime = 50;
+ assert_equals(getComputedStyle(div).marginLeft, '20px',
+ 'Animated style at 50%');
+}, 'Composite specified on a keyframe overrides the composite mode of the ' +
+ 'effect');
+
+</script>