domRectTest: added IntersectionObserverEntry tests

test/domRectSVG.svg

@@ -4,7 +4,16 @@
 		font: italic 13px sans-serif;
 		transform: rotate(-3.4deg);
 	}
+	#path {
+		transform: rotate(42.3deg);
+	}
   </style>
 
+  <path data-name="path" id="path" class="testRect" fill="red" d="
+  		M 10,30
+		A 20,20 0,0,1 50,30
+		A 20,20 0,0,1 90,30
+		Q 90,60 50,90
+		Q 10,60 10,30 z"/>
   <text x="20" y="35" data-name="text" id="text" class="testRect">Text with Unicode &#x1D790;</text>
 </svg>

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);