<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
@font-face {
  font-family: 'ahem';
  src: url(../../resources/Ahem.ttf);
}
</style>
<script>
description('Test that the event handlers of FontLoader are called in the correct order.');

window.jsTestIsAsync = true;

var event;
var numberOfEvents = 0;

function handleEvent(e) {
    event = e;
    shouldBeEqualToString('event.type', ['loading', 'loadstart', 'load', 'loadingdone'][numberOfEvents]);
    numberOfEvents++;
}

function runTests() {
    document.fonts.onloading = handleEvent;
    document.fonts.onloadingdone = handleEvent;
    document.fonts.onloadstart = handleEvent;
    document.fonts.onload = handleEvent;
    document.fonts.onerror = handleEvent;

    document.fonts.notifyWhenFontsReady(function() {
        shouldBe('numberOfEvents', '4');
        finishJSTest();
    });
}

if (document.fonts)
    runTests();
else {
    testFailed('document.fonts does not exist');
    finishJSTest();
}
</script>
</head>
<body>
  <div style="font-family: ahem">Hello, world!</div>
  <script src="../../resources/js-test-post.js"></script>
</body>
</html>