157 lines
4.8 KiB
HTML
157 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait" reftest-zoom="1.2">
|
|
<meta charset="utf-8">
|
|
<title>Snapped rendering of scrolled contents, with a 120% zoom applied</title>
|
|
|
|
<!-- This file is identical to snapped-scrolled-content-1.html, except that
|
|
all the layout sizes have been divided by 1.2 so that, once the 120%
|
|
zoom is applied, it looks identical to snapped-scrolled-content-1.html. -->
|
|
|
|
<style>
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 50px;
|
|
}
|
|
|
|
#scrollArea {
|
|
width: 300px;
|
|
overflow: auto;
|
|
scrollbar-width: none;
|
|
background: red;
|
|
outline: 1px solid black;
|
|
}
|
|
|
|
#scrolledContent {
|
|
position: relative;
|
|
background: white;
|
|
}
|
|
|
|
#line {
|
|
height: 1px;
|
|
background-color: black;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
#boxWrapper {
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
#boxWrapper > div {
|
|
width: 50px;
|
|
height: 50px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
#box1 {
|
|
margin-top: -0.25px;
|
|
border: 1px solid red;
|
|
}
|
|
|
|
#box2 {
|
|
border: 1px solid green;
|
|
}
|
|
|
|
#box3 {
|
|
margin-top: 0.25px;
|
|
border: 1px solid blue;
|
|
}
|
|
|
|
#scrollIntoViewTarget {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 0;
|
|
}
|
|
|
|
</style>
|
|
|
|
<div id="scrollArea">
|
|
<div id="scrolledContent">
|
|
<div id="topSpacer"></div>
|
|
<div id="line"></div>
|
|
<div id="boxWrapper">
|
|
<div id="box1"></div>
|
|
<div id="box2"></div>
|
|
<div id="box3"></div>
|
|
</div>
|
|
<div id="scrollIntoViewTarget"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
function getFloatQueryParams(defaultValues) {
|
|
const result = Object.assign({}, defaultValues);
|
|
const searchParams = new URLSearchParams(location.search);
|
|
for (const [key, value] of searchParams) {
|
|
result[key] = parseFloat(value);
|
|
}
|
|
return result;
|
|
}
|
|
|
|
const params = getFloatQueryParams({
|
|
top: 0,
|
|
topSpace: 80,
|
|
outerBottom: 160,
|
|
innerBottom: 200,
|
|
scrollIntoViewPos: null,
|
|
scrollTop: null,
|
|
});
|
|
|
|
const scrollArea = document.getElementById("scrollArea");
|
|
const scrolledContent = document.getElementById("scrolledContent");
|
|
const topSpacer = document.getElementById("topSpacer");
|
|
const scrollIntoViewTarget = document.getElementById("scrollIntoViewTarget");
|
|
|
|
scrollArea.style.marginTop = params.top + "px";
|
|
topSpacer.style.height = (params.topSpace - params.top) + "px";
|
|
scrollArea.style.height = (params.outerBottom - params.top) + "px";
|
|
scrolledContent.style.height = (params.innerBottom - params.top) + "px";
|
|
|
|
// Make sure the scroll frame has a display port.
|
|
scrollArea.scrollTop = 1;
|
|
scrollArea.scrollTop = 2;
|
|
scrollArea.scrollTop = 0;
|
|
|
|
function performScroll() {
|
|
if (params.scrollIntoViewPos !== null) {
|
|
// Scroll using `scrollIntoView`.
|
|
// At the time this test was written (2024-09-05), this way of calling scrollIntoView
|
|
// causes a ScrollTo call which doesn't allow any adjustment of the target scroll
|
|
// position for pixel alignment. This exercises "unsnapped" scrolling even if
|
|
// layout.scroll.disable-pixel-alignment is false. It also lets you scroll to
|
|
// fractional CSS positions, unlike scrollTop or scrollTo().
|
|
const scrollIntoViewTarget = document.getElementById("scrollIntoViewTarget");
|
|
scrollIntoViewTarget.style.top = params.scrollIntoViewPos + "px";
|
|
scrollIntoViewTarget.style.height = (params.outerBottom - params.top) + "px";
|
|
scrollIntoViewTarget.scrollIntoView();
|
|
} else if (params.scrollTop !== null) {
|
|
// Scroll to params.scrollTop using the scrollTop property.
|
|
// At the time this test was written (2024-09-05), this property only accepts integers in IceCat.
|
|
// Since this test runs with a 1.2x zoom applied, the integer CSS pixel scroll
|
|
// position will cause a scrollTop * 1.2 device pixel offset of the contents.
|
|
// At the time this test was written, if layout.scroll.disable-pixel-alignment
|
|
// is false, Gecko will try to make it so that this device pixel offset is an
|
|
// integer number.
|
|
// For example, when setting scrollTop to 4, which would correspond to a device
|
|
// pixel offset of 4.8 device pixels, Gecko will instead set the internal offset
|
|
// to 4.16666667 CSS pixels, which corresponds to an integer offset of 5 device
|
|
// pixels. This is valid because, even if the true internal offset is 4.16666667
|
|
// CSS pixels, querying scrollTop will return the integer value 4, which matches
|
|
// the value that was set.
|
|
// In the future, scrollTop should accept and return floating point values, and
|
|
// the layout offset should match what was set. However, by that time, hopefully
|
|
// rendering will have changed such that the reftests which use this file still
|
|
// pass.
|
|
scrollArea.scrollTop = params.scrollTop;
|
|
}
|
|
|
|
document.documentElement.removeAttribute('class');
|
|
}
|
|
|
|
// Perform the scroll once the reftest-zoom has been applied.
|
|
document.addEventListener("MozReftestInvalidate", performScroll);
|
|
|
|
</script>
|