nested-vertical-rl-overflow-expected.html

<!DOCTYPE html>
<style>
.container {
  width: 300px;
  height: 120px;
  border: 2px solid green;
  padding: 2px;
  writing-mode: vertical-rl;
  overflow: scroll;
  position: relative;
}
.container .container {
  width: 150px;
  height: 100px;
}
.bloat {
  width: 1000px;
  height: 1000px;
}
.content {
  width: 50px;
  height: 80px;
  border: 1px solid blue;
  background: lightgray;
}
</style>
Neither container is composited:
<div class="container">
  <div class="bloat">
    <div class="content">Non-composited</div>
    <div id="c1" class="content">Composited</div>
    <div class="container">
      <div class="bloat">
        <div class="content">Non-composited</div>
        <div id="c2" class="content">Composited</div>
      </div>
    </div>
  </div>
</div>
Only the outer container is composited:
<div class="container">
  <div class="bloat">
    <div class="content">Non-composited</div>
    <div class="content">Composited</div>
    <div class="container">
      <div class="bloat">
        <div class="content">Non-composited</div>
        <div class="content">Composited</div>
      </div>
    </div>
  </div>
</div>
Only the inner container is composited:
<div class="container">
  <div class="bloat">
    <div class="content">Non-composited</div>
    <div class="content">Composited</div>
    <div class="container">
      <div class="bloat">
        <div class="content">Non-composited</div>
        <div class="content">Composited</div>
      </div>
    </div>
  </div>
</div>
Both containers are composited:
<div class="container">
  <div class="bloat">
    <div class="content">Non-composited</div>
    <div class="content">Composited</div>
    <div class="container">
      <div class="bloat">
        <div class="content">Non-composited</div>
        <div class="content">Composited</div>
      </div>
    </div>
  </div>
</div>
chromium/third_party/blink/web_tests/compositing/overflow/nested-vertical-rl-overflow-expected.html
