<!DOCTYPE html>
<html>
<head>
<script>
    if (window.testRunner)
        testRunner.dumpAsText();

    function log(msg)
    {
        document.getElementById('console').appendChild(document.createTextNode(msg + "\n"));
    }

    var families = [
        "serif",
        "sans-serif",
        "cursive",
        "fantasy",
        "monospace",
        "system-ui"
    ];

    window.onload = function()
    {
        for (var i = 0; i < families.length; i++) {
            var family = families[i];
            var div = document.createElement("div");
            div.setAttribute("style", "font-family: " + family);
            document.body.appendChild(div);

            var returnedFamily = window.getComputedStyle(div).fontFamily
            if (family == returnedFamily)
                log("PASS: The computed style for a specified font-family of '" + family + "' matched.");
            else
                log("FAIL: The computed style for a specified font-family of '" + family + "' did not match.  Actual result was '" + returnedFamily + "'.");
        }
    }
</script>
</head>
<body>
    <pre id="console"></pre>
</body>
</html>
