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

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   .clip-path {
   6     -webkit-clip-path: polygon(61px 237px,9px 313px,115px 386px,621px 356px,280px 339px,505px 187px,414px 61px,164px 143px,84px 42px,2px 189px);
   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 <!-- This tests that clip-path is applied with composited scrolling. If the content and scrollbars
  41 are properly clipped, this test passes. -->
  42
  43 <body>
  44 <div class="clip-path outer" id="outer">
  45   <div class="spacer"></div>
  46   <div class="inner">
  47     <div class="spacer bottom"></div>
  48   </div>
  49   <div class="spacer"></div>
  50 </div>
  51 </body>
  52 </html>