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

   1 <!DOCTYPE html>
   2 <html id='root'>
   3     <head>
   4         <style>
   5             div {
   6                 height: 50px;
   7                 width: 50px;
   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             #abs-descendant {
  21                 position: absolute;
  22                 overflow: hidden;
  23                 background-color: red;
  24             }
  25
  26             #fixed-descendant {
  27                 left: 50px;
  28                 position: fixed;
  29                 overflow: hidden;
  30                 background-color: blue;
  31             }
  32         </style>
  33         <script>
  34             if (window.testRunner)
  35                 testRunner.dumpAsText();
  36
  37             function doTest()
  38             {
  39                 var pre = document.getElementById('console');
  40                 var testDescription = 'This test ensures that RenderLayer::scrollsWithRespectTo ' +
  41                                       'always works even with transformed fixed-position layers.\n\n';
  42                 var text = document.createTextNode(testDescription);
  43                 pre.appendChild(text);
  44
  45                 if(!window.internals)
  46                     return;
  47
  48                 var divs = ['fixed', 'container', 'overflow-child', 'abs-descendant', 'fixed-descendant', 'viewportFiller', 'root'];
  49                 for (var i = 0; i < divs.length; i++) {
  50                     var div1 = document.getElementById(divs[i]);
  51                     for (var j = 0; j < divs.length; j++) {
  52                         var div2 = document.getElementById(divs[j]);
  53                         var scrollsWithRespectTo = window.internals.scrollsWithRespectTo(div1, div2);
  54
  55                         var successText = scrollsWithRespectTo ? 'scrolls with respect to' : 'does not scroll with respect to';
  56                         var messageText = div1.id + ' ' + successText + ' ' + div2.id;
  57                         text = document.createTextNode(messageText + '\n');
  58                         pre.appendChild(text);
  59                     }
  60                 }
  61             }
  62
  63             window.onload = doTest;
  64         </script>
  65     </head>
  66     <body>
  67         <div id='fixed' style='position: fixed'></div>
  68         <div id='container' style='height: 350px; width: 500px; transform:rotate(15deg); position:relative; top:150px; left: 150px'>
  69             <div id='overflow-child' style='overflow:scroll'></div>
  70             <div id='abs-descendant'></div>
  71             <div id='fixed-descendant'></div>
  72             <div class='filler'></div>
  73         </div>
  74
  75         <pre id='console'></pre>
  76         <div id='viewportFiller' class='filler'></div>
  77     </body>
  78 </html>