Bug 1300701 - Notify changedAnimations to mutation observer when priority of CSS animations on an element is changed. r=birtles
authorHiroyuki Ikezoe <hiikezoe@mozilla-japan.org>
Mon, 12 Sep 2016 15:04:33 +0900
changeset 354785 402dbb3419f489906677bace2be85c7326bd2763
parent 354766 3d667f260feb3f7f30fca84f608b92e330aa349c
child 354786 a18a3e221752e57641ed74c438fa20dc7f50cd1e
push id6570
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:26:13 +0000
treeherdermozilla-beta@f455459b2ae5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbirtles
bugs1300701
milestone51.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1300701 - Notify changedAnimations to mutation observer when priority of CSS animations on an element is changed. r=birtles MozReview-Commit-ID: GXv4c2DiRij
dom/animation/test/chrome/test_animation_observers.html
layout/style/nsAnimationManager.h
--- a/dom/animation/test/chrome/test_animation_observers.html
+++ b/dom/animation/test/chrome/test_animation_observers.html
@@ -4,16 +4,19 @@
 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
 <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
 <script src="../testcommon.js"></script>
 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
 <style>
 @keyframes anim {
   to { transform: translate(100px); }
 }
+@keyframes anotherAnim {
+  to { transform: translate(0px); }
+}
 #target {
   width: 100px;
   height: 100px;
   background-color: yellow;
   line-height: 16px;
 }
 .init::before {
   content: "";
@@ -1392,16 +1395,39 @@ function assert_records(expected, desc) 
     is(animations.length, 0, "getAnimations().length after animation start");
 
     // And we should get no notifications.
     yield await_frame();
     assert_records([], "records after attempted animation start");
 
     e.style = "";
   });
+
+  addAsyncAnimTest("animtion_order_change", aOptions, function*() {
+    e.style.animation = "anim 100s, anotherAnim 100s";
+
+    var animations = e.getAnimations();
+    yield await_frame();
+    assert_records([{ added: animations, changed: [], removed: []}],
+                   "records after creation");
+    e.style.animation = "anotherAnim 100s, anim 100s";
+    animations = e.getAnimations();
+    yield await_frame();
+    assert_records([{ added: [], changed: animations, removed: []}],
+                   "records after the order is changed");
+
+    e.style.animation = "anotherAnim 100s, anim 100s";
+    yield await_frame();
+    assert_records([],
+                   "no records after applying the same order");
+
+    e.style.animation = "";
+    yield await_frame();
+  });
+
 });
 
 addAsyncAnimTest("tree_ordering", { observe: div, subtree: true }, function*() {
   // Add style for pseudo elements
   var extraStyle = document.createElement('style');
   document.head.appendChild(extraStyle);
   var sheet = extraStyle.sheet;
   var rules = { ".before::before": "animation: anim 100s;",
--- a/layout/style/nsAnimationManager.h
+++ b/layout/style/nsAnimationManager.h
@@ -132,16 +132,20 @@ public:
 
   bool IsStylePaused() const { return mIsStylePaused; }
 
   bool HasLowerCompositeOrderThan(const CSSAnimation& aOther) const;
 
   void SetAnimationIndex(uint64_t aIndex)
   {
     MOZ_ASSERT(IsTiedToMarkup());
+    if (IsRelevant() &&
+        mAnimationIndex != aIndex) {
+      nsNodeUtils::AnimationChanged(this);
+    }
     mAnimationIndex = aIndex;
   }
 
   // Sets the owning element which is used for determining the composite
   // order of CSSAnimation objects generated from CSS markup.
   //
   // @see mOwningElement
   void SetOwningElement(const OwningElementRef& aElement)