Bug 291667 – REGRESSION(288714@main): CanvasRenderingContext2D font with normal line height fails to parse

• Component: Canvas
• Status: RESOLVED FIXED

Overview:
Starting In Safari 18.4 (tested on macOS 15 Apple Silicon), when a font string containing a "normal" line-height value is set on the CanvasRenderingContext2D instance, it fails to parse. Getting the font value from the context just returns the default '10px sans-serif'.
This was not a problem in prior Safari versions, such as 18.3.1


Steps to Reproduce:
1) Go to this reproducible test case: https://codepen.io/wlouie1/pen/qEEBMGa?editors=1111
2) Look at the console log. Compare them in Safari 18.4, prior Safari versions, and Chrome.


Actual Results:
As shown in the CodePen link:
Set ctx.font = 'normal normal 400 normal 12px/normal Arial, Helvetica, sans-serif';
Log ctx.font: '10px sans-serif'

Also as shown in the CodePen link, either omitting the "normal" line-height (which should be equivalent because it's the default line-height value) from the font string, or specifying any other line-height value, like 14px, works as expected. Logging ctx.font gives the expected '12px Arial, Helvetica, sans-serif'

Chrome 135 or prior Safari versions correctly logs '12px Arial, Helvetica, sans-serif' for all 3 cases.


Expected Results:
Set ctx.font = 'normal normal 400 normal 12px/normal Arial, Helvetica, sans-serif';
Log ctx.font: '12px Arial, Helvetica, sans-serif'

[Ahmad Saleem]

*** Safari Technology Preview 217 on macOS Sequoia ***

"
Set: normal normal 400 normal 12px/normal Arial, Helvetica, sans-serif
Get: 10px sans-serif <------------------------------------------ bug
"
"
Set: normal normal 400 normal 12px Arial, Helvetica, sans-serif
Get: 12px Arial, Helvetica, sans-serif
"
"
Set: normal normal 400 normal 12px/14px Arial, Helvetica, sans-serif
Get: 12px Arial, Helvetica, sans-serif
"
*** Chrome Canary 137.0.7128.0 (Official Build) canary (arm64)  ***

"
Set: normal normal 400 normal 12px/normal Arial, Helvetica, sans-serif
Get: 12px Arial, Helvetica, sans-serif
"
"
Set: normal normal 400 normal 12px Arial, Helvetica, sans-serif
Get: 12px Arial, Helvetica, sans-serif
"
"
Set: normal normal 400 normal 12px/14px Arial, Helvetica, sans-serif
Get: 12px Arial, Helvetica, sans-serif
"

*** Firefox Nightly 139 (20250414211452) ***

"
Set: normal normal 400 normal 12px/normal Arial, Helvetica, sans-serif
Get: 12px Arial, Helvetica, sans-serif
"

"
Set: normal normal 400 normal 12px Arial, Helvetica, sans-serif
Get: 12px Arial, Helvetica, sans-serif
"

"
Set: normal normal 400 normal 12px/14px Arial, Helvetica, sans-serif
Get: 12px Arial, Helvetica, sans-serif
"

_________

STP 217 is broken as well.

[Radar WebKit Bug Importer]

<rdar://problem/149459999>

[Karl Dubost]

it looks like a parsing error in the code. 

pass 12px/20px
pass 12px/12
fail 12px/a
fail 12px/normal

Canvas is using
https://searchfox.org/wubkat/rev/5df2953b4ca7158afd166f3f8c130d1a8888cf0f/Source/WebCore/css/parser/CSSPropertyParserConsumer%2BFont.cpp#345-376


https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-font

> The font IDL attribute, on setting, must be parsed as a CSS <'font'> value (but without supporting property-independent style sheet syntax like 'inherit'), and the resulting font must be assigned to the context, with the 'line-height' component forced to 'normal', with the 'font-size' component converted to CSS pixels, and with system fonts being computed to explicit values. If the new value is syntactically incorrect (including using property-independent style sheet syntax like 'inherit' or 'initial'), then it must be ignored, without assigning a new font value.

And 

> When the 'font-size' component is set to lengths using percentages, 'em' or 'ex' units, or the 'larger' or 'smaller' keywords, these must be interpreted relative to the computed value of the 'font-size' property of the font style source object at the time that the attribute is set

I wonder if Safari is not right here (?) interpreting the spec. aka this part

> If the new value is syntactically incorrect (including using property-independent style sheet syntax like 'inherit' or 'initial'), then it must be ignored, without assigning a new font value.

[Karl Dubost]

Wilson
 Thanks for the bug report

Does it affect one of your products at Oracle?

(In reply to Karl Dubost from comment #4)
> Wilson
>  Thanks for the bug report
> 
> Does it affect one of your products at Oracle?

Thanks Karl, yes, and we're currently working around it by omitting the "normal" line-height value from the font string.

[Said Abou-Hallawa]

This is a regression of 288714@main.

[Sam Weinig]

Pull request: https://github.com/WebKit/WebKit/pull/45208

[EWS]

Committed 294767@main (3606cb0acd00): <https://commits.webkit.org/294767@main>

Reviewed commits have been landed. Closing PR #45208 and removing active labels.

[EWS]

Committed 289651.520@safari-7621-branch (d5311fc7eb27): <https://commits.webkit.org/289651.520@safari-7621-branch>

Reviewed commits have been landed. Closing PR #3090 and removing active labels.