<style>
    @font-face {
        font-family: f1;
        font-weight: 100;
        src: url(../../resources/Ahem.ttf);
    }
    @font-face {
        font-family: f1;
        font-weight: 600;
        src: local(Times);
    }

    @font-face {
        font-family: f2;
        font-weight: 600;
        src: url(../../resources/Ahem.ttf);
    }
    @font-face {
        font-family: f2;
        font-weight: 700;
        src: local(Times);
    }

    @font-face {
        font-family: f3;
        font-weight: 300;
        src: local(Times);
    }
    @font-face {
        font-family: f3;
        font-weight: 900;
        src: url(../../resources/Ahem.ttf);
    }

    @font-face {
        font-family: f4;
        font-weight: 200;
        src: local(Times);
    }
    @font-face {
        font-family: f4;
        font-weight: 300;
        src: url(../../resources/Ahem.ttf);
    }

    @font-face {
        font-family: f5;
        font-weight: 300;
        src: local(Times);
    }
    @font-face {
        font-family: f5;
        font-weight: 500;
        src: url(../../resources/Ahem.ttf);
    }

    @font-face {
        font-family: f6;
        font-weight: 400;
        src: url(../../resources/Ahem.ttf);
    }
    @font-face {
        font-family: f6;
        font-weight: 600;
        src: local(Times);
    }
</style>
<p>
    Test for <i><a href="https://bugs.webkit.org/show_bug.cgi?id=34147">https://bugs.webkit.org/show_bug.cgi?id=34147</a> If @font-face does not provide an explicit italic/bold variant, regular is used</i>.
</p>

<p>Checks if WebKit font matching algorithm matches <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20111004/#font-matching-algorithm">the latest CSS3 Fonts WD</a>.
If the test passes, all 14 glyphs below should be black squares:</p>
<!-- Exact match -->
<span style="font-family: f1; font-weight: 100">A</span>
<span style="font-family: f2; font-weight: 600">A</span>
<span style="font-family: f3; font-weight: 900">A</span>
<span style="font-family: f4; font-weight: 300">A</span>
<span style="font-family: f5; font-weight: 500">A</span>
<span style="font-family: f6; font-weight: 400">A</span>
<!-- "If the desired weight is less than 400, weights below the desired weight are checked in descending order followed by weights above the desired weight in ascending order until a match is found." -->
<span style="font-family: f1; font-weight: 300">A</span>
<span style="font-family: f2; font-weight: 300">A</span>
<!-- "If the desired weight is greater than 500, weights above the desired weight are checked in ascending order followed by weights below the desired weight in descending order until a match is found." -->
<span style="font-family: f3; font-weight: 600">A</span>
<span style="font-family: f4; font-weight: 600">A</span>
<!-- "If the desired weight is 400, 500 is checked first and then the rule for desired weights less than 400 is used." -->
<span style="font-family: f5; font-weight: 400">A</span>
<span style="font-family: f1; font-weight: 400">A</span>
<!-- "If the desired weight is 500, 400 is checked first and then the rule for desired weights less than 400 is used." -->
<span style="font-family: f6; font-weight: 500">A</span>
<span style="font-family: f1; font-weight: 500">A</span>

<script>
    if (window.testRunner) {
        testRunner.waitUntilDone();
        document.body.offsetTop;
        setTimeout(function() { testRunner.notifyDone(); }, 100);
    }
</script>