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