From c0c16b6546afa50810e0b49d51a93d47b7176366 Mon Sep 17 00:00:00 2001
From: kkapsner <github@mail.kkapsner.de>
Date: Tue, 31 Jan 2017 20:59:57 +0100
Subject: [PATCH] Improved test page.

---
 test/iFrame_test.html | 45 ----------------------
 test/test.html        | 87 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 87 insertions(+), 45 deletions(-)
 delete mode 100644 test/iFrame_test.html
 create mode 100644 test/test.html
diff --git a/test/iFrame_test.html b/test/iFrame_test.html
deleted file mode 100644
index 341c0b6..0000000
--- a/test/iFrame_test.html
+++ /dev/null
@@ -1,45 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-<body>
-iFrame Test. Thanks to DocumentRoot.
-<img id="display" width="100%">
-<iframe id="iframe" sandbox="allow-same-origin" style="display:none"></iframe>
-<script>
-(function(){
-	document.getElementById("display").src = after();
-}());
-
-function after(){
-	var fp_text = "BrowserLeaks,com <canvas> 10";
-
-	// create window canvas
-	var canvas = document.createElement('canvas');
-	canvas.setAttribute("width", 220);
-	canvas.setAttribute("height", 30);
-
-	// draw image in window canvas
-	var ctx = canvas.getContext('2d');
-	ctx.textBaseline = "top";
-	ctx.font = "14px 'Arial'";
-	ctx.textBaseline = "alphabetic";
-	ctx.fillStyle = "#f60";
-	ctx.fillRect(125, 1, 62, 20);
-	ctx.fillStyle = "#069";
-	ctx.fillText(fp_text, 2, 15);
-	ctx.fillStyle = "rgba(102, 204, 0, 07)";
-	ctx.fillText(fp_text, 4, 17);
-
-	// create iframe canvas and ctx
-	var iframe_canvas = document.getElementById("iframe").contentDocument.createElement('canvas');
-	iframe_canvas.setAttribute("width", 220);
-	iframe_canvas.setAttribute("height", 30);
-	var iframe_ctx = iframe_canvas.getContext('2d');
-
-	// copy image from window canvas to iframe ctx
-	iframe_ctx.drawImage(canvas, 0, 0);
-
-	return iframe_canvas.toDataURL();
-}
-</script>
-</body></html>
\ No newline at end of file
diff --git a/test/test.html b/test/test.html
new file mode 100644
index 0000000..212fb5e
--- /dev/null
+++ b/test/test.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+	<title>Test</title>
+</head>
+<body>
+<div id="top">
+	<h1>top Test</h1>
+	<img class="display" width="100%"><br>
+	Hash: <span class="hash"></span>
+</div>
+<div id="iframe">
+	<h1>iFrame Test. Thanks to DocumentRoot.</h1>
+	<img class="display" width="100%"><br>
+	Hash: <span class="hash"></span>
+	<iframe sandbox="allow-same-origin" style="display:none"></iframe>
+</div>
+<script>
+(function(){
+	function show(container, url){
+		container.querySelector(".display").src = url;
+		var buffer = new TextEncoder("utf-8").encode(url);
+		crypto.subtle.digest("SHA-256", buffer).then(function(hash){
+			var chunks = [];
+			(new Uint32Array(hash)).forEach(function(num){
+				chunks.push(num.toString(16));
+			});
+			container.querySelector(".hash").textContent = chunks.map(function(chunk){
+				return "0".repeat(8 - chunk.length) + chunk;
+			}).join("");
+		});
+	}
+	
+	show(document.getElementById("top"), topTest());
+	show(document.getElementById("iframe"), iframeTest());
+}());
+
+function draw(canvas){
+	canvas.setAttribute("width", 220);
+	canvas.setAttribute("height", 30);
+	
+	var fp_text = "BrowserLeaks,com <canvas> 10";
+	
+	var ctx = canvas.getContext('2d');
+	ctx.textBaseline = "top";
+	ctx.font = "14px 'Arial'";
+	ctx.textBaseline = "alphabetic";
+	ctx.fillStyle = "#f60";
+	ctx.fillRect(125, 1, 62, 20);
+	ctx.fillStyle = "#069";
+	ctx.fillText(fp_text, 2, 15);
+	ctx.fillStyle = "rgba(102, 204, 0, 07)";
+	ctx.fillText(fp_text, 4, 17);
+	
+	return ctx;
+}
+
+function topTest(){
+	// create window canvas
+	var canvas = document.createElement('canvas');
+	// draw image in window canvas
+	draw(canvas);
+	return canvas.toDataURL();
+}
+
+function iframeTest(){
+
+	// create window canvas
+	var canvas = document.createElement('canvas');
+
+	// draw image in window canvas
+	draw(canvas);
+
+	// create iframe canvas and ctx
+	var iframe_canvas = document.querySelector("#iframe iframe").contentDocument.createElement('canvas');
+	iframe_canvas.setAttribute("width", 220);
+	iframe_canvas.setAttribute("height", 30);
+	var iframe_ctx = iframe_canvas.getContext('2d');
+
+	// copy image from window canvas to iframe ctx
+	iframe_ctx.drawImage(canvas, 0, 0);
+
+	return iframe_canvas.toDataURL();
+}
+</script>
+</body></html>
\ No newline at end of file
