<!DOCTYPE html>
<style>
  iframe {
    position: absolute;
    left: 200px;
    top: 200px;
    height: 200px;
    width: 200px;
    padding: 10px;
    border: none;
    transform: scale(2);
  }
  .spacer {
    height: 2000px;
  }
</style>

<iframe srcdoc="
  <!DOCTYPE html>
  <style>
    iframe {
      height: 120px;
      width:120px;
      padding:10px;
      border:none;
    }
  </style>
  <iframe srcdoc=&quot;
    <!DOCTYPE html>
    <body style='width:1000px; height:1000px;'>
      <p style='font-size: 6px'>Should be covered by a green overlay.</p>
    </body>&quot;>
  </iframe>"></iframe>

<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>
  window.jsTestIsAsync = true;
  description('This test ensures non-fast scrollable areas are calculated ' +
              'correctly when a CSS scale transformation is applied.');

  onload = function() {
    runAfterLayoutAndPaint(function(){
      nonFastScrollableRects = internals.nonFastScrollableRects(document);
      shouldBe('nonFastScrollableRects.length', '1');
      shouldBeEqualToString('rectToString(nonFastScrollableRects[0])', '[146, 146, 240, 240]');

      drawNonFastScrollableRegionOverlays();

      finishJSTest();
    });
  };
</script>