98 lines
3.3 KiB
JavaScript
98 lines
3.3 KiB
JavaScript
/* globals testAPI */
|
|
(function(){
|
|
"use strict";
|
|
|
|
const fonts = ["none", "sans-serif", "serif", "monospace", "cursive", "fantasy"];
|
|
const charCodePoints = [
|
|
0x20B9, 0x2581, 0x20BA, 0xA73D, 0xFFFD, 0x20B8, 0x05C6,
|
|
0x1E9E, 0x097F, 0xF003, 0x1CDA, 0x17DD, 0x23AE, 0x0D02, 0x0B82, 0x115A,
|
|
0x2425, 0x302E, 0xA830, 0x2B06, 0x21E4, 0x20BD, 0x2C7B, 0x20B0, 0xFBEE,
|
|
0xF810, 0xFFFF, 0x007F, 0x10A0, 0x1D790, 0x0700, 0x1950, 0x3095, 0x532D,
|
|
0x061C, 0x20E3, 0xFFF9, 0x0218, 0x058F, 0x08E4, 0x09B3, 0x1C50, 0x2619
|
|
];
|
|
const textMetricsProperties = [
|
|
"width",
|
|
"actualBoundingBoxAscent",
|
|
"actualBoundingBoxDescent",
|
|
"actualBoundingBoxLeft",
|
|
"actualBoundingBoxRight",
|
|
"alphabeticBaseline",
|
|
"emHeightAscent",
|
|
"emHeightDescent",
|
|
"fontBoundingBoxAscent",
|
|
"fontBoundingBoxDescent",
|
|
"hangingBaseline",
|
|
"ideographicBaseline",
|
|
].filter(function(property){
|
|
return TextMetrics.prototype.hasOwnProperty(property);
|
|
});
|
|
|
|
const hashTable = document.querySelector("#measureText .hashes table");
|
|
textMetricsProperties.forEach(function(property){
|
|
const row = document.createElement("tr");
|
|
hashTable.appendChild(row);
|
|
|
|
const name = document.createElement("td");
|
|
name.textContent = property + ": ";
|
|
row.appendChild(name);
|
|
|
|
const hash = document.createElement("td");
|
|
hash.className = "hash " + property;
|
|
row.appendChild(hash);
|
|
});
|
|
|
|
async function testMeasureText(){
|
|
const canvas = document.createElement("canvas");
|
|
document.body.appendChild(canvas);
|
|
const node = document.createElement("span");
|
|
document.body.appendChild(node);
|
|
const context = canvas.getContext("2d");
|
|
|
|
const data = new Float64Array(fonts.length * charCodePoints.length * textMetricsProperties.length);
|
|
let dataIndex = 0;
|
|
const propertyData = {};
|
|
textMetricsProperties.forEach(function(property){
|
|
propertyData[property] = new Float64Array(fonts.length * charCodePoints.length);
|
|
});
|
|
let propertyDataIndex = 0;
|
|
|
|
let differences = 0;
|
|
|
|
fonts.forEach(function(font){
|
|
context.font = node.style.font = "22000px " + font;
|
|
|
|
charCodePoints.forEach(function(charCodePoint){
|
|
const char = String.fromCodePoint(charCodePoint);
|
|
node.textContent = char;
|
|
|
|
const textMetric = context.measureText(char);
|
|
const domRect = node.getBoundingClientRect();
|
|
textMetricsProperties.forEach(function(property){
|
|
data[dataIndex] = textMetric[property];
|
|
propertyData[property][propertyDataIndex] = textMetric[property];
|
|
dataIndex += 1;
|
|
});
|
|
propertyDataIndex += 1;
|
|
if (textMetric.width !== domRect.width){
|
|
differences += 1;
|
|
console.log("difference at", char, "(", charCodePoint, ")", "with", font);
|
|
console.log(textMetric.width, "!==", domRect.width);
|
|
}
|
|
});
|
|
});
|
|
document.body.removeChild(canvas);
|
|
document.body.removeChild(node);
|
|
|
|
document.querySelector("#measureText .differences").textContent =
|
|
differences + " of " + fonts.length * charCodePoints.length;
|
|
textMetricsProperties.forEach(async function(property){
|
|
document.querySelector("#measureText .hash." + property).textContent =
|
|
await testAPI.hash(propertyData[property]);
|
|
});
|
|
document.querySelector("#measureText .hash.all").textContent = await testAPI.hash(data);
|
|
|
|
}
|
|
|
|
testMeasureText();
|
|
document.querySelector("#measureText .refresh").addEventListener("click", testMeasureText);
|
|
}()); |