third_party/WebKit/LayoutTests/css3/calc/table-border-spacing.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4     td {
   5         padding: 0;
   6         width: 50px;
   7         height: 60px;
   8         background-color: blue;
   9         border: 1px solid black
  10     }
  11     table {
  12         border-spacing: calc(10px * 2 + 5px);
  13         border: 3px solid black;
  14     }
  15 </style>
  16 <table id="stimulus">
  17     <tr>
  18         <td></td>
  19         <td></td>
  20         <td></td>
  21         <td></td>
  22         <td></td>
  23     </tr>
  24     <tr>
  25         <td></td>
  26         <td></td>
  27         <td></td>
  28         <td></td>
  29         <td></td>
  30     </tr>
  31 </table>
  32 <script>
  33     var innerBorder = 1;
  34     var outerBorder = 3;
  35     var innerWidth = 50 + 2 * innerBorder;
  36     var innerHeight = 60 + 2 * innerBorder;
  37     var borderSpacing = 25;
  38     var rows = 2;
  39     var columns = 5;
  40
  41     var expectedWidth = innerWidth * columns + borderSpacing * (columns + 1) + 2 * outerBorder;
  42     var expectedHeight = innerHeight * rows + borderSpacing * (rows + 1) + 2 * outerBorder;
  43
  44     shouldEvaluateTo('document.getElementById("stimulus").offsetWidth', expectedWidth);
  45     shouldEvaluateTo('document.getElementById("stimulus").offsetHeight', expectedHeight);
  46 </script>
  47