root-scroller-apply-filter-to-parent.html

<!DOCTYPE html>
<script>
if (window.internals)
  internals.runtimeFlags.implicitRootScrollerEnabled = true;
</script>
<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: 150%;
    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');

    if (window.internals && rootscroller == internals.effectiveRootScroller(document)) {
      parent.style.filter = "sepia(100)";
    } else {
      parent.innerHTML = "FAIL: #rootscroller is expected to be the effective rootScroller";
    }
  }
</script>
chromium/third_party/blink/web_tests/rootscroller/root-scroller-apply-filter-to-parent.html
