Bug 1301305 - Make DevTools tests that expect all animation properties to run on the compositor use 'opacity'; r=pbro
authorBrian Birtles <birtles@gmail.com>
Fri, 02 Dec 2016 09:02:40 +0900
changeset 325329 ece7cb85c38122ec03a8870e2f0054ece2024fa0
parent 325328 9a3bdee53cec09705fdf604c0c0c93364eb16c2a
child 325330 d14b2103446d083f72f5262d79168e8eb539f401
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewerspbro
bugs1301305
milestone53.0a1
Bug 1301305 - Make DevTools tests that expect all animation properties to run on the compositor use 'opacity'; r=pbro In subsequent patches in this bug we will change the heuristics for determining which transform animations run on the compositor. As a result some assumptions in DevTools tests about which animations run on the compositor will change. Since the heuristics for transform animations are more complex than opacity animations, in this patch we just switch those animations to use opacity instead (and add an animation rule that clearly marks that it expects all its properties to run on the compositor). MozReview-Commit-ID: FfDUAzKJRCz
devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
devtools/client/animationinspector/test/doc_simple_animation.html
--- a/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
+++ b/devtools/client/animationinspector/test/browser_animation_running_on_compositor.js
@@ -10,17 +10,17 @@ requestLongerTimeout(2);
 // compositor, they get a special icon and information in the tooltip.
 
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_simple_animation.html");
   let {inspector, panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
 
   info("Select a test node we know has an animation running on the compositor");
-  yield selectNodeAndWaitForAnimations(".animated", inspector);
+  yield selectNodeAndWaitForAnimations(".compositor-all", inspector);
 
   let animationEl = timeline.animationsEl.querySelector(".animation");
   ok(animationEl.classList.contains("fast-track"),
      "The animation element has the fast-track css class");
   ok(hasTooltip(animationEl,
                 ANIMATION_L10N.getStr("player.allPropertiesOnCompositorTooltip")),
      "The animation element has the right tooltip content");
 
--- a/devtools/client/animationinspector/test/doc_simple_animation.html
+++ b/devtools/client/animationinspector/test/doc_simple_animation.html
@@ -77,16 +77,20 @@
     .no-compositor {
       top: 0;
       right: 10px;
       background: gold;
 
       animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
     }
 
+    .compositor-all {
+      animation: compositor-all 2s infinite;
+    }
+
     .compositor-notall {
       animation: compositor-notall 2s infinite;
     }
 
     @keyframes simple-animation {
       100% {
         transform: translateX(300px);
       }
@@ -99,16 +103,20 @@
     }
 
     @keyframes no-compositor {
       100% {
         margin-right: 600px;
       }
     }
 
+    @keyframes compositor-all {
+      to { opacity: 0.5 }
+    }
+
     @keyframes compositor-notall {
       from {
         opacity: 0;
         width: 0px;
         transform: translate(0px);
       }
       to {
         opacity: 1;
@@ -125,16 +133,17 @@
   <div class="ball multi"></div>
   <div class="ball delayed"></div>
   <div class="ball multi-finite"></div>
   <div class="ball short"></div>
   <div class="ball long"></div>
   <div class="ball negative-delay"></div>
   <div class="ball no-compositor"></div>
   <div class="ball" id="endDelayed"></div>
+  <div class="ball compositor-all"></div>
   <div class="ball compositor-notall"></div>
   <script>
     /* globals KeyframeEffect, Animation */
     "use strict";
 
     var el = document.getElementById("endDelayed");
     let effect = new KeyframeEffect(el, [
       { opacity: 0, offset: 0 },