| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| |
| body { margin: 0; } |
| #scroller { |
| overflow: scroll; |
| height: 100px; |
| } |
| #multicol { |
| margin-top: 20px; |
| height: 200px; |
| columns: 2; |
| column-fill: auto; |
| } |
| #before { |
| margin-top: 100px; |
| height: 100px; |
| } |
| #content { |
| height: 10px; |
| } |
| </style> |
| <div id="scroller"> |
| <div id="multicol"> |
| <div id="fragmented"> |
| <div id="before"></div> |
| <div id="content">content</div> |
| </div> |
| </div> |
| </div> |
| <script> |
| |
| // Tests a scroll anchor inside of a div fragmented across multicol |
| |
| test(() => { |
| let scroller = document.querySelector("#scroller"); |
| let before = document.querySelector("#before"); |
| let content = document.querySelector("#content"); |
| |
| // Scroll down so that we select a scroll anchor. We should select #content |
| // and not #before, as #before is positioned offscreen in the first column |
| scroller.scrollTop = 10; |
| |
| // Increase the height of #before so that it fragments into the second |
| // column and pushes #content down. |
| before.style.height = "110px"; |
| |
| // We should have anchored to #content and have done an adjustment of 10px |
| assert_equals(scroller.scrollTop, 20); |
| }, "An element in a fragmented div should be able to be selected as an anchor node."); |
| |
| </script> |
