LayoutTests/compositing/clip-change.html

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