| <!DOCTYPE html> |
| <html id='root'> |
| <head> |
| <style> |
| div { |
| height: 50px; |
| width: 50px; |
| padding: 3px; |
| border-style: solid; |
| border-color: black; |
| border-width: 1px; |
| overflow: scroll; |
| } |
| |
| .filler { |
| position: relative; |
| top: 1000px; |
| } |
| |
| #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 transformed fixed-position layers.\n\n'; |
| var text = document.createTextNode(testDescription); |
| pre.appendChild(text); |
| |
| if(!window.internals) |
| return; |
| |
| var divs = ['fixed', 'container', 'overflow-child', '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='fixed' style='position: fixed'></div> |
| <div id='container' style='height: 350px; width: 500px; transform:rotate(15deg); position:relative; top:150px; left: 150px'> |
| <div id='overflow-child' style='overflow:scroll'></div> |
| <div id='abs-descendant'></div> |
| <div id='fixed-descendant'></div> |
| <div class='filler'></div> |
| </div> |
| |
| <pre id='console'></pre> |
| <div id='viewportFiller' class='filler'></div> |
| </body> |
| </html> |
