How is textarea's scrollHeight and clientHeight calculated?

Question

When you run this snippet you will see the following (at least in Chrome 97.0.4692.71):

1. On page load, clientHeight and scrollHeight are more than is necessary for 1 line.
2. line-height is undefined unless explicitly set. Setting line-height affects the initial clientHeight and scrollHeight values.
3. Entering 1 line break doesn't change clientHeight or scrollHeight. They appear to initialize with enough room for 2 lines.
4. Entering 2 line breaks increases scrollHeight, as expected, but it doesn't equal textHeight.
5. Entering enough characters to wrap causes scrollHeight to increase but there are no line breaks added to the text (i.e. textHeight doesn't change).

What are the calculations used to arrive at the clientHeight and scrollHeight values observed?

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

document.addEventListener('DOMContentLoaded', () => {
  resize(textarea);
});

textarea.addEventListener('input', (inputEvent) => {
  resize(inputEvent.target);
});

function resize(o) {
  const lines = getLines(o);
  const fontSize = getCSSIntegerValue(o, 'font-size');
  const padding = getCSSIntegerValue(o, 'padding');
  const borderWidth = getCSSIntegerValue(o, 'border-width');
  const textHeight = fontSize * lines;
  console.log('fontSize=%d, lines=%d, padding=%d, borderWidth=%d, textHeight=%d, clientHeight=%d, scrollHeight=%d', fontSize, lines, padding, borderWidth, textHeight, o.clientHeight, o.scrollHeight);
}

function getCSSIntegerValue(o, property) {
  const computedValues = window.getComputedStyle(o);
  const propertyValue = computedValues.getPropertyValue(property);
  return parseInt(propertyValue.replace(/\D/g, ''));
}

function getLines(o) {
  const lines = o.value.split(/\r|\r\n|\n/);
  return lines.length;
}

textarea {
  all: unset;
  background-color: #ddd;
  overflow-y: hidden;
  overflow-x: hidden;
  overflow-wrap: break-word;
  font-size: medium;
}

<textarea></textarea>

Answer 1

line-height, unless defined, is going to use the user agent stylesheet (typically 1.2 for desktop browsers, according to MDN.) With that information, the results should make more sense.

clientHeight is always 2 * line-height.

scrollHeight is line-height * lines.