<!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() {
const region = getElementRegion(document.getElementById('a'));
assertEquals(0, region.left);
assertEquals(0, region.top);
assertEquals(100, region.width);
assertEquals(200, region.height);
}
function testSvgElement() {
const ellipse = document.getElementById('e');
const region = getElementRegion(ellipse);
assertEquals(0, region.left);
assertEquals(0, region.top);
const boundingRect = ellipse.getBoundingClientRect();
const visualViewport = window.visualViewport;
assert(0 <= region.width);
assert(region.width <= 90);
if (region.width > 0 && region.width < 90) {
assertEquals(boundingRect.left + region.width, visualViewport.width);
}
assert(0 <= region.height);
assert(region.height <= 40);
if (region.height > 0 && region.height < 40) {
assertEquals(boundingRect.top + region.height, visualViewport.height);
}
}
function testAreaPoly() {
const region = getElementRegion(document.getElementById('poly'));
assertEquals(20, region.left);
assertEquals(10, region.top);
assertEquals(40, region.width);
assertEquals(45, region.height);
}
function testAreaRect() {
const region = getElementRegion(document.getElementById('rect'));
assertEquals(120, region.left);
assertEquals(100, region.top);
assertEquals(20, region.width);
assertEquals(50, region.height);
}
function testAreaCircle() {
const region = getElementRegion(document.getElementById('circle'));
assertEquals(175, region.left);
assertEquals(165, region.top);
assertEquals(10, region.width);
assertEquals(10, region.height);
}
function testPartialOutOfView() {
let element = document.getElementById('partial-out-of-view');
let region = getElementRegion(element);
assertEquals(50, region.left);
assertEquals(0, region.top);
const boundingRect = element.getBoundingClientRect();
const visualViewport = window.visualViewport;
assert(0 <= region.width);
assert(region.width <= 50);
if (region.width > 0 && region.width < 50) {
assertEquals(boundingRect.left + region.width, visualViewport.width);
}
assert(0 <= region.height);
assert(region.height <= 100);
if (region.height > 0 && region.height < 100) {
assertEquals(boundingRect.top + region.height, visualViewport.height);
}
}
function testScrolledOutOfView() {
// Scroll to an offset to make element with id=a partially visible.
const elemRect = document.getElementById("a").getBoundingClientRect();
window.scrollTo(elemRect.left + 50, elemRect.top + 100);
const 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 testScrolledPartiallyOutOfView() {
// Scroll to an offset to make element with id=a partially visible.
document.body.style.paddingTop = '0.25px';
document.body.style.paddingLeft = '0.25px';
const elem = document.getElementById("check");
window.scrollTo(
elem.offsetLeft + elem.offsetWidth,
elem.offsetTop + elem.offsetHeight,
);
const region = getElementRegion(elem);
assertEquals(0, region.left);
assertEquals(0, region.top);
assertEquals(elem.offsetWidth, region.width);
assertEquals(elem.offsetHeight, region.height);
window.scrollTo(0, 0);
document.body.style.paddingTop = '';
document.body.style.paddingLeft = '';
}
function testFullOutOfView() {
const 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() {
const 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() {
const 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() {
const 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() {
const 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() {
const 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>
<input type="checkbox" id="check">
<div style="height:4000px"></div>
</div>
</body>
</html>
</div>
</body>
</html>
Codebase Browser
chromium