| <html id='root'> |
| <head> |
| <style> |
| .container { |
| width: 400px; |
| height: 400px; |
| overflow: scroll; |
| margin: 20px; |
| border: 1px solid black; |
| position: relative; |
| top: 300px; |
| } |
| |
| .scrolled { |
| width: 180px; |
| height: 300px; |
| margin: 10px; |
| background-color: gray; |
| position: relative; |
| } |
| |
| .positioned { |
| width: 120px; |
| height: 240px; |
| background-color: green; |
| position: absolute; |
| } |
| |
| #predecessor { |
| left: 20px; |
| top: 20px; |
| position: fixed; |
| z-index: 1; |
| } |
| |
| #successor { |
| left: 160px; |
| top: 1000px; |
| position: relative; |
| } |
| |
| .descendant { |
| height: 100px; |
| width: 100px; |
| background-color: black; |
| position: relative; |
| } |
| </style> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| // We always want to print the iframe output last, and then let the |
| // testRunner know we're done. |
| var shouldFinishTest = false; |
| var iframeOutput = ''; |
| |
| function receiveIframeOutput(e) |
| { |
| if (window.testRunner) { |
| if (shouldFinishTest) { |
| var pre = document.getElementById('console'); |
| var text = document.createTextNode(e.data + '\n'); |
| pre.appendChild(text); |
| |
| testRunner.notifyDone(); |
| } else { |
| iframeOutput = e.data; |
| shouldFinishTest = true; |
| } |
| } |
| } |
| |
| function doTest() |
| { |
| var pre = document.getElementById('console'); |
| var testDescription = 'This test ensures that Layer::scrollsWithRespectTo ' + |
| 'always returns the correct answer on relatively ' + |
| '"basic" elements as well as fixed- and absolute-' + |
| 'positioned elements (ie, those with non-obvious ' + |
| 'containing blocks), and iframes.\n\n'; |
| var text = document.createTextNode(testDescription); |
| pre.appendChild(text); |
| |
| if(!window.internals) |
| return; |
| |
| var divs = ['predecessor', 'container', 'scrolled1', 'scrolled2', 'scrolled3', 'fixed-descendant', 'successor', 'root', 'descendant']; |
| for (var i = 0; i < divs.length; i++) { |
| var div1 = document.getElementById(divs[i]); |
| for (var j = 0; j < divs.length; j++) { |
| var div2 = document.getElementById(divs[j]); |
| var scrollsWithRespectTo = internals.scrollsWithRespectTo(div1, div2); |
| |
| var successText = scrollsWithRespectTo ? 'scrolls with respect to' : 'does not scroll with respect to'; |
| var messageText = div1.id + ' ' + successText + ' ' + div2.id; |
| text = document.createTextNode(messageText + '\n'); |
| pre.appendChild(text); |
| } |
| } |
| |
| if (window.testRunner) { |
| if (shouldFinishTest) { |
| text = document.createTextNode(iframeOutput + '\n'); |
| pre.appendChild(text); |
| |
| testRunner.notifyDone(); |
| } |
| |
| shouldFinishTest = true; |
| } |
| } |
| |
| window.onload = doTest; |
| window.onmessage = receiveIframeOutput; |
| </script> |
| </head> |
| |
| <body> |
| <div class='positioned' id='predecessor'></div> |
| <div class='container' id='container'> |
| <div class='scrolled' id='scrolled1'> |
| <div id='descendant' class='descendant'></div> |
| </div> |
| <div class='scrolled' style='z-index:2;' id='scrolled2'> |
| <div class='descendant'></div> |
| <div class='descendant' style='position:fixed' id='fixed-descendant'></div> |
| </div> |
| <div class='scrolled' style='background-color: blue; position: absolute' id='scrolled3'> |
| <div class='descendant'></div> |
| </div> |
| </div> |
| <iframe id='inner-iframe' src='resources/scrolls-with-respect-to-iframe.html' style='width: 500px; height: 500px; position: relative; top: 500px;'></iframe> |
| <div class='positioned' id='successor'></div> |
| <pre id='console'></pre> |
| </body> |
| </html> |
