Open Bug 1827404 Opened 2 years ago Updated 22 days ago

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

Categories

(Core :: CSS Parsing and Computation, enhancement)

Product:
Core
Component:
CSS Parsing and Computation
Version:
Firefox 114
Type:
enhancement

Tracking

()

Status:
UNCONFIRMED
Milestone:
Future

People

(Reporter: brandon, Unassigned)

References

(Blocks 3 open bugs,
URL
)

Details

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;
}
  1. Link the CSS file to an HTML file with a div element.
  2. 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

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

** 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.

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.

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

For more information, please visit auto_nag documentation.

Flags: needinfo?(dholbert)

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.

Severity: -- → S3
Type: defect → enhancement
Flags: needinfo?(dholbert)

(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

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.

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

Flags: needinfo?(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.

Flags: needinfo?(emilio)

(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.

Duplicate of this bug: 1905736

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

URL: https://drafts.csswg.org/css-values-4...
Summary: CSS bug: Support division/multiplication of mixed units → [css-values-4] Support division/multiplication of mixed units in math functions like calc() (removal of unit)
You need to log in before you can comment on or make changes to this bug.