canvas-font-cycler.html | Explore in Territory

<!DOCTYPE html>
<html>
<body>
<canvas id='c'></canvas>
<script>
var fontNameList = ["Palatino Linotype", "Times New Roman", "Arial", "sans-serif"]
var fontWeightList = ["", "bold", "bolder", "lighter"];
var fontSizeList = ["10pt", "15pt", "20pt", "small", "large", "15px", "20mm"];

var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");

function doFrame() {
	canvas.width = canvas.width;
    for (var i = 0; i < 20; i++) {
        fontNameList.forEach(function(fontName) {
            fontWeightList.forEach(function(fontWeight) {
                fontSizeList.forEach(function(fontSize) {
                    ctx.font = fontWeight + " " + fontSize + " " + fontName;
                    // Use the font to make sure the font is completely resolved (has no pending lazy inits)
                    ctx.fillText("Test", 0, 50);
                });
            });
        });
    }
    requestAnimationFrame(doFrame);
}
requestAnimationFrame(doFrame);
</script>
</body>
</html>

chromium/tools/perf/page_sets/tough_canvas_cases/canvas-font-cycler.html