127 lines
4.7 KiB
HTML
127 lines
4.7 KiB
HTML
<!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-pre.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);
|
|
}
|
|
|
|
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>
|