| <!DOCTYPE html> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| |
| #scroller { |
| height: 200px; |
| width: 200px; |
| overflow: scroll; |
| } |
| #a1, #space1, #a2, #space2 { |
| height: 200px; |
| } |
| #a1, #a2 { |
| background-color: #8f8; |
| } |
| |
| </style> |
| <div id="scroller"> |
| <div id="space0"></div> |
| <div id="a1"></div> |
| <div id="space1"></div> |
| <div id="a2"></div> |
| <div id="space2"></div> |
| </div> |
| <script> |
| |
| // Tests that the anchor node is recomputed after an explicit change to the |
| // scroll position. |
| |
| test(() => { |
| var scroller = document.querySelector("#scroller"); |
| scroller.scrollTop = 500; |
| |
| // We should now be anchored to #a2. |
| document.querySelector("#space1").style.height = "300px"; |
| assert_equals(scroller.scrollTop, 600); |
| |
| scroller.scrollTop = 100; |
| |
| // We should now be anchored to #a1. Make sure there is no adjustment from |
| // moving #a2. |
| document.querySelector("#space1").style.height = "400px"; |
| assert_equals(scroller.scrollTop, 100); |
| |
| // Moving #a1 should produce an adjustment. |
| document.querySelector("#space0").style.height = "100px"; |
| assert_equals(scroller.scrollTop, 200); |
| }, "Anchor node recomputed after an explicit scroll occurs."); |
| |
| </script> |