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

window.jsTestIsAsync = true;

var event;
var numberOfEvents = 0;

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

function runTests() {
    document.fonts.onloading = handleEvent;
    document.fonts.onloadingdone = handleEvent;
    document.fonts.onloadingerror = handleEvent;

    document.fonts.ready.then(function() {
        shouldBe('numberOfEvents', '2');
        finishJSTest();
    });
}

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