Font Loading API specifies font is loaded but sizing of font after load reports incon...
[WebKit-https.git] / LayoutTests / fast / text / web-font-load-fallback-during-loading.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script>
5 if (window.internals) {
6     internals.settings.setWebFontsAlwaysFallBack(true);
7     internals.clearMemoryCache();
8     internals.invalidateFontCache();
9 }
10 if (window.testRunner)
11     testRunner.waitUntilDone();
12
13 function computeCurrentWidths() {
14     var result = [];
15     var collection = document.getElementsByClassName("test");
16     for (var i = 0; i < collection.length; ++i)
17         result.push(collection.item(i).getBoundingClientRect().width);
18     return result;
19 }
20
21 function testCompleted(widths, goal) {
22     for (var i = 0; i < widths.length; ++i) {
23         if (widths[i] != goal)
24             return false;
25     }
26     return true;
27 }
28
29 var token = window.setInterval(function () {
30     if (testCompleted(computeCurrentWidths(), expectedWidth)) {
31         window.clearInterval(token);
32         document.getElementById("console").appendChild(document.createTextNode("Test complete"));
33         if (window.testRunner)
34             testRunner.notifyDone();
35     }
36 }, 0);
37
38 </script>
39 <style>
40 @font-face {
41     font-family: WebFont;
42     src: url("../../resources/Ahem.ttf") format("truetype"), local("Helvetica");
43 }
44 @font-face {
45     font-family: WebFont2;
46     src: local("Helvetica");
47 }
48 @font-face {
49     font-family: WebFont2;
50     src: url("../../resources/Ahem.ttf") format("truetype");
51 }
52 </style>
53 </head>
54 <body>
55 This test makes sure that fallback fonts are used during the time when fonts are loading. The test passes if the next line below reads "Test complete" and all the subsequent statements below are legible and true.
56 <!-- FIXME: This test is racey. The font may complete downloading before the 0-delay timer fires,
57 in which case the "Test Complete" text will not be added. -->
58 <p id="console"></p>
59 <p><span id="reference" style="font-family: Helvetica">This is rendered with Helvetica.</span></p>
60 <p><span class="test" style="font-family: WebFont">This is rendered with Helvetica.</span></p>
61 <p><span class="test" style="font-family: WebFont2">This is rendered with Helvetica.</span></p>
62 <script>
63 var expectedWidth = document.getElementById("reference").getBoundingClientRect().width;
64 </script>
65 </body>
66 </html>