third_party/WebKit/LayoutTests/compositing/overflow/clip-content-under-overflow-controls.html

   1 <!DOCTYPE html>
   2 <!DOCTYPE html>
   3 <style>
   4 .composited {
   5   transform: translateZ(0);
   6 }
   7
   8 .container {
   9   width:100px;
  10   height:100px;
  11   overflow:scroll;
  12   resize:both;
  13   position:absolute;
  14 }
  15
  16 .container::-webkit-scrollbar {
  17   background-color: rgba(0, 127, 0, 0.5);
  18 }
  19 .container::-webkit-resizer {
  20   background-color: rgba(0, 127, 0, 0.5);
  21 }
  22
  23 .normalContentArea {
  24   background-color: rgba(0, 127, 0, 0.5);
  25   position:absolute;
  26   top:0px;
  27   bottom:0px;
  28   left:0px;
  29   right:0px
  30 }
  31
  32 .beneathVerticalScrollbar {
  33   position:absolute;
  34   background-color: red;
  35   bottom:-15px;
  36   left:0px;
  37   right:0px;
  38   height:15px;
  39 }
  40
  41 .beneathHorizontalScrollbar {
  42   position:absolute;
  43   background-color: red;
  44   top:0px;
  45   bottom:0px;
  46   right:-15px;
  47   width:15px;
  48 }
  49
  50 .beneathScrollCorner {
  51   position:absolute;
  52   background-color: red;
  53   bottom:-15px;
  54   right:-15px;
  55   height:15px;
  56   width:15px;
  57 }
  58 </style>
  59 <script>
  60 if (window.testRunner)
  61     testRunner.dumpAsTextWithPixelResults(); // Only useful as a pixel test
  62 </script>
  63 <!-- No red should be visible, only a solid green square. -->
  64 <div class="container composited">
  65   <div class="normalContentArea"></div>
  66   <div class="beneathVerticalScrollbar"></div>
  67   <div class="beneathHorizontalScrollbar"></div>
  68   <div class="beneathScrollCorner"></div>
  69 </div>