third_party/WebKit/LayoutTests/compositing/images/direct-image-dynamic-clip-path.html

   1 <!DOCTYPE html>
   2 <html>
   3 <style>
   4   .composited {
   5     transform: translateZ(0);
   6   }
   7   .clip-path {
   8     -webkit-clip-path: circle(45%);
   9   }
  10 </style>
  11
  12 <!-- There should be a green circle on this page -->
  13 <body>
  14   <img class="composited" onload="load(this)" src="../../fast/images/resources/green-256x256.jpg">
  15 </body>
  16
  17 <script>
  18 function load(element) {
  19   element.classList.add('clip-path');
  20   setTimeout(done, 0);
  21 }
  22
  23 function done() {
  24   if (window.testRunner)
  25     testRunner.notifyDone();
  26 }
  27
  28 if (window.testRunner) {
  29   testRunner.dumpAsTextWithPixelResults();
  30   testRunner.waitUntilDone();
  31 }
  32 </script>
  33 </html>