two_scrollable_area.html | Explore in Territory

<!DOCTYPE html>

<style>
.scroller {
  /* Opaque background by default. */
  background: blue;
  /* Stacking context by default. */
  position: relative;
  overflow: scroll;
  z-index: 1;
  width: 200px;
  height: 300px;
}

.transparent {
  opacity: 0.5;
}

.transform {
  transform: scale(0.8);
}

.background-not-opaque {
  background: rgba(255, 0, 0, 0.5);
}

.cant-paint-scrolling-background {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUg), white local
}

.needs-repaint-on-scroll {
  background: linear-gradient(black, white) local, yellow;
  border: 10px dashed black;
}

.border-radius {
  border: 2px solid;
  border-radius: 20px;
}

.clip {
  position: absolute;
  clip: rect(0px,120px,120px,0px);
}

.clip-path {
  clip-path: circle(115px at 20px 20px);
}

.box-shadow {
  box-shadow: 10px 10px 5px #888888;
}

.inset-box-shadow {
  box-shadow: 10px 10px 5px #888888 inset;
}

.composited {
  will-change:transform;
}

.content {
  height: 500px;
}

.non-stacking-context {
  z-index: auto;
}

body {
    height: 2000px;
}
</style>

<div class="scroller" id="scroller1">
  <div class="content" id="content1">Content1</div>
</div>
<div class="scroller" id="scroller2">
  <div class="content" id="content2">Content2</div>
</div>
chromium/third_party/blink/renderer/core/testing/data/two_scrollable_area.html
