<!DOCTYPE HTML>
<html>
<script src='test.js'></script>
<script src='get_element_region.js'></script>
<script>

function testNotElement() {
  try {
    getElementRegion(document);
    assert(false);
  } catch (error) {
    assertEquals(document + ' is not an element', error.message);
  }
}

function testElementWithFirstClientRect() {
  var region = getElementRegion(document.getElementById('a'));
  assertEquals(0, region.left);
  assertEquals(0, region.top);
  assertEquals(100, region.width);
  assertEquals(200, region.height);
}

function testSvgElement() {
  var region = getElementRegion(document.getElementById('e'));
  assertEquals(0, region.left);
  assertEquals(0, region.top);
  assertEquals(170, region.width);
  assertEquals(110, region.height);
}

function testElementWithoutBoundingRectangle() {
  var region = getElementRegion(document.getElementsByTagName('br')[0]);
  assertEquals(0, region.left);
  assertEquals(0, region.top);
  assertEquals(0, region.width);
  assertEquals(0, region.height);
}

function testAreaPoly() {
  var region = getElementRegion(document.getElementById('poly'));
  assertEquals(20, region.left);
  assertEquals(10, region.top);
  assertEquals(40, region.width);
  assertEquals(45, region.height);
}

function testAreaRect() {
  var region = getElementRegion(document.getElementById('rect'));
  assertEquals(120, region.left);
  assertEquals(100, region.top);
  assertEquals(20, region.width);
  assertEquals(50, region.height);
}

function testAreaCircle() {
  var region = getElementRegion(document.getElementById('circle'));
  assertEquals(175, region.left);
  assertEquals(165, region.top);
  assertEquals(10, region.width);
  assertEquals(10, region.height);
}

function testAreaDefault() {
  try {
    getElementRegion(document.getElementById('default'));
    assert(false);
  } catch (error) {
  }
}

</script>
<body>
<div style="border: 3px coral solid;">
  <div id="a" style="background-color:orange;width:100px;height:200px">
  </div>
  <br>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" height="130px" width="300px">
      <ellipse cx="150" cy="65" rx="85" ry="55" id="e">
      </ellipse>
    </svg>
  </div>
  <br>
  <div>
    <img width="200" height="200" usemap="#imgmap">
    <map name="imgmap">
      <area id="poly" shape="poly" coords="20,20,30,10,50,20,60,40,50,50,30,55">
      <area id="rect" shape="rect" coords="120,100,140,150">
      <area id="circle" shape="circle" coords="180,170,5">
      <area id="default" shape="default">
    </map>
  </div>
</div>
</body>
</html>