LayoutTests/fast/css/font-face-download-error.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4 <title>Test for Bug 42342 - Font download error for an @font-face rule invalidates other @font-face rules for the same font-family</title>
   5 <style>
   6 .test {
   7     font-family: Times;
   8     border: solid 1px;
   9 }
  10
  11 /* Test 0: Download sucess */
  12 @font-face {
  13     font-family:myfont_0;
  14     src: local('Courier');
  15 }
  16 @font-face {
  17     font-family:myfont_0;
  18     src: url('../../resources/Ahem.otf');
  19     unicode-range: u+69; /* 'i' */
  20 }
  21
  22 /* Test 1: Download error */
  23 @font-face {
  24     font-family:myfont_1;
  25     src: local('Courier');
  26 }
  27 @font-face {
  28     font-family:myfont_1;
  29     src: url('resources/DownLoadErrorAhem.otf');
  30     unicode-range: u+69; /* 'i' */
  31 }
  32
  33 /* Test 2: Download error followed by success */
  34 @font-face {
  35     font-family:myfont_2;
  36     src: local('Courier');
  37 }
  38 @font-face {
  39     font-family:myfont_2;
  40     src: url('resources/DownLoadErrorAhem.otf'), url('../../resources/Ahem.otf');
  41     unicode-range: u+69; /* 'i' */
  42 }
  43
  44 /* Test 3: Download error followed by existing local font */
  45 @font-face {
  46     font-family:myfont_3;
  47     src: local('Courier');
  48 }
  49 @font-face {
  50     font-family:myfont_3;
  51     src: url('resources/DownLoadErrorAhem.otf'), local(Arial);
  52     unicode-range: u+69; /* 'i' */
  53 }
  54
  55 </style>
  56 <script src="../js/resources/js-test-pre.js"></script>
  57 </head>
  58 <body onload="runTest()">
  59 <div id="description"></div>
  60 <div id="tests"></div>
  61
  62 <div id="console"></div>
  63 <div id="out"></div>
  64 <script>
  65 if (window.layoutTestController)
  66     window.layoutTestController.waitUntilDone();
  67
  68 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.");
  69
  70 var testsElement = document.getElementById("tests");
  71 var testStrings = [
  72     "iiiiiiiiii",
  73     "jjjjjjjjjj"
  74 ];
  75 var expectedResults = [
  76     // Effective font family for "i" and "j"
  77     ["Ahem", "Courier"],
  78     ["Courier", "Courier"],
  79     ["Ahem", "Courier"],
  80     ["Arial", "Courier"]
  81 ];
  82
  83 function createAndAppendSpan(id, subId, fontFamily)
  84 {
  85     var span = document.createElement("span");
  86     span.id = id;
  87     span.className = "test";
  88     span.style.fontFamily = fontFamily;
  89     span.innerHTML = testStrings[subId];
  90     testsElement.appendChild(span);
  91     testsElement.appendChild(document.createTextNode(" " + id));
  92     testsElement.appendChild(document.createElement("br"));
  93 }
  94
  95 function testId(mainTestId, subTestId)
  96 {
  97     return "test_" + mainTestId + "_" + subTestId;
  98 }
  99
 100 function refId(mainTestId, subTestId)
 101 {
 102     return "ref_" + mainTestId + "_" + subTestId;
 103 }
 104
 105 function test()
 106 {
 107     for (var mainTestId = 0; mainTestId < expectedResults.length; mainTestId++) {
 108         for (var subTestId = 0; subTestId < testStrings.length; subTestId++) {
 109             shouldBe("document.getElementById('" + testId(mainTestId, subTestId) + "').offsetWidth", "document.getElementById('" + refId(mainTestId, subTestId) + "').offsetWidth");
 110         }
 111     }
 112     if (window.layoutTestController)
 113         window.layoutTestController.notifyDone();
 114 }
 115
 116 for (var mainTestId = 0; mainTestId < expectedResults.length; mainTestId++) {
 117     for (var subTestId = 0; subTestId < testStrings.length; subTestId++) {
 118         var testFontFamily = "myfont_" + mainTestId;
 119         createAndAppendSpan(testId(mainTestId, subTestId), subTestId, testFontFamily);
 120         var refFontFamily = expectedResults[mainTestId][subTestId];
 121         createAndAppendSpan(refId(mainTestId, subTestId), subTestId, refFontFamily);
 122     }
 123     testsElement.appendChild(document.createElement("br"));
 124 }
 125
 126 // We need to run tests after the font downloading succeeded or failed.
 127 // Using a timer is not ideal, but there seems to be no better options.
 128 function runTest()
 129 {
 130     window.setTimeout(test, 200);
 131 }
 132 </script>
 133 <script src="../js/resources/js-test-post.js"></script>
 134 </body>
 135 </html>
 136