Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; minimum-scale=1.0">
<title>position:fixed display port sizing</title>
<script type="application/javascript" src="apz_test_utils.js"></script>
<script type="application/javascript" src="apz_test_native_event_utils.js"></script>
<script type="application/javascript" src="/tests/SimpleTest/paint_listener.js"></script>
<style>
html, body {
margin: 0;
/* This makes sure the `height: 1000%` on #scrolled actually has an effect. */
height: 100%;
}
#fixed {
position: fixed;
left: 0;
height: 100%;
width: 300px;
background: linear-gradient(135deg, white, black);
}
/* This makes sure we have a layout scroll range. */
#scrolled {
width: 300px;
height: 1000%;
}
</style>
</head>
<body>
<div id="fixed"></div>
<div id="scrolled"></div>
<script>
let utils = SpecialPowers.getDOMWindowUtils(window);
let vv = window.visualViewport;
// Get the displayport of the fixed-position element as of the last paint.
function getCurrentFixedPosDisplayport() {
let data = convertEntries(utils.getContentAPZTestData().additionalData);
let key = "fixedPosDisplayport";
ok(key in data, "should have computed a fixed-pos display port");
return parseRect(data[key]);
}
async function scrollToVisual(targetX, targetY) {
let scrollPromise = new Promise(resolve => {
vv.addEventListener("scroll", resolve, { once: true });
});
utils.scrollToVisual(targetX, targetY, utils.UPDATE_TYPE_MAIN_THREAD,
utils.SCROLL_MODE_INSTANT);
await scrollPromise;
await promiseApzFlushedRepaints();
// Allow up to 1 pixel discrepancy due to floating-point error.
isfuzzy(vv.pageLeft, targetX, 1, "visual-scrolled horizontally as expected");
isfuzzy(vv.pageTop, targetY, 1, "visual-scrolled vertically as expected");
}
// Check that the size and position of the fixed-pos displayport matches
// our expectations.
function checkFixedPosDisplayport() {
let fixedPosDisplayport = getCurrentFixedPosDisplayport();
// First, check check that we don't expand the displayport to the entire layout viewport
// even if we are zoomed in a lot.
ok(fixedPosDisplayport.width < window.innerWidth, "fixed-pos displayport is too wide");
ok(fixedPosDisplayport.height < window.innerHeight, "fixed-pos displayport is too tall");
// Now, check the position. We want it to track the visual scroll position
// relative to the layout viewport (but not relative to the page), since
// fixed-position elements are attached to the layout viewport.
// This is accomplished by checking the fixed-pos display port contains
// the visual viewport rect as expressed relative to the layout viewport.
let vvRect = { x: vv.offsetLeft, // offsets relative to layout viewport
y: vv.offsetTop,
width: vv.width,
height: vv.height };
assertRectContainment(fixedPosDisplayport, "fixed-pos displayport",
vvRect, "visual viewport");
}
async function test() {
// First, check size and position on page load.
checkFixedPosDisplayport();
// Scroll the visual viewport within the layout viewport, without
// scrolling the layout viewport itself, and check the size and
// position again.
await scrollToVisual(vv.width * 3, vv.height * 3);
checkFixedPosDisplayport();
// Finally, scroll the visual viewport farther so as to cause the
// layout viewport to scroll as well, and check the size and position
// once more.
await scrollToVisual(vv.width * 3, vv.height * 30);
checkFixedPosDisplayport();
}
SpecialPowers.getDOMWindowUtils(window).setResolutionAndScaleTo(8.0);
waitUntilApzStable().then(test).then(subtestDone, subtestFailed);
</script>
</body>
</html>