Google Git
Sign in
webkit / WebKit / 15e4da4b5ce83fcfe6de6863df44c60571019d5f / . / LayoutTests / fast / table / Rowspan-value-more-than-number-of-rows-present.html
blob: 73a2dbc6e45d8490a3cd715e9420f4db50fac1d5 [file] [log] [blame]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Rowspan Test</title>
<style>#T1-1,#T1-2,#T2-1,#T2-2,#T3-1,#T3-2,#T4-1,#T4-2,#T5-1,#T5-2,#T7-1,#T7-2,#T8-1,#T8-2,#T9-1,#T9-2,#T10-1,#T10-4,#T11-2,#T11-4,#T12-2,#T12-4,#T13-1,#T13-2,#T13-3,#T13-4,#T13-5,#T14-1,#T14-2,#T15-1,#T15-2,#T15-3,#T16-1,#T16-2,#T16-3{color:green}#T10-2,#T10-3,#T11-1,#T11-3,#T12-1,#T12-3{color:blue} @font-face {font-family: 'myahem';src: url(../../resources/Ahem.ttf);}</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<h3>Test for bugzilla bug : <a href="https://bugs.webkit.org/show_bug.cgi?id=18092">18092</a>. 'Baseline of last row cells in the table' is not aligned with 'baseline of rowspan cell' when 'rowspan value' is greater than 'number of remaining rows after rowspan cell + 1'.</h3>
<h4>'Baseline of last cell aligned with rowspan cell' should aligned with 'baseline of rowspan cell'.</h4>
<div id="Tests">
<h5>Test 1</h5>
<table border="1" width="607">
<tbody>
<tr>
<td>row0 col0</td>
<td>row0 col1</td>
</tr>
<tr>
<td rowspan="2" width="260" id="T1-1">
<div style="height:50px; width:350px">row1 col0 - rowspan=2</div>
</td>
</tr>
<tr>
<td id="T1-2">row2 col0</td>
</tr>
<tr>
<td>row3 col0</td>
</tr>
</tbody>
</table>
<h5>Test 2</h5>
<table border="1" width="607">
<tbody>
<tr>
<td rowspan="2" width="260" id="T2-1">
<div style="width:350px">row0 col0 - rowspan=2</div>
</td>
</tr>
<tr>
<td id="T2-2">row1 <br/> col0</td>
</tr>
<tr>
<td>row2 col0</td>
</tr>
</tbody>
</table>
<h5>Test 3</h5>
<table border="1" width="607">
<tbody>
<tr>
<td rowspan="3" width="260" id="T3-1">
<div style="height:100px; width:350px">row0 col0 - rowspan=3</div>
</td>
</tr>
<tr>
<td>row1 col0</td>
</tr>
<tr>
<td id="T3-2">row2 col0</td>
</tr>
</tbody>
</table>
<h5>Test 4</h5>
<table border="1" width="607">
<tbody>
<tr>
<td rowspan="4" width="260" id="T4-1">
<div style="height:100px; width:350px">row0 col0 - rowspan=4</div>
</td>
</tr>
<tr>
<td>row1 col0</td>
</tr>
<tr>
<td id="T4-2">row2 col0</td>
</tr>
</tbody>
</table>
<h5>Test 5</h5>
<table border="1" width="607">
<tbody>
<tr>
<td>row0 col0</td>
<td rowspan="5" width="260" id="T5-1">
<div style="height:100px; width:350px">row0 col1 - rowspan=5</div>
</td>
</tr>
<tr>
<td>row1 col0</td>
</tr>
<tr>
<td id="T5-2">row2 col0</td>
</tr>
</tbody>
</table>
<h5>Test 6</h5>
<table border="1" width="607">
<tbody>
<tr>
<td rowspan="4" width="260">
<div>row0 col0 - rowspan=4</div>
</td>
</tr>
</tbody>
</table>
<h5>Test 7</h5>
<table border="1" width="607">
<tbody>
<tr>
<td>row0 col0</td>
<td>row0 col1</td>
<td rowspan="4" width="260" id="T7-1">
<div style="height:100px; width:350px">row0 col2 - rowspan=4</div>
</td>
</tr>
<tr>
<td>row1 col0</td>
</tr>
<tr>
<td id="T7-2">row2 col0</td>
</tr>
</tbody>
</table>
<h5>Test 8</h5>
<table border="1" width="607">
<tbody>
<tr>
<td>row0 col0</td>
<td rowspan="5" width="260" id="T8-1">
<div style="height:100px; width:350px">row0 col1 - rowspan=5</div>
</td>
</tr>
<tr>
<td>row1 col0</td>
<td>row1 col1</td>
</tr>
<tr>
<td id="T8-2">row2 col0</td>
</tr>
</tbody>
</table>
<h5>Test 9</h5>
<table border="1">
<tbody>
<tr>
<td>row0 col0</td>
<td rowspan="4" id="T9-1">
<div>row0 col1 - rowspan=4</div>
</td>
</tr>
<tr>
<td>row1 col0</td>
<td>row1 col1</td>
</tr>
<tr>
<td id="T9-2">row2 col0</td>
</tr>
</tbody>
</table>
<h5>Test 10</h5>
<table border="1" width="607">
<tbody>
<tr>
<td rowspan="7" width="260" id="T10-1">
<div style="height:250px;width:350px">row0 col0 - rowspan=7</div>
</td>
</tr>
<tr>
<td rowspan="3" width="100" id="T10-2">
<div style="height:150px; width:350px">row1 col0 - rowspan=3</div>
</td>
</tr>
<tr>
<td>row2 col0</td>
</tr>
<tr>
<td id="T10-3">row3 col0</td>
</tr>
<tr>
<td>row4 col0</td>
</tr>
<tr>
<td id="T10-4">row5 col0</td>
</tr>
</tbody>
</table>
<h5>Test 11</h5>
<table border="1" width="907">
<tbody>
<tr>
<td rowspan="3" width="260" id="T11-1">
<div style="height:50px; width:350px">row0 col0 - rowspan=3</div>
</td>
</tr>
<tr>
<td rowspan="7" width="100" id="T11-2">
<div style="height:150px; width:350px">row1 col0 - rowspan=7</div>
</td>
</tr>
<tr>
<td id="T11-3">row2 col0</td>
</tr>
<tr>
<td>row3 col0</td>
</tr>
<tr>
<td>row4 col0</td>
</tr>
<tr>
<td id="T11-4">row5 col0</td>
</tr>
</tbody>
</table>
<h5>Test 12</h5>
<table border="1" width="907">
<tbody>
<tr>
<td rowspan="3" width="260" id="T12-1">
<div style="width:350px">row0 col0 - rowspan=3</div>
</td>
</tr>
<tr>
<td rowspan="3" width="100" id="T12-2">
<div style="height:100px;width:350px">row1 col0 - rowspan=3</div>
</td>
</tr>
<tr>
<td id="T12-3">row2 <br/> col0</td>
</tr>
<tr>
<td id="T12-4">row3 col0</td>
</tr>
<tr>
<td>row4 col0</td>
</tr>
<tr>
<td>row5 col0</td>
</tr>
</tbody>
</table>
<h5>Test 13</h5>
<table border="1">
<tbody>
<tr>
<td>r0 c0</td>
<td>r0 c1</td>
<td>r0 c2</td>
<td rowspan="6" id="T13-1">
<div style="height:100px">r0 c3 rowspan=6</div>
</td>
</tr>
<tr>
<td>r1 c0</td>
<td>r1 c1</td>
<td>r1 c2</td>
<td>r1 c3</td>
</tr>
<tr>
<td>r2 c0</td>
<td>r2 c1</td>
<td>r2 c2</td>
<td>r2 c3</td>
</tr>
<tr>
<td colspan="4" id="T13-2">r3 c0 colspan=4</td>
<td id="T13-3">r3 c1</td>
<td id="T13-4">r3 c2</td>
<td id="T13-5">r3 c3</td>
</tr>
</tbody>
</table>
<h5>Test 14</h5>
<table border="1">
<tbody>
<tr>
<td>r0 c0</td>
</tr>
<tr>
<td>r1 c0</td>
<td>r1 c1</td>
<td rowspan="6" id="T14-1">
<div style="height:100px">r1 c2 rowspan=6</div>
</td>
</tr>
<tr>
<td>r2 c0</td>
<td>r2 c1</td>
</tr>
<tr>
<td id="T14-2"></td>
</tr>
</tbody>
</table>
<h5>Test 15</h5>
<table border="1" width="607">
<tbody>
<tr>
<td rowspan="4" width="260" id="T15-1">
<div style="height:100px; width:350px">row0 col0 - rowspan=4</div>
</td>
<td rowspan="3" id="T15-2">row0 col1 - rowspan=3</td>
</tr>
<tr><td id="T15-3">row2 col0</td></tr>
</tbody>
</table>
<h5>Test 16</h5>
<table border="1" width="607">
<tbody>
<tr>
<td rowspan="4" width="260" id="T16-1">
<div style="width:350px">row0 col0 - rowspan=4</div>
</td>
<td rowspan="3" id="T16-2">
<div style="height:100px;">row0 col1 - rowspan=3</div>
</td>
</tr>
<tr><td id="T16-3">row2 col0</td></tr>
</tbody>
</table>
</div>
<div id="console"></div>
<script>
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 1 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T1-1').offsetTop + document.getElementById('T1-1').offsetHeight)", "(document.getElementById('T1-2').offsetTop + document.getElementById('T1-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 2 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T2-1').offsetTop + document.getElementById('T2-1').offsetHeight)", "(document.getElementById('T2-2').offsetTop + document.getElementById('T2-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 3 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T3-1').offsetTop + document.getElementById('T3-1').offsetHeight)", "(document.getElementById('T3-2').offsetTop + document.getElementById('T3-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 4 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T4-1').offsetTop + document.getElementById('T4-1').offsetHeight)", "(document.getElementById('T4-2').offsetTop + document.getElementById('T4-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 5 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T5-1').offsetTop + document.getElementById('T5-1').offsetHeight)", "(document.getElementById('T5-2').offsetTop + document.getElementById('T5-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 7 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T7-1').offsetTop + document.getElementById('T7-1').offsetHeight)", "(document.getElementById('T7-2').offsetTop + document.getElementById('T7-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 8 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T8-1').offsetTop + document.getElementById('T8-1').offsetHeight)", "(document.getElementById('T8-2').offsetTop + document.getElementById('T8-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 9 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T9-1').offsetTop + document.getElementById('T9-1').offsetHeight)", "(document.getElementById('T9-2').offsetTop + document.getElementById('T9-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 10 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T10-1').offsetTop + document.getElementById('T10-1').offsetHeight)", "(document.getElementById('T10-4').offsetTop + document.getElementById('T10-4').offsetHeight)");
shouldBe("(document.getElementById('T10-2').offsetTop + document.getElementById('T10-2').offsetHeight)", "(document.getElementById('T10-3').offsetTop + document.getElementById('T10-3').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 11 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T11-1').offsetTop + document.getElementById('T11-1').offsetHeight)", "(document.getElementById('T11-3').offsetTop + document.getElementById('T11-3').offsetHeight)");
shouldBe("(document.getElementById('T11-2').offsetTop + document.getElementById('T11-2').offsetHeight)", "(document.getElementById('T11-4').offsetTop + document.getElementById('T11-4').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 12 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T12-1').offsetTop + document.getElementById('T12-1').offsetHeight)", "(document.getElementById('T12-3').offsetTop + document.getElementById('T12-3').offsetHeight)");
shouldBe("(document.getElementById('T12-2').offsetTop + document.getElementById('T12-2').offsetHeight)", "(document.getElementById('T12-4').offsetTop + document.getElementById('T12-4').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 13 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T13-1').offsetTop + document.getElementById('T13-1').offsetHeight)", "(document.getElementById('T13-2').offsetTop + document.getElementById('T13-2').offsetHeight)");
shouldBe("(document.getElementById('T13-1').offsetTop + document.getElementById('T13-1').offsetHeight)", "(document.getElementById('T13-3').offsetTop + document.getElementById('T13-3').offsetHeight)");
shouldBe("(document.getElementById('T13-1').offsetTop + document.getElementById('T13-1').offsetHeight)", "(document.getElementById('T13-4').offsetTop + document.getElementById('T13-4').offsetHeight)");
shouldBe("(document.getElementById('T13-1').offsetTop + document.getElementById('T13-1').offsetHeight)", "(document.getElementById('T13-5').offsetTop + document.getElementById('T13-5').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 14 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T14-1').offsetTop + document.getElementById('T14-1').offsetHeight)", "(document.getElementById('T14-2').offsetTop + document.getElementById('T14-2').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 15 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T15-1').offsetTop + document.getElementById('T15-1').offsetHeight)", "(document.getElementById('T15-2').offsetTop + document.getElementById('T15-2').offsetHeight)");
shouldBe("(document.getElementById('T15-1').offsetTop + document.getElementById('T15-1').offsetHeight)", "(document.getElementById('T15-3').offsetTop + document.getElementById('T15-3').offsetHeight)");
document.getElementById('console').appendChild(document.createElement('br'));
document.getElementById('console').appendChild(document.createElement('div').appendChild(document.createTextNode("Test 16 : ")));
document.getElementById('console').appendChild(document.createElement('br'));
shouldBe("(document.getElementById('T16-1').offsetTop + document.getElementById('T16-1').offsetHeight)", "(document.getElementById('T16-2').offsetTop + document.getElementById('T16-2').offsetHeight)");
shouldBe("(document.getElementById('T16-1').offsetTop + document.getElementById('T16-1').offsetHeight)", "(document.getElementById('T16-3').offsetTop + document.getElementById('T16-3').offsetHeight)");
document.getElementById('Tests').parentNode.removeChild(document.getElementById('Tests'));
</script>
</body>
</html>