javascript/atoms/test/clientrect_test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>clientrect_test.html</title>
  <link rel="stylesheet" href="/filez/_main/third_party/js/qunit/qunit.css">
  <script src="/filez/_main/third_party/js/qunit/qunit.js"></script>
  <script src="/filez/_main/third_party/js/qunit/qunit_test_runner.js"></script>
  <script src="test_bootstrap.js"></script>
  <script type="text/javascript">
    goog.require('bot');
    goog.require('bot.dom');
    goog.require('bot.locators');
    goog.require('bot.userAgent');
    goog.require('goog.dom');
    goog.require('goog.style');
    goog.require('goog.testing.ExpectedFailures');
    goog.require('goog.userAgent');
  </script>

  <script type="text/javascript">
    function assertClientRect(assert, elem, left, top, width, height) {
      var rect = bot.dom.getClientRect(elem);
      if (left != null) {
        assert.strictEqual(rect.left, left, 'left value incorrect');
      }
      if (top != null) {
        assert.strictEqual(rect.top, top, 'top value incorrect');
      }
      if (width != null) {
        assert.strictEqual(rect.width, width, 'width value incorrect');
      }
      if (height != null) {
        assert.strictEqual(rect.height, height, 'height value incorrect');
      }
    }

    QUnit.test('element with relative position has correct size', function(assert) {
      if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) {
        assert.ok(true, 'Skipping: IE6 does not render this test page properly');
        return;
      }
      var e = document.getElementById('relative');
      assertClientRect(assert, e, null, null, 34, 47);
    });

    QUnit.test('element with absolute position', function(assert) {
      if (goog.userAgent.IE && !bot.userAgent.isProductVersion(7)) {
        assert.ok(true, 'Skipping: IE6 does not render this test page properly');
        return;
      }
      var e = document.getElementById('absolute');
      assertClientRect(assert, e, 20, 125, 34, 47);
    });

    QUnit.test('map has client rect of image', function(assert) {
      var e = document.getElementById('map');
      assertClientRect(assert, e, 300, 25, 200, 100);
    });

    QUnit.test('area with default shape', function(assert) {
      var expect = new goog.testing.ExpectedFailures();
      expect.expectFailureFor(goog.userAgent.IE || goog.userAgent.EDGE,
          "IE and Edge don't support shape=default");

      expect.run(function() {
        var e = document.getElementById('default');
        assertClientRect(assert, e, 300, 25, 200, 100);
      });
    });

    QUnit.test('area with rect shape', function(assert) {
      var e = document.getElementById('rect');
      assertClientRect(assert, e, 310, 40, 10, 20);
    });

    QUnit.test('area with circle shape', function(assert) {
      var e = document.getElementById('circle');
      assertClientRect(assert, e, 315, 50, 10, 10);
    });

    QUnit.test('area with poly shape', function(assert) {
      var e = document.getElementById('poly');
      assertClientRect(assert, e, 330, 85, 45, 30);
    });

    QUnit.test('div with display inline has positive size', function(assert) {
      var e = document.getElementById('div-display-inline');
      var clientRect = bot.dom.getClientRect(e);
      assert.ok(clientRect.width > 0);
      assert.ok(clientRect.height > 0);
    });

    QUnit.test('orphan element', function(assert) {
      var e = document.createElement('DIV');
      assertClientRect(assert, e, 0, 0, 0, 0);
    });

    QUnit.test('css transforms', function(assert) {
      if (goog.userAgent.IE && !goog.userAgent.isVersionOrHigher(9)) {
        assert.ok(true, 'Skipping: IE < 9 does not support CSS transforms');
        return;
      }

      var e = document.getElementById('rotate');
      goog.style.setSize(e, 200, 300);
      var clientRect = bot.dom.getClientRect(e);
      assert.ok(Math.abs(300 - clientRect.width) <= 1);
      assert.ok(Math.abs(200 - clientRect.height) <= 1);

      var e = document.getElementById('rotateTwice');
      goog.style.setSize(e, 200, 300);
      clientRect = bot.dom.getClientRect(e);
      assert.ok(Math.abs(200 - clientRect.width) <= 2);
      assert.ok(Math.abs(300 - clientRect.height) <= 2);

      var e = document.getElementById('scale');
      goog.style.setSize(e, 200, 300);
      clientRect = bot.dom.getClientRect(e);
      assert.ok(Math.abs(400 - clientRect.width) <= 1);
      assert.ok(Math.abs(900 - clientRect.height) <= 1);

      var e = document.getElementById('translate');
      goog.style.setPosition(e, 100, 200);
      goog.style.setSize(e, 200, 300);
      clientRect = bot.dom.getClientRect(e);
      assert.strictEqual(clientRect.left, 110);
      assert.strictEqual(clientRect.top, 220);
      assert.strictEqual(clientRect.width, 200);
      assert.strictEqual(clientRect.height, 300);
    });
  </script>
  <style>
    #rotate, #rotateTwice {
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
    }
    #scale {
       transform: scale(2, 3);
      -webkit-transform: scale(2, 3);
      -ms-transform: scale(2, 3);
      -o-transform: scale(2, 3);
      -moz-transform: scale(2, 3);
    }
    #translate {
       position: fixed;
       transform: translate(10px, 20px);
      -webkit-transform: translate(10px, 20px);
      -ms-transform: translate(10px, 20px);
      -o-transform: translate(10px, 20px);
      -moz-transform: translate(10px, 20px);
    }
  </style>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div id="relative" style="width: 34px; height: 47px;">
  relative
</div>
<div id="absolute" style="position: absolute; left: 20px; top: 125px; width: 34px; height: 47px;">
  absolute
</div>
<img usemap="#map" src="testdata/map.png"
     style="position: absolute; left: 300px; top: 25px; width: 200px; height: 100px; border: 0">
<map id="map" name="map">
  <area id="default" shape="default">
  <area id="rect" shape="rect" coords="10, 15, 20, 35">
  <area id="circle" shape="circle" coords="20, 30, 5">
  <area id="poly" shape="poly" coords="50, 60, 75, 80, 30, 90">
</map>
<div id="div-display-inline" style="display:inline;">
  <div>I have positive size</div>
</div>
<div id="rotate">
  <div id="rotateTwice" class="rotate"></div>
</div>
<div id="scale"></div>
<div id="translate"></div>
</body>
</html>