﻿<!DOCTYPE html>
<!--
 | Test CSSOM View extensions to the Element Interface, verifying that
 | offsetWidth and offsetHeight are properly calculated with box splitting.
 -->
<html>
<head>
  <style>
    body {
      margin: 0px;
      font-family: Roboto;
      font-size: 40px;
    }
    .absolutely-positioned-1 {
      position: absolute;
      left: 30px;
      top: 20px;
    }
    .absolutely-positioned-2 {
      position: absolute;
      left: 30px;
      top: 120px;
      width: 150px;
    }
  </style>
  <script>
    if (window.testRunner) {
      window.testRunner.waitUntilDone();
    }

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

    function runTest() {
      verifyPropertiesMatchByElementIds("div-1", "span-1", "offsetWidth");
      verifyPropertiesMatchByElementIds("div-2", "span-2", "offsetHeight");
    }

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

      if (window.testRunner) {
        window.testRunner.notifyDone();
      }
    }
  </script>
</head>
<body>
  <div id="div-1" class="absolutely-positioned-1">
    <span id="span-1">Yes, that's written ما اسمك؟ Thanks.</span>
  </div>
  <div id="div-2" class="absolutely-positioned-2">
    <span id="span-2">Yes, it's written like that.</span>
  </div>
</body>
</html>