1a4f4e0946831d1459f460752c699d30d0e2c3a8
[WebKit-https.git] / LayoutTests / fast / sub-pixel / table-rows-have-stable-height.html
1 <!DOCTYPE html>
2 <html>
3     <head>
4         <style>
5             body {
6                 margin: 5px;
7             }
8             table {
9                 border-collapse: collapse;
10             }
11             td {
12                 background: skyblue;
13                 border: 1px solid black;
14             }
15             #measure {
16                 position: absolute;
17                 top: -500px;
18                 visibility: hidden;
19             }
20         </style>
21         <script src="../js/resources/js-test-pre.js"></script>
22     </head>
23     <body>
24         <table id="main" cellspacing="0" border="0" cellpadding="0">
25             <tr>
26                 <td>style.height</td>
27                 <td>rect.height</td>
28                 <td>rect.bottom - rect.top</td>
29             </tr>
30             <tr><td>a</td><td>b</td><td>c</td></tr>
31             <tr><td>a</td><td>b</td><td>c</td></tr>
32             <tr><td>a</td><td>b</td><td>c</td></tr>
33             <tr><td>a</td><td>b</td><td>c</td></tr>
34             <tr><td>a</td><td>b</td><td>c</td></tr>
35             <tr><td>a</td><td>b</td><td>c</td></tr>
36             <tr><td>a</td><td>b</td><td>c</td></tr>
37             <tr><td>a</td><td>b</td><td>c</td></tr>
38             <tr><td>a</td><td>b</td><td>c</td></tr>
39         </table>
40         <p>
41             This tests whether table row heights are stable by measuring the
42             height of a row, assigning that height to another row and then
43             measuring it.
44             For each row the numbers in the three cells should be the same.
45         </p>
46         <p>
47             <a href="https://bugs.webkit.org/show_bug.cgi?id=88813">Bug 88813</a>
48         </p>
49
50         <table id="measure" cellspacing="0" border="0" cellpadding="0">
51             <tr><td>Measurement</td><td>table</td><td>...</td></tr>
52         </table>
53         
54         <script>
55             var mainTable = document.getElementById('main');
56             var measureTable = document.getElementById('measure');
57             var rowHeights = [];
58
59             function r(n) {
60                 return Math.round(n * 1000) / 1000;
61             }
62
63             function computeHeights()
64             {
65                 rowHeights.length = 0;
66                 var rowElement = measureTable.tBodies[0].rows[0];
67                 for (var i = 0; i < mainTable.tBodies[0].rows.length; i++) {
68                     // Set the size to a subpixel value, the exact value isn't
69                     // important but each row should have a different height.
70                     var height = r((20 + i) * 0.93 + i);
71                     rowElement.style.height = height + 'px';
72                     rect = rowElement.getBoundingClientRect();
73                     rowHeights.push(rect.bottom - rect.top);
74                 }
75             }
76             
77
78             function testHeights(zoom)
79             {
80                 document.body.style.zoom = zoom;
81                 computeHeights();
82                 
83                 var rows = mainTable.tBodies[0].rows;
84                 for (var i = 0; i < rows.length; i++) {
85                     var rowElement = rows[i];
86                     rowElement.style.height = rowHeights[i] + 'px';
87                     var rect = rowElement.getBoundingClientRect();
88                     if (i) {
89                         rowElement.cells[0].firstChild.nodeValue = r(rowHeights[i]);
90                         rowElement.cells[1].firstChild.nodeValue = r(rect.height);
91                         rowElement.cells[2].firstChild.nodeValue = r(rect.bottom - rect.top);
92                     }
93                 }
94
95                 var failures = 0;
96                 for (var i = 0; i < rows.length; i++) {
97                     var rect = rows[i].getBoundingClientRect();
98                     if (r(rowHeights[i]) != r(rect.height)) {
99                         testFailed('At ' + r(zoom * 100) + '% zoom getBoundingClientRect returned a height of ' + r(rect.height) + ', expected ' + r(rowHeights[i]) + '.');
100                         failures++;
101                     }
102                     if (r(rowHeights[i]) != r(rect.bottom - rect.top)) {
103                         testFailed('At ' + r(zoom * 100) + '% zoom getBoundingClientRect returned a rect with bottom - top of ' + (rect.bottom - rect.top) + ', expected ' + rowHeights[i] + '.');
104                         failures++;
105                     }
106                 }
107                 if (!failures)
108                     testPassed('At ' + r(zoom * 100) + '% zoom all heights matched.');
109         }
110
111         testHeights(0.5);
112         testHeights(0.75);
113         testHeights(0.9);
114         testHeights(1.1);
115         testHeights(1.25);
116         testHeights(1.33);
117         testHeights(1.5);
118         testHeights(1.75);
119         testHeights(2);
120         testHeights(1);
121
122         if (window.testRunner)
123             document.getElementById('main').style.display = 'none';
124         </script>
125   </body>
126 </html>