clientWidth et clientHeight rapport de zéro, tout en getBoundingClientRect est correct

En MDN, description de l'Élément.clientWidth il dit.

_{Remarque: depuis, j'ai mis à jour MDN selon @potatopeelings réponse.}

L'Élément.clientWidth propriété est à l'intérieur de la largeur d'un élément en pixels. Il comprend un rembourrage, mais pas la barre de défilement verticale (si présente, si elle était rendue), de la frontière ou de la marge.

Cette propriété tour de la valeur d'un entier. Si vous avez besoin d'une fraction de la valeur, de l'utilisation de l'élément.getBoundingClientRect().

De ce que je comprends que d'autres que l'arrondissement clientWidth doit être le même que getBoundingClientRect().width.

Cependant je vois que, pour de nombreux éléments (où display est inline?) le clientWidth (et hauteur) sont zéro, tandis que les valeurs retournées par getBoundingClientRect semblent corrects.

Recherche sur stackoverflow apporte quelques réponses en disant que ce qui se passe avant que le document est dans un prêt état, mais je vois cela tout le temps, pas seulement quand le chargement de la page.

Ce comportement est compatible pour tous les navigateurs que j'ai vérifié, où il est précisé que ce devrait être le comportement?

Exemple:

JS:

function str(name, width, height) {
  return name + ': (' + width + ', ' + height + ')';
}

function test() {
  var s = document.getElementById('s');
  var rect = s.getBoundingClientRect();
  document.getElementById('out').innerHTML =
    str('client', s.clientWidth, s.clientHeight) + '<br/>' +
    str('bounding', rect.width, rect.height);
}

HTML:

 <span id="s">A span</span><br/> <button onclick="test()">Test</button>
<hr />
<div id="out"></div>