direct-image-dynamic-border-draws-content.html

<!DOCTYPE html>
<html>
<head>
  <style>
    .composited {
      will-change: transform;
    }
    .border {
      border: 2px solid blue;
    }
  </style>
  <script>
    var layerText = '';

    function layerTreeText(message) {
      return message + '\n\n' + internals.layerTreeAsText(document) + '\n';
    }

    function load(element) {
      if (window.testRunner)
        layerText += layerTreeText('layer tree before image style change');
 
      document.querySelector('img').classList.add('border');
      if (window.testRunner)
        setTimeout(done, 0);
    }

    function done() {
      result.innerText = layerText + layerTreeText('layer tree after image style change');
      testRunner.notifyDone();
    }

    if (window.testRunner) {
      testRunner.waitUntilDone();
      testRunner.dumpAsText();
    }
  </script>
</head>

<!-- The image should have a blue border, and its composited layer.drawsContent should be true -->
<body>
  <img class="composited" onload="load(this)" src="../../images/resources/green-256x256.jpg">
  <pre id="result"></pre>
</body>
</html>

chromium/third_party/blink/web_tests/compositing/images/direct-image-dynamic-border-draws-content.html