<html>
  <head>
    <title>Zoomy buggy</title>
    <style>
      table {
        -webkit-border-vertical-spacing: 4px;
      }
      tr {
        background-color: blue;
      }
      tr:nth-child(odd) {
        background-color: red;
      }
      .square-box {
        height: 4px;
        width: 4px;
        overflow: hidden;
        background-color: green;
      }
    </style>
    <script type="text/javascript">
      function getVeritcalSpacing() {
        var table = document.querySelector('table')
        var cs = getComputedStyle(table);
        var value = cs['-webkit-border-vertical-spacing'];
        var out = document.getElementById('output');
        out.textContent = value;
      }
      function getBoxSize() {
        var box = document.querySelector('.square-box');
        var cs = getComputedStyle(box);
        var value = cs['height'];
        var out = document.getElementById('output-box');
        out.textContent = value;
      }

      function setZoom() {
        var zoom = document.getElementById('zoom');
        var body = document.getElementsByTagName('body')[0];
        body.style['zoom'] = zoom.value;
        getVeritcalSpacing();
        getBoxSize();
      }
    </script>
  </head>
  <body style="zoom:1;">
    <table>
      <tbody>
        <tr><td>Row 1</td></tr>
        <tr><td>Row 2</td></tr>
      </tbody>
    </table>
    <div class="square-box">
    </div>
    <h1>Table spacing: <span id="output">Not calculated</span></h1>
    <h1>Div size: <span id="output-box">Not calculated</span></h1>
    <input type="number" name="zoom" id="zoom" /><button onclick="javascript:setZoom();">Set zoom</button>
  </body>
</html>
