<!DOCTYPE html>
<html>
<!--
 | Test CSSOM View extensions to the Element Interface, verifying that
 | getBoundingClientRect() works properly with scrollLeft and scrollTop.
 -->
<head>
  <style>
    body {
      font-family: Roboto;
      font-size: 16px;
      background-color: #FF0000;
      margin: 0px;
    }

    .overflow-scroll {
      outline: none;
      width: 150px;
      height: 100px;
      overflow: scroll;
      position: relative;
      background-color: #000000;
    }

    .content {
      width: 50px;
      height: 50px;
      position: absolute;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    function verifyGetBoundingClientRectAttributesAreCorrect(id, x, y, w, h) {
      var error = "";
      var element = document.getElementById(id);
      if (!element) {
        error += "\nElement " + id + " not found";
        return error;
      }

      var rect = element.getBoundingClientRect();
      if (rect["left"] != x) {
        error += "\ngetElementById('" + id + "').getBoundingClientRect()" +
                 ".left mismatch";
        error += "\n  Actual: " + rect["left"];
        error += "\nExpected: " + x;
      }
      if (rect["top"] != y) {
        error += "\ngetElementById('" + id + "').getBoundingClientRect()" +
                 ".top mismatch";
        error += "\n  Actual: " + rect["top"];
        error += "\nExpected: " + y;
      }
      if (rect["width"] != w) {
        error += "\ngetElementById('" + id + "').getBoundingClientRect()" +
                 ".width mismatch";
        error += "\n  Actual: " + rect["width"];
        error += "\nExpected: " + w;
      }
      if (rect["height"] != h) {
        error += "\ngetElementById('" + id + "').getBoundingClientRect()" +
                 ".height mismatch";
        error += "\n  Actual: " + rect["height"];
        error += "\nExpected: " + h;
      }
      return error;
    }

    window.onload = function() {
      document.getElementById("outer-scroll").scrollTop = 25;
      document.getElementById("outer-scroll").scrollLeft = 25;
      document.getElementById("inner-scroll").scrollTop = 10;
      document.getElementById("inner-scroll").scrollLeft = 50;
      var error1 = verifyGetBoundingClientRectAttributesAreCorrect(
          "target1", 0, -25, 50, 50);
      var error2 = verifyGetBoundingClientRectAttributesAreCorrect(
          "target2", 100, 75, 50, 50);
      if (error1 || error2) {
        console.log("FAIL" + error1 + error2);
      } else {
        document.body.style.backgroundColor = "rgba(0,0,0,0)";
      }
      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    }
  </script>
</head>
<body>
  <div id="outer-scroll" class="overflow-scroll">
    <div class="overflow-scroll">
      <div id="target1" class="content"
           style="background-color: #FF0000; transform: translateX(0px)"></div>
      <div class="content"
           style="background-color: #00FF00; transform: translateX(75px)"></div>
      <div class="content"
           style="background-color: #0000FF; transform: translateX(150px)"></div>
    </div>
    <div id="inner-scroll" class="overflow-scroll">
      <div class="content"
           style="background-color: #FF0000; transform: translateX(0px)"></div>
      <div class="content"
           style="background-color: #00FF00; transform: translateX(75px)"></div>
      <div id="target2" class="content"
           style="background-color: #0000FF; transform: translateX(150px)"></div>
    </div>
  </div>
</body>
</html>