layout/style/test/animation_utils.js

Wed, 31 Dec 2014 13:27:57 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 13:27:57 +0100
branch
TOR_BUG_3246
changeset 6
8bccb770b82d
permissions
-rw-r--r--

Ignore runtime configuration files generated during quality assurance.

     1 function px_to_num(str)
     2 {
     3     return Number(String(str).match(/^([\d.]+)px$/)[1]);
     4 }
     6 function bezier(x1, y1, x2, y2) {
     7     // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
     8     function x_for_t(t) {
     9         var omt = 1-t;
    10         return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
    11     }
    12     function y_for_t(t) {
    13         var omt = 1-t;
    14         return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
    15     }
    16     function t_for_x(x) {
    17         // Binary subdivision.
    18         var mint = 0, maxt = 1;
    19         for (var i = 0; i < 30; ++i) {
    20             var guesst = (mint + maxt) / 2;
    21             var guessx = x_for_t(guesst);
    22             if (x < guessx)
    23                 maxt = guesst;
    24             else
    25                 mint = guesst;
    26         }
    27         return (mint + maxt) / 2;
    28     }
    29     return function bezier_closure(x) {
    30         if (x == 0) return 0;
    31         if (x == 1) return 1;
    32         return y_for_t(t_for_x(x));
    33     }
    34 }
    36 function step_end(nsteps) {
    37     return function step_end_closure(x) {
    38         return Math.floor(x * nsteps) / nsteps;
    39     }
    40 }
    42 function step_start(nsteps) {
    43     var stepend = step_end(nsteps);
    44     return function step_start_closure(x) {
    45         return 1.0 - stepend(1.0 - x);
    46     }
    47 }
    49 var gTF = {
    50   "ease": bezier(0.25, 0.1, 0.25, 1),
    51   "linear": function(x) { return x; },
    52   "ease_in": bezier(0.42, 0, 1, 1),
    53   "ease_out": bezier(0, 0, 0.58, 1),
    54   "ease_in_out": bezier(0.42, 0, 0.58, 1),
    55   "step_start": step_start(1),
    56   "step_end": step_end(1),
    57 };
    59 function is_approx(float1, float2, error, desc) {
    60   ok(Math.abs(float1 - float2) < error,
    61      desc + ": " + float1 + " and " + float2 + " should be within " + error);
    62 }
    64 // Checks if off-main thread animation (OMTA) is available, and if it is, runs
    65 // the provided callback function. If OMTA is not available or is not
    66 // functioning correctly, the second callback, aOnSkip, is run instead.
    67 //
    68 // This function also does an internal test to verify that OMTA is working at
    69 // all so that if OMTA is not functioning correctly when it is expected to
    70 // function only a single failure is produced.
    71 //
    72 // Since this function relies on various asynchronous operations, the caller is
    73 // responsible for calling SimpleTest.waitForExplicitFinish() before calling
    74 // this and SimpleTest.finish() within aTestFunction and aOnSkip.
    75 function runOMTATest(aTestFunction, aOnSkip) {
    76   const OMTAPrefKey = "layers.offmainthreadcomposition.async-animations";
    77   var utils      = SpecialPowers.DOMWindowUtils;
    78   var expectOMTA = utils.layerManagerRemote &&
    79                    // ^ Off-main thread animation cannot be used if off-main
    80                    // thread composition (OMTC) is not available
    81                    SpecialPowers.getBoolPref(OMTAPrefKey);
    83   isOMTAWorking().then(function(isWorking) {
    84     if (expectOMTA) {
    85       if (isWorking) {
    86         aTestFunction();
    87       } else {
    88         // We only call this when we know it will fail as otherwise in the
    89         // regular success case we will end up inflating the "passed tests"
    90         // count by 1
    91         ok(isWorking, "OMTA is working as expected");
    92         aOnSkip();
    93       }
    94     } else {
    95       todo(isWorking, "OMTA is working");
    96       aOnSkip();
    97     }
    98   }).catch(function(err) {
    99     ok(false, err);
   100     aOnSkip();
   101   });
   103   function isOMTAWorking() {
   104     // Create keyframes rule
   105     const animationName = "a6ce3091ed85"; // Random name to avoid clashes
   106     var ruleText = "@keyframes " + animationName +
   107                    " { from { opacity: 0.5 } to { opacity 0.5 } }";
   108     var style = document.createElement("style");
   109     style.appendChild(document.createTextNode(ruleText));
   110     document.head.appendChild(style);
   112     // Create animation target
   113     var div = document.createElement("div");
   114     document.body.appendChild(div);
   116     // Give the target geometry so it is eligible for layerization
   117     div.style.width  = "100px";
   118     div.style.height = "100px";
   119     div.style.backgroundColor = "white";
   121     // Common clean up code
   122     var cleanUp = function() {
   123       div.parentNode.removeChild(div);
   124       style.parentNode.removeChild(style);
   125       if (utils.isTestControllingRefreshes) {
   126         utils.restoreNormalRefresh();
   127       }
   128     };
   130     return waitForDocumentLoad()
   131       .then(loadPaintListener)
   132       .then(function() {
   133         // Put refresh driver under test control and trigger animation
   134         utils.advanceTimeAndRefresh(0);
   135         div.style.animation = animationName + " 10s";
   137         // Trigger style flush
   138         div.clientTop;
   139         return waitForPaints();
   140       }).then(function() {
   141         var opacity = utils.getOMTAStyle(div, "opacity");
   142         cleanUp();
   143         return Promise.resolve(opacity == 0.5);
   144       }).catch(function(err) {
   145         cleanUp();
   146         return Promise.reject(err);
   147       });
   148   }
   150   function waitForDocumentLoad() {
   151     return new Promise(function(resolve, reject) {
   152       if (document.readyState === "complete") {
   153         resolve();
   154       } else {
   155         window.addEventListener("load", resolve);
   156       }
   157     });
   158   }
   160   function waitForPaints() {
   161     return new Promise(function(resolve, reject) {
   162       waitForAllPaintsFlushed(resolve);
   163     });
   164   }
   166   function loadPaintListener() {
   167     return new Promise(function(resolve, reject) {
   168       if (typeof(window.waitForAllPaints) !== "function") {
   169         var script = document.createElement("script");
   170         script.onload = resolve;
   171         script.onerror = function() {
   172           reject(new Error("Failed to load paint listener"));
   173         };
   174         script.src = "/tests/SimpleTest/paint_listener.js";
   175         var firstScript = document.scripts[0];
   176         firstScript.parentNode.insertBefore(script, firstScript);
   177       } else {
   178         resolve();
   179       }
   180     });
   181   }
   182 }

mercurial