diff --git a/test/domRectSVG.svg b/test/domRectSVG.svg index 17be7bf..a3db696 100644 --- a/test/domRectSVG.svg +++ b/test/domRectSVG.svg @@ -4,7 +4,16 @@ font: italic 13px sans-serif; transform: rotate(-3.4deg); } + #path { + transform: rotate(42.3deg); + } + Text with Unicode 𝞐 \ No newline at end of file diff --git a/test/domRectTest.js b/test/domRectTest.js index 647506c..fd7b431 100644 --- a/test/domRectTest.js +++ b/test/domRectTest.js @@ -31,11 +31,13 @@ const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"]; async function performTest(output, callback, useIframe = true){ - const rects = getElements(useIframe).map(function(element){ + const rects = (await Promise.all(getElements(useIframe).map(async function(element){ return { name: element.dataset.name, - data: callback(element) + data: await callback(element) }; + }))).filter(function(rect){ + return rect.data; }); const data = new Float64Array(rects.length * properties.length); rects.forEach(function(rect, i){ @@ -134,6 +136,25 @@ container.appendChild(output); performTest(output, callback, useIframe); } + async function getIntersectionEntryValue(parentElement, element, property){ + if (!(element instanceof Element)){ + return null; + } + + return new Promise(function(resolve){ + const timeout = window.setTimeout(function(){ + resolve(null); + }, 1000); + const observer = new IntersectionObserver(function(entries){ + window.clearTimeout(timeout); + resolve(entries[0][property]); + }, { + root: parentElement, + rootMargin: "1000px", + }); + observer.observe(element); + }); + } iframe.addEventListener("load", function(){ [true, false].forEach(function(useIframe){ createTest("Element.getClientRects", function(element){ @@ -146,6 +167,15 @@ const quad = element.getBoxQuads(); return quad[0].getBounds(); }, useIframe); + createTest("IntersectionObserverEntry.intersectionRect", function(element){ + return getIntersectionEntryValue(element.parentElement, element, "intersectionRect"); + }, useIframe); + createTest("IntersectionObserverEntry.boundingClientRect", function(element){ + return getIntersectionEntryValue(element.parentElement, element, "boundingClientRect"); + }, useIframe); + createTest("IntersectionObserverEntry.rootBounds", function(element){ + return getIntersectionEntryValue(element, element.firstChild, "rootBounds"); + }, useIframe); createTest("Range.getClientRects", function(element){ const range = document.createRange(); range.selectNode(element);