Bug 1437272 - Don't throttle finite transform animations in out-of-view element. r=birtles

Transform animation in out-of-view element might move in visible area so if we
throttle it the transform animation might come in view suddenly.  So we don't
throttle transform animations in ouf-of-view element anymore if it's not
infinite.  Finite animations don't last so that they won't consume CPU so much
time.

MozReview-Commit-ID: HaMjmxqXPIK

--HG--
extra : rebase_source : 1c008e4e435bcc9c1ad8fcc84667080247c0b161

dom/animation/AnimationEffectReadOnly.h

@@ -51,6 +51,10 @@ public:
 
   bool IsCurrent() const;
   bool IsInEffect() const;
+  bool HasFiniteActiveDuration() const
+  {
+    return SpecifiedTiming().ActiveDuration() != TimeDuration::Forever();
+  }
 
   already_AddRefed<AnimationEffectTimingReadOnly> Timing();
   const TimingParams& SpecifiedTiming() const

dom/animation/KeyframeEffectReadOnly.cpp

@@ -1473,6 +1473,13 @@ KeyframeEffectReadOnly::CanThrottle() const
       // If there are transform change hints, unthrottle the animation
       // periodically since it might affect the overflow region.
       if (HasTransformThatMightAffectOverflow()) {
+        // Don't throttle finite transform animations since the animation might
+        // suddenly come into view and if it was throttled it will be
+        // out-of-sync.
+        if (HasFiniteActiveDuration()) {
+          return false;
+        }
+
         return isVisibilityHidden
           ? CanThrottleTransformChangesInScrollable(*frame)
           : CanThrottleTransformChanges(*frame);

dom/animation/test/mozilla/file_restyles.html

@@ -404,7 +404,7 @@ waitForAllPaints(() => {
       var parentElement = addDiv(null,
         { style: 'overflow-y: scroll; height: 20px;' });
       var div = addDiv(null,
-        { style: 'animation: rotate 100s; position: relative; top: 100px;' });
+        { style: 'animation: rotate 100s infinite; position: relative; top: 100px;' });
       parentElement.appendChild(div);
       var animation = div.getAnimations()[0];
       var timeAtStart = document.timeline.currentTime;
@@ -450,7 +450,7 @@ waitForAllPaints(() => {
       var parentElement = addDiv(null,
         { style: 'overflow-y: scroll; height: 20px;' });
       var div = addDiv(null,
-        { style: 'animation: rotate 100s; position: relative; top: 100px;' });
+        { style: 'animation: rotate 100s infinite; position: relative; top: 100px;' });
       parentElement.appendChild(div);
       var animation = div.getAnimations()[0];
       var timeAtStart = document.timeline.currentTime;
@@ -503,7 +503,7 @@ waitForAllPaints(() => {
       var parentElement = addDiv(null,
         { style: 'overflow: hidden;' });
       var div = addDiv(null,
-        { style: 'animation: move-in 100s;' });
+        { style: 'animation: move-in 100s infinite;' });
       parentElement.appendChild(div);
       var animation = div.getAnimations()[0];
       var timeAtStart = document.timeline.currentTime;
@@ -548,7 +548,7 @@ waitForAllPaints(() => {
       var parentElement = addDiv(null,
         { style: 'overflow: hidden;' });
       var div = addDiv(null,
-        { style: 'animation: move-in 100s;' });
+        { style: 'animation: move-in 100s infinite;' });
       parentElement.appendChild(div);
       var animation = div.getAnimations()[0];
       var timeAtStart = document.timeline.currentTime;
@@ -585,6 +585,27 @@ waitForAllPaints(() => {
     }
   );
 
+  add_task(async function finite_transform_animations_in_out_of_view_element() {
+    var parentElement = addDiv(null, { style: 'overflow: hidden;' });
+    var div = addDiv(null);
+    var animation =
+      div.animate({ transform: [ 'translateX(120%)', 'translateX(100%)' ] },
+                                // This animation will move a bit but
+                                // will remain out-of-view.
+                  100 * MS_PER_SEC);
+    parentElement.appendChild(div);
+
+    await animation.ready;
+    ok(!SpecialPowers.wrap(animation).isRunningOnCompositor);
+
+    var markers = await observeStyling(20);
+    is(markers.length, 20,
+       'Finite transform animation in out-of-view element should never be ' +
+       'throttled');
+
+    await ensureElementRemoval(parentElement);
+  });
+
   add_task(async function restyling_main_thread_animations_in_scrolled_out_element() {
     var parentElement = addDiv(null,
       { style: 'overflow-y: scroll; height: 20px;' });