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