1<!DOCTYPE HTML> 2<html> 3<script src='test.js'></script> 4<script src='get_element_region.js'></script> 5<script> 6 7function testNotElement() { 8 try { 9 getElementRegion(document); 10 assert(false); 11 } catch (error) { 12 assertEquals(document + ' is not an element', error.message); 13 } 14} 15 16function testElementWithFirstClientRect() { 17 var region = getElementRegion(document.getElementById('a')); 18 assertEquals(0, region.left); 19 assertEquals(0, region.top); 20 assertEquals(100, region.width); 21 assertEquals(200, region.height); 22} 23 24function testSvgElement() { 25 var region = getElementRegion(document.getElementById('e')); 26 assertEquals(0, region.left); 27 assertEquals(0, region.top); 28 assertEquals(170, region.width); 29 assertEquals(110, region.height); 30} 31 32function testElementWithoutBoundingRectangle() { 33 var region = getElementRegion(document.getElementsByTagName('br')[0]); 34 assertEquals(0, region.left); 35 assertEquals(0, region.top); 36 assertEquals(0, region.width); 37 assertEquals(0, region.height); 38} 39 40function testAreaPoly() { 41 var region = getElementRegion(document.getElementById('poly')); 42 assertEquals(20, region.left); 43 assertEquals(10, region.top); 44 assertEquals(40, region.width); 45 assertEquals(45, region.height); 46} 47 48function testAreaRect() { 49 var region = getElementRegion(document.getElementById('rect')); 50 assertEquals(120, region.left); 51 assertEquals(100, region.top); 52 assertEquals(20, region.width); 53 assertEquals(50, region.height); 54} 55 56function testAreaCircle() { 57 var region = getElementRegion(document.getElementById('circle')); 58 assertEquals(175, region.left); 59 assertEquals(165, region.top); 60 assertEquals(10, region.width); 61 assertEquals(10, region.height); 62} 63 64function testAreaDefault() { 65 try { 66 getElementRegion(document.getElementById('default')); 67 assert(false); 68 } catch (error) { 69 } 70} 71 72</script> 73<body> 74<div style="border: 3px coral solid;"> 75 <div id="a" style="background-color:orange;width:100px;height:200px"> 76 </div> 77 <br> 78 <div> 79 <svg xmlns="http://www.w3.org/2000/svg" height="130px" width="300px"> 80 <ellipse cx="150" cy="65" rx="85" ry="55" id="e"> 81 </ellipse> 82 </svg> 83 </div> 84 <br> 85 <div> 86 <img width="200" height="200" usemap="#imgmap"> 87 <map name="imgmap"> 88 <area id="poly" shape="poly" coords="20,20,30,10,50,20,60,40,50,50,30,55"> 89 <area id="rect" shape="rect" coords="120,100,140,150"> 90 <area id="circle" shape="circle" coords="180,170,5"> 91 <area id="default" shape="default"> 92 </map> 93 </div> 94</div> 95</body> 96</html> 97