third_party/WebKit/LayoutTests/compositing/overflow/scrolls-with-respect-to-nested.html

   1 <!DOCTYPE html>
   2 <html id='root'>
   3     <head>
   4         <style>
   5             div {
   6                 height: 350px;
   7                 width: 500px;
   8                 padding: 3px;
   9                 border-style: solid;
  10                 border-color: black;
  11                 border-width: 1px;
  12                 overflow: scroll;
  13             }
  14
  15             .filler {
  16                 position: relative;
  17                 top: 1000px;
  18             }
  19
  20             #containingBlock {
  21                 position: relative;
  22             }
  23
  24             #abs-descendant {
  25                 position: absolute;
  26                 overflow: hidden;
  27                 background-color: red;
  28             }
  29
  30             #fixed-descendant {
  31                 left: 50px;
  32                 position: fixed;
  33                 overflow: hidden;
  34                 background-color: blue;
  35             }
  36         </style>
  37         <script>
  38             if (window.testRunner)
  39                 testRunner.dumpAsText();
  40
  41             function doTest()
  42             {
  43                 var pre = document.getElementById('console');
  44                 var testDescription = 'This test ensures that Layer::scrollsWithRespectTo ' +
  45                                       'always works even with multiple levels of nested ' +
  46                                       'overflow-divs, including positioned and non ' +
  47                                       'positioned elements, and a scrollable viewport.\n\n';
  48                 var text = document.createTextNode(testDescription);
  49                 pre.appendChild(text);
  50
  51                 if(!window.internals)
  52                     return;
  53
  54                 var divs = ['div1', 'div2', 'containingBlock', 'div4', 'div5', 'abs-descendant', 'fixed-descendant', 'viewportFiller', 'root'];
  55                 for (var i = 0; i < divs.length; i++) {
  56                     var div1 = document.getElementById(divs[i]);
  57                     for (var j = 0; j < divs.length; j++) {
  58                         var div2 = document.getElementById(divs[j]);
  59                         var scrollsWithRespectTo = window.internals.scrollsWithRespectTo(div1, div2);
  60
  61                         var successText = scrollsWithRespectTo ? 'scrolls with respect to' : 'does not scroll with respect to';
  62                         var messageText = div1.id + ' ' + successText + ' ' + div2.id;
  63                         text = document.createTextNode(messageText + '\n');
  64                         pre.appendChild(text);
  65                     }
  66                 }
  67             }
  68
  69             window.onload = doTest;
  70         </script>
  71     </head>
  72     <body>
  73         <div id='div1'>
  74             <div style='width: 450px; height: 300px' id='div2'>
  75                 <div style='width: 400px; height: 250px' id='containingBlock'>
  76                     <div style='width: 350px; height: 200px' id='div4'>
  77                         <div id='abs-descendant' style='height: 50px; width: 50px;'></div>
  78                         <div id='fixed-descendant' style='height: 50px; width: 50px;'></div>
  79                         <div style='width: 300px; height: 150px' id='div5'>
  80                             <div class='filler'></div>
  81                         </div>
  82                         <div class='filler'></div>
  83                     </div>
  84                     <div class='filler'></div>
  85                 </div>
  86                 <div class='filler'></div>
  87             </div>
  88             <div class='filler'></div>
  89         </div>
  90
  91         <pre id='console'></pre>
  92         <div id='viewportFiller' class='filler'></div>
  93     </body>
  94 </html>