src/third_party/WebKit/LayoutTests/compositing/layer-creation/should-invoke-deferred-compositing.html

   1 <!DOCTYPE html>
   2
   3 <!-- crbug.com/336676 - layer creation should not accidentally skip requesting
   4      the compositor for a frame to be produced. When there were no other
   5      repaints or layout/style changes, the simple act of adding a layer was not
   6      triggering compositing updates by itself. To recreate this scenario, an
   7      out-of-flow canvas element is added to an empty composited layer. The
   8      actual container layer does not get added to the tree until it realizes
   9      that it receives the canvas content. -->
  10
  11
  12 <html>
  13 <head>
  14 <style>
  15
  16 .composited {
  17   -webkit-transform: translatez(0);
  18 }
  19
  20 .box {
  21   position: absolute;
  22   z-index: 1;
  23   width: 300px;
  24   height: 300px;
  25   top: 0px;
  26   left: 0px;
  27 }
  28
  29 canvas {
  30   position: absolute;
  31   z-index: 1;
  32   top: 0px;
  33   left: 0px;
  34 }
  35
  36 </style>
  37
  38 <script>
  39
  40   if (window.testRunner)
  41     testRunner.dumpAsText();
  42
  43
  44   var canvasElement;
  45
  46   function addCanvasToTree() {
  47     document.getElementById("container").appendChild(canvasElement);
  48   }
  49
  50   function runTest() {
  51     canvasElement = document.createElement("canvas");
  52     canvasElement.width = 200;
  53     canvasElement.height = 200;
  54     var context = canvasElement.getContext("2d");
  55     context.fillStyle = "green";
  56     context.fillRect(80, 80, 50, 50);
  57
  58     if (!window.testRunner) {
  59       // If the test is being run interactively, then
  60       // the canvas should correctly appear after 1 second.
  61       setTimeout(addCanvasToTree, 1000);
  62       return;
  63     }
  64
  65     testRunner.display();
  66
  67     // This should initiate a compositor frame via scheduleAnimation().
  68     addCanvasToTree();
  69
  70     if (window.internals.isCompositorFramePending(document))
  71       document.getElementById("result").innerHTML = "PASS - did schedule animation";
  72     else
  73       document.getElementById("result").innerHTML = "FAIL - did not schedule animation";
  74   }
  75
  76 </script>
  77 </head>
  78
  79 <body onload="runTest()">
  80   <div id="container" class="composited box"></div>
  81   <div id="result">The green box should appear after 1 second when running this test interactively.</div>
  82 </body>
  83
  84 </html>