| <!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="../js/resources/js-test-pre.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> |
| <script src="../js/resources/js-test-post.js"></script> |
| </body> |
| </html> |
| |
