diff --git a/test/domRectIFrame.html b/test/domRectIFrame.html index 5a60169..959f010 100644 --- a/test/domRectIFrame.html +++ b/test/domRectIFrame.html @@ -26,19 +26,43 @@ transform-origin: 0.1111px 0.2222px 0.3333px; } +#select { + transform: rotate(1.23deg); +} + +#progress { + transform: scale(3.14); + position: absolute; + top: 300px; + left: 200px; +} + +#button { + padding: 4.937px; + margin: 9.876px; +} + +.testRect { + outline: 2px dotted lightblue; +}
-

https://browserleaks.com/rects

-Element.getClientRects (̿▀̿ ̿Ĺ̯̿̿▀̿ ̿)̄
+

https://browserleaks.com/rects

+Element.getClientRects (̿▀̿ ̿Ĺ̯̿̿▀̿ ̿)̄
                                                            -F i n g e r p r i n t i n g ? +F i n g e r p r i n t i n g ?
+ +test + \ No newline at end of file diff --git a/test/domRectTest.html b/test/domRectTest.html index c4e55e6..b8e18e2 100644 --- a/test/domRectTest.html +++ b/test/domRectTest.html @@ -27,6 +27,19 @@ 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%; + } diff --git a/test/domRectTest.js b/test/domRectTest.js index 83fe4f9..4ce13c1 100644 --- a/test/domRectTest.js +++ b/test/domRectTest.js @@ -18,17 +18,22 @@ function getElements(){ const doc = iframe.contentDocument; - return Array.from(doc.querySelectorAll("*[id^=rect]")); + return Array.from(doc.querySelectorAll(".testRect")); } function createTest(title, callback){ const properties = ["x", "y", "width", "height", "top", "left", "right", "bottom"]; function performTest(){ - const rects = getElements().map(callback); + const rects = getElements().map(function(element){ + return { + name: element.dataset.name, + data: callback(element) + }; + }); 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]; + data[i * properties.length + j] = rect.data[property]; }); }); @@ -37,18 +42,41 @@ output.querySelector(".hash").textContent = byteArrayToHex(hash); }); - output.querySelector(".data").innerHTML = "" + - rects.map(function(rect, i){ - return ""; + function formatNumber(number){ + const str = number.toString(); + return "" + str.substring(0, str.length - 2) + "" + + str.substring(str.length - 2); + } + var dataNode = output.querySelector(".data"); + dataNode.innerHTML = "
rect " + (i + 1) + "
" + + rects.map(function(rect){ + return ""; + }).join("") + + "" + + rects.map(function(rect){ + return ""; }).join("") + "" + properties.map(function(property){ - return "" + rects.map(function(rect, i){ - return ""; + return "" + rects.map(function(rect){ + return ""; }).join("") + ""; }).join("") + "
" + rect.name + "
hash
" + property + "" + rect[property] + "
" + property + "" + + formatNumber(rect.data[property]) + + "
"; - + rects.forEach(function(rect){ + const data = new Float64Array(properties.length); + properties.forEach(function(property, i){ + data[i] = rect.data[property]; + }); + + crypto.subtle.digest("SHA-256", data).then(function(hash){ + dataNode.querySelector( + ".rectHash[data-name=\"" + rect.name + "\"]" + ).textContent = byteArrayToHex(hash); + }); + }); } const output = template.cloneNode(true); output.querySelector(".title").textContent = title;