1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/base/tests/chrome/test_will_change.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,108 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<head>
1.7 + <title>Tests for MozAfterPaint</title>
1.8 + <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
1.9 + <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/paint_listener.js"></script>
1.10 + <!-- This CSS must not be parsed before we get a change to set layout.css.will-change.enabled=true -->
1.11 + <script type="css_but_do_not_parse" id="csscode">
1.12 + #checkOpacityRepaint {
1.13 + will-change: opacity;
1.14 + }
1.15 + #checkTransformRepaint {
1.16 + will-change: transform;
1.17 + }
1.18 + div {
1.19 + width: 100px;
1.20 + height: 100px;
1.21 + background: radial-gradient(ellipse at center, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
1.22 + }
1.23 + </script>
1.24 +</head>
1.25 +<body>
1.26 + <div id="checkRepaint">
1.27 + Check repaint without will-change
1.28 + </div>
1.29 + <div id="checkOpacityRepaint">
1.30 + Check repaint with will-change
1.31 + </div>
1.32 + <div id="checkTransformRepaint">
1.33 + Check repaint with will-change
1.34 + </div>
1.35 +</body>
1.36 +<script>
1.37 +
1.38 +var utils = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor).
1.39 + getInterface(Components.interfaces.nsIDOMWindowUtils);
1.40 +
1.41 +var initialPaintCount = 0;
1.42 +
1.43 +function test_checkRepaint(next) {
1.44 + var element = document.getElementById("checkRepaint");
1.45 + waitForAllPaintsFlushed(function () {
1.46 + utils.checkAndClearPaintedState(element);
1.47 + element.style.opacity = "0.5";
1.48 + waitForAllPaintsFlushed(function () {
1.49 + var painted = utils.checkAndClearPaintedState(element);
1.50 + // *** We check that this repaints because the test is relying
1.51 + // on this property. If this is broken then this test wont
1.52 + // be reliable check for will-change.
1.53 + is(painted, true, "element should have been painted");
1.54 + next();
1.55 + });
1.56 + });
1.57 +}
1.58 +
1.59 +function test_checkOpacityRepaint(next) {
1.60 + var element = document.getElementById("checkOpacityRepaint");
1.61 + waitForAllPaintsFlushed(function () {
1.62 + utils.checkAndClearPaintedState(element);
1.63 + element.style.opacity = "0.5";
1.64 + waitForAllPaintsFlushed(function () {
1.65 + var painted = utils.checkAndClearPaintedState(element);
1.66 + // BasicLayers' heuristics are so that even with will-change:opacity,
1.67 + // we can still have repaints.
1.68 + if (utils.layerManagerType != "Basic") {
1.69 + is(painted, false, "will-change checkOpacityRepaint element should not have been painted");
1.70 + }
1.71 + next();
1.72 + });
1.73 + });
1.74 +}
1.75 +
1.76 +function test_checkTransformRepaint(next) {
1.77 + var element = document.getElementById("checkTransformRepaint");
1.78 + waitForAllPaintsFlushed(function () {
1.79 + utils.checkAndClearPaintedState(element);
1.80 + element.style.transform = "translateY(-5px)";
1.81 + waitForAllPaintsFlushed(function () {
1.82 + var painted = utils.checkAndClearPaintedState(element);
1.83 + // BasicLayers' heuristics are so that even with will-change:transform,
1.84 + // we can still have repaints.
1.85 + if (utils.layerManagerType != "Basic") {
1.86 + is(painted, false, "will-change checkTransformRepaint element should not have been painted");
1.87 + }
1.88 + next();
1.89 + });
1.90 + });
1.91 +}
1.92 +
1.93 +function runTest() {
1.94 + var csscode = document.getElementById("csscode").firstChild.textContent;
1.95 + var style = document.createElement("style");
1.96 + style.textContent = csscode;
1.97 + document.body.appendChild(style);
1.98 + test_checkRepaint(function(){
1.99 + test_checkOpacityRepaint(function(){
1.100 + test_checkTransformRepaint(function(){
1.101 + SimpleTest.finish();
1.102 + });
1.103 + });
1.104 + });
1.105 +}
1.106 +
1.107 +SimpleTest.waitForExplicitFinish();
1.108 +SpecialPowers.pushPrefEnv({ "set": [["layout.css.will-change.enabled", true]] }, runTest);
1.109 +
1.110 +</script>
1.111 +</html>
