From c15da6fa38afbcbd94d9bcfcd2edebebe665f67a Mon Sep 17 00:00:00 2001
From: Boris Chiou <boris.chiou@gmail.com>
Date: Mon, 5 Sep 2016 12:00:12 +0800
Subject: [PATCH] Bug 1274944 - Part 4: Implement mutation observer for setting
 spacing. r=birtles

MozReview-Commit-ID: LmCO9QyQbBU

--HG--
extra : rebase_source : f078d871b6c5fab565a3ab03fdbf4ac3452704e6
---
 dom/animation/KeyframeEffect.cpp              |  4 ++
 .../test/chrome/test_animation_observers.html | 67 +++++++++++++++++++
 2 files changed, 71 insertions(+)

diff --git a/dom/animation/KeyframeEffect.cpp b/dom/animation/KeyframeEffect.cpp
index 62c64d7455fc..45a3c3af7615 100644
--- a/dom/animation/KeyframeEffect.cpp
+++ b/dom/animation/KeyframeEffect.cpp
@@ -168,6 +168,10 @@ KeyframeEffect::SetSpacing(JSContext* aCx,
     KeyframeUtils::ApplyDistributeSpacing(mKeyframes);
   }
 
+  if (mAnimation && mAnimation->IsRelevant()) {
+    nsNodeUtils::AnimationChanged(mAnimation);
+  }
+
   if (mTarget) {
     RefPtr<nsStyleContext> styleContext = GetTargetStyleContext();
     if (styleContext) {
diff --git a/dom/animation/test/chrome/test_animation_observers.html b/dom/animation/test/chrome/test_animation_observers.html
index 1db8a02ef2e5..d6352d0df306 100644
--- a/dom/animation/test/chrome/test_animation_observers.html
+++ b/dom/animation/test/chrome/test_animation_observers.html
@@ -1896,6 +1896,73 @@ addAsyncAnimTest("set_effect_with_previous_animation",
   yield await_frame();
 });
 
+addAsyncAnimTest("set_spacing",
+                 { observe: div, subtree: true }, function*() {
+  var anim = div.animate([ { marginLeft: "0px" },
+                           { marginLeft: "-20px" },
+                           { marginLeft: "100px" },
+                           { marginLeft: "50px" } ],
+                         { duration: 100 * MS_PER_SEC });
+  yield await_frame();
+  assert_records([{ added: [anim], changed: [], removed: [] }],
+                 "records after animation is added");
+
+  anim.effect.spacing = "paced(margin-left)";
+  yield await_frame();
+  assert_records([{ added: [], changed: [anim], removed: [] }],
+                 "records after animation is changed");
+
+  anim.cancel();
+  yield await_frame();
+  assert_records([{ added: [], changed: [], removed: [anim] }],
+                 "records after animation end");
+});
+
+addAsyncAnimTest("set_spacing_on_a_non-animatable_property",
+                 { observe: div, subtree: true }, function*() {
+  var anim = div.animate([ { marginLeft: "0px" },
+                           { marginLeft: "-20px" },
+                           { marginLeft: "100px" },
+                           { marginLeft: "50px" } ],
+                         { duration: 100 * MS_PER_SEC,
+                           spacing: "paced(margin-left)" });
+  yield await_frame();
+  assert_records([{ added: [anim], changed: [], removed: [] }],
+                 "records after animation is added");
+
+  anim.effect.spacing = "paced(animation-duration)";
+  yield await_frame();
+  assert_records([{ added: [], changed: [anim], removed: [] }],
+                 "records after setting a non-animatable paced property");
+
+  anim.cancel();
+  yield await_frame();
+  assert_records([{ added: [], changed: [], removed: [anim] }],
+                 "records after animation end");
+});
+
+addAsyncAnimTest("set_the_same_spacing",
+                 { observe: div, subtree: true }, function*() {
+  var anim = div.animate([ { marginLeft: "0px" },
+                           { marginLeft: "-20px" },
+                           { marginLeft: "100px" },
+                           { marginLeft: "50px" } ],
+                         { duration: 100 * MS_PER_SEC,
+                           spacing: "paced(margin-left)" });
+  yield await_frame();
+  assert_records([{ added: [anim], changed: [], removed: [] }],
+                 "records after animation is added");
+
+  anim.effect.spacing = "paced(margin-left)";
+  yield await_frame();
+  assert_records([], "no record after setting the same spacing");
+
+  anim.cancel();
+  yield await_frame();
+  assert_records([{ added: [], changed: [], removed: [anim] }],
+                 "records after animation end");
+});
+
 // Run the tests.
 SimpleTest.requestLongerTimeout(2);
 SimpleTest.waitForExplicitFinish();