third_party/WebKit/LayoutTests/compositing/overflow/accelerated-scrolling-with-clip-reference.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   .clip-path {
   6     -webkit-clip-path: url('#clipping');
   7     overflow: scroll;
   8   }
   9
  10   .outer {
  11     height: 400px;
  12     width: 400px;
  13     background-color: blue;
  14   }
  15
  16   .inner {
  17     height: 500px;
  18     width: 500px;
  19     background-color: yellow;
  20   }
  21
  22   .spacer {
  23     width: 100px;
  24     height: 100px;
  25     background-color: green;
  26   }
  27
  28   .bottom {
  29     position: relative;
  30     top: 250px;
  31   }
  32 </style>
  33
  34 <script>
  35   if (window.internals)
  36     window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  37 </script>
  38 </head>
  39
  40 <body>
  41 This tests that reference clip-path is applied with composited scrolling. If the content and
  42 scrollbars are properly clipped, this test passes.
  43
  44 <svg width="0", height="0">
  45   <defs>
  46     <clipPath id="clipping">
  47     <polygon points="61 237,9 313,115 386,621 356,280 339,505 187,414 61,164 143,84 42,2 189"></polygon>
  48     </clipPath>
  49   </defs>
  50 </svg>
  51
  52 <div class="clip-path outer" id="outer">
  53   <div class="spacer"></div>
  54   <div class="inner">
  55     <div class="spacer bottom"></div>
  56   </div>
  57   <div class="spacer"></div>
  58 </div>
  59 </body>
  60 </html>