third_party/WebKit/LayoutTests/compositing/geometry/clip-inside.html

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