| <!DOCTYPE html> |
| <title>Tests 'anchor-clip' property with nested scrollers</title> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-clip"> |
| <link rel="match" href="anchor-clip-002-ref.html"> |
| <link rel="author" href="mailto:xiaochengh@chromium.org"> |
| |
| <style> |
| .cb { |
| position: relative; |
| width: 200px; |
| margin-block: 50px; |
| } |
| |
| .scroller { |
| overflow-y: scroll; |
| } |
| |
| .anchor { |
| width: 100px; |
| height: 100px; |
| background: orange; |
| anchor-name: --a; |
| } |
| |
| .target { |
| position: absolute; |
| width: 100px; |
| height: 100px; |
| background: lime; |
| anchor-default: --a; |
| bottom: anchor(top); |
| left: anchor(left); |
| } |
| </style> |
| |
| <div class="cb"> |
| <div class="scroller" style="height: 200px"> |
| <div style="height: 50px"></div> |
| <div class="scroller" style="height: 150px"> |
| <div style="height: 200px"></div> |
| <div class="anchor"></div> |
| </div> |
| <div style="height: 50px"></div> |
| </div> |
| <div class="target"></div> |
| </div> |
| |
| <div class="cb"> |
| <div class="scroller" style="height: 200px"> |
| <div style="height: 50px"></div> |
| <div class="scroller" style="height: 150px"> |
| <div style="height: 150px"></div> |
| <div class="anchor"></div> |
| <div style="height: 100px"></div> |
| </div> |
| <div style="height: 150px"></div> |
| </div> |
| <div class="target"></div> |
| </div> |
| |
| <script> |
| let scrollers = document.querySelectorAll('.scroller'); |
| scrollers[0].scrollTop = 25; |
| scrollers[1].scrollTop = 150; |
| scrollers[2].scrollTop = 100; |
| scrollers[3].scrollTop = 50; |
| </script> |
