<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
@font-face {
    font-family: TestFont1;
    src: local('Courier New');
}

@font-face {
    font-family: TestFont2;
    src: url(../../resources/Ahem.ttf);
    unicode-range: u+61-7a; /* 'a'-'z' */
}
</style>
<script>
description('Test load events for fontloader.loadFont() with multiple font families.');

window.jsTestIsAsync = true;

var events = {};

function countEvent(e) {
    if (!events[e.type])
        events[e.type] = 0;
    events[e.type] += 1;
}

function runTests() {
    document.fontloader.addEventListener('loading', countEvent);
    document.fontloader.addEventListener('loadstart', countEvent);
    document.fontloader.addEventListener('load', countEvent);
    document.fontloader.addEventListener('error', countEvent);
    document.fontloader.addEventListener('loadingdone', countEvent);

    document.fontloader.loadFont({ font: '10px TestFont1, TestFont2', onsuccess: onsuccess, onerror: onerror });
    document.fontloader.notifyWhenFontsReady(verify);
}

function onsuccess() {
    shouldBe("events['loading']", "1");
    shouldBe("events['loadstart']", "2");
    shouldBe("events['load']", "2");
    shouldBe("events['error']", "undefined");
    shouldBe("events['loadingdone']", "undefined");
    shouldBe("document.fontloader.checkFont('10px TestFont1, TestFont2')", "true");
}

function onerror() {
    testFailed("Expected success, but onerror() called");
}

function verify() {
    shouldBe("events['loadingdone']", "1");
    finishJSTest();
}

if (document.fontloader)
    runTests();
else {
    testFailed('document.fontloader does not exist');
    finishJSTest();
}
</script>
</head>
<body>
  <script src="../../resources/js-test-post.js"></script>
</body>
</html>