src/third_party/WebKit/LayoutTests/compositing/culling/scrolled-within-boxshadow.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 .comp {
   6   -webkit-transform: translateZ(0px);
   7 }
   8 body {
   9   margin:0;
  10   padding:0;
  11 }
  12 .shadow {
  13   position:absolute;
  14   left:20px; right:20px;
  15   width:500px;
  16   height:500px;
  17   top:0px; bottom:20px;
  18   z-index:120;
  19   margin-top:20px;
  20   border: 1px solid transparent;
  21   -webkit-box-shadow: 0 0 6px #090;
  22   background-color: #090;
  23 }
  24 #scroll {
  25   overflow-y: hidden; /* scrollable but no scrollbars visible. */
  26   width:500px;
  27   height: 500px;
  28 }
  29 .scrollContent {
  30   width:100%;
  31   height: 1000px; /* make the container scrollable */
  32   background-color: #0d0;
  33 }
  34 </style>
  35 <script type="text/javascript">
  36   if (window.testRunner) {
  37     testRunner.dumpAsTextWithPixelResults();
  38     testRunner.waitUntilDone();
  39   }
  40
  41   window.onload = function() { setTimeout(function() {
  42     document.getElementById('scroll').scrollTop += 300;
  43     if (window.testRunner) {
  44       testRunner.notifyDone();
  45     }
  46   }, 0); };
  47 </script>
  48 </head>
  49
  50 <body>
  51 <!-- If culled incorrectly, the top/left edges outside of the shadowed box end up being culled instead of painted/drawn properly. -->
  52 <div class="comp shadow">
  53   <div id="scroll">
  54     <div class="scrollContent">
  55     </div>
  56   </div>
  57 </div>
  58 </body>
  59 </html>