chromium/src/third_party/blink/web_tests/http/tests/webfont/fallback-font-while-loading.html

<style>
@font-face {
    font-family: webfont;
    src: url(slow-ahem-loading.cgi);
}
</style>
<p>
This test checks that the fallback font is used for layout while a webfont is loading.
</p>
Target:
<div>
<span id="target-arial" style="font-family: webfont, Arial;">A text to be measured.</span>
</div>
<div>
<span id="target-serif" style="font-family: webfont, serif;">A text to be measured.</span>
</div>
<div>
<span id="target-monospace" style="font-family: webfont, monospace;">A text to be measured.</span>
</div>
<div>
<span id="target-default" style="font-family: webfont;">A text to be measured.</span>
</div>
Reference:
<div>
<span id="reference-arial" style="font-family: Arial;">A text to be measured.</span>
</div>
<div>
<span id="reference-serif" style="font-family: serif;">A text to be measured.</span>
</div>
<div>
<span id="reference-monospace" style="font-family: monospace;">A text to be measured.</span>
</div>
<div>
<span id="reference-default">A text to be measured.</span>
</div>
<pre id="result"></pre>

<script>
if (window.testRunner) {
    testRunner.dumpAsText();
}

function checkSize(fallbackFont) {
    var target = document.getElementById('target-' + fallbackFont);
    var reference = document.getElementById('reference-' + fallbackFont);
    var result = document.getElementById('result');
    result.innerText += fallbackFont + '\n';
    if (target.offsetWidth == reference.offsetWidth && target.offsetHeight == reference.offsetHeight) {
        result.innerText += 'PASS: The width of target text and reference text is the same.\n';
    } else {
        result.innerText += 'FAIL: The width of target text and reference text is different: '
            + target.offsetWidth + ' != ' + reference.offsetWidth + ' or ' + target.offsetHeight + ' != ' + reference.offsetHeight + '\n';
    }
}

checkSize('arial');
checkSize('serif');
checkSize('default');
// FIXME: checkSize('monospace');
</script>