Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/reftests/scrolling/reftest.list
<!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 Firefox.↩
// 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>↩