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 (̿▀̿&thinsp;̿Ĺ̯̿̿▀̿ ̿)̄ </strong></span><br />
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+<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