зеркало из https://github.com/mozilla/gecko-dev.git
83 строки
1.6 KiB
HTML
83 строки
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<meta charset="utf-8">
|
|
<title>The two items in the scroll box should share a layer, despite all the other stuff that's going on around them</title>
|
|
|
|
<style>
|
|
|
|
.content {
|
|
box-sizing: border-box;
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid blue;
|
|
background: white;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding: 20px;
|
|
height: 3000px;
|
|
}
|
|
|
|
.opacity {
|
|
opacity: 0.9;
|
|
width: 200px;
|
|
height: 200px;
|
|
background-color: yellow;
|
|
will-change: opacity;
|
|
}
|
|
|
|
.overlap {
|
|
margin-top: -100px;
|
|
}
|
|
|
|
.scrollable {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 240px;
|
|
width: 400px;
|
|
height: 400px;
|
|
border: 1px solid black;
|
|
overflow: auto;
|
|
}
|
|
|
|
.scrollarea {
|
|
height: 800px;
|
|
padding: 40px;
|
|
}
|
|
|
|
.low-z, .mid-z, .high-z {
|
|
position: relative;
|
|
}
|
|
|
|
.low-z { z-index: 1; }
|
|
.mid-z { z-index: 2; }
|
|
.high-z { z-index: 3; }
|
|
|
|
</style>
|
|
|
|
<div class="content" reftest-assigned-layer="page-background"></div>
|
|
<div class="overlap opacity"></div>
|
|
<div class="overlap mid-z content" reftest-assigned-layer="on-top-of-opacity">
|
|
<!--
|
|
This item cannot merge into the page background layer because there's an
|
|
active container layer for the opacity in between.
|
|
-->
|
|
</div>
|
|
|
|
<div class="scrollable">
|
|
<div class="scrollarea">
|
|
<div class="low-z content" reftest-assigned-layer="scrolled-content"></div>
|
|
<div class="high-z overlap content" reftest-assigned-layer="scrolled-content"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
|
|
var scrollable = document.querySelector(".scrollable");
|
|
|
|
// Make .scrollable start out with active scrolling.
|
|
scrollable.scrollTop = 0;
|
|
scrollable.scrollTop = 20;
|
|
|
|
</script>
|