//---------------------------------------------------------------------- // // Common testing functions // //---------------------------------------------------------------------- function advance_clock(milliseconds) { SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds); } // Test-element creation/destruction and event checking (function() { var gElem; var gEventsReceived = []; function new_div(style) { return new_element("div", style); } // Creates a new |tagname| element with inline style |style| and appends // it as a child of the element with ID 'display'. // The element will also be given the class 'target' which can be used // for additional styling. function new_element(tagname, style) { if (gElem) { ok(false, "test author forgot to call done_div/done_elem"); } if (typeof style != "string") { ok(false, "test author forgot to pass argument"); } if (!document.getElementById("display")) { ok(false, "no 'display' element to append to"); } gElem = document.createElement(tagname); gElem.setAttribute("style", style); gElem.classList.add("target"); document.getElementById("display").appendChild(gElem); return [gElem, getComputedStyle(gElem, "")]; } function listen() { if (!gElem) { ok(false, "test author forgot to call new_div before listen"); } gEventsReceived = []; function listener(event) { gEventsReceived.push(event); } gElem.addEventListener("animationstart", listener); gElem.addEventListener("animationiteration", listener); gElem.addEventListener("animationend", listener); } function check_events(eventsExpected, desc) { // This function checks that the list of eventsExpected matches // the received events -- but it only checks the properties that // are present on eventsExpected. is( gEventsReceived.length, eventsExpected.length, "number of events received for " + desc ); for ( var i = 0, i_end = Math.min(eventsExpected.length, gEventsReceived.length); i != i_end; ++i ) { var exp = eventsExpected[i]; var rec = gEventsReceived[i]; for (var prop in exp) { if (prop == "elapsedTime") { // Allow floating point error. ok( Math.abs(rec.elapsedTime - exp.elapsedTime) < 0.000002, "events[" + i + "]." + prop + " for " + desc + " received=" + rec.elapsedTime + " expected=" + exp.elapsedTime ); } else { is( rec[prop], exp[prop], "events[" + i + "]." + prop + " for " + desc ); } } } for (var i = eventsExpected.length; i < gEventsReceived.length; ++i) { ok(false, "unexpected " + gEventsReceived[i].type + " event for " + desc); } gEventsReceived = []; } function done_element() { if (!gElem) { ok( false, "test author called done_element/done_div without matching" + " call to new_element/new_div" ); } gElem.remove(); gElem = null; if (gEventsReceived.length) { ok(false, "caller should have called check_events"); } } [new_div, new_element, listen, check_events, done_element].forEach(function( fn ) { window[fn.name] = fn; }); window.done_div = done_element; })(); function px_to_num(str) { return Number(String(str).match(/^([\d.]+)px$/)[1]); } function bezier(x1, y1, x2, y2) { // Cubic bezier with control points (0, 0), (x1, y1), (x2, y2), and (1, 1). function x_for_t(t) { var omt = 1 - t; return 3 * omt * omt * t * x1 + 3 * omt * t * t * x2 + t * t * t; } function y_for_t(t) { var omt = 1 - t; return 3 * omt * omt * t * y1 + 3 * omt * t * t * y2 + t * t * t; } function t_for_x(x) { // Binary subdivision. var mint = 0, maxt = 1; for (var i = 0; i < 30; ++i) { var guesst = (mint + maxt) / 2; var guessx = x_for_t(guesst); if (x < guessx) { maxt = guesst; } else { mint = guesst; } } return (mint + maxt) / 2; } return function bezier_closure(x) { if (x == 0) { return 0; } if (x == 1) { return 1; } return y_for_t(t_for_x(x)); }; } function step_end(nsteps) { return function step_end_closure(x) { return Math.floor(x * nsteps) / nsteps; }; } function step_start(nsteps) { var stepend = step_end(nsteps); return function step_start_closure(x) { return 1.0 - stepend(1.0 - x); }; } var gTF = { ease: bezier(0.25, 0.1, 0.25, 1), linear: function(x) { return x; }, ease_in: bezier(0.42, 0, 1, 1), ease_out: bezier(0, 0, 0.58, 1), ease_in_out: bezier(0.42, 0, 0.58, 1), step_start: step_start(1), step_end: step_end(1), }; function is_approx(float1, float2, error, desc) { ok( Math.abs(float1 - float2) < error, desc + ": " + float1 + " and " + float2 + " should be within " + error ); } function findKeyframesRule(name) { for (var i = 0; i < document.styleSheets.length; i++) { var match = [].find.call(document.styleSheets[i].cssRules, function(rule) { return rule.type == CSSRule.KEYFRAMES_RULE && rule.name == name; }); if (match) { return match; } } return undefined; } // Checks if off-main thread animation (OMTA) is available, and if it is, runs // the provided callback function. If OMTA is not available or is not // functioning correctly, the second callback, aOnSkip, is run instead. // // This function also does an internal test to verify that OMTA is working at // all so that if OMTA is not functioning correctly when it is expected to // function only a single failure is produced. // // Since this function relies on various asynchronous operations, the caller is // responsible for calling SimpleTest.waitForExplicitFinish() before calling // this and SimpleTest.finish() within aTestFunction and aOnSkip. // // specialPowersForPrefs exists because some SpecialPowers objects apparently // can get prefs and some can't; callers that would normally have one of the // latter but can get their hands on one of the former can pass it in // explicitly. function runOMTATest(aTestFunction, aOnSkip, specialPowersForPrefs) { const OMTAPrefKey = "layers.offmainthreadcomposition.async-animations"; var utils = SpecialPowers.DOMWindowUtils; if (!specialPowersForPrefs) { specialPowersForPrefs = SpecialPowers; } var expectOMTA = utils.layerManagerRemote && // ^ Off-main thread animation cannot be used if off-main // thread composition (OMTC) is not available specialPowersForPrefs.getBoolPref(OMTAPrefKey); isOMTAWorking() .then(function(isWorking) { if (expectOMTA) { if (isWorking) { aTestFunction(); } else { // We only call this when we know it will fail as otherwise in the // regular success case we will end up inflating the "passed tests" // count by 1 ok(isWorking, "OMTA should work"); aOnSkip(); } } else { todo( isWorking, "OMTA should ideally work, though we don't expect it to work on " + "this platform/configuration" ); aOnSkip(); } }) .catch(function(err) { ok(false, err); aOnSkip(); }); function isOMTAWorking() { // Create keyframes rule const animationName = "a6ce3091ed85"; // Random name to avoid clashes var ruleText = "@keyframes " + animationName + " { from { opacity: 0.5 } to { opacity: 0.5 } }"; var style = document.createElement("style"); style.appendChild(document.createTextNode(ruleText)); document.head.appendChild(style); // Create animation target var div = document.createElement("div"); document.body.appendChild(div); // Give the target geometry so it is eligible for layerization div.style.width = "100px"; div.style.height = "100px"; div.style.backgroundColor = "white"; // Common clean up code var cleanUp = function() { div.remove(); style.remove(); if (utils.isTestControllingRefreshes) { utils.restoreNormalRefresh(); } }; return waitForDocumentLoad() .then(loadPaintListener) .then(function() { // Put refresh driver under test control and flush all pending style, // layout and paint to avoid the situation that waitForPaintsFlush() // receives unexpected MozAfterpaint event for those pending // notifications. utils.advanceTimeAndRefresh(0); return waitForPaintsFlushed(); }) .then(function() { div.style.animation = animationName + " 10s"; return waitForPaintsFlushed(); }) .then(function() { var opacity = utils.getOMTAStyle(div, "opacity"); cleanUp(); return Promise.resolve(opacity == 0.5); }) .catch(function(err) { cleanUp(); return Promise.reject(err); }); } function waitForDocumentLoad() { return new Promise(function(resolve, reject) { if (document.readyState === "complete") { resolve(); } else { window.addEventListener("load", resolve); } }); } function loadPaintListener() { return new Promise(function(resolve, reject) { if (typeof window.waitForAllPaints !== "function") { var script = document.createElement("script"); script.onload = resolve; script.onerror = function() { reject(new Error("Failed to load paint listener")); }; script.src = "/tests/SimpleTest/paint_listener.js"; var firstScript = document.scripts[0]; firstScript.parentNode.insertBefore(script, firstScript); } else { resolve(); } }); } } // Common architecture for setting up a series of asynchronous animation tests // // Usage example: // // addAsyncAnimTest(function *() { // .. do work .. // yield functionThatReturnsAPromise(); // .. do work .. // }); // runAllAsyncAnimTests().then(SimpleTest.finish()); // (function() { var tests = []; window.addAsyncAnimTest = function(generator) { tests.push(generator); }; // Returns a promise when all tests have run window.runAllAsyncAnimTests = function(aOnAbort) { // runAsyncAnimTest returns a Promise that is resolved when the // test is finished so we can chain them together return tests.reduce(function(sequence, test) { return sequence.then(function() { return runAsyncAnimTest(test, aOnAbort); }); }, Promise.resolve() /* the start of the sequence */); }; // Takes a generator function that represents a test case. Each point in the // test case that waits asynchronously for some result yields a Promise that // is resolved when the asynchronous action has completed. By chaining these // intermediate results together we run the test to completion. // // This method itself returns a Promise that is resolved when the generator // function has completed. // // This arrangement is based on add_task() which is currently only available // in mochitest-chrome (bug 872229). If add_task becomes available in // mochitest-plain, we can remove this function and use add_task instead. function runAsyncAnimTest(aTestFunc, aOnAbort) { var generator; function step(arg) { var next; try { next = generator.next(arg); } catch (e) { return Promise.reject(e); } if (next.done) { return Promise.resolve(next.value); } return Promise.resolve(next.value).then(step, function(err) { throw err; }); } // Put refresh driver under test control SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(0); // Run test var promise = aTestFunc(); if (!promise.then) { generator = promise; promise = step(); } return promise .catch(function(err) { ok(false, err.message); if (typeof aOnAbort == "function") { aOnAbort(); } }) .then(function() { // Restore clock SpecialPowers.DOMWindowUtils.restoreNormalRefresh(); }); } })(); //---------------------------------------------------------------------- // // Helper functions for testing animated values on the compositor // //---------------------------------------------------------------------- const RunningOn = { MainThread: 0, Compositor: 1, Either: 2, TodoMainThread: 3, }; const ExpectComparisonTo = { Pass: 1, Fail: 2, }; (function() { window.omta_todo_is = function( elem, property, expected, runningOn, desc, pseudo ) { return omta_is_approx( elem, property, expected, 0, runningOn, desc, ExpectComparisonTo.Fail, pseudo ); }; window.omta_is = function(elem, property, expected, runningOn, desc, pseudo) { return omta_is_approx( elem, property, expected, 0, runningOn, desc, ExpectComparisonTo.Pass, pseudo ); }; // Many callers of this method will pass 'undefined' for // expectedComparisonResult. window.omta_is_approx = function( elem, property, expected, tolerance, runningOn, desc, expectedComparisonResult, pseudo ) { // Check input // FIXME: Auto generate this array. const omtaProperties = [ "transform", "translate", "rotate", "scale", "offset-path", "offset-distance", "offset-rotate", "offset-anchor", "opacity", "background-color", ]; if (!omtaProperties.includes(property)) { ok(false, property + " is not an OMTA property"); return; } var normalize; var compare; var normalizedToString = JSON.stringify; switch (property) { case "offset-path": case "offset-distance": case "offset-rotate": case "offset-anchor": case "translate": case "rotate": case "scale": if (runningOn == RunningOn.MainThread) { normalize = value => value; compare = function(a, b, error) { return a == b; }; break; } // fall through case "transform": normalize = convertTo3dMatrix; compare = matricesRoughlyEqual; normalizedToString = convert3dMatrixToString; break; case "opacity": normalize = parseFloat; compare = function(a, b, error) { return Math.abs(a - b) <= error; }; break; default: normalize = value => value; compare = function(a, b, error) { return a == b; }; break; } if (!!expected.compositorValue) { const originalNormalize = normalize; normalize = value => !!value.compositorValue ? originalNormalize(value.compositorValue) : originalNormalize(value); } // Get actual values var compositorStr = SpecialPowers.DOMWindowUtils.getOMTAStyle( elem, property, pseudo ); var computedStr = window.getComputedStyle(elem, pseudo)[property]; // Prepare expected value var expectedValue = normalize(expected); if (expectedValue === null) { ok( false, desc + ": test author should provide a valid 'expected' value" + " - got " + expected.toString() ); return; } // Check expected value appears in the right place var actualStr; switch (runningOn) { case RunningOn.Either: runningOn = compositorStr !== "" ? RunningOn.Compositor : RunningOn.MainThread; actualStr = compositorStr !== "" ? compositorStr : computedStr; break; case RunningOn.Compositor: if (compositorStr === "") { ok(false, desc + ": should be animating on compositor"); return; } actualStr = compositorStr; break; case RunningOn.TodoMainThread: todo( compositorStr === "", desc + ": should NOT be animating on compositor" ); actualStr = compositorStr === "" ? computedStr : compositorStr; break; case RunningOn.TodoCompositor: todo( compositorStr !== "", desc + ": should be animating on compositor" ); actualStr = compositorStr !== "" ? computedStr : compositorStr; break; default: if (compositorStr !== "") { ok(false, desc + ": should NOT be animating on compositor"); return; } actualStr = computedStr; break; } var okOrTodo = expectedComparisonResult == ExpectComparisonTo.Fail ? todo : ok; // Compare animated value with expected var actualValue = normalize(actualStr); if (actualValue === null) { ok(false, desc + ": should return a valid result - got " + actualStr); return; } okOrTodo( compare(expectedValue, actualValue, tolerance), desc + " - got " + actualStr + ", expected " + normalizedToString(expectedValue) ); // For transform-like properties, if we have multiple transform-like // properties, the OMTA value and getComputedStyle() must be different, // so use this flag to skip the following tests. // FIXME: Putting this property on the expected value is a little bit odd. // It's not really a product of the expected value, but rather the kind of // test we're running. That said, the omta_is, omta_todo_is etc. methods are // already pretty complex and adding another parameter would probably // complicate things too much so this is fine for now. If we extend these // functions any more, though, we should probably reconsider this API. if (expected.usesMultipleProperties) { return; } if (typeof expected.computed !== "undefined") { // For some tests we specify a separate computed value for comparing // with getComputedStyle. // // In particular, we do this for the individual transform functions since // the form returned from getComputedStyle() reflects the individual // properties (e.g. 'translate: 100px') while the form we read back from // the compositor represents the combined result of all the transform // properties as a single transform matrix (e.g. [0, 0, 0, 0, 100, 0]). // // Despite the fact that we can't directly compare the OMTA value against // the getComputedStyle value in this case, it is still worth checking the // result of getComputedStyle since it will help to alert us if some // discrepancy arises between the way we calculate values on the main // thread and compositor. okOrTodo( computedStr == expected.computed, desc + ": Computed style should be equal to " + expected.computed ); } else if (actualStr === compositorStr) { // For compositor animations do an additional check that they match // the value calculated on the main thread var computedValue = normalize(computedStr); if (computedValue === null) { ok( false, desc + ": test framework should parse computed style" + " - got " + computedStr ); return; } okOrTodo( compare(computedValue, actualValue, 0.0), desc + ": OMTA style and computed style should be equal" + " - OMTA " + actualStr + ", computed " + computedStr ); } }; window.matricesRoughlyEqual = function(a, b, tolerance) { tolerance = tolerance || 0.00011; for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { var diff = Math.abs(a[i][j] - b[i][j]); if (diff > tolerance || isNaN(diff)) { return false; } } } return true; }; // Converts something representing an transform into a 3d matrix in // column-major order. // The following are supported: // "matrix(...)" // "matrix3d(...)" // [ 1, 0, 0, ... ] // { a: 1, ty: 23 } etc. window.convertTo3dMatrix = function(matrixLike) { if (typeof matrixLike == "string") { return convertStringTo3dMatrix(matrixLike); } else if (Array.isArray(matrixLike)) { return convertArrayTo3dMatrix(matrixLike); } else if (typeof matrixLike == "object") { return convertObjectTo3dMatrix(matrixLike); } return null; }; // In future most of these methods should be able to be replaced // with DOMMatrix window.isInvertible = function(matrix) { return getDeterminant(matrix) != 0; }; // Converts strings of the format "matrix(...)" and "matrix3d(...)" to a 3d // matrix function convertStringTo3dMatrix(str) { if (str == "none") { return convertArrayTo3dMatrix([1, 0, 0, 1, 0, 0]); } var result = str.match("^matrix(3d)?\\("); if (result === null) { return null; } return convertArrayTo3dMatrix( str .substring(result[0].length, str.length - 1) .split(",") .map(function(component) { return Number(component); }) ); } // Takes an array of numbers of length 6 (2d matrix) or 16 (3d matrix) // representing a matrix specified in column-major order and returns a 3d // matrix represented as an array of arrays function convertArrayTo3dMatrix(array) { if (array.length == 6) { return convertObjectTo3dMatrix({ a: array[0], b: array[1], c: array[2], d: array[3], e: array[4], f: array[5], }); } else if (array.length == 16) { return [ array.slice(0, 4), array.slice(4, 8), array.slice(8, 12), array.slice(12, 16), ]; } return null; } // Return the first defined value in args. function defined(...args) { return args.find(arg => typeof arg !== "undefined"); } // Takes an object of the form { a: 1.1, e: 23 } and builds up a 3d matrix // with unspecified values filled in with identity values. function convertObjectTo3dMatrix(obj) { return [ [ defined(obj.a, obj.sx, obj.m11, 1), obj.b || obj.m12 || 0, obj.m13 || 0, obj.m14 || 0, ], [ obj.c || obj.m21 || 0, defined(obj.d, obj.sy, obj.m22, 1), obj.m23 || 0, obj.m24 || 0, ], [obj.m31 || 0, obj.m32 || 0, defined(obj.sz, obj.m33, 1), obj.m34 || 0], [ obj.e || obj.tx || obj.m41 || 0, obj.f || obj.ty || obj.m42 || 0, obj.tz || obj.m43 || 0, defined(obj.m44, 1), ], ]; } function convert3dMatrixToString(matrix) { if (is2d(matrix)) { return ( "matrix(" + [ matrix[0][0], matrix[0][1], matrix[1][0], matrix[1][1], matrix[3][0], matrix[3][1], ].join(", ") + ")" ); } return ( "matrix3d(" + matrix .reduce(function(outer, inner) { return outer.concat(inner); }) .join(", ") + ")" ); } function is2d(matrix) { return ( matrix[0][2] === 0 && matrix[0][3] === 0 && matrix[1][2] === 0 && matrix[1][3] === 0 && matrix[2][0] === 0 && matrix[2][1] === 0 && matrix[2][2] === 1 && matrix[2][3] === 0 && matrix[3][2] === 0 && matrix[3][3] === 1 ); } function getDeterminant(matrix) { if (is2d(matrix)) { return matrix[0][0] * matrix[1][1] - matrix[0][1] * matrix[1][0]; } return ( matrix[0][3] * matrix[1][2] * matrix[2][1] * matrix[3][0] - matrix[0][2] * matrix[1][3] * matrix[2][1] * matrix[3][0] - matrix[0][3] * matrix[1][1] * matrix[2][2] * matrix[3][0] + matrix[0][1] * matrix[1][3] * matrix[2][2] * matrix[3][0] + matrix[0][2] * matrix[1][1] * matrix[2][3] * matrix[3][0] - matrix[0][1] * matrix[1][2] * matrix[2][3] * matrix[3][0] - matrix[0][3] * matrix[1][2] * matrix[2][0] * matrix[3][1] + matrix[0][2] * matrix[1][3] * matrix[2][0] * matrix[3][1] + matrix[0][3] * matrix[1][0] * matrix[2][2] * matrix[3][1] - matrix[0][0] * matrix[1][3] * matrix[2][2] * matrix[3][1] - matrix[0][2] * matrix[1][0] * matrix[2][3] * matrix[3][1] + matrix[0][0] * matrix[1][2] * matrix[2][3] * matrix[3][1] + matrix[0][3] * matrix[1][1] * matrix[2][0] * matrix[3][2] - matrix[0][1] * matrix[1][3] * matrix[2][0] * matrix[3][2] - matrix[0][3] * matrix[1][0] * matrix[2][1] * matrix[3][2] + matrix[0][0] * matrix[1][3] * matrix[2][1] * matrix[3][2] + matrix[0][1] * matrix[1][0] * matrix[2][3] * matrix[3][2] - matrix[0][0] * matrix[1][1] * matrix[2][3] * matrix[3][2] - matrix[0][2] * matrix[1][1] * matrix[2][0] * matrix[3][3] + matrix[0][1] * matrix[1][2] * matrix[2][0] * matrix[3][3] + matrix[0][2] * matrix[1][0] * matrix[2][1] * matrix[3][3] - matrix[0][0] * matrix[1][2] * matrix[2][1] * matrix[3][3] - matrix[0][1] * matrix[1][0] * matrix[2][2] * matrix[3][3] + matrix[0][0] * matrix[1][1] * matrix[2][2] * matrix[3][3] ); } })(); //---------------------------------------------------------------------- // // Promise wrappers for paint_listener.js // //---------------------------------------------------------------------- // Returns a Promise that resolves once all paints have completed function waitForPaints() { return new Promise(function(resolve, reject) { waitForAllPaints(resolve); }); } // As with waitForPaints but also flushes pending style changes before waiting function waitForPaintsFlushed() { return new Promise(function(resolve, reject) { waitForAllPaintsFlushed(resolve); }); } function waitForVisitedLinkColoring(visitedLink, waitProperty, waitValue) { function checkLink(resolve) { if ( SpecialPowers.DOMWindowUtils.getVisitedDependentComputedStyle( visitedLink, "", waitProperty ) == waitValue ) { // Our link has been styled as visited. Resolve. resolve(true); } else { // Our link is not yet styled as visited. Poll for completion. setTimeout(checkLink, 0, resolve); } } return new Promise(function(resolve, reject) { checkLink(resolve); }); }