Bug 245927

Summary: font-size treats <number> as pixels in standard mode when previously specified on SVG/MathML
Product: WebKit Reporter: Frédéric Wang (:fredw) <fred.wang>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: emilio, karlcow, koivisto, webkit-bug-importer
Priority: P2 Keywords: BrowserCompat, InRadar
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.chromium.org/p/chromium/issues/detail?id=1370275
Attachments:
Description Flags
Testcase
none
Testcase (quirks mode) none

Frédéric Wang (:fredw)
Reported 2022-10-01 00:59:32 PDT
Created attachment 462746 [details] Testcase See the attached test case. Document is in standard mode and has a font-size of 100px. The first div contains some HTML, MathML and SVG elements having <number> font-size values, respectively 50, 75 and 33.33333. The second div contains some <span>s with the same <number> font-size values. Those corresponding matching the ones previously specified on the MathML and SVG elements (75 and 33.33333) are interpreted as pixels rather than being treated as invalid (and so taking the inherited 100px value): <!DOCTYPE html> <body style="font-size: 100px"> <div> <div style="font-size: 50"></div> <math style="font-size: 75"></math> <svg style="font-size: 33.33333"></svg> </div> <div> <span>100</span> <span style="font-size: 50">50</span> <span style="font-size: 75">75</span> <span style="font-size: 33.33333">33.33333</span> </div> </body> Chromium and WebKit behaves that way, but Firefox renders all the elements with a font-size of 100 pixels.
Attachments
Testcase (371 bytes, text/html)
2022-10-01 00:59 PDT, Frédéric Wang (:fredw) 		no flags
Details
Testcase (quirks mode) (216 bytes, text/html)
2022-10-01 01:00 PDT, Frédéric Wang (:fredw) 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Frédéric Wang (:fredw)
Comment 1 2022-10-01 01:00:56 PDT
Created attachment 462747 [details] Testcase (quirks mode) A testcase in quirks mode. In that case WebKit, Chromium and Firefox treat all these <number> values as pixels: <body style="font-size: 100px"> <div> <span>100</span> <span style="font-size: 50">50</span> <span style="font-size: 75">75</span> <span style="font-size: 33.33333">33.33333</span> </div> </body>
Karl Dubost
Comment 2 2022-10-02 19:31:37 PDT
All of them shows in the developer tools/inspector as invalid. but both WebKit and Blink show an actual scaled rendered font. For example, the last span window.getComputedStyle(document.getElementsByTagName('div')[2].getElementsByTagName('span')[3]).fontSize WebKit: 33.333328px Gecko: 100px Blink: 33.3333px window.getComputedStyle(document.getElementsByTagName('div')[2].getElementsByTagName('span')[1]).fontSize The second span of the second div is even funnier <span style="font-size: 50">50</span> WebKit: 100px Gecko: 100px Blink: 100px So it's not consistent.
Radar WebKit Bug Importer
Comment 3 2022-10-02 19:32:17 PDT
<rdar://problem/100700950>
Frédéric Wang (:fredw)
Comment 5 2022-10-02 21:07:05 PDT
There is bug 84469 about dropping the quirks mode behavior (which apparently people don't agree). But here the issue is happening in standard mode which sounds like unintended (and per comment 2 is reported as invalid in devtools). It looks like the SVG/MathML elements are forcing the quirks mode behavior, removing them make the span render with the inherited font-size of 100px.
Note You need to log in before you can comment on or make changes to this bug.