mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-26 03:35:33 +00:00
8ece268559
MozReview-Commit-ID: 4Uut8OAmCAd --HG-- extra : rebase_source : 6b32f018f671ce0028dc558fdecc43c41756e1fa
52 lines
1.3 KiB
HTML
52 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" reftest-async-scroll>
|
|
<meta charset="utf-8">
|
|
<title>Make sure the scrolled layer is opaque even if the scrolled area is fractional</title>
|
|
|
|
<style>
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
.scrollbox {
|
|
margin: 50px;
|
|
width: 200px;
|
|
height: 200px;
|
|
overflow: auto;
|
|
|
|
/* Make the background "non-uniform" so that the scrolled layer does not
|
|
* pull up a background color. */
|
|
background: linear-gradient(to bottom, white, transparent);
|
|
}
|
|
|
|
.scrolled-contents {
|
|
height: 300.2px;
|
|
background-color: lime;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.transparent-overlap-of-fractional-edge {
|
|
margin: 0 20px;
|
|
height: 40px;
|
|
/* This element has a box-shadow that overlaps the bottom of the scrolled
|
|
* area. Box shadows do not expand the scrollable area. */
|
|
box-shadow: 0 280px rgba(0, 0, 255, 0.5);
|
|
}
|
|
|
|
</style>
|
|
|
|
<body>
|
|
|
|
<div class="scrollbox"
|
|
reftest-displayport-x="0" reftest-displayport-y="0"
|
|
reftest-displayport-w="200" reftest-displayport-h="300.2"
|
|
reftest-async-scroll-x="0" reftest-async-scroll-y="0">
|
|
<div class="scrolled-contents">
|
|
<div class="transparent-overlap-of-fractional-edge reftest-opaque-layer">
|
|
<!-- This element has the magic "reftest-opaque-layer" class which
|
|
constitutes the actual test here. -->
|
|
</div>
|
|
</div>
|
|
</div>
|