| <!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true AsyncFrameScrollingEnabled=true ] --> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <style> |
| body { margin: 0; padding: 0; font-family: -apple-system; } |
| h1, h2 { margin: 0; padding: 0; line-height: 50px; } |
| h2 { font-size: 1.1em; } |
| |
| #test { |
| position: absolute; |
| top: 10vh; |
| left: 12vh; |
| right: 0; |
| bottom: 0; |
| overflow: scroll; |
| } |
| .fixed { |
| position: fixed; |
| width: 50px; |
| height: 50px; |
| background: #F67280; |
| z-index: 100; |
| } |
| |
| #top-left { |
| top: calc(10vh - 2px); |
| left: calc(12vh + 1px); |
| } |
| #top-right { |
| top: calc(10vh + 2px); |
| right: -1px; |
| } |
| #bottom-left { |
| bottom: 3px; |
| left: calc(12vh - 1px); |
| } |
| #bottom-right { |
| bottom: -3px; |
| right: 2px; |
| } |
| |
| .sticky { |
| position: sticky; |
| top: 50px; |
| height: 50px; |
| background: #6C5B7B; |
| z-index: 10; |
| } |
| |
| .long { |
| position: relative; |
| height: 1000px; |
| background: #355C7D; |
| } |
| .long::before { |
| content: "↓"; |
| color: white; |
| font-size: 20em; |
| text-align: center; |
| position: absolute; |
| top: 400px; |
| left: 0; |
| right: 0; |
| } |
| </style> |
| <script src="../resources/ui-helper.js"></script> |
| </head> |
| <body> |
| <section id="test"> |
| <div id="top-left" class="fixed"> |
| </div> |
| <div id="top-right" class="fixed"> |
| </div> |
| <div id="bottom-right" class="fixed"> |
| </div> |
| <div id="bottom-left" class="fixed"> |
| </div> |
| <h2 class="sticky">This is a sticky header</h2> |
| <div class="long"> |
| </div> |
| <div class="long"> |
| </div> |
| <div class="long"> |
| </div> |
| <h2 class="sticky">This is another sticky header</h2> |
| <div class="long"> |
| </div> |
| <div class="long"> |
| </div> |
| <div class="long"> |
| </div> |
| <div class="long"> |
| </div> |
| </section> |
| |
| <pre id="results"></pre> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| window.onload = async function () { |
| if (!window.internals) |
| return; |
| |
| await UIHelper.ensureStablePresentationUpdate(); |
| results.textContent = await UIHelper.getUIViewTree(); |
| document.getElementById('test').remove(); |
| |
| testRunner.notifyDone(); |
| }; |
| </script> |
| </body> |
| </html> |
| |
