third_party/WebKit/LayoutTests/compositing/overflow/clear-scroll-parent.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5     .container {
   6         height: 200px;
   7         width: 300px;
   8         border: 4px solid black;
   9         overflow-y: scroll;
  10         resize: both;
  11     }
  12
  13     .box {
  14         position: relative;
  15         z-index: 1;
  16         height: 100px;
  17         width: 100px;
  18         margin: 10px;
  19         background-color: blue;
  20     }
  21
  22
  23     #fixed {
  24         position: fixed;
  25         z-index: 0;
  26         background-color: green;
  27         left: 50px;
  28         top: 200px;
  29         height: 200px;
  30         width: 200px;
  31     }
  32
  33     .red {
  34         background-color: red;
  35     }
  36
  37     .clip {
  38         width: 80px;
  39         height: 80px;
  40         overflow: hidden;
  41     }
  42
  43 </style>
  44 <script>
  45     if (window.testRunner)
  46         testRunner.dumpAsText();
  47
  48     if (window.internals) {
  49         window.internals.settings.setPreferCompositingToLCDTextEnabled(true);
  50     }
  51
  52     function runTest() {
  53         var pre = document.createElement('pre');
  54         if (!window.internals) {
  55             var description = "This test ensures that amongst the graphics "
  56                 + "layers corresponding to a single Layer, only one may "
  57                 + "have a scroll parent.";
  58             pre.innerHTML = description;
  59         } else {
  60             document.body.offsetTop;
  61             var clip = document.getElementById('clip');
  62             clip.className = "clip";
  63             document.body.offsetTop;
  64             pre.innerHTML = internals.layerTreeAsText(document,
  65                 internals.LAYER_TREE_INCLUDES_CLIP_AND_SCROLL_PARENTS);
  66         }
  67         document.body.appendChild(pre);
  68     }
  69     window.onload = runTest;
  70 </script>
  71 </head>
  72 <body>
  73     <div class="container">
  74         <div id="fixed"></div>
  75         <div id='clip'>
  76             <div class="box red"></div>
  77         </div>
  78         <div class="box"></div>
  79         <div class="box"></div>
  80         <div class="box"></div>
  81         <div class="box"></div>
  82     </div>
  83 </body>
  84 </html>