Files
browser/src/browser/tests/intersection_observer/basic.html

64 lines
1.7 KiB
HTML

<!DOCTYPE html>
<script src="../testing.js"></script>
<div id="target" style="width: 100px; height: 100px;">Target Element</div>
<script id="basic">
const target = document.getElementById('target');
let callbackCalled = false;
let entries = null;
const observer = new IntersectionObserver((observerEntries, obs) => {
callbackCalled = true;
entries = observerEntries;
});
observer.observe(target);
testing.onload(() => {
testing.expectEqual(true, callbackCalled);
testing.expectEqual(1, entries.length);
const entry = entries[0];
testing.expectEqual(target, entry.target);
testing.expectEqual('boolean', typeof entry.isIntersecting);
testing.expectEqual('number', typeof entry.intersectionRatio);
testing.expectEqual('object', typeof entry.boundingClientRect);
testing.expectEqual('object', typeof entry.intersectionRect);
testing.expectEqual('number', typeof entry.time);
testing.expectEqual(true, entry.time > 0);
observer.disconnect();
});
</script>
<script id=detached>
{
// never attached
let count = 0;
const div = document.createElement('div');
new IntersectionObserver((entries) => {
count += 1;
}).observe(div);
testing.onload(() => {
testing.expectEqual(0, count);
});
}
{
// not connected, but has parent
let count = 0;
const div1 = document.createElement('div');
const div2 = document.createElement('div');
new IntersectionObserver((entries) => {
count += 1;
}).observe(div1);
div2.appendChild(div1);
testing.onload(() => {
testing.expectEqual(1, count);
});
}
</script>