mirror of
https://github.com/kkapsner/CanvasBlocker
synced 2024-12-22 12:50:36 +01:00
Added test for DOMRect
This commit is contained in:
kkapsner
parent
f00c3b674e
commit
c83b1f8a3b
42
test/domRectIFrame.html
Normal file
42
test/domRectIFrame.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<style>
|
||||
#inside{
|
||||
white-space: nowrap;
|
||||
|
||||
color:#5B5B5B;
|
||||
position: absolute;
|
||||
padding: 1.3333px;
|
||||
left: 10.5555px;
|
||||
top: 28.4444px;
|
||||
font-size: 24.5555px;
|
||||
|
||||
-ms-transform: scale(1.31123) matrix3d(0.373513, -0.0440105, 0, -0.000202461, -0.0851682, 0.616234, 0, -0.00123197, 2.17, 0.21, 1, 0.02, 13.81, 2.11, 0, 0.98);
|
||||
-moz-transform: scale(1.31123) matrix3d(0.373513, -0.0440105, 0, -0.000202461, -0.0851682, 0.616234, 0, -0.00123197, 2.17, 0.21, 1, 0.02, 13.81, 2.11, 0, 0.98);
|
||||
-webkit-transform: scale(1.31123) matrix3d(0.373513, -0.0440105, 0, -0.000202461, -0.0851682, 0.616234, 0, -0.00123197, 2.17, 0.21, 1, 0.02, 13.81, 2.11, 0, 0.98);
|
||||
transform: scale(1.31123) matrix3d(0.373513, -0.0440105, 0, -0.000202461, -0.0851682, 0.616234, 0, -0.00123197, 2.17, 0.21, 1, 0.02, 13.81, 2.11, 0, 0.98);
|
||||
|
||||
-ms-transform-origin: 0.1111px 0.2222px 0.3333px;
|
||||
-moz-transform-origin: 0.1111px 0.2222px 0.3333px;
|
||||
-webkit-transform-origin: 0.1111px 0.2222px 0.3333px;
|
||||
transform-origin: 0.1111px 0.2222px 0.3333px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="inside">
|
||||
<h1 id="rect0">https://browserleaks.com<i>/rects</i></h4>
|
||||
<span id="rect1"><strong>Element.getClientRects (̿▀̿ ̿Ĺ̯̿̿▀̿ ̿)̄ </strong></span><br />
|
||||
|
||||
|
||||
|
||||
|
||||
<span id="rect2">F i n g e r p r i n t i n g ?</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
42
test/domRectTest.html
Normal file
42
test/domRectTest.html
Normal file
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>DOMRect test</title>
|
||||
<style>
|
||||
#iframe {
|
||||
position: absolute;
|
||||
top: -2000%;
|
||||
}
|
||||
.template {
|
||||
display: none;
|
||||
}
|
||||
.test {
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
}
|
||||
.test .data table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.test .data th {
|
||||
padding: 0.4em;
|
||||
}
|
||||
.test .data td{
|
||||
border: 1px solid #c7c7c7;
|
||||
padding: 0.4em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>DOMRect test</h1>
|
||||
<iframe id="iframe" src="domRectIFrame.html"></iframe>
|
||||
<div id="tests">
|
||||
<div class="test">
|
||||
<h2 class="title"></h2>
|
||||
Hash: <span class="hash"></span><br>
|
||||
Data: <span class="data"></span><br>
|
||||
<button>refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="domRectTest.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
68
test/domRectTest.js
Normal file
68
test/domRectTest.js
Normal file
@ -0,0 +1,68 @@
|
||||
(function(){
|
||||
"use strict";
|
||||
function byteArrayToHex(arrayBuffer){
|
||||
var chunks = [];
|
||||
(new Uint32Array(arrayBuffer)).forEach(function(num){
|
||||
chunks.push(num.toString(16));
|
||||
});
|
||||
return chunks.map(function(chunk){
|
||||
return "0".repeat(8 - chunk.length) + chunk;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
const container = document.getElementById("tests");
|
||||
const iframe = document.getElementById("iframe");
|
||||
const template = document.querySelector(".test");
|
||||
template.parentElement.removeChild(template);
|
||||
|
||||
function getElements(){
|
||||
const doc = iframe.contentDocument;
|
||||
|
||||
return Array.from(doc.querySelectorAll("*[id^=rect]"));
|
||||
}
|
||||
|
||||
function createTest(title, callback){
|
||||
const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"];
|
||||
function performTest(){
|
||||
const rects = getElements().map(callback);
|
||||
const data = new Float64Array(rects.length * properties.length);
|
||||
rects.forEach(function(rect, i){
|
||||
properties.forEach(function(property, j){
|
||||
data[i * properties.length + j] = rect[property];
|
||||
});
|
||||
});
|
||||
|
||||
crypto.subtle.digest("SHA-256", data)
|
||||
.then(function(hash){
|
||||
output.querySelector(".hash").textContent = byteArrayToHex(hash);
|
||||
});
|
||||
|
||||
output.querySelector(".data").innerHTML = "<table><tr><th></th>" +
|
||||
rects.map(function(rect, i){
|
||||
return "<th>rect " + (i + 1) + "</th>";
|
||||
}).join("") +
|
||||
"</tr>" +
|
||||
properties.map(function(property){
|
||||
return "<tr><th>" + property + "</th>" + rects.map(function(rect, i){
|
||||
return "<td>" + rect[property] + "</td>";
|
||||
}).join("") + "</tr>";
|
||||
}).join("") +
|
||||
"</table>";
|
||||
|
||||
}
|
||||
const output = template.cloneNode(true);
|
||||
output.querySelector(".title").textContent = title;
|
||||
output.querySelector("button").addEventListener("click", performTest);
|
||||
|
||||
container.appendChild(output);
|
||||
performTest();
|
||||
}
|
||||
iframe.addEventListener("load", function(){
|
||||
createTest("getClientRects", function(element){
|
||||
return element.getClientRects()[0];
|
||||
});
|
||||
createTest("getBoundingClientRect", function(element){
|
||||
return element.getBoundingClientRect();
|
||||
});
|
||||
});
|
||||
}());
|
||||
Loading…
x
Reference in New Issue
Block a user