Part 1: Bug 1291468 - Tests for keyframe composite(accumulate). r?birtles draft
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Fri, 21 Oct 2016 07:08:32 +0900
changeset 427824 a3f80234de555ec25285333b888cf22d2d9dc5c4
parent 427816 e3196cecc60e88d990bb63e66702ac291de5f35f
child 427825 dfbe67f03d1f97f99c46e2b9807655e4bde426ed
push id33126
push userbmo:hiikezoe@mozilla-japan.org
push dateThu, 20 Oct 2016 22:25:38 +0000
reviewersbirtles
bugs1291468
milestone52.0a1
Part 1: Bug 1291468 - Tests for keyframe composite(accumulate). r?birtles MozReview-Commit-ID: GHD0mRmxvDE
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/web-animations/animation-model/keyframe-effects/composite.html.ini
testing/web-platform/tests/web-animations/animation-model/keyframe-effects/composite.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -37733,16 +37733,22 @@
           }
         ],
         "svg/linking/scripted/href-script-element.html": [
           {
             "path": "svg/linking/scripted/href-script-element.html",
             "url": "/svg/linking/scripted/href-script-element.html"
           }
         ],
+        "web-animations/animation-model/keyframe-effects/composite.html": [
+          {
+            "path": "web-animations/animation-model/keyframe-effects/composite.html",
+            "url": "/web-animations/animation-model/keyframe-effects/composite.html"
+          }
+        ],
         "web-animations/interfaces/Animation/effect.html": [
           {
             "path": "web-animations/interfaces/Animation/effect.html",
             "url": "/web-animations/interfaces/Animation/effect.html"
           }
         ],
         "web-animations/interfaces/KeyframeEffect/iterationComposite.html": [
           {
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/animation-model/keyframe-effects/composite.html.ini
@@ -0,0 +1,23 @@
+[composite.html]
+  type: testharness
+  [keyframe composite(accumulate): onto static style]
+    expected: FAIL
+
+  [keyframe composite(accumulate): onto replace animation]
+    expected: FAIL
+
+  [keyframe composite(accumulate): in the first frame]
+    expected: FAIL
+
+  [keyframe composite(accumulate): in the last frame]
+    expected: FAIL
+
+  [effect composite(accumulate): onto static style]
+    expected: FAIL
+
+  [effect composite(accumulate): fills in the blank keyframe composite(from)]
+    expected: FAIL
+
+  [effect composite(accumulate): fills in the blank keyframe composite(to)]
+    expected: FAIL
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframe-effects/composite.html
@@ -0,0 +1,196 @@
+<!doctype html>
+<meta charset=utf-8>
+<title>KeyframeEffect.composite tests</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' },
+                { duration: 100 * MS_PER_SEC, fill: 'forwards' });
+  anim.pause();
+
+  assert_equals(getComputedStyle(div).marginLeft, '10px',
+    'Animated margin-left style at 0s');
+  anim.currentTime = anim.effect.timing.duration / 2;
+  assert_equals(getComputedStyle(div).marginLeft, '15px',
+    'Animated margin-left style at 50s');
+  anim.currentTime = anim.effect.timing.duration;
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated margin-left style at 100s');
+}, 'keyframe composite(accumulate): onto static style');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anims = [];
+  anims.push(div.animate({ marginLeft: ['10px', '20px'],
+                           composite: 'replace' },
+                         { duration: 100 * MS_PER_SEC, fill: 'forwards' }));
+  anims.push(div.animate({ marginLeft: ['0px', '10px'],
+                           composite: 'accumulate' },
+                         { duration: 100 * MS_PER_SEC, fill: 'forwards' }));
+  anims.forEach(function(anim) { anim.pause(); });
+
+  assert_equals(getComputedStyle(div).marginLeft, '10px',
+    'Animated style at 0s');
+
+  anims.forEach(function(anim) {
+    anim.currentTime = anim.effect.timing.duration / 2;
+  });
+  assert_equals(getComputedStyle(div).marginLeft, '20px', // 15px + 5px
+    'Animated style at 50s');
+
+  anims.forEach(function(anim) {
+    anim.currentTime = anim.effect.timing.duration;
+  });
+  assert_equals(getComputedStyle(div).marginLeft, '30px', // 20px + 10px
+    'Animated style at 100s');
+}, 'keyframe composite(accumulate): onto replace animation');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anims = [];
+  anims.push(div.animate({ marginLeft: ['10px', '20px'],
+                           composite: 'accumulate' },
+                         { duration: 100 * MS_PER_SEC, fill: 'forwards' }));
+  anims.push(div.animate({ marginLeft: ['0px', '10px'],
+                           composite: 'replace' },
+                         { duration: 100 * MS_PER_SEC, fill: 'forwards' }));
+  anims.forEach(function(anim) { anim.pause(); });
+
+  assert_equals(getComputedStyle(div).marginLeft, '0px',
+    'Animated style at 0s');
+
+  anims.forEach(function(anim) {
+    anim.currentTime = anim.effect.timing.duration / 2;
+  });
+  assert_equals(getComputedStyle(div).marginLeft, '5px',
+    'Animated style at 50s');
+
+  anims.forEach(function(anim) {
+    anim.currentTime = anim.effect.timing.duration;
+  });
+  assert_equals(getComputedStyle(div).marginLeft, '10px',
+    'Animated style at 100s');
+}, 'keyframe composite(replace): onto accumulate animation');
+
+test(function(t) {
+  var div = createDiv(t);
+  div.style.marginLeft = '10px';
+  var anim =
+    div.animate([{ marginLeft: '10px', composite: 'accumulate' },
+                 { marginLeft: '20px', composite: 'replace' }],
+                { duration: 100 * MS_PER_SEC, fill: 'forwards' });
+  anim.pause();
+
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 0s');
+
+  anim.currentTime = anim.effect.timing.duration / 2;
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 50s');
+
+  anim.currentTime = anim.effect.timing.duration;
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 100s');
+}, 'keyframe composite(accumulate): in the first frame');
+
+test(function(t) {
+  var div = createDiv(t);
+  div.style.marginLeft = '10px';
+  var anim =
+    div.animate([{ marginLeft: '10px', composite: 'replace' },
+                 { marginLeft: '20px', composite: 'accumulate' }],
+                { duration: 100 * MS_PER_SEC, fill: 'forwards' });
+  anim.pause();
+
+  assert_equals(getComputedStyle(div).marginLeft, '10px',
+    'Animated style at 0s');
+
+  anim.currentTime = anim.effect.timing.duration / 2;
+  // (10px + (10px + 20px)) / 2
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 50s');
+
+  anim.currentTime = anim.effect.timing.duration;
+  // 10px + 20px
+  assert_equals(getComputedStyle(div).marginLeft, '30px',
+    'Animated style at 100s');
+}, 'keyframe composite(accumulate): in the last frame');
+
+test(function(t) {
+  var div = createDiv(t);
+  div.style.marginLeft = '10px';
+  var anim =
+    div.animate([{ marginLeft: '10px' },
+                 { marginLeft: '20px' }],
+                { duration: 100 * MS_PER_SEC, fill: 'forwards',
+                  composite: 'accumulate' });
+  anim.pause();
+
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 0s');
+
+  anim.currentTime = anim.effect.timing.duration / 2;
+  // ((10px + 10px) + (10px + 20px)) / 2
+  assert_equals(getComputedStyle(div).marginLeft, '25px',
+    'Animated style at 50s');
+
+  anim.currentTime = anim.effect.timing.duration;
+  // 10px + 20px
+  assert_equals(getComputedStyle(div).marginLeft, '30px',
+    'Animated style at 100s');
+}, 'effect composite(accumulate): onto static style');
+
+test(function(t) {
+  var div = createDiv(t);
+  div.style.marginLeft = '10px';
+  var anim =
+    div.animate([{ marginLeft: '10px' },
+                 { marginLeft: '20px', composite: 'replace' }],
+                { duration: 100 * MS_PER_SEC, fill: 'forwards',
+                  composite: 'accumulate' });
+  anim.pause();
+
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 0s');
+
+  anim.currentTime = anim.effect.timing.duration / 2;
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 50s');
+
+  anim.currentTime = anim.effect.timing.duration;
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 100s');
+}, 'effect composite(accumulate): fills in the blank keyframe composite(from)');
+
+test(function(t) {
+  var div = createDiv(t);
+  div.style.marginLeft = '10px';
+  var anim =
+    div.animate([{ marginLeft: '10px', composite: 'replace' },
+                 { marginLeft: '20px' }],
+                { duration: 100 * MS_PER_SEC, fill: 'forwards',
+                  composite: 'accumulate' });
+  anim.pause();
+
+  assert_equals(getComputedStyle(div).marginLeft, '10px',
+    'Animated style at 0s');
+
+  anim.currentTime = anim.effect.timing.duration / 2;
+  assert_equals(getComputedStyle(div).marginLeft, '20px',
+    'Animated style at 50s');
+
+  anim.currentTime = anim.effect.timing.duration;
+  assert_equals(getComputedStyle(div).marginLeft, '30px',
+    'Animated style at 100s');
+}, 'effect composite(accumulate): fills in the blank keyframe composite(to)');
+
+</script>