1827404 - [css-values-4] Support division/multiplication/subtraction of mixed units in math functions like calc() and sign() (removal of unit)

Status: RESOLVED FIXED

(Core :: CSS Parsing and Computation, enhancement)

Description

[Brandon McConnell]

Summary:

When dividing a length by another length, the CSS parser in the browser should return a number as specified in the css-values-4 spec. However, this functionality is not yet implemented and instead throws an error or produces an unexpected result.

Steps to Reproduce:

1. Create a CSS file with the following rule:

div {
  width: 200px / 20px;
}

2. Link the CSS file to an HTML file with a div element.
3. Open the HTML file in the browser.

Expected Results:

The div element should have a width of 10 since 200px / 20px equals 10.

Actual Results:

The div element either does not have a width set or has an unexpected value such as NaN or an error message is thrown.

Environment:

• Browser: [insert browser name and version]
• Operating System: [insert operating system name and version]

Additional Information:

• The css-values-4 spec specifies that multiplication and division are no longer restricted to specific argument types and can produce complex intermediate results. This change in functionality should be implemented in the browser's CSS parser.
• The lack of this functionality can lead to unexpected behavior in web pages and hinder the ability of developers to create responsive designs.
• This issue affects all web pages that use division of lengths in CSS rules.
• This issue can be worked around by manually calculating the result of the division and using that value instead of the division operation. However, this is not ideal and can lead to less readable and maintainable code.

Related resources and discussions

• Discussion: https://github.com/w3c/csswg-drafts/issues/7448
• Specification: https://drafts.csswg.org/css-values/#calc-type-checking

  NOTE: In previous versions of this specification, multiplication and division were limited in what arguments they could take, to avoid producing more complex intermediate results (such as 1px * 1em, which is <length>²) and to make division-by-zero detectable at parse time. This version now relaxes those restrictions.

Comment 1

[Brandon McConnell]

For transparency across bug fix implementations/discussions across browser engines:

• Mozilla: https://bugzilla.mozilla.org/show_bug.cgi?id=1827404
• WebKit: https://bugs.webkit.org/show_bug.cgi?id=255280
• Chromium: https://bugs.chromium.org/p/chromium/issues/detail?id=1432187

Comment 2

[Brandon McConnell]

** One addtl important note— My 200px / 20px example above uses px / px, but imperatively, this should support mixed units as well, so someone should be able to do 100% / 20px (% / px, etc.) to get a number representing how many times the second number fits into the first expression, such as how many times 20px fits into 100% of the currently evaluated dimension.

Comment 3

[Brandon McConnell]

Here is a minimal example of this bug:
https://codepen.io/brandonmcconnell/pen/OJByEBO/126b86e86107bda0133813141da9108e

The screen appears red, because of this rule:

main {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

However, it should appear blue, due to this style:

main > div {
  width: calc(100% / 20px * 20px);
  height: calc(100% / 20px * 20px);
  background-color: blue;
}

The / 20px * 20px should naturally cancel each other out, making those values 100% once again. This is per the current css-values-4 spec.

This can also be used, for example, to determine how many times a static number like 25px fits into a dynamic size like 100vh and then store that number for use anywhere the number type is accepted.

This will be especially useful once round(), mod(), and rem() are supported.

Comment 4

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:dholbert, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 5

[Jonathan Kew [:jfkthame]]

Note that the original example in comment 0 (with width: 200px / 20px) is not valid, as far as I can see. I presume this was intended to be width: calc(200px / 20px), but that would still not be valid because width requires a length, not a number.

More generally, though, this is about enhancing calc to track and resolve complex units where possible, which seems reasonable.

Comment 6

[Brandon McConnell]

(In reply to Jonathan Kew [:jfkthame] from comment #5)

Note that the original example in comment 0 (with width: 200px / 20px) is not valid, as far as I can see. I presume this was intended to be width: calc(200px / 20px), but that would still not be valid because width requires a length, not a number.

More generally, though, this is about enhancing calc to track and resolve complex units where possible, which seems reasonable.

Yes, the original example was meant to include calc(). This other example I shared later is a better example:

main > div {
  width: calc(100% / 20px * 20px);
  height: calc(100% / 20px * 20px);
  background-color: blue;
}

And here is a the codepen that can be used to see and test this: https://codepen.io/brandonmcconnell/pen/OJByEBO/126b86e86107bda0133813141da9108e

Comment 7

[Brandon McConnell]

Thank you for those clarifications, Jonathan. Yes, this is mainly about enhancing calc to support mixed units resolving to numbers instead of lengths were applicable.

Comment 8

[Brandon McConnell]

Any update here? This is essential for many foundational computations in CSS.

Comment 9

[Emilio Cobos Álvarez [:emilio]]

This generally raises more questions than answers, because it adds potential interdependencies between virtually all CSS properties and font properties etc, see https://github.com/w3c/csswg-drafts/issues/8169.

In general, work along these lines is happening in https://phabricator.services.mozilla.com/D180681 and so on. Your examples (for <length-percentage>) are fine tho, and could generally be handled without much trouble perhaps, once that revision lands.

Comment 10

[Brandon McConnell]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #9)

This generally raises more questions than answers, because it adds potential interdependencies between virtually all CSS properties and font properties etc, see https://github.com/w3c/csswg-drafts/issues/8169.

In general, work along these lines is happening in https://phabricator.services.mozilla.com/D180681 and so on. Your examples (for <length-percentage>) are fine tho, and could generally be handled without much trouble perhaps, once that revision lands.

Thanks for the added info, Emilio! It's helpful to know that this is already being worked towards.

Comment 11

[tobias.bengfort]

This should block https://bugzilla.mozilla.org/show_bug.cgi?id=1531237

Comment 13

[Sebastian Zartner [:sebo]]

Just to add a few more keywords so this bug can be found more easily, this is about the removal of the unit in calc().

Sebastian

Comment 14

[Daniel Holbert [:dholbert]]

We've been using this bug to track support for subtraction of mixed units in calc(sign(...)) expressions as well (in e.g. bug 1951006 and other dependencies)

--> updating bug summary to reflect that reality.

(Having said that: when someone gets to working on this, they're welcome to split this out into different pieces if that ends up being useful.)

Comment 16

[Sajid Anwar [:sajidanwar]]

Attachment: Bug 1827404 - Improve percentage handling in CSS calc() using numeric value type checking. r=#style

Comment 17

[Sajid Anwar [:sajidanwar]]

Attachment: Bug 1827404 - Support typed arithmetic for CSS calc(). r=#style

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/b1a53ea02b61
https://hg.mozilla.org/integration/autoland/rev/9d89d6f8870e
Improve percentage handling in CSS calc() using numeric value type checking. r=firefox-style-system-reviewers,emilio
https://github.com/mozilla-firefox/firefox/commit/010ee61276af
https://hg.mozilla.org/integration/autoland/rev/f8a0ee4539fa
Support typed arithmetic for CSS calc(). r=firefox-style-system-reviewers,layout-reviewers,dshin,emilio

Comment 19

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

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

Comment 20

[amarc]

https://hg.mozilla.org/mozilla-central/rev/9d89d6f8870e
https://hg.mozilla.org/mozilla-central/rev/f8a0ee4539fa

Comment 21

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

Upstream PR merged by moz-wptsync-bot

Comment 22

[Ryan VanderMeulen [:RyanVM]]

Did you want to nominate this for a Nightly relnote? If so, set the relnote-firefox flag to "?"
https://wiki.mozilla.org/Release_Management/Release_Notes_Nomination

Possible wording:

Starting with Firefox 155, Firefox Nightly supports typed arithmetic in CSS calc(), allowing units to be multiplied and divided within math functions.

Comment 23

[Sajid Anwar [:sajidanwar]]

Ah, thanks Ryan for the reminder! Flipped the relnote flag and I like the suggested wording as well.

---

Release Note Request (optional, but appreciated)
[Why is this notable]: New CSS Feature, Parity with Chrome and Safari
[Affects Firefox for Android]: Yes
[Suggested wording]: Starting with Firefox 155, Firefox Nightly supports typed arithmetic in CSS calc(), allowing units to be multiplied and divided within math functions.
[Links (documentation, blog post, etc)]: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Values_and_units/Using_typed_arithmetic

Comment 24

[Ryan VanderMeulen [:RyanVM]]

Added to the Nightly relnotes.