| <!DOCTYPE html> |
| <html id='root'> |
| <head> |
| <style> |
| div { |
| height: 350px; |
| width: 500px; |
| padding: 3px; |
| border-style: solid; |
| border-color: black; |
| border-width: 1px; |
| overflow: scroll; |
| } |
| |
| .filler { |
| position: relative; |
| top: 1000px; |
| } |
| |
| #containingBlock { |
| position: relative; |
| } |
| |
| #abs-descendant { |
| position: absolute; |
| overflow: hidden; |
| background-color: red; |
| } |
| |
| #fixed-descendant { |
| left: 50px; |
| position: fixed; |
| overflow: hidden; |
| background-color: blue; |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function doTest() |
| { |
| var pre = document.getElementById('console'); |
| var testDescription = 'This test ensures that Layer::scrollsWithRespectTo ' + |
| 'always works even with multiple levels of nested ' + |
| 'overflow-divs, including positioned and non ' + |
| 'positioned elements, and a scrollable viewport.\n\n'; |
| var text = document.createTextNode(testDescription); |
| pre.appendChild(text); |
| |
| if(!window.internals) |
| return; |
| |
| var divs = ['div1', 'div2', 'containingBlock', 'div4', 'div5', 'abs-descendant', 'fixed-descendant', 'viewportFiller', 'root']; |
| 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); |
| } |
| } |
| } |
| |
| window.onload = doTest; |
| </script> |
| </head> |
| <body> |
| <div id='div1'> |
| <div style='width: 450px; height: 300px' id='div2'> |
| <div style='width: 400px; height: 250px' id='containingBlock'> |
| <div style='width: 350px; height: 200px' id='div4'> |
| <div id='abs-descendant' style='height: 50px; width: 50px;'></div> |
| <div id='fixed-descendant' style='height: 50px; width: 50px;'></div> |
| <div style='width: 300px; height: 150px' id='div5'> |
| <div class='filler'></div> |
| </div> |
| <div class='filler'></div> |
| </div> |
| <div class='filler'></div> |
| </div> |
| <div class='filler'></div> |
| </div> |
| <div class='filler'></div> |
| </div> |
| |
| <pre id='console'></pre> |
| <div id='viewportFiller' class='filler'></div> |
| </body> |
| </html> |
