security-and-privacy/CanvasBlocker
security-and-privacy/CanvasBlocker
1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2024-06-08 06:17:47 +02:00
Code Releases Activity

domRectTest: added IntersectionObserverEntry tests

Browse Source
This commit is contained in:
kkapsner 2020-11-02 13:07:19 +01:00
parent 902d31b643
commit ef69e1dcb5
2 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
test/domRectSVG.svg
View File

@ -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 &#x1D790;</text> <text x="20" y="35" data-name="text" id="text" class="testRect">Text with Unicode &#x1D790;</text>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 268 B

After

Width:  |  Height:  |  Size: 470 B

34
test/domRectTest.js
View File

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