<!DOCTYPE html>
<style>
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  body, html {
    width: 100%;
    height: 100%;
  }

  body {
    margin: 0px;
  }

  #rootscroller {
    width: 100%;
    height: 100%;
    overflow: auto;
    will-change: transform;
    background-image:linear-gradient(0deg, transparent 50%, #0a0 50%),
                     linear-gradient(90deg, #a00 50%, #0a0 50%);
    background-size:75px 75px,75px 75px;
    background-position:0 0, 0 25px;
  }

  #parent {
    width: 100%;
    height: 100%;
  }

  .spacer {
    margin: 50px;
    width: 20px;
    height: 50%;
    background-color: blue;
  }
</style>

<!--The root scroller and its child are colorful. The test applies a filter to
root scroller's parent. It passes if the output is entirely sepia colored.-->
<div id="parent">
  <div id="rootscroller">
    <div class="spacer">
    </div>
  </div>
</div>

<script>
  window.onload = function() {
    var parent = document.querySelector('#parent');
    var rootscroller = document.querySelector('#rootscroller');

    document.rootScroller = rootscroller;
    parent.style.filter = "sepia(100)";
  }

</script>