src/third_party/WebKit/LayoutTests/compositing/geometry/clip-with-shadow.html

   1 <!DOCTYPE html>
   2
   3 <!-- Test CSS clip and shadow with composited layers. Left and right sides
   4      should have the same shape. In old code where this caused a bug,
   5      crbug.com/246728, shadows cause a slightly different code path than
   6      clip.html without shadow. In this test, the clip is still larger than the
   7      shadow's extent; The composited layer should not clamp to the shadow's
   8      extent (1 pixel), it should include the full extent of the clip as well (5
   9      pixels). -->
  10
  11 <html>
  12 <head>
  13   <style type="text/css" media="screen">
  14
  15     .box {
  16       position: absolute;
  17       width: 100px;
  18       height: 100px;
  19       top: 20px;
  20       left: 20px;
  21       background-color: gray;
  22       -webkit-box-shadow: 1px 1px 1px 1px gray;
  23       clip: rect(-5px, 105px, 105px, -5px);
  24     }
  25
  26     .inner {
  27       position: relative;
  28       width: 120px;
  29       height: 120px;
  30       top: -10px;
  31       left: -10px;
  32       background-color: rgba(0, 0, 0, 0.2);
  33     }
  34
  35     .composited {
  36       transform: translateZ(1px);
  37     }
  38
  39     p {
  40       margin-top: 140px;
  41     }
  42   </style>
  43   <script type="text/javascript" charset="utf-8">
  44     if (window.testRunner) {
  45       testRunner.dumpAsText();
  46       testRunner.waitUntilDone();
  47     }
  48
  49     function doTest() {
  50       if (window.testRunner) {
  51         document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
  52         testRunner.notifyDone();
  53       }
  54     }
  55     window.addEventListener('load', doTest, false);
  56   </script>
  57 </head>
  58 <body>
  59
  60   <div class="composited box">
  61     <div class="inner">
  62     </div>
  63   </div>
  64
  65   <div class="box" style="left: 220px;">
  66     <div class="composited inner">
  67     </div>
  68   </div>
  69
  70 <pre id="layers">
  71 <!--  In DRT, layer tree goes here. -->
  72 </pre>
  73 </body>
  74 </html>