<!DOCTYPE html>
<html>
<head>
<title>Case-Insensitive Font Family Name Comparisons</title>
<script src="../../../resources/js-test-pre.js"></script>
<script>
if (window.internals) {
    window.internals.settings.setTextAutosizingEnabled(true);
    window.internals.settings.setTextAutosizingWindowSizeOverride(320, 480);
}
</script>
</head>
<body>

<p id="description"></p>
<div id="console"></div>
<div id="content">

    <!-- HTML <font> Styling -->
    <table width="600">
        <tr><td><font face="VERDANA">Test</font></td></tr>
        <tr><td><font face="VERDANA">Test</font></td></tr>
        <tr><td><font face="Verdana">Test</font></td></tr>
        <tr><td><font face="VERDANA">Test</font></td></tr>
    </table>

    <!-- CSS font-family Styling -->
    <table width="600">
        <tr><td><span class="test" style="font-family:VERDANA">Test</span></td></tr>
        <tr><td><span class="test" style="font-family:VERDANA">Test</span></td></tr>
        <tr><td><span class="test" style="font-family:Verdana">Test</span></td></tr>
        <tr><td><span class="test" style="font-family:VERDANA">Test</span></td></tr>
    </table>

</div>

<script>
description('Each row of the table should have text that is the same size.');

function verifyEqualSizes(list, description) {
    var hadFailure = false;
    var firstRowRect = list[0].getBoundingClientRect();
    for (var i=0; i<list.length; ++i) {
        var row = list[i].getBoundingClientRect();
        if (row.width !== firstRowRect.width || row.height !== firstRowRect.height) {
            hadFailure = true;
            testFailed('Row ' + i + ': was ' + row.width + 'x' + row.height +
              ' but should have been ' + firstRowRect.width + 'x' + firstRowRect.height);
        }
    }

    if (!hadFailure)
        testPassed(description + ' rows were all the same size');
}

window.onload = function() {
    verifyEqualSizes(document.querySelectorAll('font'), '<font>');
    verifyEqualSizes(document.querySelectorAll('span.test'), '<span>');
    document.getElementById('content').style.display = 'none';
    finishJSTest();
}

window.jsTestIsAsync = true;
var successfullyParsed = true;
</script>
<script src="../../../resources/js-test-post.js"></script>

</body>
</html>
