DOMRect test: added test without iframe
This commit is contained in:
kkapsner
parent
4fa91ef3ae
commit
9a7dd3c189
|
|
@ -0,0 +1,16 @@
|
|||
<div id="content">
|
||||
<div id="inside">
|
||||
<h1 data-name="rect 0" class="testRect">https://browserleaks.com<i>/rects</i></h1>
|
||||
<span data-name="rect 1" class="testRect"><strong>Element.getClientRects (̿▀̿ ̿Ĺ̯̿̿▀̿ ̿)̄ </strong></span><br />
|
||||
|
||||
|
||||
|
||||
|
||||
<span data-name="rect 2" class="testRect">F i n g e r p r i n t i n g ?</span>
|
||||
</div>
|
||||
<select id="select" data-name="select" class="testRect">
|
||||
<option>−ھ-</option>
|
||||
</select>
|
||||
<progress id="progress" data-name="progress bar" class="testRect">test</progress>
|
||||
<button id="button" data-name="empty button" class="testRect"></button>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<link href="testIcon.svg" type="image/png" rel="icon">
|
||||
<link href="testIcon.svg" type="image/png" rel="shortcut icon">
|
||||
<link href="domRectTest.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
<body id="iframeBody">
|
||||
|
||||
<?php include("domRectElements.part.html");?>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,57 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<link href="testIcon.svg" type="image/png" rel="icon">
|
||||
<link href="testIcon.svg" type="image/png" rel="shortcut icon">
|
||||
<style>
|
||||
#inside{
|
||||
|
||||
#iframe {
|
||||
position: fixed;
|
||||
top: -2000%;
|
||||
}
|
||||
#noIframe {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
#noIframe, #iframeBody {
|
||||
margin: 0px;
|
||||
padding: 8px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.test .data td.value {
|
||||
text-align: right;
|
||||
}
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
color: gray;
|
||||
}
|
||||
.rectHash {
|
||||
font-size: 4px;
|
||||
}
|
||||
.rectHash:hover {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
/*measured elements*/
|
||||
|
||||
#content {
|
||||
/* position: relative; */
|
||||
}
|
||||
|
||||
#inside {
|
||||
white-space: nowrap;
|
||||
|
||||
color:#5B5B5B;
|
||||
|
|
@ -44,25 +90,4 @@
|
|||
|
||||
.testRect {
|
||||
outline: 2px dotted lightblue;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="inside">
|
||||
<h1 data-name="rect 0" class="testRect">https://browserleaks.com<i>/rects</i></h1>
|
||||
<span data-name="rect 1" class="testRect"><strong>Element.getClientRects (̿▀̿ ̿Ĺ̯̿̿▀̿ ̿)̄ </strong></span><br />
|
||||
|
||||
|
||||
|
||||
|
||||
<span data-name="rect 2" class="testRect">F i n g e r p r i n t i n g ?</span>
|
||||
</div>
|
||||
<select id="select" data-name="select" class="testRect">
|
||||
<option>−ھ-</option>
|
||||
</select>
|
||||
<progress id="progress" data-name="progress bar" class="testRect">test</progress>
|
||||
<button id="button" data-name="empty button" class="testRect"></button>
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
|
|
@ -12,11 +12,12 @@
|
|||
|
||||
const container = document.getElementById("tests");
|
||||
const iframe = document.getElementById("iframe");
|
||||
const noIframe = document.getElementById("noIframe");
|
||||
const template = document.querySelector(".test");
|
||||
template.parentElement.removeChild(template);
|
||||
|
||||
function getElements(){
|
||||
const doc = iframe.contentDocument;
|
||||
function getElements(useIframe = true){
|
||||
const doc = useIframe? iframe.contentDocument: noIframe;
|
||||
|
||||
return Array.from(doc.querySelectorAll(".testRect"));
|
||||
}
|
||||
|
|
@ -28,8 +29,8 @@
|
|||
}
|
||||
|
||||
const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"];
|
||||
async function performTest(output, callback){
|
||||
const rects = getElements().map(function(element){
|
||||
async function performTest(output, callback, useIframe = true){
|
||||
const rects = getElements(useIframe).map(function(element){
|
||||
return {
|
||||
name: element.dataset.name,
|
||||
data: callback(element)
|
||||
|
|
@ -76,11 +77,11 @@
|
|||
});
|
||||
}
|
||||
|
||||
function createTest(title, callback){
|
||||
function createTest(title, callback, useIframe){
|
||||
const output = template.cloneNode(true);
|
||||
output.querySelector(".title").textContent = title;
|
||||
output.querySelector(".title").textContent = title + (useIframe? " (iframe)": "");
|
||||
output.querySelector(".refresh").addEventListener("click", function(){
|
||||
performTest(output, callback);
|
||||
performTest(output, callback, useIframe);
|
||||
});
|
||||
output.querySelector(".performance").addEventListener("click", function(){
|
||||
let count = 200;
|
||||
|
|
@ -92,7 +93,7 @@
|
|||
while (duration < 1000){
|
||||
const start = Date.now();
|
||||
for (; i < count; i += 1){
|
||||
const rects = getElements().map(function(element){
|
||||
const rects = getElements(useIframe).map(function(element){
|
||||
return {
|
||||
name: element.dataset.name,
|
||||
data: callback(element)
|
||||
|
|
@ -123,24 +124,26 @@
|
|||
}());
|
||||
|
||||
container.appendChild(output);
|
||||
performTest(output, callback);
|
||||
performTest(output, callback, useIframe);
|
||||
}
|
||||
iframe.addEventListener("load", function(){
|
||||
createTest("Element.getClientRects", function(element){
|
||||
return element.getClientRects()[0];
|
||||
});
|
||||
createTest("Element.getBoundingClientRect", function(element){
|
||||
return element.getBoundingClientRect();
|
||||
});
|
||||
createTest("Range.getClientRects", function(element){
|
||||
const range = document.createRange();
|
||||
range.selectNode(element);
|
||||
return range.getClientRects()[0];
|
||||
});
|
||||
createTest("Range.getBoundingClientRect", function(element){
|
||||
const range = document.createRange();
|
||||
range.selectNode(element);
|
||||
return range.getBoundingClientRect();
|
||||
[true, false].forEach(function(useIframe){
|
||||
createTest("Element.getClientRects", function(element){
|
||||
return element.getClientRects()[0];
|
||||
}, useIframe);
|
||||
createTest("Element.getBoundingClientRect", function(element){
|
||||
return element.getBoundingClientRect();
|
||||
}, useIframe);
|
||||
createTest("Range.getClientRects", function(element){
|
||||
const range = document.createRange();
|
||||
range.selectNode(element);
|
||||
return range.getClientRects()[0];
|
||||
}, useIframe);
|
||||
createTest("Range.getBoundingClientRect", function(element){
|
||||
const range = document.createRange();
|
||||
range.selectNode(element);
|
||||
return range.getBoundingClientRect();
|
||||
}, useIframe);
|
||||
});
|
||||
});
|
||||
}());
|
||||
|
|
@ -5,42 +5,7 @@
|
|||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<link href="testIcon.svg" type="image/png" rel="icon">
|
||||
<link href="testIcon.svg" type="image/png" rel="shortcut icon">
|
||||
<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;
|
||||
}
|
||||
.test .data td.value {
|
||||
text-align: right;
|
||||
}
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
color: gray;
|
||||
}
|
||||
.rectHash {
|
||||
font-size: 4px;
|
||||
}
|
||||
.rectHash:hover {
|
||||
font-size: 100%;
|
||||
}
|
||||
</style>
|
||||
<link href="domRectTest.css" type="text/css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<h1>DOMRect test</h1>
|
||||
|
|
@ -51,7 +16,8 @@
|
|||
<li>upon page reload the hashes change (depending on CanvasBlocker settings - e.g. not in the stealth preset)</li>
|
||||
</ul>
|
||||
<h2>Tests</h2>
|
||||
<iframe id="iframe" src="domRectIFrame.html"></iframe>
|
||||
<iframe id="iframe" src="domRectIFrame.php"></iframe>
|
||||
<div id="noIframe"><?php include("domRectElements.part.html");?></div>
|
||||
<div id="tests">
|
||||
<div class="test">
|
||||
<h3 class="title"></h3>
|
||||
Loading…
Reference in New Issue