michael@0: function px_to_num(str)
michael@0: {
michael@0:     return Number(String(str).match(/^([\d.]+)px$/)[1]);
michael@0: }
michael@0: 
michael@0: function bezier(x1, y1, x2, y2) {
michael@0:     // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1).
michael@0:     function x_for_t(t) {
michael@0:         var omt = 1-t;
michael@0:         return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t;
michael@0:     }
michael@0:     function y_for_t(t) {
michael@0:         var omt = 1-t;
michael@0:         return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t;
michael@0:     }
michael@0:     function t_for_x(x) {
michael@0:         // Binary subdivision.
michael@0:         var mint = 0, maxt = 1;
michael@0:         for (var i = 0; i < 30; ++i) {
michael@0:             var guesst = (mint + maxt) / 2;
michael@0:             var guessx = x_for_t(guesst);
michael@0:             if (x < guessx)
michael@0:                 maxt = guesst;
michael@0:             else
michael@0:                 mint = guesst;
michael@0:         }
michael@0:         return (mint + maxt) / 2;
michael@0:     }
michael@0:     return function bezier_closure(x) {
michael@0:         if (x == 0) return 0;
michael@0:         if (x == 1) return 1;
michael@0:         return y_for_t(t_for_x(x));
michael@0:     }
michael@0: }
michael@0: 
michael@0: function step_end(nsteps) {
michael@0:     return function step_end_closure(x) {
michael@0:         return Math.floor(x * nsteps) / nsteps;
michael@0:     }
michael@0: }
michael@0: 
michael@0: function step_start(nsteps) {
michael@0:     var stepend = step_end(nsteps);
michael@0:     return function step_start_closure(x) {
michael@0:         return 1.0 - stepend(1.0 - x);
michael@0:     }
michael@0: }
michael@0: 
michael@0: var gTF = {
michael@0:   "ease": bezier(0.25, 0.1, 0.25, 1),
michael@0:   "linear": function(x) { return x; },
michael@0:   "ease_in": bezier(0.42, 0, 1, 1),
michael@0:   "ease_out": bezier(0, 0, 0.58, 1),
michael@0:   "ease_in_out": bezier(0.42, 0, 0.58, 1),
michael@0:   "step_start": step_start(1),
michael@0:   "step_end": step_end(1),
michael@0: };
michael@0: 
michael@0: function is_approx(float1, float2, error, desc) {
michael@0:   ok(Math.abs(float1 - float2) < error,
michael@0:      desc + ": " + float1 + " and " + float2 + " should be within " + error);
michael@0: }
michael@0: 
michael@0: // Checks if off-main thread animation (OMTA) is available, and if it is, runs
michael@0: // the provided callback function. If OMTA is not available or is not
michael@0: // functioning correctly, the second callback, aOnSkip, is run instead.
michael@0: //
michael@0: // This function also does an internal test to verify that OMTA is working at
michael@0: // all so that if OMTA is not functioning correctly when it is expected to
michael@0: // function only a single failure is produced.
michael@0: //
michael@0: // Since this function relies on various asynchronous operations, the caller is
michael@0: // responsible for calling SimpleTest.waitForExplicitFinish() before calling
michael@0: // this and SimpleTest.finish() within aTestFunction and aOnSkip.
michael@0: function runOMTATest(aTestFunction, aOnSkip) {
michael@0:   const OMTAPrefKey = "layers.offmainthreadcomposition.async-animations";
michael@0:   var utils      = SpecialPowers.DOMWindowUtils;
michael@0:   var expectOMTA = utils.layerManagerRemote &&
michael@0:                    // ^ Off-main thread animation cannot be used if off-main
michael@0:                    // thread composition (OMTC) is not available
michael@0:                    SpecialPowers.getBoolPref(OMTAPrefKey);
michael@0: 
michael@0:   isOMTAWorking().then(function(isWorking) {
michael@0:     if (expectOMTA) {
michael@0:       if (isWorking) {
michael@0:         aTestFunction();
michael@0:       } else {
michael@0:         // We only call this when we know it will fail as otherwise in the
michael@0:         // regular success case we will end up inflating the "passed tests"
michael@0:         // count by 1
michael@0:         ok(isWorking, "OMTA is working as expected");
michael@0:         aOnSkip();
michael@0:       }
michael@0:     } else {
michael@0:       todo(isWorking, "OMTA is working");
michael@0:       aOnSkip();
michael@0:     }
michael@0:   }).catch(function(err) {
michael@0:     ok(false, err);
michael@0:     aOnSkip();
michael@0:   });
michael@0: 
michael@0:   function isOMTAWorking() {
michael@0:     // Create keyframes rule
michael@0:     const animationName = "a6ce3091ed85"; // Random name to avoid clashes
michael@0:     var ruleText = "@keyframes " + animationName +
michael@0:                    " { from { opacity: 0.5 } to { opacity 0.5 } }";
michael@0:     var style = document.createElement("style");
michael@0:     style.appendChild(document.createTextNode(ruleText));
michael@0:     document.head.appendChild(style);
michael@0: 
michael@0:     // Create animation target
michael@0:     var div = document.createElement("div");
michael@0:     document.body.appendChild(div);
michael@0: 
michael@0:     // Give the target geometry so it is eligible for layerization
michael@0:     div.style.width  = "100px";
michael@0:     div.style.height = "100px";
michael@0:     div.style.backgroundColor = "white";
michael@0: 
michael@0:     // Common clean up code
michael@0:     var cleanUp = function() {
michael@0:       div.parentNode.removeChild(div);
michael@0:       style.parentNode.removeChild(style);
michael@0:       if (utils.isTestControllingRefreshes) {
michael@0:         utils.restoreNormalRefresh();
michael@0:       }
michael@0:     };
michael@0: 
michael@0:     return waitForDocumentLoad()
michael@0:       .then(loadPaintListener)
michael@0:       .then(function() {
michael@0:         // Put refresh driver under test control and trigger animation
michael@0:         utils.advanceTimeAndRefresh(0);
michael@0:         div.style.animation = animationName + " 10s";
michael@0: 
michael@0:         // Trigger style flush
michael@0:         div.clientTop;
michael@0:         return waitForPaints();
michael@0:       }).then(function() {
michael@0:         var opacity = utils.getOMTAStyle(div, "opacity");
michael@0:         cleanUp();
michael@0:         return Promise.resolve(opacity == 0.5);
michael@0:       }).catch(function(err) {
michael@0:         cleanUp();
michael@0:         return Promise.reject(err);
michael@0:       });
michael@0:   }
michael@0: 
michael@0:   function waitForDocumentLoad() {
michael@0:     return new Promise(function(resolve, reject) {
michael@0:       if (document.readyState === "complete") {
michael@0:         resolve();
michael@0:       } else {
michael@0:         window.addEventListener("load", resolve);
michael@0:       }
michael@0:     });
michael@0:   }
michael@0: 
michael@0:   function waitForPaints() {
michael@0:     return new Promise(function(resolve, reject) {
michael@0:       waitForAllPaintsFlushed(resolve);
michael@0:     });
michael@0:   }
michael@0: 
michael@0:   function loadPaintListener() {
michael@0:     return new Promise(function(resolve, reject) {
michael@0:       if (typeof(window.waitForAllPaints) !== "function") {
michael@0:         var script = document.createElement("script");
michael@0:         script.onload = resolve;
michael@0:         script.onerror = function() {
michael@0:           reject(new Error("Failed to load paint listener"));
michael@0:         };
michael@0:         script.src = "/tests/SimpleTest/paint_listener.js";
michael@0:         var firstScript = document.scripts[0];
michael@0:         firstScript.parentNode.insertBefore(script, firstScript);
michael@0:       } else {
michael@0:         resolve();
michael@0:       }
michael@0:     });
michael@0:   }
michael@0: }