<!DOCTYPE html>
<!--
 | Test CSSOM View extensions to the Element Interface, verifying that
 | getBoundingClientRect() works properly with transforms.
 -->
<html>
<head>
  <style>
    body {
      background-color: #FFFFFF;
      margin: 0px;
      font-family: Roboto;
      font-size: 20px;
    }
    .absolute_container {
      position: absolute;
      top: 20px;
      left: 20px;
    }
    .absolutely-positioned-1 {
      position: absolute;
      transform: translate(20px, 10px);
      margin: 3px;
      border: 5px solid #000000;
      padding: 7px;
      top: 120px;
      left: 120px;
      width: 200px;
      height: 200px;
    }
    .absolutely-positioned-2 {
      position: absolute;
      margin: 3px;
      border: 5px solid #800000;
      padding: 7px;
      width: 160px;
      height: 160px;
    }
    .absolutely-positioned-3 {
      position: absolute;
      transform: scale(0.5, 2.0);
      transform-origin: top left;
      margin: 3px;
      border: 5px solid #008000;
      padding: 7px;
      width: 250px;
      height: 50px;
    }
    .unpositioned-1 {
      margin: 4px;
      border: 6px solid #000080;
      padding: 10px;
      width: 200px;
      height: 20px;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    function verifyGetBoundingClientRectAttributesAreCorrect(id, x, y, w, h) {
      var element = document.getElementById(id);
      if (!element) {
        document.body.style.backgroundColor = "#F44336";
      } else {
        bounding_rect = element.getBoundingClientRect();
        if (bounding_rect["left"] != x) {
          console.log("getElementById(\'" + id +
                      "\').getBoundingClientRect()." + "left" + " == " +
                      bounding_rect["left"] + " != " + x);
          element.style.backgroundColor = "#F44336";
        }

        if (bounding_rect["top"] != y) {
          console.log("getElementById(\'" + id +
                      "\').getBoundingClientRect()." + "top" + " == " +
                      bounding_rect["top"] + " != " + y);
          element.style.backgroundColor = "#F44336";
        }

        bounding_rect = element.getBoundingClientRect();
        if (bounding_rect["width"] != w) {
          console.log("getElementById(\'" + id +
                      "\').getBoundingClientRect()." + "width" + " == " +
                      bounding_rect["width"] + " != " + w);
          element.style.backgroundColor = "#F44336";
        }

        bounding_rect = element.getBoundingClientRect();
        if (bounding_rect["height"] != h) {
          console.log("getElementById(\'" + id +
                      "\').getBoundingClientRect()." + "height" + " == " +
                      bounding_rect["height"] + " != " + h);
          element.style.backgroundColor = "#F44336";
        }
      }
    }

    function runTest() {
      verifyGetBoundingClientRectAttributesAreCorrect(
          "div-1", 163, 153, 224, 224);
      verifyGetBoundingClientRectAttributesAreCorrect(
          "div-2", 178, 168, 184, 184);
      verifyGetBoundingClientRectAttributesAreCorrect(
          "div-3", 193, 183, 137, 148);
      verifyGetBoundingClientRectAttributesAreCorrect(
          "div-4", 201, 215, 116, 104);
    }

    window.onload = function() {
      runTest();

      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    }
  </script>
</head>
<body>
  <div class="absolute_container">
    <div id="div-1" class="absolutely-positioned-1">
      <div id="div-2" class="absolutely-positioned-2">
        <div id="div-3" class="absolutely-positioned-3">
          <div id="div-4" class="unpositioned-1">
            <span>Yes</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>