1955547 - [Fonts panel] Optical size default value doesn't match selected element value (InspectorFontFace::GetVariationAxes defaultValue is wrong)

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

Steps to reproduce

1. Navigate to data:text/html,<meta charset=utf8><style>@font-face {font-family: "Amstelvar VF";src: url("https://mdn.github.io/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2")format("woff2-variations");font-weight: 100;}p {font-family:"Amstelvar VF";font-size: 4rem;}</style><p>Hello World</p>
2. Open the inspector
3. Select the Fonts panel
4. Inspect the <p> node
5. In the fonts panel, focus the "Optical Size" input (whose value should be 14)
6. Put the focus back on the page

Expected results

Nothing happens

Actual results

A new declaration is added to the element style: font-variation-settings: "opsz" 14; , and the text on the page looks different.

---

Playing with the optical size, it looks like by default the input value should rather be 64

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

The value comes from https://searchfox.org/mozilla-release/rev/62f34235d373482fc8c3c6a07f3a60c3e224d642/devtools/server/actors/page-style.js#428

fontFace.variationAxes = font.getVariationAxes();

which is InspectorFontFace::GetVariationAxes.

Jonathan, would you know why we get such default value when what's applied in the page seems way different ?

Comment 2

[Jonathan Kew [:jfkthame]]

I think this is a misunderstanding of what the "default" value means in the fontVariationAxis record. This is the default found in the font resource, which is unrelated to how a particular instance of the font is actually being rendered.

In the case of optical size, it's the value that will be used if you set font-optical-sizing: none in the style; but with the (default) setting of font-optical-sizing: auto, Firefox will automatically use an 'opsz' value based on the used font size of the element.

So what devtools probably wants to initialize the optical-size slider to is the current font size, clamped to the min/max range of the 'opsz' axis. (Unless font-optical-sizing: none is present, in which case the default will be the value to use.)

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the answer Jonathan.
Is optical sizing the only axes that behaves like that or we should handle the other ones the same?