| <!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 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 testPartialOutOfView() { |
| var region = getElementRegion(document.getElementById('partial-out-of-view')); |
| assertEquals(50, region.left); |
| assertEquals(0, region.top); |
| assertEquals(50, region.width); |
| assertEquals(100, region.height); |
| } |
| |
| function testScrolledOutOfView() { |
| // Scroll to an offset to make element with id=a partially visible. |
| var elemRect = document.getElementById("a").getBoundingClientRect(); |
| window.scrollTo(elemRect.left + 50, elemRect.top + 100); |
| var region = getElementRegion(document.getElementById("a")); |
| assertEquals(50, region.left); |
| assertEquals(100, region.top); |
| assertEquals(50, region.width); |
| assertEquals(100, region.height); |
| window.scrollTo(0, 0); |
| } |
| |
| function testFullOutOfView() { |
| var region = getElementRegion(document.getElementById('out-of-view')); |
| assertEquals(0, region.left); |
| assertEquals(0, region.top); |
| assertEquals(100, region.width); |
| assertEquals(100, region.height); |
| } |
| |
| function testFullOutOfViewRect() { |
| var region = getElementRegion(document.getElementById('out-of-view-rect')); |
| assertEquals(120, region.left); |
| assertEquals(100, region.top); |
| assertEquals(20, region.width); |
| assertEquals(50, region.height); |
| } |
| |
| function testFullOutOfViewCircle() { |
| var region = getElementRegion(document.getElementById('out-of-view-circle')); |
| assertEquals(175, region.left); |
| assertEquals(165, region.top); |
| assertEquals(10, region.width); |
| assertEquals(10, region.height); |
| } |
| |
| function testPartialOutOfViewRect() { |
| var region = getElementRegion(document.getElementById('partial-rect')); |
| assertEquals(120, region.left); |
| assertEquals(10, region.top); |
| assertEquals(10, region.width); |
| // Height should not be truncated, even if partially visible. |
| assertEquals(40, region.height); |
| } |
| |
| function testPartialOutOfViewCircle() { |
| var region = getElementRegion(document.getElementById('partial-circle')); |
| assertEquals(30, region.left); |
| assertEquals(0, region.top); |
| // Area is treated as if it is fully in-view or fully out-of-view. |
| assertEquals(60, region.width); |
| assertEquals(60, region.height); |
| } |
| |
| function testNegativeDimensions() { |
| var region = getElementRegion(document.getElementById('negative-dims')); |
| assertEquals(0, region.left); |
| assertEquals(0, region.top); |
| // Negative dimensions appear as 0, so region is 0x0. |
| assertEquals(0, region.width); |
| assertEquals(0, 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 style="background-color:blue;width:100px;height:100px;position:absolute;top:200px;left:-50px" |
| id="partial-out-of-view"> |
| </div> |
| <div style="background-color:green;width:100px;height:100px;position:absolute;top:100px;left:-200px" |
| id="out-of-view"> |
| </div> |
| <div> |
| <img width="200" height="200" usemap="#outofviewmap" style="position:absolute;top:120vh;left:50px"> |
| <map name="outofviewmap"> |
| <area id="out-of-view-rect" shape="rect" coords="120,100,140,150"> |
| <area id="out-of-view-circle" shape="circle" coords="180,170,5"> |
| </map> |
| </div> |
| <div> |
| <img width="200" height="200" usemap="#partialmap" style="position:absolute;top:calc(100vh - 20px);left:50px"> |
| <map name="partialmap"> |
| <area id="partial-rect" shape="rect" coords="120,10,130,50"> |
| <area id="partial-circle" shape="circle" coords="60,5,30"> |
| </map> |
| </div> |
| <div style="background-color:blue;width:100px;height:100px;position:absolute;top:200px;left:-50px" |
| id="partial-out-of-view"> |
| </div> |
| <div style="background-color:green;width:100px;height:100px;position:absolute;top:100px;left:-200px" |
| id="out-of-view"> |
| </div> |
| <div style="background-color:yellow;width:-100px;height:-100px;position:absolute;top:200px;left:200px;" |
| id="negative-dims"> |
| </div> |
| <!-- This element adds scroll to see how script handles viewport with scroll --> |
| <div style="background-color:red;width:50px;height:50px;position:absolute;top:200vh;left:200vw;"> |
| </div> |
| |
| </div> |
| </body> |
| </html> |
| |
| </div> |
| </body> |
| </html> |
