mirror of
https://github.com/servo/servo.git
synced 2025-06-29 11:33:39 +01:00
82 lines
1.9 KiB
HTML
82 lines
1.9 KiB
HTML
<!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>
|