<!doctype html>
<html>
<head>
<title>Test for Bug 42342 - Font download error for an @font-face rule invalidates other @font-face rules for the same font-family</title>
<style>
.test {
    font-family: Times;
    border: solid 1px;
}

/* Test 0: Download sucess */
@font-face {
    font-family:myfont_0;
    src: local('Courier'), local('Courier New');
}
@font-face {
    font-family:myfont_0;
    src: url('../../resources/Ahem.otf');
    unicode-range: u+69; /* 'i' */
}

/* Test 1: Download error */
@font-face {
    font-family:myfont_1;
    src: local('Courier'), local('Courier New');
}
@font-face {
    font-family:myfont_1;
    src: url('resources/DownLoadErrorAhem.otf');
    unicode-range: u+69; /* 'i' */
}

/* Test 2: Download error followed by success */
@font-face {
    font-family:myfont_2;
    src: local('Courier'), local('Courier New');
}
@font-face {
    font-family:myfont_2;
    src: url('resources/DownLoadErrorAhem.otf'), url('../../resources/Ahem.otf');
    unicode-range: u+69; /* 'i' */
}

/* Test 3: Download error followed by existing local font */
@font-face {
    font-family:myfont_3;
    src: local('Courier'), local('Courier New');
}
@font-face {
    font-family:myfont_3;
    src: url('resources/DownLoadErrorAhem.otf'), local(Arial);
    unicode-range: u+69; /* 'i' */
}

</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body onload="test()">
<div id="description"></div>
<div id="tests"></div>

<div id="console"></div>
<div id="out"></div>
<script>
jsTestIsAsync = true;

description("If no font resources are available for an @font-face rule due to download errors, the rule must be ignored but others must remain in effect.");

var testsElement = document.getElementById("tests");
var testStrings = [
    "iiiiiiiiii",
    "jjjjjjjjjj"
];
var expectedResults = [
    // Effective font family for "i" and "j"
    ["Ahem", "Courier"],
    ["Courier", "Courier"],
    ["Ahem", "Courier"],
    ["Arial", "Courier"]
];

function createAndAppendSpan(id, subId, fontFamily)
{
    var span = document.createElement("span");
    span.id = id;
    span.className = "test";
    span.style.fontFamily = fontFamily;
    span.innerHTML = testStrings[subId];
    testsElement.appendChild(span);
    testsElement.appendChild(document.createTextNode(" " + id));
    testsElement.appendChild(document.createElement("br"));
}

function testId(mainTestId, subTestId)
{
    return "test_" + mainTestId + "_" + subTestId;
}

function refId(mainTestId, subTestId)
{
    return "ref_" + mainTestId + "_" + subTestId;
}

function test()
{
    for (var mainTestId = 0; mainTestId < expectedResults.length; mainTestId++) {
        for (var subTestId = 0; subTestId < testStrings.length; subTestId++) {
            shouldBe("document.getElementById('" + testId(mainTestId, subTestId) + "').offsetWidth", "document.getElementById('" + refId(mainTestId, subTestId) + "').offsetWidth");
        }
    }
    finishJSTest();
}

for (var mainTestId = 0; mainTestId < expectedResults.length; mainTestId++) {
    for (var subTestId = 0; subTestId < testStrings.length; subTestId++) {
        var testFontFamily = "myfont_" + mainTestId;
        createAndAppendSpan(testId(mainTestId, subTestId), subTestId, testFontFamily);
        var refFontFamily = expectedResults[mainTestId][subTestId];
        createAndAppendSpan(refId(mainTestId, subTestId), subTestId, refFontFamily);
    }
    testsElement.appendChild(document.createElement("br"));
}

// Force layout, so that fonts begin to load before the document finishes loading, and thus delay the load event.
document.body.offsetTop;

</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>