<!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 success */
@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.js"></script>
</head>
<body onload="runTest()">
<div id="description"></div>
<div id="tests"></div>
<div id="console"></div>
<div id="out"></div>
<script>
if (window.testRunner)
window.testRunner.waitUntilDone();
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");
}
}
if (window.testRunner)
window.testRunner.notifyDone();
}
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"));
}
// We need to run tests after the font downloading succeeded or failed.
// Using a timer is not ideal, but there seems to be no better options.
function runTest()
{
window.setTimeout(test, 200);
}
</script>
</body>
</html>