<!DOCTYPE html>
<html>
    <head>
        <style>
            body {
                margin: 5px;
            }
            table {
                border-collapse: collapse;
            }
            td {
                background: skyblue;
                border: 1px solid black;
            }
            #measure {
                position: absolute;
                top: -500px;
                visibility: hidden;
            }
        </style>
        <script src="../../resources/js-test.js"></script>
    </head>
    <body>
        <table id="main" cellspacing="0" border="0" cellpadding="0">
            <tr>
                <td>style.height</td>
                <td>rect.height</td>
                <td>rect.bottom - rect.top</td>
            </tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
            <tr><td>a</td><td>b</td><td>c</td></tr>
        </table>
        <p>
            This tests whether table row heights are stable by measuring the
            height of a row, assigning that height to another row and then
            measuring it.
            For each row the numbers in the three cells should be the same.
        </p>
        <p>
            <a href="https://bugs.webkit.org/show_bug.cgi?id=88813">Bug 88813</a>
        </p>

        <table id="measure" cellspacing="0" border="0" cellpadding="0">
            <tr><td>Measurement</td><td>table</td><td>...</td></tr>
        </table>
        
        <script>
            var mainTable = document.getElementById('main');
            var measureTable = document.getElementById('measure');
            var rowHeights = [];

            function r(n) {
                return Math.round(n * 1000) / 1000;
            }

            function computeHeights()
            {
                rowHeights.length = 0;
                var rowElement = measureTable.tBodies[0].rows[0];
                for (var i = 0; i < mainTable.tBodies[0].rows.length; i++) {
                    // Set the size to a subpixel value, the exact value isn't
                    // important but each row should have a different height.
                    var height = r((20 + i) * 0.93 + i);
                    rowElement.style.height = height + 'px';
                    rect = rowElement.getBoundingClientRect();
                    rowHeights.push(rect.bottom - rect.top);
                }
            }
            

            function testHeights(zoom)
            {
                document.body.style.zoom = zoom;
                computeHeights();
                
                var rows = mainTable.tBodies[0].rows;
                for (var i = 0; i < rows.length; i++) {
                    var rowElement = rows[i];
                    rowElement.style.height = rowHeights[i] + 'px';
                    var rect = rowElement.getBoundingClientRect();
                    if (i) {
                        rowElement.cells[0].firstChild.nodeValue = r(rowHeights[i]);
                        rowElement.cells[1].firstChild.nodeValue = r(rect.height);
                        rowElement.cells[2].firstChild.nodeValue = r(rect.bottom - rect.top);
                    }
                }

                var failures = 0;
                for (var i = 0; i < rows.length; i++) {
                    var rect = rows[i].getBoundingClientRect();
                    if (r(rowHeights[i]) != r(rect.height)) {
                        testFailed('At ' + r(zoom * 100) + '% zoom getBoundingClientRect returned a height of ' + r(rect.height) + ', expected ' + r(rowHeights[i]) + '.');
                        failures++;
                    }
                    if (r(rowHeights[i]) != r(rect.bottom - rect.top)) {
                        testFailed('At ' + r(zoom * 100) + '% zoom getBoundingClientRect returned a rect with bottom - top of ' + (rect.bottom - rect.top) + ', expected ' + rowHeights[i] + '.');
                        failures++;
                    }
                }
                if (!failures)
                    testPassed('At ' + r(zoom * 100) + '% zoom all heights matched.');
        }

        testHeights(0.5);
        testHeights(0.75);
        testHeights(0.9);
        testHeights(1.1);
        testHeights(1.25);
        testHeights(1.33);
        testHeights(1.5);
        testHeights(1.75);
        testHeights(2);
        testHeights(1);

        if (window.testRunner)
            document.getElementById('main').style.display = 'none';
        </script>
  </body>
</html>