From c83b1f8a3bf586d305c0d2b8c2068a682c2a4157 Mon Sep 17 00:00:00 2001 From: kkapsner <github@mail.kkapsner.de> Date: Wed, 5 Sep 2018 08:21:22 +0200 Subject: [PATCH] Added test for DOMRect --- test/domRectIFrame.html | 42 +++++++++++++++++++++++++ test/domRectTest.html | 42 +++++++++++++++++++++++++ test/domRectTest.js | 68 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 152 insertions(+) create mode 100644 test/domRectIFrame.html create mode 100644 test/domRectTest.html create mode 100644 test/domRectTest.js diff --git a/test/domRectIFrame.html b/test/domRectIFrame.html new file mode 100644 index 0000000..443ad4d --- /dev/null +++ b/test/domRectIFrame.html @@ -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> \ No newline at end of file diff --git a/test/domRectTest.html b/test/domRectTest.html new file mode 100644 index 0000000..24b3a28 --- /dev/null +++ b/test/domRectTest.html @@ -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> \ No newline at end of file diff --git a/test/domRectTest.js b/test/domRectTest.js new file mode 100644 index 0000000..b2d67fd --- /dev/null +++ b/test/domRectTest.js @@ -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(); + }); + }); +}()); \ No newline at end of file