chromium/third_party/blink/web_tests/paint/invalidation/compositing/should-invoke-deferred-compositing.html

<!DOCTYPE html>

<!-- crbug.com/336676 - layer creation should not accidentally skip requesting
     the compositor for a frame to be produced. When there were no other
     repaints or layout/style changes, the simple act of adding a layer was not
     triggering compositing updates by itself. To recreate this scenario, an
     out-of-flow canvas element is added to an empty composited layer. The
     actual container layer does not get added to the tree until it realizes
     that it receives the canvas content. -->


<html>
<head>
<script src="../resources/text-based-repaint.js"></script>
<style>

.composited {
  will-change: transform;
}

.box {
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 300px;
  top: 0px;
  left: 0px;
}

canvas {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
}

</style>

<script>
  if (window.internals)
    internals.runtimeFlags.accelerated2dCanvasEnabled = true;

  function repaintTest() {
    var canvasElement = document.createElement("canvas");
    canvasElement.width = 200;
    canvasElement.height = 200;
    var context = canvasElement.getContext("2d");
    context.fillStyle = "green";
    context.fillRect(80, 80, 50, 50);
    document.getElementById("container").appendChild(canvasElement);
  }
</script>
</head>

<body onload="runRepaintAndPixelTest()">
  <div id="container" class="composited box"></div>
</body>

</html>