| <!DOCTYPE html> <!-- webkit-test-runner [ AsyncOverflowScrollingEnabled=true ] --> |
| <html> |
| <head> |
| <style> |
| .first-scroller { |
| position: relative; |
| z-index: 0; |
| margin: 20px; |
| width: 500px; |
| height: 100px; |
| border: 1px solid black; |
| overflow: auto; |
| } |
| |
| .second-layer { |
| position: relative; |
| overflow: hidden; |
| height: 400px; |
| width: 500px; |
| margin: 20px; |
| border: 1px solid black; |
| } |
| |
| .second-scroller { |
| height: 300px; |
| width: 450px; |
| overflow: scroll; |
| border: 1px solid blue; |
| padding: 10px; |
| background-color: rgba(255, 255, 255, 0.85); |
| } |
| |
| .inner-scroller { |
| width: 400px; |
| height: 200px; |
| overflow: scroll; |
| border: 1px solid black; |
| } |
| |
| .contents { |
| height: 200%; |
| } |
| |
| .indicator { |
| position: relative; |
| margin: 10px; |
| width: 400px; |
| height: 80px; |
| background-color: green; |
| } |
| |
| .spacer { |
| height: 200px; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div class="first-scroller"> |
| <div class="contents">There should be a dark green rectangle inside the blue outline below</div> |
| </div> |
| <div class="second-layer"> |
| <div class="second-scroller"> |
| <div class="inner-scroller"> |
| <div class="contents"></div> |
| </div> |
| <div class="indicator"></div> |
| <div class="spacer"></div> |
| </div> |
| </div> |
| </body> |
| </html> |
