<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
/* Test 1: Invalid font data */
@font-face {
    font-family: myfont1;
    src: url('resources/invalidfont.png') format(opentype);
}

/* Test 2: Download error */
@font-face {
    font-family: myfont2;
    src: url('resources/DownLoadErrorAhem.otf');
}

/* Test 3: Empty data url */
@font-face {
    font-family: myfont3;
    src: url(data:application/x-truetype-font,) format(truetype);
}

/* Test 4: Download error followed by existing local font */
@font-face {
    font-family: myfont4;
    src: url('resources/DownLoadErrorAhem.otf'), local('Courier New');
}

/* Test 5: Multiple errors */
@font-face {
    font-family: myfont5;
    src: url('resources/DownLoadErrorAhem.otf'), url(data:application/x-truetype-font,) format(truetype);
}
</style>
<script>
description('Test download error cases. "load" or "error" events should be fired exactly once for each @font-face rule.');

window.jsTestIsAsync = true;

var events = {};

function logEvent(e) {
    var family = e.fontface.style.getPropertyValue('font-family');
    if (!events[family])
        events[family] = [];
    events[family].push(e.type);
}

function runTests() {
    document.fonts.addEventListener('loadstart', logEvent);
    document.fonts.addEventListener('load', logEvent);
    document.fonts.addEventListener('error', logEvent);

    document.fonts.notifyWhenFontsReady(function() {
        shouldBe("events['myfont1']", "['loadstart', 'error']");
        shouldBe("events['myfont2']", "['loadstart', 'error']");
        shouldBe("events['myfont3']", "['loadstart', 'error']");
        shouldBe("events['myfont4']", "['loadstart', 'load']");
        shouldBe("events['myfont5']", "['loadstart', 'error']");
        finishJSTest();
    });
}

if (document.fonts)
    runTests();
else {
    testFailed('document.fonts does not exist');
    finishJSTest();
}
</script>
</head>
<body>
  <div style="font-family: myfont1">font1</div>
  <div style="font-family: myfont2">font2</div>
  <div style="font-family: myfont3">font3</div>
  <div style="font-family: myfont4">font4</div>
  <div style="font-family: myfont5">font5</div>
  <script src="../../resources/js-test-post.js"></script>
</body>
</html>