2012-09-24 08:38:16 +04:00
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Test bug 791616</title>
|
2019-04-16 06:50:44 +03:00
|
|
|
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
|
|
|
<script src="/tests/SimpleTest/EventUtils.js"></script>
|
2012-09-24 08:38:16 +04:00
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
|
|
|
|
|
<style>
|
|
|
|
|
#t {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 200px;
|
|
|
|
|
top: 100px;
|
Bug 1012752 - Snap scrolled area to layer pixels. r=tnikkel
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
2016-08-05 06:51:58 +03:00
|
|
|
font: 14px/1.3em "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
|
2012-09-24 08:38:16 +04:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<p id="display"></p>
|
|
|
|
|
<div id="t" contenteditable>
|
|
|
|
|
<div>66666666666666</div>
|
|
|
|
|
<div id="target">777777777777777777777777777777777777777</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<pre id="test">
|
|
|
|
|
<script class="testbody">
|
|
|
|
|
var t = document.getElementById("t");
|
|
|
|
|
var target = document.getElementById("target");
|
|
|
|
|
var sel = window.getSelection();
|
|
|
|
|
var smoothScrollPref = "general.smoothScroll";
|
|
|
|
|
|
|
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
|
t.scrollTop = 0;
|
|
|
|
|
var targetY = target.getBoundingClientRect().top;
|
|
|
|
|
|
|
|
|
|
SimpleTest.waitForFocus(function() {
|
2015-03-03 16:46:35 +03:00
|
|
|
SpecialPowers.pushPrefEnv({"set":[[smoothScrollPref, false]]}, runTest);
|
|
|
|
|
});
|
|
|
|
|
function runTest() {
|
|
|
|
|
is(target.getBoundingClientRect().top, targetY, "Target should not have scrolled due to waitForFocus");
|
|
|
|
|
t.focus();
|
|
|
|
|
is(target.getBoundingClientRect().top, targetY, "Target should not have scrolled due to focus change");
|
2012-09-24 08:38:16 +04:00
|
|
|
|
2015-03-03 16:46:35 +03:00
|
|
|
// Move the caret to scroll it into view
|
|
|
|
|
sel.collapse(target.firstChild, 2);
|
2018-02-14 22:15:39 +03:00
|
|
|
synthesizeKey("KEY_ArrowLeft");
|
2012-09-24 08:38:16 +04:00
|
|
|
|
2015-03-03 16:46:35 +03:00
|
|
|
// Delay until next repaint in case stuff is asynchronous. Also
|
|
|
|
|
// take a trip through the event loop.
|
|
|
|
|
setTimeout(function() {
|
2015-07-14 22:28:58 +03:00
|
|
|
window.requestAnimationFrame(function() {
|
2015-03-03 16:46:35 +03:00
|
|
|
is(sel.anchorNode, target.firstChild, "Should have selected 'target' text node");
|
|
|
|
|
is(sel.anchorOffset, 1, "Selection should have moved left one character");
|
|
|
|
|
// We should not have needed to scroll the caret into view
|
|
|
|
|
is(target.getBoundingClientRect().top, targetY, "Target should not have scrolled");
|
|
|
|
|
SimpleTest.finish();
|
|
|
|
|
});
|
|
|
|
|
// Make sure repainting actually happens.
|
|
|
|
|
target.style.background = "yellow";
|
2012-09-24 08:38:16 +04:00
|
|
|
});
|
2015-03-03 16:46:35 +03:00
|
|
|
}
|
2012-09-24 08:38:16 +04:00
|
|
|
</script>
|
|
|
|
|
</pre>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
