<!DOCTYPE HTML> <html> <head> <title>Tests for MozAfterPaint</title> <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/paint_listener.js"></script> <style> #checkOpacityRepaint { will-change: opacity; } #checkTransformRepaint { will-change: transform; } div { width: 100px; height: 100px; background: radial-gradient(ellipse at center, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); } </style> </head> <body> <div id="checkRepaint"> Check repaint without will-change </div> <div id="checkOpacityRepaint"> Check repaint with will-change </div> <div id="checkTransformRepaint"> Check repaint with will-change </div> </body> <script> var utils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor). getInterface(Components.interfaces.nsIDOMWindowUtils); var initialPaintCount = 0; function test_checkRepaint(next) { var element = document.getElementById("checkRepaint"); waitForAllPaintsFlushed(function () { utils.checkAndClearPaintedState(element); element.style.opacity = "0.5"; waitForAllPaintsFlushed(function () { var painted = utils.checkAndClearPaintedState(element); // *** We check that this repaints because the test is relying // on this property. If this is broken then this test wont // be reliable check for will-change. is(painted, true, "element should have been painted"); next(); }); }); } function test_checkOpacityRepaint(next) { var element = document.getElementById("checkOpacityRepaint"); waitForAllPaintsFlushed(function () { utils.checkAndClearPaintedState(element); element.style.opacity = "0.5"; waitForAllPaintsFlushed(function () { var painted = utils.checkAndClearPaintedState(element); // BasicLayers' heuristics are so that even with will-change:opacity, // we can still have repaints. if (utils.layerManagerType != "Basic") { is(painted, false, "will-change checkOpacityRepaint element should not have been painted"); } next(); }); }); } function test_checkTransformRepaint(next) { var element = document.getElementById("checkTransformRepaint"); waitForAllPaintsFlushed(function () { utils.checkAndClearPaintedState(element); element.style.transform = "translateY(-5px)"; waitForAllPaintsFlushed(function () { var painted = utils.checkAndClearPaintedState(element); // BasicLayers' heuristics are so that even with will-change:transform, // we can still have repaints. if (utils.layerManagerType != "Basic") { is(painted, false, "will-change checkTransformRepaint element should not have been painted"); } next(); }); }); } SimpleTest.waitForExplicitFinish(); test_checkRepaint(function(){ test_checkOpacityRepaint(function(){ test_checkTransformRepaint(function(){ SimpleTest.finish(); }); }); }); </script> </html>