Bug 1291468 - Part 1: Tests for effect/keyframe composite(accumulate). r=birtles
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Sun, 04 Dec 2016 08:07:41 +0900
changeset 325238 be8333efe3623aec192916f058e80bed3872feac
parent 325237 944f98dcb83b740910d547b97181258ed0890afe
child 325239 d6c7a5bc54525014ae4b812bf2e29a6f789a1aa8
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewersbirtles
bugs1291468
milestone53.0a1
Bug 1291468 - Part 1: Tests for effect/keyframe composite(accumulate). r=birtles MozReview-Commit-ID: KdXlW57VB3o
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/web-animations/animation-model/combining-effects/effect-composition.html.ini
testing/web-platform/tests/web-animations/animation-model/combining-effects/effect-composition.html
--- 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>