This commit is contained in:
Kevin McIntyre
2025-06-18 01:00:00 -04:00
commit f84b511895
228 changed files with 42509 additions and 0 deletions

View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html>
<head>
<title>Jdenticon</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>"Icon0" - AMD - Should be equal</h1>
<figure>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAWlBMVEUAAP9aOuYxMYKdne+CXN5AQGLHx+lDQ2TIyOlDQ13NzedHR1ZHR1jW1ufY2OdLS1Dg4OVKSk/g4OWjc9Gjc9FLS02ldNDj4+RLS0yldNDj4+VMTEymddHl5eU2yqFLAAAAG3RSTlMRHy8vPVtbXFxra4iIiIjDw8TE0tPw8PDx8fEmYw1hAAABrUlEQVR42u2ZYWvCQBBE6542UVuT2Kaxnvf//2aR45hrl2mgxyKFfR+HjM9EggP35DiOY0x4fn0OP0PZveyEhLTOFWO6M367ToZ4ZxAe6jrnsKTMckC4n2Nm3tNQ1ylhSYUllFDmWJiFhrrOGBMYSzhEMNBQ1wkh1YQcSqwRErK6pk81fQ67WNORkNU1p1RzyuEx1hxJSOrmd/KA3wScEziXcIpgoqGuM8I1Fa54Ty6xcBEa6jrlcC0X1W/8pXzcnoe6zgnnfLOhDmXKj0VISOtc0596dY10x05oqOuO8xAwD2zrmAeEprqeB4Smup4HhJa6ngeMlrr+KyK01PWfKqOhTuaBYrNtqKuvQhxvn9uG+q8PFY7b7WP7x7qeB9TBLOt1PQ+Yg1nW63oeMAezrNf1POAObuF1Mg+Yg1t4ncMdsFDaHbBYOMwtm3ctwatvYYHDygKHwRKABQ6DIQELHO1DQlvgMBgSsMBhMSRggaN9SBBLdtgMCVjg+K9DAlgOCWA5JIDlkAA2Q4LTPiQ4JkMCrNcdx482/Gij5Whj8qMNP9rwow0/2nAcx7HjC8pg1fBM8ggRAAAAAElFTkSuQmCC" width="100" height="100">
<figcaption><strong>IMG</strong> static image</figcaption>
</figure>
<figure>
<canvas id="AMDIcon0" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> update(value) AMD</figcaption>
</figure>
<script>
var jdenticon_config = {
backColor: "#00f1",
replaceMode: "observe"
};
</script>
<script src="https://cdn.jsdelivr.net/requirejs/2.1.22/require.min.js"></script>
<script>
requirejs(["/node_modules/jdenticon/dist/jdenticon.min.js"], function (jd) {
jd.update("#AMDIcon0", "Icon0");
});
</script>
<script src="common.js"></script>
</body>
</html>

View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html>
<head>
<title>Jdenticon</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>"Icon2" - Should be centered vertically and horizontally</h1>
<figure>
<canvas data-jdenticon-value="Icon2" width="60" height="100"></canvas>
<figcaption><strong>Canvas</strong> data-jdenticon-value</figcaption>
</figure>
<figure>
<canvas id="canvas-Icon2-update-vert" width="60" height="100"></canvas>
<figcaption><strong>Canvas</strong> update(value)</figcaption>
</figure>
<figure>
<svg data-jdenticon-value="Icon2" width="60" height="100"></svg>
<figcaption><strong>SVG</strong> data-jdenticon-value</figcaption>
</figure>
<figure>
<svg id="svg-Icon2-update-vert" width="60" height="100"></svg>
<figcaption><strong>SVG</strong> update(value)</figcaption>
</figure>
<figure>
<canvas data-jdenticon-value="Icon2" width="100" height="60"></canvas>
<figcaption><strong>Canvas</strong> data-jdenticon-value</figcaption>
</figure>
<figure>
<canvas id="canvas-Icon2-update-hori" width="100" height="60"></canvas>
<figcaption><strong>Canvas</strong> update(value)</figcaption>
</figure>
<figure>
<svg data-jdenticon-value="Icon2" width="100" height="60"></svg>
<figcaption><strong>SVG</strong> data-jdenticon-value</figcaption>
</figure>
<figure>
<svg id="svg-Icon2-update-hori" width="100" height="60"></svg>
<figcaption><strong>SVG</strong> update(value)</figcaption>
</figure>
<script>
var jdenticon_config = {
backColor: "#00f1",
};
</script>
<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/require1k@1.0.1/require1k.min.js"></script>
<script>
jdenticon.update("#canvas-Icon2-update-vert,#svg-Icon2-update-vert", "Icon2");
jdenticon.update("#canvas-Icon2-update-hori,#svg-Icon2-update-hori", "Icon2");
</script>
<script src="common.js"></script>
</body>
</html>

View File

@@ -0,0 +1,27 @@
addEventListener("message", function (ev) {
var data = JSON.parse(ev.data);
if ("scrollHeight" in data) {
var iframe = document.getElementsByName(data.name);
if (iframe && iframe.length) {
iframe[0].style.height = data.scrollHeight + "px";
}
}
});
function postHeight(timeout) {
setTimeout(function () {
// IE9 does not support passing objects through postMessage
window.parent.postMessage(JSON.stringify({
scrollHeight: document.body.scrollHeight,
name: window.name
}), "*");
}, timeout);
}
if (window.parent) {
postHeight(0);
postHeight(1000);
addEventListener("resize", postHeight);
}

View File

@@ -0,0 +1,66 @@
<html>
<head>
<title>Jdenticon browser test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<script src="common.js"></script>
<div class="test-metadata">
<div class="jdenticon-info">Unknown Jdenticon version.</div>
<div class="browser-info">Unknown browser</div>
</div>
<!-- Tests are run in iframes to allow isolated testing of loaders and configuration -->
<iframe name="amd" src="amd.html"></iframe>
<iframe name="umd-in-head" src="umd-in-head.html"></iframe>
<iframe name="normal" src="normal.html"></iframe>
<iframe name="padding-0" src="padding.html?padding=0"></iframe>
<iframe name="padding-30" src="padding.html?padding=30"></iframe>
<iframe name="center" src="center.html"></iframe>
<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
<script>
var BROWSER_REGEX = ["Firefox/", "SamsungBrowser/", "Opera/", "OPR/", "MSIE ", "Trident/", "Edge?/", "Chrome/", "Safari/"];
function htmlEncode(text) {
var div = document.createElement("div");
div.innerText = text;
return div.innerHTML;
}
function detectBrowser() {
var html = navigator.userAgent;
var hasMatch = false;
for (var i = 0; !hasMatch && i < BROWSER_REGEX.length; i++) {
var tempHtml = html.replace(new RegExp("(\\b" + BROWSER_REGEX[i] + "\\S+)|<|>|&", "g"), function (match) {
if (match === "<") return "&lt;";
if (match === ">") return "&gt;";
if (match === "&") return "&amp;";
hasMatch = true;
return "<strong>" + htmlEncode(match) + "</strong>";
})
if (hasMatch) {
html = tempHtml;
}
}
if (!hasMatch) {
html = htmlEncode(html);
}
var browserInfo = document.querySelector(".browser-info");
browserInfo.innerHTML = html;
}
var versionInfo = document.querySelector(".jdenticon-info");
versionInfo.innerText = "Jdenticon " + jdenticon.version;
detectBrowser();
</script>
</body>
</html>

View File

@@ -0,0 +1,224 @@
<!DOCTYPE html>
<html>
<head>
<title>Jdenticon</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>"Icon0" - Should be equal</h1>
<figure>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAWlBMVEUAAP9aOuYxMYKdne+CXN5AQGLHx+lDQ2TIyOlDQ13NzedHR1ZHR1jW1ufY2OdLS1Dg4OVKSk/g4OWjc9Gjc9FLS02ldNDj4+RLS0yldNDj4+VMTEymddHl5eU2yqFLAAAAG3RSTlMRHy8vPVtbXFxra4iIiIjDw8TE0tPw8PDx8fEmYw1hAAABrUlEQVR42u2ZYWvCQBBE6542UVuT2Kaxnvf//2aR45hrl2mgxyKFfR+HjM9EggP35DiOY0x4fn0OP0PZveyEhLTOFWO6M367ToZ4ZxAe6jrnsKTMckC4n2Nm3tNQ1ylhSYUllFDmWJiFhrrOGBMYSzhEMNBQ1wkh1YQcSqwRErK6pk81fQ67WNORkNU1p1RzyuEx1hxJSOrmd/KA3wScEziXcIpgoqGuM8I1Fa54Ty6xcBEa6jrlcC0X1W/8pXzcnoe6zgnnfLOhDmXKj0VISOtc0596dY10x05oqOuO8xAwD2zrmAeEprqeB4Smup4HhJa6ngeMlrr+KyK01PWfKqOhTuaBYrNtqKuvQhxvn9uG+q8PFY7b7WP7x7qeB9TBLOt1PQ+Yg1nW63oeMAezrNf1POAObuF1Mg+Yg1t4ncMdsFDaHbBYOMwtm3ctwatvYYHDygKHwRKABQ6DIQELHO1DQlvgMBgSsMBhMSRggaN9SBBLdtgMCVjg+K9DAlgOCWA5JIDlkAA2Q4LTPiQ4JkMCrNcdx482/Gij5Whj8qMNP9rwow0/2nAcx7HjC8pg1fBM8ggRAAAAAElFTkSuQmCC" width="100" height="100">
<figcaption><strong>IMG</strong> static image</figcaption>
</figure>
<figure>
<canvas data-jdenticon-value="Icon0" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> data-jdenticon-value</figcaption>
</figure>
<h1>"Icon0" - Should be equal to above, but black and no background</h1>
<figure>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAMFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABaPxwLAAAAD3RSTlMAECAwT1Bgf4C/wM/Q7/B+lp4GAAABKUlEQVR4Ae3ZwUrDUBSEYXtsYhLNPe//tiIlNPCDm5lQCvMtD8pP6GbgfkREXKzuX/eyHqHW/rOW7wjz3g/77DpC7X3Yy3SEtZ9WzxGqz8pyhKnPJssRlj5bxOMLvuTa3wS2ftpMR6jRh1GmI83Hn43ZdqTaHh9b+vE/NS1TmY8Rrx4SROKQIFKHBJE6JIjkIUGkDgkieUgQyUMCbp+8iUOCje/Bijgk2OjeWVGHBBqs6EOCDVb0IcEGK/qQYIMVfUiwwYo+JNhgRceGqYLG5ZXbT8NgxF6xNlDRG1wCrLChDwlW2NCHBCtsyEMCFTbkIYEKG/KQQIUNeUigwsZ7DgnyDwnyDwnyDwnyDwnyDwnyDwny/3tEnjbytJGnjTxt5GkjTxvXioj4BeoMdgqOkiMwAAAAAElFTkSuQmCC" width="100" height="100">
<figcaption><strong>IMG</strong> static image</figcaption>
</figure>
<figure>
<canvas id="explicit-config-update" data-jdenticon-value="Icon0" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> update()</figcaption>
</figure>
<figure>
<canvas id="explicit-config-drawIcon" data-jdenticon-value="Icon0" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> drawIcon()</figcaption>
</figure>
<figure>
<canvas id="explicit-config-jquery" data-jdenticon-value="Icon0" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> jQuery(value)</figcaption>
</figure>
<figure>
<span id="explicit-config-toSvg"></span>
<figcaption><strong>SVG</strong> toSvg(value)</figcaption>
</figure>
<h1>"Icon04" - Should be equal but different to the icon above</h1>
<figure>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAARVBMVEUAAP9tgO1thu1xiO50i+4xMYJAQGJDQ2RDQ11HR1ZHR1hLS1Cpx+RKSk+oxuSox+SqyeOqyuNLS01LS0xMTExZl8esy+PUIpVsAAAAFHRSTlMRKiotLi9bXGuIiMPDxMXN4uXw8Y2KdJAAAAGXSURBVHgB7JHbioNAEAVPLh11zewmY6///6lLWCTi1MjQkDfrsanyIKODAAcH5+/zx/PTY36cFAZzkOb4CuckgWa3r5tJeGzIQSo0G/3FaOIj5fsbpdZn/yf34iPn9Y1Ss+wL2VQ/ck4boI3+ZpT4yDlvgGa+xiQ+ck4bpHW+ppOER8633OeSu6TB1wyS8Mj5lsuzkJ6X9j/hHFZQan0TzmEFpeRvksRHznmFJJt8YTLxkfPaCkn9tHyuFx85r6+QZMlfJBMfOd9bQcm6oTMJjg05ruxLgZy0+EZ7fv25Kk4g/21Gcf7as2NUhYIwisErePvf7gPbbwrDKKKcdBaHILeYwP+FEvKgS5wLedAlzIE86BLmYh5ECXM458Hhq/r7gfMzPkVN4lx8VKPEuZgHUeL8/f/kk9/EPEgS52IeRIlzMQ+ixLmYB1HiXMyDKHEu0iW/9TJO0j98D4ki6SGRJT0kuqSHRJEsJBYSCwmR65AQuQ4JkeuQEGH+JHt+ZaeNnTZ22vjbaWOnjZ02dtrYaQNeNh9j/APLmwnC0xscngAAAABJRU5ErkJggg==" width="100" height="100">
<figcaption><strong>IMG</strong> static image</figcaption>
</figure>
<figure>
<canvas data-jdenticon-value="Icon04" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> data-jdenticon-value</figcaption>
</figure>
<figure>
<canvas data-jdenticon-hash="f97deee25dde01afb80ec1c7e4fae746492ddacb" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> data-jdenticon-hash</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-update-hash" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> update(hash)</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-update-value" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> update(value)</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-jquery-hash" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> jQuery(hash)</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-jquery-value" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> jQuery(value)</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-drawIcon-hash" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> drawIcon(hash)</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-drawIcon-value" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> drawIcon(value)</figcaption>
</figure>
<figure>
<span id="placeholder-canvas-Jdenticon-dynamic"></span>
<figcaption><strong>Canvas</strong> dynamic</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-resize" data-jdenticon-value="Icon04" width="10" height="10"></canvas>
<figcaption><strong>Canvas</strong> resize</figcaption>
</figure>
<figure>
<svg data-jdenticon-value="Icon04" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> data-jdenticon-value</figcaption>
</figure>
<figure>
<svg data-jdenticon-hash="f97deee25dde01afb80ec1c7e4fae746492ddacb" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> data-jdenticon-hash</figcaption>
</figure>
<figure>
<svg id="svg-Jdenticon-update-hash" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> update(hash)</figcaption>
</figure>
<figure>
<svg id="svg-Jdenticon-update-value" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> update(value)</figcaption>
</figure>
<figure>
<svg id="svg-Jdenticon-jquery-hash" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> jQuery(hash)</figcaption>
</figure>
<figure>
<svg id="svg-Jdenticon-jquery-value" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> jQuery(value)</figcaption>
</figure>
<figure>
<span id="svg-Jdenticon-toSvg-hash"></span>
<figcaption><strong>SVG</strong> toSvg(hash)</figcaption>
</figure>
<figure>
<span id="svg-Jdenticon-toSvg-value"></span>
<figcaption><strong>SVG</strong> toSvg(value)</figcaption>
</figure>
<figure>
<span id="placeholder-svg-Jdenticon-dynamic"></span>
<figcaption><strong>SVG</strong> dynamic</figcaption>
</figure>
<figure>
<svg id="svg-Jdenticon-resize" data-jdenticon-value="Icon04" width="10" height="10"></svg>
<figcaption><strong>SVG</strong> resize</figcaption>
</figure>
<script>
var jdenticon_config = {
backColor: "#00f1",
replaceMode: "observe"
};
</script>
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/require1k@1.0.1/require1k.min.js"></script>
<script>
// Explicit config
setTimeout(function () {
var explicitConfig = {
lightness: {
color: [0.00, 0.00],
grayscale: [0.00, 0.00]
},
saturation: {
color: 0.00,
grayscale: 0.00
},
padding: 0.08
};
jdenticon.update("#explicit-config-update", null, explicitConfig);
var ctx = document.getElementById("explicit-config-drawIcon").getContext("2d");
jdenticon.drawIcon(ctx, "Icon0", 100, explicitConfig);
document.getElementById("explicit-config-toSvg").innerHTML =
jdenticon.toSvg("Icon0", 100, explicitConfig);
$("#explicit-config-jquery").jdenticon("Icon0", explicitConfig);
});
// update()
jdenticon.update("#canvas-Jdenticon-update-value,#svg-Jdenticon-update-value", "Icon04");
jdenticon.update("#canvas-Jdenticon-update-hash,#svg-Jdenticon-update-hash", "f97deee25dde01afb80ec1c7e4fae746492ddacb");
// drawIcon()
var ctx = document.getElementById("canvas-Jdenticon-drawIcon-value").getContext("2d");
jdenticon.drawIcon(ctx, "Icon04", 100, 0.08);
var ctx = document.getElementById("canvas-Jdenticon-drawIcon-hash").getContext("2d");
jdenticon.drawIcon(ctx, "f97deee25dde01afb80ec1c7e4fae746492ddacb", 100, 0.08);
// toSvg()
document.getElementById("svg-Jdenticon-toSvg-value").innerHTML =
jdenticon.toSvg("Icon04", 100);
document.getElementById("svg-Jdenticon-toSvg-hash").innerHTML =
jdenticon.toSvg("f97deee25dde01afb80ec1c7e4fae746492ddacb", 100);
// jQuery
$("#canvas-Jdenticon-jquery-value,#svg-Jdenticon-jquery-value").jdenticon("Icon04");
$("#canvas-Jdenticon-jquery-hash,#svg-Jdenticon-jquery-hash").jdenticon("f97deee25dde01afb80ec1c7e4fae746492ddacb");
// Dynamic icons
setTimeout(function () {
// Canvas
document.getElementById("placeholder-canvas-Jdenticon-dynamic").innerHTML =
'<canvas data-jdenticon-value="Icon04" width="100" height="100"> Error </canvas>';
document.getElementById("canvas-Jdenticon-resize").setAttribute("width", "100");
document.getElementById("canvas-Jdenticon-resize").setAttribute("height", "100");
// Svg
document.getElementById("placeholder-svg-Jdenticon-dynamic").innerHTML =
'<svg data-jdenticon-value="Icon04" width="100" height="100"> Error </svg>';
document.getElementById("svg-Jdenticon-resize").setAttribute("width", "100");
document.getElementById("svg-Jdenticon-resize").setAttribute("height", "100");
}, 1000);
</script>
<script src="common.js"></script>
</body>
</html>

View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html>
<head>
<title>Jdenticon</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>"Icon04" - Should be equal - <span id="padding-percent"></span>% padding in style</h1>
<figure class="padding-0-only">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAUVBMVEUAAP8fH6JtgPNrgu1vhe5yiO81NXE4OGU/P1RCQlJBQVJCQk1DQ05ERExDQ0xERElEREqoxuSoxuSox+SqyeOqyeJFRUZFRUZGRkZZl8esy+Mq/AT0AAAAGHRSTlMSISorLi8/TnqIiaantbbExMTFzeLm8PFg+1g3AAABrUlEQVR4AazS2W6DMBQG4XEW0yQsTZsEyvs/aJEqy0AzF5b8337SHLGw2vHrSJ156vCYHwfKZymBucIVSWWocEVSGYTi5fZ5u0RwsJTAPwrd9Lcu4GApgR01rynt1eBgKYENhSWVYwEHT2UQ6qb1OjDwVAahOG0XwcBTCYS47lofgIGnBNKVdtdqARQ8dZ/f7w4w7FoDgIKnTs+38DyVP4mnFhIo/yaeWkig9O+SVCIB6DepHhwsJZSBMK5SY8DBU5kEaHJsbHDw1JoECOnF9AEHTe1IAOK1HdprBAdLCWUomaSEatyQVCKB8nmK8/eZGitI/RTvtz07RmEYBqAYev9bt1uXPgIaTDDfYweJYkME36wmmeSXalUCFFItS4ByqhUJUE61IgHKqfb/Ovnb9wClj2mTAKUsaBKgFDhNApRSrUmAOvBPjtzJkdflVGsSoJBqUQIUUi1KgEKqRQlQSLUoIcqnSxYSk7xK0p+w4y5IStwFSYi7IAlx1ySLu8Xd4u6CuHs+Le6CJMRdkIS4SxKiFhLvlWyW3Sy7WXaz7GbZzbKbZTfLbpa9YJb9AArjwlhWWmFfAAAAAElFTkSuQmCC" width="100" height="100">
<figcaption><strong>IMG</strong> static image</figcaption>
</figure>
<figure class="padding-30-only">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAJ1BMVEUAAP8wMIU4OGc4OGU+PlibteekwuOlwuRFRUZFRUZGRkZZl8esy+M8HoHgAAAACnRSTlMSME1Oa2ump/DxPobHuQAAANNJREFUeAHt1sEKgzAQhGFjklqN7/+8tSV1PCx42D0E+b+LCwO7IAxkwvMBAAAA9XWX+tV973vSPCdNSkNu9D1lOxRNSgNu9D1p+3onTUr9N/qevP3kSZPSmCOLeURpxJXl/5PWpOmSOtVzS1mPzeU6KfWq55aUc7pOSv3qcpPGaYYphtrdDEpd1O5mUOqidp9/R9+m1EPFM48oHf6I2m0eUeqhdptHlDqo3fYRpaOVcYDG278rtPH2ERr//MYb4htvGLLxvOp51fOq51U/PgAAAAAfGl0flQBGOTMAAAAASUVORK5CYII=" width="100" height="100">
<figcaption><strong>IMG</strong> static image</figcaption>
</figure>
<figure>
<canvas data-jdenticon-value="Icon04" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> data-jdenticon-value</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-update-value" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> update(value)</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-jquery-value" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> jQuery(value)</figcaption>
</figure>
<figure>
<canvas id="canvas-Jdenticon-drawIcon-value" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> drawIcon(value)</figcaption>
</figure>
<figure>
<svg data-jdenticon-value="Icon04" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> data-jdenticon-value</figcaption>
</figure>
<figure>
<svg id="svg-Jdenticon-update-value" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> update(value)</figcaption>
</figure>
<figure>
<svg id="svg-Jdenticon-jquery-value" width="100" height="100"></svg>
<figcaption><strong>SVG</strong> jQuery(value)</figcaption>
</figure>
<figure>
<span id="svg-Jdenticon-toSvg-value"></span>
<figcaption><strong>SVG</strong> toSvg(value)</figcaption>
</figure>
<script>
var padding = 0;
// Load padding from query string
var match = /\?padding=(\d+)/.exec(location.href);
if (match) {
padding = Number(match[1]);
}
document.getElementById("padding-percent").innerHTML = padding;
var className = document.body.className;
document.body.className = (className ? className + " " : "") + "padding-" + padding;
var jdenticon_config = {
padding: padding / 100,
backColor: "#00f1",
};
</script>
<script src="https://cdn.jsdelivr.net/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/require1k@1.0.1/require1k.min.js"></script>
<script>
jdenticon.update("#canvas-Jdenticon-update-value,#svg-Jdenticon-update-value", "Icon04");
var ctx = document.getElementById("canvas-Jdenticon-drawIcon-value").getContext("2d");
jdenticon.drawIcon(ctx, "Icon04", 100);
document.getElementById("svg-Jdenticon-toSvg-value").innerHTML =
jdenticon.toSvg("Icon04", 100);
$("#canvas-Jdenticon-jquery-value,#svg-Jdenticon-jquery-value").jdenticon("Icon04");
</script>
<script src="common.js"></script>
</body>
</html>

View File

@@ -0,0 +1,64 @@
html {
padding: 0;
margin: 0;
}
body {
margin: 0;
padding: 20px;
}
h1 {
font: bold 16px Arial;
margin: 30px 0 15px;
}
h1:first-child {
margin-top: 0;
}
.test-metadata {
font: 14px Arial;
margin: 0 0 1em;
min-height: 4em;
background: #C1D1EA;
padding: 10px;
line-height: 1.4;
}
.jdenticon-info {
font-weight: bold;
}
canvas,
svg,
img {
border: 6px solid #444;
margin-bottom: 5px;
}
figure {
width: 116px;
font: 10px Arial;
margin: 0 10px 16px 0;
display: inline-block;
vertical-align: top;
}
figure strong {
display: block;
}
.padding-0 .padding-30-only,
.padding-30 .padding-0-only {
display: none;
}
iframe {
border: none;
width: 100%;
height: 100px;
margin: 0 -20px;
}

View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<title>Jdenticon</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script>
var jdenticon_config = {
backColor: "#00f1"
};
</script>
<script src="/node_modules/jdenticon/dist/jdenticon.min.js"></script>
</head>
<body>
<h1>"Icon0" - UMD in &lt;head&gt; - Should be equal</h1>
<figure>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAWlBMVEUAAP9aOuYxMYKdne+CXN5AQGLHx+lDQ2TIyOlDQ13NzedHR1ZHR1jW1ufY2OdLS1Dg4OVKSk/g4OWjc9Gjc9FLS02ldNDj4+RLS0yldNDj4+VMTEymddHl5eU2yqFLAAAAG3RSTlMRHy8vPVtbXFxra4iIiIjDw8TE0tPw8PDx8fEmYw1hAAABrUlEQVR42u2ZYWvCQBBE6542UVuT2Kaxnvf//2aR45hrl2mgxyKFfR+HjM9EggP35DiOY0x4fn0OP0PZveyEhLTOFWO6M367ToZ4ZxAe6jrnsKTMckC4n2Nm3tNQ1ylhSYUllFDmWJiFhrrOGBMYSzhEMNBQ1wkh1YQcSqwRErK6pk81fQ67WNORkNU1p1RzyuEx1hxJSOrmd/KA3wScEziXcIpgoqGuM8I1Fa54Ty6xcBEa6jrlcC0X1W/8pXzcnoe6zgnnfLOhDmXKj0VISOtc0596dY10x05oqOuO8xAwD2zrmAeEprqeB4Smup4HhJa6ngeMlrr+KyK01PWfKqOhTuaBYrNtqKuvQhxvn9uG+q8PFY7b7WP7x7qeB9TBLOt1PQ+Yg1nW63oeMAezrNf1POAObuF1Mg+Yg1t4ncMdsFDaHbBYOMwtm3ctwatvYYHDygKHwRKABQ6DIQELHO1DQlvgMBgSsMBhMSRggaN9SBBLdtgMCVjg+K9DAlgOCWA5JIDlkAA2Q4LTPiQ4JkMCrNcdx482/Gij5Whj8qMNP9rwow0/2nAcx7HjC8pg1fBM8ggRAAAAAElFTkSuQmCC" width="100" height="100">
<figcaption><strong>IMG</strong> static image</figcaption>
</figure>
<figure>
<canvas data-jdenticon-value="Icon0" width="100" height="100"></canvas>
<figcaption><strong>Canvas</strong> UMD in &lt;head&gt;</figcaption>
</figure>
<script src="common.js"></script>
</body>
</html>