<!DOCTYPE html>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  #nonFastRegion {
    height: 222px;
    width: 222px;
    border: none;
    overflow: scroll;
    -webkit-transform: translateX(0);
  }

  #nonFastRegion > div {
    height: 1000px;
    width: 1000px;
    background: linear-gradient(to bottom, red, white);
  }

  .spacer {
    height: 2000px;
  }
</style>

<div id='nonFastRegion'><div>This should be covered by a green overlay.</div></div>

<p>A single square should be visible covered by a green overlay.</p>
<div id="console"></div>
<div class="spacer"></div>

<script src="../resources/js-test.js"></script>
<script src="../resources/run-after-layout-and-paint.js"></script>
<script src="resources/non-fast-scrollable-region-testing.js"></script>
<script>
  jsTestIsAsync = true;
  // print result lazily to avoid layouts during the test
  setPrintTestResultsLazily();
  description('This test ensures that transforming a non-fast scrollable area ' +
    'correctly updates list of non-fast scrollable rects ' +
    '(See http://crbug.com/417345).');

  onload = function() {
    runAfterLayoutAndPaint(runTests);
  };

  function runTests() {
    nonFastScrollableRects = internals.nonFastScrollableRects(document);
    shouldBe('nonFastScrollableRects.length', '1');
    shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[0, 0, 222, 222]');

    document.body.style.padding = "10px";
    debug("Trigger style update");
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
    debug("Verifying layout hasn't been triggered");
    shouldBe("internals.needsLayoutCount()", "3");

    // Updating transforms hits an optimized layout path which is root cause of
    // http://crbug.com/417345
    debug("Update non-fast element's transform");
    document.getElementById('nonFastRegion').style.webkitTransform = 'translateX(100px)';

    debug("Trigger style update");
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
    debug("Verifying layout still hasn't been triggered");
    shouldBe("internals.needsLayoutCount()", "3");
    debug("Verifying non-fast regions have been updated");
    // Note: querying non-fast regions forces layout, so the expectation
    // reflects the change to body element padding.
    nonFastScrollableRects = internals.nonFastScrollableRects(document);
    shouldBe('nonFastScrollableRects.length', '1');
    shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[110, 10, 222, 222]');

    setTimeout(function() {
      // Add green overlays to help visualize the test
      drawNonFastScrollableRegionOverlays();
      finishJSTest();
    }, 0);
  }
</script>