<!DOCTYPE html>
<html>
<head>
<script>
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}
</script>
<style>
@font-face {
    font-family: "WebFont";
    src: url("../../resources/Ahem.ttf") format("truetype");
}
</style>
</head>
<body>
<p>
This test makes sure that drawing a variety of different kinds of fonts into canvas doesn't cause a crash. The test passes if there is no crash.
</p>
<canvas id="canvas" width="400" height="200"></canvas>
<script>
let context = document.getElementById("canvas").getContext("2d");
document.fonts.keys().next().value.load().then(function() {
    for (const font of ["WebFont", "Helvetica", "system-ui", "ui-serif", "ui-monospace", "ui-rounded", "-apple-menu", "-apple-status-bar", "lastresort", "-apple-system-monospaced-numbers"]) {
        for (const weight of ["normal", "bold"]) {
            context.fillStyle = font == "WebFont" ? "black" : "green";
            context.font = `${weight} 48px ${font}`;
            context.fillText("Hello", 0, 150);
        }
    }
    for (const font of ["body", "headline", "subheadline", "caption1", "caption2", "footnote", "short-body", "short-headline", "short-subheadline", "short-caption1", "short-footnote", "tall-body", "title0", "title1", "title2", "title3", "title4"]) {
        context.font = `-apple-system-${font}`;
        context.fillText("Hello", 0, 150);
    }
    if (window.testRunner)
        testRunner.notifyDone();
});
</script>
</body>
</html>