| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| if (window.internals) { |
| internals.clearMemoryCache(); |
| internals.invalidateFontCache(); |
| } |
| </script> |
| <style> |
| @font-face { |
| font-family: WebFont; |
| src: url("../../resources/Ahem.ttf") format("truetype"), local("American Typewriter"); |
| } |
| @font-face { |
| font-family: WebFont2; |
| src: local("American Typewriter"); |
| } |
| @font-face { |
| font-family: WebFont2; |
| src: url("../../resources/Ahem.ttf") format("truetype"); |
| } |
| @font-face { |
| font-family: WebFont3; |
| src: url("../../resources/Ahem.ttf") format("truetype"); |
| } |
| </style> |
| </head> |
| <body> |
| <div style="width: 5000px; -webkit-text-size-adjust: none;"> |
| <p><span id="americanTypewriter" style="font-family: 'American Typewriter';">This is rendered with American Typewriter.</span></p> |
| <p><span id="test1" style="font-family: 'WebFont';">This is rendered with American Typewriter.</span></p> |
| <p><span id="test2" style="font-family: 'WebFont2';">This is rendered with American Typewriter.</span></p> |
| <p><span id="test3" style="font-family: 'WebFont3', 'American Typewriter';">This is rendered with American Typewriter.</span></p> |
| <p><span id="test4" style="font-family: 'American Typewriter';">This is rendered with American Typewriter.</span></p> |
| </div> |
| <script> |
| description("This test makes sure that fallback fonts are used during the time when fonts are loading."); |
| var americanTypewriterWidth = document.getElementById("americanTypewriter").getBoundingClientRect().width; |
| var test1 = document.getElementById("test1").getBoundingClientRect().width; |
| var test2 = document.getElementById("test2").getBoundingClientRect().width; |
| var test3 = document.getElementById("test3").getBoundingClientRect().width; |
| </script> |
| <style> |
| @font-face { |
| font-family: "American Typewriter"; |
| src: url("../../resources/Ahem.ttf") format("truetype"); |
| } |
| </style> |
| <script> |
| var test4 = document.getElementById("test4").getBoundingClientRect().width; |
| shouldNotBe("test1", "americanTypewriterWidth"); |
| shouldBe("test2", "americanTypewriterWidth"); |
| shouldBe("test3", "americanTypewriterWidth"); |
| shouldBe("test4", "americanTypewriterWidth"); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </body> |
| </html> |
