<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
This test is designed to test the interaction between font-family and font-weight. In particular, our implementation of font-family accepts PostScript names, which may name a font with a particular weight. However, there is another CSS property, font-weight, in which the author may also name a particular weight. Our font selection algorithm takes both of these signals into account when choosing fonts.<br><br>There is currently no good way in JavaScript to find the actual font chosen for some text. Therefore, the best way to test this aspect of the font selection algorithm is to dump the render tree, therefore testing glyph advances (which are a property of font weight).
<script>
function generateElements(fontNames) {
    ["normal", "italic"].forEach(function(fontStyle) {
        fontNames.forEach(function(fontName) {
            for (var fontWeight = 100; fontWeight < 1000; fontWeight += 100) {
                var d = document.createElement("div");
                d.innerText = "Font: " + fontName + " Weight: " + fontWeight + " Style: " + fontStyle;
                document.body.appendChild(d);
                d = document.createElement("div");
                d.style.fontFamily = fontName;
                d.style.fontWeight = fontWeight;
                d.style.fontStyle = fontStyle;
                d.innerText = "果城的美譽。中国古";
                document.body.appendChild(d);
            }
        });
    });
}
var heitiFonts = ["Heiti SC", "STHeitiSC-Light", "STHeitiSC-Medium"];
var songtiFonts = ["Songti SC", "STSongti-SC-Regular", "STSongti-SC-Light", "STSongti-SC-Bold", "STSongti-SC-Black"];
var hiraginoFonts = ["Hiragino Kaku Gothic ProN", "HiraKakuProN-W3", "HiraKakuProN-W6"];
var appleSDGothicNeoFonts = ["Apple SD Gothic Neo", "AppleSDGothicNeo-Regular", "AppleSDGothicNeo-Medium", "AppleSDGothicNeo-Light", "AppleSDGothicNeo-UltraLight", "AppleSDGothicNeo-Thin", "AppleSDGothicNeo-SemiBold", "AppleSDGothicNeo-Bold", "AppleSDGothicNeo-ExtraBold", "AppleSDGothicNeo-Heavy"];
generateElements(heitiFonts);
generateElements(songtiFonts);
generateElements(hiraginoFonts);
generateElements(appleSDGothicNeoFonts);
</script>
</body>
</html>