src/third_party/WebKit/LayoutTests/compositing/geometry/clip.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6
   7     .box {
   8       position: absolute;
   9       width: 100px;
  10       height: 100px;
  11       top: 20px;
  12       left: 20px;
  13       background-color: gray;
  14       clip: rect(-5px, 105px, 105px, -5px);
  15     }
  16
  17     .inner {
  18       position: relative;
  19       width: 120px;
  20       height: 120px;
  21       top: -10px;
  22       left: -10px;
  23       background-color: rgba(0, 0, 0, 0.2);
  24     }
  25
  26     .composited {
  27       transform: translateZ(1px);
  28     }
  29
  30     p {
  31       margin-top: 140px;
  32     }
  33   </style>
  34   <script type="text/javascript" charset="utf-8">
  35     if (window.testRunner) {
  36       testRunner.dumpAsText();
  37       testRunner.waitUntilDone();
  38     }
  39
  40     function doTest() {
  41       if (window.testRunner) {
  42         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  43         testRunner.notifyDone();
  44       }
  45     }
  46     window.addEventListener('load', doTest, false);
  47   </script>
  48 </head>
  49 <body>
  50
  51   <div class="composited box">
  52     <div class="inner">
  53     </div>
  54   </div>
  55
  56   <div class="box" style="left: 220px;">
  57     <div class="composited inner">
  58     </div>
  59   </div>
  60
  61   <p>Test CSS clip with composited layers. Left and right sides should look the same.</p>
  62 <pre id="layers">
  63   In DRT, layer tree goes here.
  64 </pre>
  65 </body>
  66 </html>