mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-06 03:09:18 +02:00
bc6c7c9f34
Instead of using overflow:hidden on the body to hide the scrollbar, this patch sets scrollbar-width:none on the html element. In some cases overflow:hidden is set on non-root scrollers (i.e. div elements); in those cases it is replaced by overflow:scroll;scrollbar-width:none to get an equivalent effect. One test had a pre-existing visible scrollbar on a nested scrollframe, but which started failing with a small fuzz difference. I left the scrollbar as-is and added an annotation to the reftest.list file. Note that this only updates the tests that use reftest-async-scroll as those were the cases that were easily detectable, and causing problems with the apz.allow_zooming=true pref. Differential Revision: https://phabricator.services.mozilla.com/D82032
50 lines
1.1 KiB
HTML
50 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html reftest-async-scroll>
|
|
<!-- In this test, the div |fixed| is fixed with respect to the
|
|
page's root scroll frame, but there's also a subframe |scrollbox|
|
|
which is async-scrolled and which generates a container layer
|
|
(because of the opacity), so that its async transform is on an
|
|
ancestor layer of |fixed|'s layer. We are testing that this
|
|
async transform is correctly unapplied to keep |fixed| fixed. -->
|
|
<style>
|
|
|
|
body {
|
|
height: 10000px;
|
|
}
|
|
|
|
.outer-opacity {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.scrollbox {
|
|
border: 1px solid black;
|
|
width: 200px;
|
|
height: 400px;
|
|
overflow: scroll;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.inner-opacity {
|
|
height: 1000px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.fixed {
|
|
background: blue;
|
|
width: 100px;
|
|
height: 100px;
|
|
position: fixed;
|
|
}
|
|
|
|
</style>
|
|
<div class="outer-opacity">
|
|
<div class="scrollbox"
|
|
reftest-displayport-x="0" reftest-displayport-y="0"
|
|
reftest-displayport-w="200" reftest-displayport-h="1000"
|
|
reftest-async-scroll-x="0" reftest-async-scroll-y="50">
|
|
<div class="inner-opacity">
|
|
<div class="fixed"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</html>
|