<!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>