blob: 7c070f45b808ad0ce1a59b98a387b3b39236fd2e [file] [log] [blame]
<!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(90, region.width);
assertEquals(40, 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="45" ry="20" 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>