| <!DOCTYPE html> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| |
| body { height: 2000px; overflow-anchor: none; } |
| #scroller { overflow: scroll; width: 500px; height: 300px; } |
| .anchor { |
| position:relative; height: 100px; width: 150px; |
| background-color: #afa; border: 1px solid gray; |
| } |
| #forceScrolling { height: 500px; background-color: #fcc; } |
| |
| </style> |
| <div id="outerChanger"></div> |
| <div id="outerAnchor" class="anchor"></div> |
| <div id="scroller"> |
| <div id="innerChanger"></div> |
| <div id="innerAnchor" class="anchor"></div> |
| <div id="forceScrolling"></div> |
| </div> |
| <script> |
| |
| // Tests that scroll anchoring can be disabled per-scroller with the |
| // overflow-anchor property. |
| |
| var divScroller = document.querySelector("#scroller"); |
| var docScroller = document.scrollingElement; |
| var innerChanger = document.querySelector("#innerChanger"); |
| var outerChanger = document.querySelector("#outerChanger"); |
| |
| function setup() { |
| divScroller.scrollTop = 100; |
| docScroller.scrollTop = 100; |
| innerChanger.style.height = "200px"; |
| outerChanger.style.height = "150px"; |
| } |
| |
| function reset() { |
| document.body.style.overflowAnchor = ""; |
| divScroller.style.overflowAnchor = ""; |
| divScroller.scrollTop = 0; |
| docScroller.scrollTop = 0; |
| innerChanger.style.height = ""; |
| outerChanger.style.height = ""; |
| } |
| |
| test(() => { |
| setup(); |
| |
| assert_equals(divScroller.scrollTop, 300, |
| "Scroll anchoring should apply to #scroller."); |
| |
| assert_equals(docScroller.scrollTop, 100, |
| "Scroll anchoring should not apply to the document scroller."); |
| |
| reset(); |
| }, "Disabled on document, enabled on div."); |
| |
| test(() => { |
| document.body.style.overflowAnchor = "auto"; |
| divScroller.style.overflowAnchor = "none"; |
| setup(); |
| |
| assert_equals(divScroller.scrollTop, 100, |
| "Scroll anchoring should not apply to #scroller."); |
| |
| assert_equals(docScroller.scrollTop, 250, |
| "Scroll anchoring should apply to the document scroller."); |
| |
| reset(); |
| }, "Enabled on document, disabled on div."); |
| |
| </script> |