mirror of
https://github.com/kkapsner/CanvasBlocker
synced 2024-12-22 12:50:36 +01:00
domRectTest: added IntersectionObserverEntry tests
This commit is contained in:
parent
902d31b643
commit
ef69e1dcb5
@ -4,7 +4,16 @@
|
|||||||
font: italic 13px sans-serif;
|
font: italic 13px sans-serif;
|
||||||
transform: rotate(-3.4deg);
|
transform: rotate(-3.4deg);
|
||||||
}
|
}
|
||||||
|
#path {
|
||||||
|
transform: rotate(42.3deg);
|
||||||
|
}
|
||||||
</style>
|
</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 𝞐</text>
|
<text x="20" y="35" data-name="text" id="text" class="testRect">Text with Unicode 𝞐</text>
|
||||||
</svg>
|
</svg>
|
Before Width: | Height: | Size: 268 B After Width: | Height: | Size: 470 B |
@ -31,11 +31,13 @@
|
|||||||
|
|
||||||
const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"];
|
const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"];
|
||||||
async function performTest(output, callback, useIframe = true){
|
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 {
|
return {
|
||||||
name: element.dataset.name,
|
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);
|
const data = new Float64Array(rects.length * properties.length);
|
||||||
rects.forEach(function(rect, i){
|
rects.forEach(function(rect, i){
|
||||||
@ -134,6 +136,25 @@
|
|||||||
container.appendChild(output);
|
container.appendChild(output);
|
||||||
performTest(output, callback, useIframe);
|
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(){
|
iframe.addEventListener("load", function(){
|
||||||
[true, false].forEach(function(useIframe){
|
[true, false].forEach(function(useIframe){
|
||||||
createTest("Element.getClientRects", function(element){
|
createTest("Element.getClientRects", function(element){
|
||||||
@ -146,6 +167,15 @@
|
|||||||
const quad = element.getBoxQuads();
|
const quad = element.getBoxQuads();
|
||||||
return quad[0].getBounds();
|
return quad[0].getBounds();
|
||||||
}, useIframe);
|
}, 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){
|
createTest("Range.getClientRects", function(element){
|
||||||
const range = document.createRange();
|
const range = document.createRange();
|
||||||
range.selectNode(element);
|
range.selectNode(element);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user