Closed Bug 1764850 Opened 2 years ago Closed 1 year ago

Support CSS round()

Categories

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

enhancement

Tracking

()

RESOLVED FIXED
108 Branch
Tracking Status
firefox108 --- fixed

People

(Reporter: bugzilla, Assigned: connor.pearson)

References

(Blocks 1 open bug, )

Details

(Keywords: dev-doc-complete)

Attachments

(2 files)

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0

Steps to reproduce:

The CSS round() function would be extremely helpful in avoiding sub-pixel layout mess in text paragraphs when defining line heights in % or similar situations.

Here's the spec: https://www.w3.org/TR/css-values-4/#round-func

I tried to find an existing bug here but the simple search found millions of substrings for "round" and the advanced search found nothing whatever I did. Please feel free to close as duplicate if one exists, the bug search is not working for me (might need fixing).

The Bugbug bot thinks this bug should belong to the 'Firefox::Address Bar' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Component: Untriaged → Address Bar
Component: Address Bar → CSS Parsing and Computation
Product: Firefox → Core

This should be relatively straight forward to implement following the Min/Max/Clamp code in here: https://searchfox.org/mozilla-central/rev/d34f9713ae128a3138c2b70d8041a535f1049d19/servo/components/style/values/generics/calc.rs#84

Blocks: css-values-4
Severity: -- → S3
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: -- → P3

I don't understand much of that code, but one specialty of the round() function is that it can mix units (of a type, e.g. length), for example em with px, or % with em:

div
{
    height: round(2em, 1px);
}

Here's the use case I'm most interested in. It's about setting font sizes and (more importantly) line heights to full pixels from abstract variables that can easily be changed per page:

p
{
    --default-font-size: 16px;
    --default-line-height-factor: 1.4;
    /* would result in 22.4px which round irregularly over multiple lines */

    font-size: var(--default-font-size);
    line-height: round(var(--default-font-size) * var(--default-line-height-factor), 1px)
    /* rather fix that to 22px for even line spacing */
}

Reference to the Chrome bug covering all math functions: https://crbug.com/1284199

(In reply to Yves Goergen from comment #3)

I don't understand much of that code, but one specialty of the round() function is that it can mix units (of a type, e.g. length), for example em with px, or % with em

Yeah, that should just work and is how min() / max() / clamp() works. When they get computed you get pixels, and you might need to preserve them until used value time where you get percentages.

It isn't a one-liner but it should be a matter of extending the min() / max() / clamp() code.

Keywords: dev-doc-needed
Version: Firefox 99 → unspecified
See Also: → 1785117
Assignee: nobody → connor.pearson
Attachment #9293573 - Attachment description: WIP: Bug 1764850 Implement CSS round() function. r=emilio → Bug 1764850 Implement CSS round() function. r=emilio
Status: NEW → ASSIGNED
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c7e10bd5cd69
Implement CSS round() function. r=emilio
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/36825 for changes under testing/web-platform/tests

Backed out for bustage on nsStyleStruct.cpp

[task 2022-11-04T21:36:07.039Z] 21:36:07     INFO -  In file included from Unified_cpp_layout_style4.cpp:128:0:
[task 2022-11-04T21:36:07.039Z] 21:36:07     INFO -  /builds/worker/checkouts/gecko/layout/style/nsStyleStruct.cpp: In lambda function:
[task 2022-11-04T21:36:07.040Z] 21:36:07    ERROR -  /builds/worker/checkouts/gecko/layout/style/nsStyleStruct.cpp:3628:7: error: control reaches end of non-void function [-Werror=return-type]
[task 2022-11-04T21:36:07.040Z] 21:36:07     INFO -         }();
[task 2022-11-04T21:36:07.041Z] 21:36:07     INFO -         ^
[task 2022-11-04T21:36:07.041Z] 21:36:07     INFO -  /builds/worker/checkouts/gecko/layout/style/nsStyleStruct.cpp: In lambda function:
[task 2022-11-04T21:36:07.042Z] 21:36:07    ERROR -  /builds/worker/checkouts/gecko/layout/style/nsStyleStruct.cpp:3628:7: error: control reaches end of non-void function [-Werror=return-type]
[task 2022-11-04T21:36:07.042Z] 21:36:07     INFO -         }();
[task 2022-11-04T21:36:07.043Z] 21:36:07     INFO -         ^
[task 2022-11-04T21:36:07.043Z] 21:36:07     INFO -  cc1plus: all warnings being treated as errors
Flags: needinfo?(connor.pearson)
Flags: needinfo?(emilio)
Flags: needinfo?(emilio)
Flags: needinfo?(connor.pearson)
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/031200e2a50d
Implement CSS round() function. r=emilio
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 108 Branch
Upstream PR merged by moz-wptsync-bot

FF108 MDN docs work for this can be tracked in https://github.com/mdn/content/issues/22114. Requires documentation for the method plus updates to the browser compatibility data.

Regressions: 1799469
Pushed by ealvarez@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/55fc19ba0ec4
Remove unused std::ops::Rem implementations. r=emilio

A patch has been attached on this bug, which was already closed. Filing a separate bug will ensure better tracking. If this was not by mistake and further action is needed, please alert the appropriate party. (Or: if the patch doesn't change behavior -- e.g. landing a test case, or fixing a typo -- then feel free to disregard this message)

Blocks: 1830342
Depends on: 1859048
Depends on: 1867908
You need to log in before you can comment on or make changes to this bug.