DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (409f3966645a)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82
<!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>