javascript/atoms/test/clientrect_test.html - external/github.com/SeleniumHQ/selenium - Git at Google

 <!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>
	<!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>