mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-08 19:04:45 +00:00
b14c7c928c
From the CSSOM View spec[1]; The scroll-behavior property of the HTML body element is not propagated to the viewport. The reason why this change fixes the test case in this commit is that we don't have two different scrollable frames for <html> and <body> respectively if we don't propagate scroll-behavior property from <body> to <html> so that we can properly find the `flow root` of sticky position elements. In other words, in the case where both of <html> and <body> have properties that are propagated from <body> but they are different we have two scrollable frames as a candidate of the 'flow root' for the sticky position element in the test case, one is the scrollable frame for <html> and the other is the scrollable frame for <body>. That means that nsLayoutUtils::GetNearestScrollableFrame doesn't return what we want in some places, for example we have a pretty similar issue in case of overscroll-behavior which is bug 1561107. Note that the test position-sticky-root-scroller-with-scroll-behavior.html is almost copy-and-pasted from /css/css-position/position-sticky-root-scroller.html [2] in wpt, the reason why we put the test in /css/cssom-view is that there is a handy function to wait for async scroll completion. [1] https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior [2] https://searchfox.org/mozilla-central/rev/928742d3ea30e0eb4a8622d260041564d81a8468/testing/web-platform/tests/css/css-position/position-sticky-root-scroller.html Differential Revision: https://phabricator.services.mozilla.com/D35739 --HG-- extra : moz-landing-system : lando
56 lines
1.2 KiB
HTML
56 lines
1.2 KiB
HTML
<!DOCTYPE HTML>
|
|
<html class="reftest-wait">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Testcase for bug 1010538, smooth scrolling expected</title>
|
|
<style type="text/css">
|
|
|
|
html,body {
|
|
color: black;
|
|
background-color: white;
|
|
font-size: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
#a_box {
|
|
position: relative;
|
|
left: 10px;
|
|
top: 10px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: blue;
|
|
}
|
|
|
|
#another_box {
|
|
position: relative;
|
|
left: 2000px;
|
|
top: 2000px;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: green;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="a_box"></div>
|
|
<div id="another_box"></div>
|
|
<script>
|
|
function doTest() {
|
|
if (document.location.search != '?ref') {
|
|
window.scrollTo(500, 500);
|
|
window.scrollTo(window.scrollX, window.scrollY);
|
|
}
|
|
document.documentElement.removeAttribute("class");
|
|
}
|
|
window.scrollTo({left: 0, top: 0, behavior: "instant"});
|
|
window.addEventListener("MozReftestInvalidate", doTest);
|
|
</script>
|
|
</body>
|
|
</html>
|