src/third_party/WebKit/LayoutTests/compositing/overflow/nested-border-radius-clipping.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5   .border-radius {
   6     border-radius: 50px;
   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 border-radius is applied with composited scrolling. If the top-left corner is rounded
  42 and nothing paints outside of the rounded-corner clip, this test passes.
  43
  44 <div class="border-radius outer" id="outer">
  45   <div class="spacer"></div>
  46   <div class="border-radius inner">
  47     <div class="spacer bottom"></div>
  48   </div>
  49   <div class="spacer"></div>
  50 </div>
  51 </body>
  52 </html>