Bug 1244590 - Part 9: Test for creating animations with a specific spacing mode. draft
authorBoris Chiou <boris.chiou@gmail.com>
Wed, 11 May 2016 18:36:15 +0800
changeset 366713 e07bf36359912fb59fc22cc8c974fc9d3e247f04
parent 366712 99e1c6f1618299a7625496bede0fd14f9af0340a
child 366714 6772f4449fa6ee175cb751da31400f13a420e88c
push id18055
push userbmo:boris.chiou@gmail.com
push dateFri, 13 May 2016 07:59:40 +0000
bugs1244590
milestone49.0a1
Bug 1244590 - Part 9: Test for creating animations with a specific spacing mode. MozReview-Commit-ID: J0xNLunv9A7
testing/web-platform/meta/MANIFEST.json
testing/web-platform/mozilla/meta/MANIFEST.json
testing/web-platform/tests/web-animations/keyframe-effect/spacingMode.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -35398,16 +35398,22 @@
           }
         ],
         "web-animations/keyframe-effect/setTarget.html": [
           {
             "path": "web-animations/keyframe-effect/setTarget.html",
             "url": "/web-animations/keyframe-effect/setTarget.html"
           }
         ],
+        "web-animations/keyframe-effect/spacingMode.html": [
+          {
+            "path": "web-animations/keyframe-effect/spacingMode.html",
+            "url": "/web-animations/keyframe-effect/spacingMode.html"
+          }
+        ],
         "web-animations/timing-model/animation-effects/active-time.html": [
           {
             "path": "web-animations/timing-model/animation-effects/active-time.html",
             "url": "/web-animations/timing-model/animation-effects/active-time.html"
           }
         ],
         "web-animations/timing-model/animation-effects/current-iteration.html": [
           {
--- a/testing/web-platform/mozilla/meta/MANIFEST.json
+++ b/testing/web-platform/mozilla/meta/MANIFEST.json
@@ -3,16 +3,17 @@
     "manual": [],
     "reftest": [],
     "stub": [],
     "testharness": [],
     "wdspec": []
   },
   "local_changes": {
     "deleted": [],
+    "deleted_reftests": {},
     "items": {},
     "reftest_nodes": {}
   },
   "reftest_nodes": {},
   "rev": null,
   "url_base": "/_mozilla/",
   "version": 3
 }
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/keyframe-effect/spacingMode.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Keyframe spacing mode tests</title>
+<link rel="help"
+  href="https://w3c.github.io/web-animations/#spacing-keyframes">
+<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";
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate([ { marginLeft: '0px' },
+                           { marginLeft: '-20px' },
+                           { marginLeft: '100px' },
+                           { marginLeft: '50px' } ],
+                         { duration: 1000, spacing: 'distribute' });
+
+  assert_equals(anim.effect.spacing, 'distribute', 'spacing mode');
+
+  var frames = anim.effect.getFrames();
+  var slots = frames.length - 1;
+  assert_equals(frames[0].computedOffset, 0.0, '1st offset');
+  assert_equals(frames[1].computedOffset, 1.0 / slots, '2nd offset');
+  assert_equals(frames[2].computedOffset, 2.0 / slots, '3rd offset');
+  assert_equals(frames[3].computedOffset, 1.0, 'last offset');
+}, 'Test distribute spacing mode without specific offsets');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate([ { marginLeft: '0px' },
+                           { marginLeft: '-20px' },
+                           { marginLeft: '100px', offset: 0.5 },
+                           { marginLeft: '50px' } ],
+                         { duration: 1000, spacing: 'distribute' });
+
+  var frames = anim.effect.getFrames();
+  assert_equals(frames[0].computedOffset, 0.0, '1st offset');
+  assert_equals(frames[1].computedOffset, 0.5 * 1 / 2, '2nd offset');
+  assert_equals(frames[2].computedOffset, 0.5, '3rd offset');
+  assert_equals(frames[3].computedOffset, 1.0, 'last offset');
+}, 'Test distribute spacing mode with specific offsets');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate([ { marginLeft: '0px' },
+                           { marginLeft: '-20px' },
+                           { marginLeft: '100px' },
+                           { marginLeft: '50px' } ],
+                         { duration: 1000, spacing: 'paced(margin-left)' });
+
+  assert_equals(anim.effect.spacing, 'paced(margin-left)', 'spacing mode');
+
+  var frames = anim.effect.getFrames();
+  var cumDist = [0, 20, 140, 190];
+  assert_equals(frames[0].computedOffset, 0.0,
+                '1st offset');
+  assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
+                '2nd offset');
+  assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
+                '3rd offset');
+  assert_equals(frames[3].computedOffset, 1.0,
+                'last offset');
+}, 'Test paced spacing mode without specific offsets');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate([ { marginLeft: '0px' },
+                           { marginLeft: '-20px' },
+                           { marginLeft: '100px', offset: 0.5 },
+                           { marginLeft: '120px' },
+                           { marginLeft: '50px' } ],
+                         { duration: 1000, spacing: 'paced(margin-left)' });
+
+  var frames = anim.effect.getFrames();
+  var cumDist1 = [ 0, 20, 140 ];
+  var cumDist2 = [ 0, 20, 90 ];
+  assert_equals(frames[1].computedOffset, 0.5 * cumDist1[1] / cumDist1[2],
+                '2nd frame offset');
+  assert_equals(frames[2].computedOffset, 0.5,
+                '3rd frame offset');
+  assert_equals(frames[3].computedOffset, 0.5 + 0.5 * cumDist2[1] / cumDist2[2],
+                '4th frame offset');
+}, 'Test paced spacing mode with specific offsets');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate([ { marginLeft: '0px' },
+                           { marginLeft: '0px' },
+                           { marginLeft: '100px' },
+                           { marginLeft: '50px' } ],
+                         { duration: 1000, spacing: 'paced(margin-left)' });
+
+  var frames = anim.effect.getFrames();
+  var cumDist = [0, 0, 100, 150];
+  assert_equals(frames[1].computedOffset, cumDist[1] / cumDist[3],
+                '2nd frame offset');
+  assert_equals(frames[2].computedOffset, cumDist[2] / cumDist[3],
+                '3rd frame offset');
+}, 'Test paced spacing mode if some paced property value are not changed');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate([ { marginLeft: '0px' },
+                           { marginLeft: '0px' },
+                           { marginLeft: '0px' },
+                           { marginLeft: '0px' } ],
+                         { duration: 1000, spacing: 'paced(margin-left)' });
+
+  var frames = anim.effect.getFrames();
+  var slots = frames.length - 1;
+  assert_equals(frames[1].computedOffset, 1 / slots, '2nd frame offset');
+  assert_equals(frames[2].computedOffset, 2 / slots, '3rd frame offset');
+}, 'Test falling back to distribute spacing mode if all paced property value ' +
+   'are not changed');
+
+</script>
+</body>