forked from mirrors/gecko-dev
dac799c9f4
I believe that changes to 'overflow-anchor' should invalidate the current scroll anchor. This isn't in the spec, but there's an issue open for it [1]. [1] https://github.com/w3c/csswg-drafts/issues/3494 Differential Revision: https://phabricator.services.mozilla.com/D16273 --HG-- extra : source : 04e2132249ace0a85fb274022949c7cfc5131fe2 extra : amend_source : 01ee5bfd2085dfce5887512a7ddc4668b955f30b extra : intermediate-source : af4895c87d712e5151146e2fd61c249fb52c355b
51 lines
1.6 KiB
HTML
51 lines
1.6 KiB
HTML
<!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>
|
|
|
|
#scroller {
|
|
overflow: scroll;
|
|
width: 300px;
|
|
height: 300px;
|
|
}
|
|
#before { height: 50px; }
|
|
#content { margin-top: 100px; margin-bottom: 600px; }
|
|
.no { overflow-anchor: none; }
|
|
|
|
</style>
|
|
<div id="scroller">
|
|
<div id="before"></div>
|
|
<div id="content">content</div>
|
|
</div>
|
|
<script>
|
|
|
|
// Tests that dynamic styling 'overflow-anchor' on an anchor node has the
|
|
// same effect as initial styling
|
|
|
|
test(() => {
|
|
let scroller = document.querySelector("#scroller");
|
|
let before = document.querySelector("#before");
|
|
let content = document.querySelector("#content");
|
|
|
|
// Scroll down so that #content is the first element in the viewport
|
|
scroller.scrollTop = 100;
|
|
|
|
// Change the height of #before to trigger a scroll adjustment. This ensures
|
|
// that #content was selected as a scroll anchor
|
|
before.style.height = "100px";
|
|
assert_equals(scroller.scrollTop, 150);
|
|
|
|
// Now set 'overflow-anchor: none' on #content. This should invalidate the
|
|
// scroll anchor, and #scroller should recalculate its anchor. There are no
|
|
// other valid anchors in the viewport, so there should be no anchor.
|
|
content.className = 'no';
|
|
|
|
// Change the height of #before and make sure we don't adjust. This ensures
|
|
// that #content was not selected as a scroll anchor
|
|
before.style.height = "150px";
|
|
assert_equals(scroller.scrollTop, 150);
|
|
}, "Dynamically styling 'overflow-anchor: none' on the anchor node should prevent scroll anchoring");
|
|
|
|
</script>
|