JS Test Harness: Insert the stylesheet dynamically
[WebKit-https.git] / 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
133 var successfullyParsed = true;
134 </script>
135 <script src="../js/resources/js-test-post.js"></script>
136 </body>
137 </html>
138