| <!DOCTYPE html> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| |
| #space { |
| height: 4000px; |
| } |
| #header { |
| background-color: #F5B335; |
| height: 50px; |
| width: 100%; |
| } |
| #content { |
| background-color: #D3D3D3; |
| height: 400px; |
| } |
| .scroller { |
| overflow: scroll; |
| position: relative; |
| width: 600px; |
| height: 600px; |
| } |
| |
| </style> |
| <div id="maybeScroller"> |
| <div id="space"> |
| <div id="header"></div> |
| <div id="before"></div> |
| <div id="content"></div> |
| </div> |
| </div> |
| <script> |
| |
| // Tests that scroll anchoring is suppressed when an element in the scroller |
| // changes its in-flow state. |
| |
| var scroller; |
| |
| function runCase(oldPos, newPos, expectSuppression, skipInverse) { |
| var header = document.querySelector("#header"); |
| var before = document.querySelector("#before"); |
| |
| header.style.position = oldPos; |
| before.style.height = "0"; |
| scroller.scrollTop = 200; |
| |
| header.style.position = newPos; |
| before.style.height = "25px"; |
| |
| var expectedTop = expectSuppression ? 200 : 225; |
| assert_equals(scroller.scrollTop, expectedTop); |
| |
| if (!skipInverse) |
| runCase(newPos, oldPos, expectSuppression, true); |
| } |
| |
| test(() => { |
| scroller = document.scrollingElement; |
| document.querySelector("#maybeScroller").className = ""; |
| |
| runCase("static", "fixed", true); |
| runCase("static", "absolute", true); |
| runCase("static", "relative", false); |
| runCase("fixed", "absolute", false); |
| runCase("fixed", "relative", true); |
| runCase("absolute", "relative", true); |
| }, "Position changes in document scroller."); |
| |
| test(() => { |
| scroller = document.querySelector("#maybeScroller"); |
| scroller.className = "scroller"; |
| |
| runCase("static", "fixed", true); |
| runCase("static", "absolute", true); |
| runCase("static", "relative", false); |
| runCase("fixed", "absolute", false); |
| runCase("fixed", "relative", true); |
| runCase("absolute", "relative", true); |
| }, "Position changes in scrollable <div>."); |
| |
| </script> |