third_party/WebKit/LayoutTests/compositing/clip-change.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <script src="../resources/run-after-layout-and-paint.js"></script>
   5   <style>
   6     #indicator {
   7       position: absolute;
   8       top: 0px;
   9       left: 0px;
  10       height: 100px;
  11       width: 100px;
  12       background-color: red;
  13     }
  14     #clipper {
  15       transform:translateZ(0);
  16       position: absolute;
  17       top: 0px;
  18       left: 0px;
  19       height: 100px;
  20       width: 100px;
  21       background-color: green;
  22       clip: rect(25px, 75px, 75px, 25px);
  23     }
  24   </style>
  25   <script>
  26     if (window.testRunner) {
  27       testRunner.dumpAsTextWithPixelResults();
  28       testRunner.waitUntilDone();
  29     }
  30     function doTest() {
  31       runAfterLayoutAndPaint(function() {
  32         // The change in clip style should be reflected immediately in the size
  33         // of the composited clipper layer. After changing the clip, it should
  34         // entirely cover the indicator.
  35         var clipper = document.getElementById("clipper");
  36         clipper.style.clip = "rect(0px, 100px, 100px, 0px)";
  37         if (window.testRunner)
  38           testRunner.notifyDone();
  39       });
  40     }
  41     window.addEventListener("load", doTest, false);
  42   </script>
  43 </head>
  44   <body>
  45     <div id="indicator"></div>
  46     <div id="clipper"></div>
  47   </body>
  48 </html>