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