| <!DOCTYPE html> <!-- webkit-test-runner [ OverlayRegionsEnabled=true AsyncOverflowScrollingEnabled=true AsyncFrameScrollingEnabled=true ContentInsetBackgroundFillEnabled=false ] --> |
| <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; } |
| |
| #menu { |
| position: fixed; |
| width: 20%; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| overflow: scroll; |
| } |
| |
| #main { |
| position: fixed; |
| width: 80%; |
| top: 0; |
| left: 20%; |
| bottom: 0; |
| overflow: scroll; |
| } |
| |
| .fixed { |
| position: fixed; |
| left: 0; |
| height: 50px; |
| background: #F67280; |
| z-index: 100; |
| } |
| |
| #header { |
| top: 0; |
| width: 20%; |
| } |
| #footer { |
| top: unset; |
| left: 20%; |
| right: 0; |
| bottom: 0; |
| } |
| |
| .sticky { |
| position: sticky; |
| top: 0; |
| 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; |
| } |
| |
| #menu .long::before { |
| font-size: 8em; |
| } |
| |
| #results { |
| position: absolute; |
| } |
| </style> |
| <script src="../resources/ui-helper.js"></script> |
| <script src="./overlay-region-helper.js"></script> |
| </head> |
| <body> |
| <section id="test"> |
| <div id="menu"> |
| <div id="header" class="fixed"> |
| <h1>This is a fixed header</h1> |
| </div> |
| <div class="long"> |
| </div> |
| <div class="long"> |
| </div> |
| <div class="long"> |
| </div> |
| </div> |
| <div id="main"> |
| <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> |
| <div id="footer" class="fixed"> |
| <h1>This is a fixed footer</h1> |
| </div> |
| </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 = filterUIViewTree(await UIHelper.getUIViewTree()); |
| document.getElementById('test').remove(); |
| |
| testRunner.notifyDone(); |
| }; |
| </script> |
| </body> |
| </html> |
| |
