Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-values-4] Definition of a math function #6802

Closed
cdoublev opened this issue Nov 6, 2021 · 3 comments
Closed

[css-values-4] Definition of a math function #6802

cdoublev opened this issue Nov 6, 2021 · 3 comments

Comments

@cdoublev
Copy link
Collaborator

cdoublev commented Nov 6, 2021

A calc() function contains a single calculation, which is a sequence of values [...]

The min() or max() functions contain one or more comma-separated calculations [...]

To parse a calculation, given a calculation values:

[previous steps...]
6. Return the result of simplifying a calculation tree from values.

To simplify a calculation tree root:

[previous steps...]
5. If root is a Min or Max node [...]

If calc(), min(), and other functions are not calculations that contain calculation values, instead of being something that contains a calculation, I do not see how the calculation tree can be identified as a Min or Max node in step 5 of the procedure to simplify a calculation tree.

EDIT (answer): [for] any other math function [than calc()], the internal representation is an operator node with the same name as the function (11.10 - Internal Representation), then internal representations of math functions are eagerly simplified (11.10.1 - Simplification).

@cdoublev
Copy link
Collaborator Author

cdoublev commented Nov 7, 2021

Also:

Math functions are turned into calculation trees depending on the function:

  • calc(): The internal representation of a calc() function is the result of parsing a calculation from its argument.

calc() is turned into a calculation tree, but the procedure to serialize a calculation tree does not include a step to wrap it in calc(). Obviously, calc() is turned into calculation tree but it should stay a math function. But I do not see how it can still be a math function because it is turned into a calculation tree by parsing a calculation from its argument, ie. the calculation values.

EDIT: I guess that calc() and the resulting calculation tree are kind of merged, please correct me in the comments if this is not the right answer.

@tabatkins
Copy link
Member

calc() is turned into a calculation tree, but the procedure to serialize a calculation tree does not include a step to wrap it in calc().

Right, it shouldn't, that's handled by the "serialize a math function" algo, step 3.

calc() is not a calculation, it's a math function which contains a "calculation" as its sole argument and whose "internal representation" is a calculation tree (see the first paragraph of section 11.10.

When you're serializing CSS values, the CSS value is the math function; it's just that part of serializing that function involves serializing the calculation tree it's associated with.

If calc(), min(), and other functions are not calculations that contain calculation values, instead of being something that contains a calculation, I do not see how the calculation tree can be identified as a Min or Max node in step 5 of the procedure to simplify a calculation tree.

See section 11.10 again - any math function other than a calc() has an internal representation that's a calculation tree whose root node is an operator node with the same name as the function.

See also step 5 of "parse a calculation", which replaces math functions in the calculation tree with their internal representations (more calculation trees), so you get a homogenous tree of operators and numeric values. That's how something like calc(1px + min(10px, 1em)) gets turned into the calculation tree (Sum 1px (Min 10px 1em)).

@cdoublev
Copy link
Collaborator Author

cdoublev commented Nov 10, 2021

My misunderstanding came from the term/verb internal representation and representing, and also from how I match component values against a CSS grammar.

In my implementation, component values ​​are matched against CSS types from bottom to top (calc-value then calc-product then calc-sum then calc()), and "hook" functions are run with the matched component value(s) for the corresponding type, in order to apply the corresponding part of the procedure to parse a caculation: collecting Product in the hook for calc-product, collecting Sum for calc-sum, but then I struggled with simplification, which had to run in a hook for parsing all math function types, and then the above terms in the related procedures became blurry to me.

Anyway, I found an implementation that seems to match the specification, and all tests for math functions pass, including cases like calc(1s + 1px), calc(2px / 1px), min(2px, 1%), etc.

@cdoublev cdoublev changed the title [css-values-4] Definition of a calculation [css-values-4] Definition of a math function Nov 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants