third_party/WebKit/LayoutTests/compositing/images/direct-image-dynamic-border-draws-content.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5     .composited {
   6       transform: translateZ(0);
   7     }
   8     .border {
   9       border: 2px solid blue;
  10     }
  11   </style>
  12   <script>
  13     var layerText = '';
  14
  15     function layerTreeText(message) {
  16       return message + '\n\n' + window.internals.layerTreeAsText(document) + '\n';
  17     }
  18
  19     function load(element) {
  20       if (window.testRunner)
  21         layerText += layerTreeText('layer tree before image style change');
  22
  23       document.querySelector('img').classList.add('border');
  24       if (window.testRunner)
  25         setTimeout(done, 0);
  26     }
  27
  28     function done() {
  29       result.innerText = layerText + layerTreeText('layer tree after image style change');
  30       testRunner.notifyDone();
  31     }
  32
  33     if (window.testRunner) {
  34       testRunner.waitUntilDone();
  35       testRunner.dumpAsText();
  36     }
  37   </script>
  38 </head>
  39
  40 <!-- The image should have a blue border, and its composited layer.drawsContent should be true -->
  41 <body>
  42   <img class="composited" onload="load(this)" src="../../fast/images/resources/green-256x256.jpg">
  43   <pre id="result"></pre>
  44 </body>
  45 </html>