<!DOCTYPE html>
<!--
 | Test CSSOM View extensions to the Element Interface.
 -->
<html>
<head>
  <style>
    body {
      margin: 0px;
      font-family: Roboto;
    }
    .absolutely-positioned {
      position: absolute;
      left: 30px;
      top: 20px;
    }
    .level-1 {
      background-color: #b3e5fc;
      padding: 10px 15px;
    }
    .level-2 {
      background-color: #40c4ff;
      padding: 20px 20px;
    }
    .level-3 {
      background-color: #00b0ff;
      padding: 40px 40px;
    }
    .level-4 {
      background-color: #0091ea;
      height: 50px;
      width: 50px;
    }
    .absolutely-positioned.level-4 {
      background-color: #01579b;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

    // Compare value with document.getElementById(id)[property], and
    // change the element's background color to red if they are not equal.
    function verifyElementPropertyById(id, property, value) {
       var element = document.getElementById(id);
       if (!element) {
         document.body.style.backgroundColor = "#F44336";
       } else
       if (element[property] != value) {
         console.log("getElementById(\'" + id + "\')." + property +
                     " == " + element[property] +
                     " != \'" + value + "\'");
         element.style.backgroundColor = "#F44336";
       }
    }

    function runTest() {
      verifyElementPropertyById("level-1", "clientLeft", 0);
      verifyElementPropertyById("level-1", "clientTop", 0);
      verifyElementPropertyById("level-1", "clientWidth", 200);
      verifyElementPropertyById("level-1", "clientHeight", 190);

      verifyElementPropertyById("level-2", "clientLeft", 0);
      verifyElementPropertyById("level-2", "clientTop", 0);
      verifyElementPropertyById("level-2", "clientWidth", 170);
      verifyElementPropertyById("level-2", "clientHeight", 170);

      verifyElementPropertyById("level-3", "clientLeft", 0);
      verifyElementPropertyById("level-3", "clientTop", 0);
      verifyElementPropertyById("level-3", "clientWidth", 130);
      verifyElementPropertyById("level-3", "clientHeight", 130);

      verifyElementPropertyById("level-4", "clientLeft", 0);
      verifyElementPropertyById("level-4", "clientTop", 0);
      verifyElementPropertyById("level-4", "clientWidth", 50);
      verifyElementPropertyById("level-4", "clientHeight", 50);
    }

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

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