| 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: | CSS | Assignee: | 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: |
|
||||||||
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>
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.
A lot of quirks in there https://searchfox.org/wubkat/rev/b0d582e84edc328231260db60dfe4d299636f735/Source/WebCore/style/StyleFontSizeFunctions.cpp 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. |
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.