getComputedStyle() does not respect the Fallback weights algorithm

[dumblob]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

There is missing information that getComputedStyle() on an element with a weight style which the font does not support actually does not return the real shown font weight but the weight style number thus not reflecting the result of the Fallback weights algorithm.

What did you expect to see?

A warning that getComputedStyle() has unintuitive behavior regarding font weight (especially surprising when one uses a variable font which supports "infinite" range of weights like Inter).

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Hacky test code changing font weight based on font size:

  function f( e, x ){
    return Math.trunc( parseInt( window.getComputedStyle( e )['font-weight'], 10 ) *
        // 14 font size => 1.005 font weight coefficient, 32 => 1.11, ...
        ( (Math.abs(x -14) * (1.11 -1.005)/(32 -14) ) +1.005 ) )
  }
  for( const e of document.querySelectorAll( '*, *::after, *::before, *::first-letter, *::first-line, *::selection, *::backdrop' ).values() ){
    try {
      const x = parseFloat( window.getComputedStyle( e )['font-size'] )
      const y = f( e, x )
      e.style.setProperty( 'font-weight',  y, 'important' )
      // not a variable font (or one which does not support fine-grained weight settings)
      // does not work as of 20221123_124058+0100 in newest Chromium
      //if( f() !== y ){
        e.style.setProperty( 'font-family', 'Inter var', 'important' )
      //}
    } catch {}
  }

@font-face {
  font-family: 'Inter var';
  font-style: oblique 0deg 10deg;
  font-weight: 100 900;
  font-display: swap;
  src: url( 'https://rsms.me/font-files/Inter.var.woff2?v=3.19' ) format( 'woff2' );
  font-feature-settings: "zero" 1, "ss01" 1;
}

MDN metadata

Page report details

• Folder: en-us/web/css/font-weight
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/font-weight/index.md
• Last commit: fb2af1f
• Document last modified: 2022-09-27T02:27:51.000Z