1740584 - Add new relative units RCH, REX, RCAP, and RIC

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement, P3)

Description

[Bill Goldstein [:aja] (UTC-6)]

Expected results:

Add new relative units RCH and REX

Comment 1

[Jonathan Kew [:jfkthame]]

Also ic and cap, and their root-element variants ric and rcap.

Comment 2

[Emilio Cobos Álvarez [:emilio]]

This should be sort of straight-forward to implement following the rem code. Just adding more root font metrics in Device and tracking changes and so on.

Comment 3

[Jonathan Kew [:jfkthame]]

I'm not sure we want to exactly follow the rem pattern here. AFAICS, for rem we always record the root font size in Device during finish_restyle for the root element, which is OK as it's quite simple -- it's just the computed value of the font-size property. But retrieving the other metrics ch, ex, ic and cap, is significantly more work as it requires actually instantiating a font to read metrics from it. I suspect the root-element versions of these units will only rarely be used, so it seems regrettable to always do that work.

Can we instead do something like evaluate them lazily on first use (which will usually not happen), and only then cache the value in Device?

Comment 4

[Emilio Cobos Álvarez [:emilio]]

We can, though is it really that much work to get the initial font-size metrics for the root element? In particular, won't the initial font metrics ~always be used for layout at some point? Anyways doing it lazily seems doable as well.

Comment 5

[Jonathan Kew [:jfkthame]]

I'd be curious how often the root element's font metrics get used for anything; I'm guessing it may be quite common that a site specifies a bunch of font-* properties on the body, and nothing actually refers back to or uses the root's font, but I haven't looked into this deeply.

Comment 6

[Thomas Wisniewski [:twisniewski][PTO until Mar.16]]

Safari and Chrome now support all four of these units as of WebKit preview 179.

Comment 7

[Michal Čaplygin [:myf]]

(In other words:) According MDN CSS length BCD, Firefox is the only* major browser currently lacking support for rcap, rch, rex and ric units, as of now.
(* Samsung Internet reportedly does supports neither cap nor rcap.)

Comment 8

[ltdk]

I'm also not super convinced that these root font metrics would require substantially more work than the regular font metrics would. While it's true that rem and rlh don't actually need font metrics, only the font-size and line-height values, the non-root versions of these still require the font metrics anyway whether any text is rendered or not. What makes this case different?

Comment 9

[Sajid Anwar [:sajidanwar]]

Attachment: Bug 1740584 - Wait for font loading in WPT rcap, rch, rex, ric, rlh invalidation tests. r=emilio

Comment 10

[Sajid Anwar [:sajidanwar]]

Attachment: Bug 1740584 - Implement relative root font lengths rcap, rch, rex, ric. r=emilio

Comment 11

[Sajid Anwar [:sajidanwar]]

Attachment: Bug 1740584 - Implement relative root font lengths for SVG. r=emilio

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/41c8409c535d
https://hg.mozilla.org/integration/autoland/rev/3ab25c4d6104
Wait for font loading in WPT rcap, rch, rex, ric, rlh invalidation tests. r=emilio
https://github.com/mozilla-firefox/firefox/commit/27635743073f
https://hg.mozilla.org/integration/autoland/rev/845b3c4b3821
Implement relative root font lengths rcap, rch, rex, ric. r=emilio,firefox-style-system-reviewers,layout-reviewers
https://github.com/mozilla-firefox/firefox/commit/2d447f0895de
https://hg.mozilla.org/integration/autoland/rev/7db60b276890
Implement relative root font lengths for SVG. r=emilio,firefox-style-system-reviewers,jwatt

Comment 13

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/56475 for changes under testing/web-platform/tests

Comment 14

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/3ab25c4d6104
https://hg.mozilla.org/mozilla-central/rev/845b3c4b3821
https://hg.mozilla.org/mozilla-central/rev/7db60b276890

Comment 15

[Emilio Cobos Álvarez [:emilio]]

Intent to Prototype / Ship: https://groups.google.com/a/mozilla.org/g/dev-platform/c/8u_duv74_f4/m/axf5Fo8IBwAJ

Comment 16

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 17

[Sajid Anwar [:sajidanwar]]

Thanks Emilio for the quick review and helpful feedback on the patches! I just downloaded the nightly build and confirmed that the new units are working! ☺️ Is there anything to do beyond the intent to ship, for stuff like MDN compatibility data, Can I Use, Baseline, etc., or do those kinds of things happen automatically?

I also found a few related bugs that could be updated:

• 1997746 - WPT failures on the Zoom + SVG + Font Relative Units test, fixed by this patch. Could be closed.
• 1879175 - Duplicate of this bug and could be closed.
• 1976354 - WPT failures on various tests, but four of them are fixed by this patch. Seems to be linked to the duplicate above instead of this bug.

Comment 18

[Sebastian Zartner [:sebo]]

(In reply to Sajid Anwar [:sajidanwar] from comment #17)

Is there anything to do beyond the intent to ship, for stuff like MDN compatibility data, Can I Use, Baseline, etc., or do those kinds of things happen automatically?

Would be great if those things were fully automated! That's not the case yet, but many things already are. 😀
To notify the MDN team, I've set the dev-doc-needed flag. That indicates that the feature needs to be documented on MDN and that the browser compat data (BCD) needs to be updated.
Can I Use relies on MDN's compat data for features that don't have an entry in their DB. So once the BCD gets updated, Can I Use gets it as well.
And Baseline is based on the web-features project, as far as I know. And I think they also pull the data from the BCD project to calculate what's Baseline.

Sebastian

Comment 20

[Acasandrei Beatrice (needinfo me)]

(In reply to Pulsebot from comment #12)

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/41c8409c535d
https://hg.mozilla.org/integration/autoland/rev/3ab25c4d6104
Wait for font loading in WPT rcap, rch, rex, ric, rlh invalidation tests.
r=emilio
https://github.com/mozilla-firefox/firefox/commit/27635743073f
https://hg.mozilla.org/integration/autoland/rev/845b3c4b3821
Implement relative root font lengths rcap, rch, rex, ric.
r=emilio,firefox-style-system-reviewers,layout-reviewers
https://github.com/mozilla-firefox/firefox/commit/2d447f0895de
https://hg.mozilla.org/integration/autoland/rev/7db60b276890
Implement relative root font lengths for SVG.
r=emilio,firefox-style-system-reviewers,jwatt

Perfherder has detected a browsertime performance change from push 7db60b27689000fe5afe8dacda60e825540200ba.

No action is required from the author; this comment is provided for informational purposes only.

Improvements:

Ratio	Test	Platform	Options	Absolute values (old vs new)	Performance Profiles
20%	imgur FirstVisualChange	linux1804-64-shippable-qr	cold fission webrender	600.37 -> 478.45	Before/After

Need Help or Information?

If you have any questions, please reach out to [e-mail]. Alternatively, you can find help on Slack by joining #perf-help, and on Matrix you can find help by joining #perftest.

Details of the alert can be found in the alert summary, including links to graphs and comparisons for each of the affected tests.

Comment 21

[Ryan VanderMeulen [:RyanVM]]

Should we call this out in the Fx147 relnotes?

Comment 22

[Emilio Cobos Álvarez [:emilio]]

Sure, I think so!

Release Note Request (optional, but appreciated)
[Why is this notable]: New CSS units.
[Affects Firefox for Android]: Yes
[Suggested wording]: Implemented CSS root-font-relative units rcap, rch, rex and ric.
[Links (documentation, blog post, etc)]: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units/Numeric_data_types#root_font-relative_lengths

Comment 23

[Ryan VanderMeulen [:RyanVM]]

Added to the Fx147 relnotes.

Comment 24

[Dave Letorey]

Related pull requests

• Content PR
• BCD PR
• Firefox release PR