/* globals testAPI, canvasAPI */ (function(){ "use strict"; async function show(container, {url, imageData, isPointInPath}){ const display = container.querySelector(".display"); switch (display.nodeName){ case "IMG": display.src = url; break; case "CANVAS": { display.height = imageData.height; display.width = imageData.width; const context = display.getContext("2d"); context.putImageData(imageData, 0, 0); } break; } display.title = url; const hashes = await Promise.all([ testAPI.hash(url), imageData? testAPI.hash(imageData.data): "" ]); container.querySelector(".hash").textContent = hashes[0] + " / " + hashes[1]; if (typeof isPointInPath === "boolean"){ container.querySelector(".isPointInPath").textContent = isPointInPath; } } function iframeTest(testNode){ const iframe = testNode.querySelector("iframe"); return canvasAPI.fingerprint(iframe.contentWindow); } const tests = { top: function(){return canvasAPI.fingerprint();}, getImageDataTest: function(){return canvasAPI.fingerprint();}, iframe: iframeTest, iframe2: iframeTest, iframe3: iframeTest, iframe4: dynamicIframeTest1, iframe5: dynamicIframeTest2, iframe6: dynamicIframeTest3, windowOpen: async function(testNode, initial){ if (initial){ return new Promise(function(resolve){ window.addEventListener("click", function windowOpenTest(){ window.removeEventListener("click", windowOpenTest); const newWindow = window.open("/"); try{ resolve(canvasAPI.fingerprint(newWindow)); } catch (error){ console.error(error); } newWindow.close(); }); }); } else { const newWindow = window.open("/"); const fingerprint = canvasAPI.fingerprint(newWindow); newWindow.close(); return fingerprint; } }, blob: async function(testNode){ const canvas = document.createElement("canvas"); canvasAPI.draw(canvas); return new Promise(function(resolve, reject){ canvas.toBlob(async function(blob){ resolve({url: await testAPI.readBlob(blob)}); }); }); }, offscreen: async function(testNode){ if (typeof OffscreenCanvas === "undefined"){ throw "not supported"; } return offscreenTest(); }, offscreenWorker: async function(testNode){ if ( typeof OffscreenCanvas === "undefined" || typeof Worker === "undefined" ){ throw "not supported"; } const canvasAPIUrl = new URL("./canvasAPI.js", location); const testAPIUrl = new URL("./testAPI.js", location); return testAPI.runInWorker(offscreenTest, [], [canvasAPIUrl, testAPIUrl]); }, }; Object.keys(tests).forEach(async function(testName){ const testNode = document.getElementById(testName); const callback = tests[testName]; if (location.search !== "?notInitial"){ try { show(testNode, await callback(testNode, true)); } catch (error){ testNode.querySelector(".hash").innerHTML = "Error while computing: " + (error.message || error) + ""; console.error(testName, error); } } testNode.querySelector("button").addEventListener("click", async function(){ show(testNode, await callback(testNode)); }); }); }()); function dynamicIframeTest1(){ "use strict"; const length = frames.length; const iframe = document.createElement("iframe"); document.body.appendChild(iframe); const iframeWindow = frames[length]; document.body.removeChild(iframe); return canvasAPI.fingerprint(iframeWindow); } function dynamicIframeTest2(){ "use strict"; const length = window.length; const iframe = document.createElement("iframe"); document.body.appendChild(iframe); const iframeWindow = window[length]; document.body.removeChild(iframe); return canvasAPI.fingerprint(iframeWindow); } function dynamicIframeTest3(){ "use strict"; const length = window.length; const div = document.createElement("div"); document.body.appendChild(div); div.innerHTML = ""; const iframeWindow = window[length]; document.body.removeChild(div); return canvasAPI.fingerprint(iframeWindow); } async function offscreenTest(){ "use strict"; const offscreenCanvas = new OffscreenCanvas(220, 30); canvasAPI.draw(offscreenCanvas); const blob = offscreenCanvas.convertToBlob? await offscreenCanvas.convertToBlob(): await offscreenCanvas.toBlob(); return {url: await testAPI.readBlob(blob)}; }