<!DOCTYPE html>
<html>
    <head>
        <style>
            #cell {
                font: menu;
                background-color: skyblue;
                padding-left: .73em;
                white-space: nowrap;
            }
            #display-cell {
                font: menu;
                background-color: green;
                display: table-cell;
                padding-left: .73em;
                white-space: nowrap;
            }
        </style>
        <script src="../../resources/js-test.js"></script>
    </head>
    <body>
        <table>
            <tr>
                <td id="cell">Should not wrap</td>
            </tr>
        </table>
        <div id="display-cell">Should not wrap</div>
        
        <script>

            function getElementHeight(element)
            {
                var rect = element.getBoundingClientRect();;
                return rect.bottom - rect.top;
            }

            function testHeight(id, description)
            {
                var cellElement = document.getElementById(id);
                var expectedHeight = getElementHeight(cellElement);
                cellElement.style.whiteSpace = 'normal';
                if (getElementHeight(cellElement) == expectedHeight)
                    testPassed(description + ' does not wrap.');
                else
                    testFailed(description + ' wrapps.');
            }

            testHeight('cell', 'table cell');
            testHeight('display-cell', 'display: table-cell');
            

        </script>
  </body>
</html>