get_element_location_test.html | Explore in Territory

<!DOCTYPE HTML>
<html>
<head>
<style>
#parent {
  position: absolute;
  background: blue;
  width: 150px;
  height: 150px;
  top: 75px;
  left: 50px;
}

#child {
  position: absolute;
  background: red;
  top: 30px;
  left: 25px;
  width: 100px;
  height: 50px;
}

</style>
</head>
<script src='test.js'></script>
<script src='get_element_location.js'></script>
<script>

function testGetFirstNonZeroWidthHeightRectDefault() {
  var rects = [{id: 1}];
  var rect = getFirstNonZeroWidthHeightRect(rects);
  assertEquals(rect, rects[0]);
}

function testGetFirstNonZeroWidthHeightRectSecond() {
  var rects = [{id: 1, width: 0, height: 0},
               {id: 2, width: 1, height: 1}];
  var rect = getFirstNonZeroWidthHeightRect(rects);
  assertEquals(rect, rects[1]);
}

function testGetFirstNonZeroWidthHeightRectThird() {
  var rects = [{id: 1, width: 0, height: 1},
               {id: 2, width: 1, height: 0},
               {id: 3, width: 1, height: 1}];
  var rect = getFirstNonZeroWidthHeightRect(rects);
  assertEquals(rect, rects[2]);
}

function testElementParentCenterLocation() {
  var parent = document.getElementById('parent');
  var location = getElementLocation(parent, true);
  var x = 50 + 0.5 * 150;
  var y = 75 + 0.5 * 150;
  assertEquals(Math.floor(x), Math.floor(location.x));
  assertEquals(Math.floor(y), Math.floor(location.y));
}

function testElementChildCenterLocation() {
  var child = document.getElementById('child');
  var location = getElementLocation(child, true);
  var x = 75 + 0.5 * 100;
  var y = 105 + 0.5 * 50;
  assertEquals(Math.floor(x), Math.floor(location.x));
  assertEquals(Math.floor(y), Math.floor(location.y));
}

function testElementParentTopLeftLocation() {
  var parent = document.getElementById('parent');
  var location = getElementLocation(parent, false);
  var x = 50;
  var y = 75;
  assertEquals(Math.floor(x), Math.floor(location.x));
  assertEquals(Math.floor(y), Math.floor(location.y));
}

function testElementChildCenterTopLeftLocation() {
  var child = document.getElementById('child');
  var location = getElementLocation(child, false);
  var x = 75;
  var y = 105;
  assertEquals(Math.floor(x), Math.floor(location.x));
  assertEquals(Math.floor(y), Math.floor(location.y));
}

function testElementDetached() {
  var newChild = document.createElement('div');
  try {
    getElementLocation(newChild, false);
    assert(false);
  } catch (e) {
    assertEquals('element is not attached to the page document', e.message);
    assertEquals(10, e.code);
  }
}

</script>
<body>
<h2>position: absolute;</h2>
<p>The Parent element has position: absolute.</p>
<div id="parent">Parent: position: absolute, top: 75px, left: 50px.
  <div id="child">Child: position: absolute, top: 30px, left: 25px.</div>
</div>
</body>
</html>
chromium/chrome/test/chromedriver/js/get_element_location_test.html
