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

   1 <html id='root'>
   2 <head>
   3     <style>
   4         .container {
   5             width: 400px;
   6             height: 400px;
   7             overflow: scroll;
   8             margin: 20px;
   9             border: 1px solid black;
  10             position: relative;
  11             top: 300px;
  12         }
  13
  14         .scrolled {
  15             width: 180px;
  16             height: 300px;
  17             margin: 10px;
  18             background-color: gray;
  19             position: relative;
  20         }
  21
  22         .positioned {
  23             width: 120px;
  24             height: 240px;
  25             background-color: green;
  26             position: absolute;
  27         }
  28
  29         #predecessor {
  30             left: 20px;
  31             top: 20px;
  32             position: fixed;
  33             z-index: 1;
  34         }
  35
  36         #successor {
  37             left: 160px;
  38             top: 1000px;
  39             position: relative;
  40         }
  41
  42         .descendant {
  43             height: 100px;
  44             width: 100px;
  45             background-color: black;
  46             position: relative;
  47         }
  48     </style>
  49
  50     <script>
  51         if (window.testRunner) {
  52             testRunner.waitUntilDone();
  53             testRunner.dumpAsText();
  54         }
  55
  56         // We always want to print the iframe output last, and then let the
  57         // testRunner know we're done.
  58         var shouldFinishTest = false;
  59         var iframeOutput = '';
  60
  61         function receiveIframeOutput(e)
  62         {
  63             if (window.testRunner) {
  64                 if (shouldFinishTest) {
  65                     var pre = document.getElementById('console');
  66                     var text = document.createTextNode(e.data + '\n');
  67                     pre.appendChild(text);
  68
  69                     testRunner.notifyDone();
  70                 } else {
  71                     iframeOutput = e.data;
  72                     shouldFinishTest = true;
  73                 }
  74             }
  75         }
  76
  77         function doTest()
  78         {
  79             var pre = document.getElementById('console');
  80             var testDescription = 'This test ensures that Layer::scrollsWithRespectTo ' +
  81                                   'always returns the correct answer on relatively ' +
  82                                   '"basic" elements as well as fixed- and absolute-' +
  83                                   'positioned elements (ie, those with non-obvious ' +
  84                                   'containing blocks), and iframes.\n\n';
  85             var text = document.createTextNode(testDescription);
  86             pre.appendChild(text);
  87
  88             if(!window.internals)
  89                 return;
  90
  91             var divs = ['predecessor', 'container', 'scrolled1', 'scrolled2', 'scrolled3', 'fixed-descendant', 'successor', 'root', 'descendant'];
  92             for (var i = 0; i < divs.length; i++) {
  93                 var div1 = document.getElementById(divs[i]);
  94                 for (var j = 0; j < divs.length; j++) {
  95                     var div2 = document.getElementById(divs[j]);
  96                     var scrollsWithRespectTo = window.internals.scrollsWithRespectTo(div1, div2);
  97
  98                     var successText = scrollsWithRespectTo ? 'scrolls with respect to' : 'does not scroll with respect to';
  99                     var messageText = div1.id + ' ' + successText + ' ' + div2.id;
 100                     text = document.createTextNode(messageText + '\n');
 101                     pre.appendChild(text);
 102                 }
 103             }
 104
 105             if (window.testRunner) {
 106                 if (shouldFinishTest) {
 107                     text = document.createTextNode(iframeOutput + '\n');
 108                     pre.appendChild(text);
 109
 110                     testRunner.notifyDone();
 111                 }
 112
 113                 shouldFinishTest = true;
 114             }
 115         }
 116
 117         window.onload = doTest;
 118         window.onmessage = receiveIframeOutput;
 119     </script>
 120 </head>
 121
 122 <body>
 123     <div class='positioned' id='predecessor'></div>
 124     <div class='container' id='container'>
 125         <div class='scrolled' id='scrolled1'>
 126             <div id='descendant' class='descendant'></div>
 127         </div>
 128         <div class='scrolled' style='z-index:2;' id='scrolled2'>
 129             <div class='descendant'></div>
 130             <div class='descendant' style='position:fixed' id='fixed-descendant'></div>
 131         </div>
 132         <div class='scrolled' style='background-color: blue; position: absolute' id='scrolled3'>
 133             <div class='descendant'></div>
 134         </div>
 135     </div>
 136     <iframe id='inner-iframe' src='resources/scrolls-with-respect-to-iframe.html' style='width: 500px; height: 500px; position: relative; top: 500px;'></iframe>
 137     <div class='positioned' id='successor'></div>
 138     <pre id='console'></pre>
 139 </body>
 140 </html>