<!DOCTYPE html>
<script src="resources/composited-scroll.js"></script>
<style>
.composited {
  transform: translateZ(0);
}
.scroller {
  width: 300px;
  height: 300px;
  overflow: scroll;
}
.scroller > div {
  height: 1000px;
  width: 1000px;
  background-color: green;
}
</style>

<div id='scroller' class='composited scroller' style='pointer-events: none;'>
  <div>It should be possible to scroll this div.</div>
</div>

<script src='../../resources/js-test.js'></script>
<script src='../../resources/run-after-layout-and-paint.js'></script>

<script type='text/javascript'>
jsTestIsAsync = true;
description('Verifies that toggling pointer-events correctly updates scrolling ' +
            'layers in compositor.');

if (window.internals)
  internals.settings.setPreferCompositingToLCDTextEnabled(true);

onload = function() {
  documentLayerTree = JSON.parse(window.internals.layerTreeAsText(document));
  shouldBe('isUsingCompositedScrolling(documentLayerTree)', 'false');

  // removing 'pointer-events: none' should cause composited scrolling
  document.getElementById('scroller').style.pointerEvents = '';
  runAfterLayoutAndPaint(function() {
    documentLayerTree = JSON.parse(window.internals.layerTreeAsText(document));
    shouldBe('isUsingCompositedScrolling(documentLayerTree)', 'true');
    finishJSTest();
  });
};
</script>