font-face-css-change-while-loading.html

<!DOCTYPE html>
<style id="sheet">
@font-face {
    font-family: myahem;
    src: url(../../resources/Ahem.ttf);
}
</style>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

function getDocumentFontFaces() {
    var faces = [];
    document.fonts.forEach(function(face) { faces.push(face); });
    return faces;
}

function runTest() {
    var face = getDocumentFontFaces()[0];

    document.getElementById("t").style.fontFamily = "myahem";
    document.body.offsetTop; // force recalc and start loading font.

    var newStyle = document.createElement("style");
    newStyle.innerHTML = "#dummy { color: red; }";
    var referenceNode = document.getElementById("sheet");
    referenceNode.parentNode.insertBefore(newStyle, referenceNode);

    face.loaded.then(finish);
}

function finish() {
    if (window.testRunner)
        testRunner.notifyDone();
}

onload = function() {
    // FIXME: we need a better way of waiting for chromium events to happen
    setTimeout(runTest, 1);
}
</script>
<p>You should see a black rectangle below.</p>
<div id="t">FAIL</div>

chromium/third_party/blink/web_tests/fast/css/font-face-css-change-while-loading.html