Webkit bug

getComputedStyle incorrectly rounds lineHeight property to the nearest pixel.

HTML

<!DOCTYPE html>
<html lang="eng">
  <head>
    <title>Webkit bug</title>
  </head>
  <body>
    <p>
      This is the only section of the dom we do calculations on. The rest is just for displaying output.
    </p>
    <table>
      <thead>
        <tr>
          <td>Property</td>
          <td>Expected</td>
          <td>Correct (value)</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>line height</td>
          <td><code>22.4px</code></td>
          <td id="line-height"></td>
        </tr>
        <tr>
          <td>font size</td>
          <td><code>16px</code></td>
          <td id="font-size"></td>
        </tr>
        <tr>
          <td>relative line height</td>
          <td><code>1.4</code></td>
          <td id="relative-line-height"></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

CSS

p {
  line-height: 1.4;
  font-size: 16px;
}

thead td {
  font-weight: bold;
  font-size: 1.3rem;
  width: 30ch;
}

.correct {
  color: green;
}

.incorrect {
  color: red;
}

JavaScript

const p = document.querySelector('p');

const styles = getComputedStyle(p);

const data = [
	["line-height", styles.lineHeight],
  ["font-size", styles.fontSize],
  ["relative-line-height", "" + parseFloat(styles.lineHeight) / parseFloat(styles.fontSize)]
];

for (const [id, val] of data) {
	const el = document.getElementById(id);
  const expected = el.previousElementSibling.innerText;
  if (val === expected) {
  	el.class = "correct";
  	el.innerText = "✅";
  } else {
  	el.class = "incorrect";
    el.innerText = "❌ " + val;
  }
}