mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-31 14:15:30 +00:00
ebb461c874
We want the maximum scroll position to be aligned with layer pixels. That way we don't have to re-rasterize the scrolled contents once scrolling hits the edge of the scrollable area. Here's how we determine the maximum scroll position: We get the scroll port rect, snapped to layer pixels. Then we get the scrolled rect and also snap that to layer pixels. The maximum scroll position is set to the difference between right/bottom edges of these rectangles. Now the scrollable area is computed by adding this maximum scroll position to the unsnapped scroll port size. The underlying idea here is: Pretend we have overflow:visible so that the scrolled contents start at (0, 0) relative to the scroll port and spill over the scroll port edges. When these contents are rendered, their rendering is snapped to layer pixels. We want those exact pixels to be accessible by scrolling. This way of computing the snapped scrollable area ensures that, if you scroll to the maximum scroll position, the right/bottom edges of the rendered scrolled contents line up exactly with the right/bottom edges of the scroll port. The scrolled contents are neither cut off nor are they moved too far. (This is something that no other browser engine gets completely right, see the testcase in bug 1012752.) There are also a few disadvantages to this solution. We snap to layer pixels, and the size of a layer pixel can depend on the zoom level, the document resolution, the current screen's scale factor, and CSS transforms. The snap origin is the position of the reference frame. So a change to any of these things can influence the scrollable area and the maximum scroll position. This patch does not make us adjust the current scroll position in the event that the maximum scroll position changes such that the current scroll position would be out of range, unless there's a reflow of the scrolled contents. This means that we can sometimes render a slightly inconsistent state where the current scroll position exceeds the maximum scroll position. We can fix this once it turns out to be a problem; I doubt that it will be a problem because none of the other browsers seems to prevent this problem either. The size of the scrollable area is exposed through the DOM properties scrollWidth and scrollHeight. At the moment, these are integer properties, so their value is rounded to the nearest CSS pixel. Before this patch, the returned value would always be within 0.5 CSS pixels of the value that layout computed for the content's scrollable overflow based on the CSS styles of the contents. Now that scrollWidth and scrollHeight also depend on pixel snapping, their values can deviate by up to one layer pixel from what the page might expect based on the styles of the contents. This change requires a few changes to existing tests. The fact that scrollWidth and scrollHeight can change based on the position of the scrollable element and the zoom level / resolution may surprise some web pages. However, this also seems to happen in Edge. Edge seems to always round scrollWidth and scrollHeight upwards, possibly to their equivalent of layout device pixels. MozReview-Commit-ID: 3LFV7Lio4tG --HG-- extra : rebase_source : 3e4e0b60493397e61283aa1d7fd93d7c197dec29 extra : source : d43c2d5e87f31ff47d7f3ada66c3f5f27cef84a9
60 lines
1.2 KiB
HTML
60 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" reftest-async-scroll>
|
|
<meta charset="utf-8">
|
|
<title>Make sure the scrolled layer is not invalidated when you scroll all the way to the bottom</title>
|
|
|
|
<style>
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.scrollbox {
|
|
margin: 50px;
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.scrolled-contents {
|
|
height: 150.2px;
|
|
padding-top: 150px;
|
|
}
|
|
|
|
.reftest-no-paint {
|
|
margin: 0 20px;
|
|
border: 1px solid blue;
|
|
height: 25px;
|
|
}
|
|
|
|
</style>
|
|
|
|
<body>
|
|
|
|
<div class="scrollbox"
|
|
reftest-displayport-x="0" reftest-displayport-y="0"
|
|
reftest-displayport-w="200" reftest-displayport-h="200"
|
|
reftest-async-scroll-x="0" reftest-async-scroll-y="0">
|
|
<div class="scrolled-contents">
|
|
<div class="reftest-no-paint">
|
|
<!-- This element has the magic "reftest-no-paint" class which
|
|
constitutes the actual test here. -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
var scrollbox = document.querySelector(".scrollbox");
|
|
scrollbox.scrollTop = 2;
|
|
scrollbox.scrollTop = 1;
|
|
scrollbox.scrollTop = 0;
|
|
|
|
function doTest() {
|
|
scrollbox.scrollTop = 999;
|
|
document.documentElement.removeAttribute("class");
|
|
}
|
|
document.addEventListener("MozReftestInvalidate", doTest);
|
|
|
|
</script>
|