third_party/WebKit/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="../../resources/js-test.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>