[css-values-5] What is meant by the distinction between "math function" vs. "function that evaluates to a <number>"

[weinig]

In a few places in CSS Values and Units 5, for instance for media-pogress(), there is a not that reads:

NOTE: media-progress() is not a math function; it’s just a function that evaluates to a <number>.

Even though I just implemented calc(), and I feel I probably should understand what that means, I don't really understand the distinction being made here.

Are there different behaviors that would be observable if were "a math function"? Different places it could be used?

(cc @tabatkins)

[tabatkins]

Yes, "math function" refers to a specific class of functions, mostly defined in Values 4 currently.

• math functions form calculation trees together, allowing values like NaN to be passed between them without censoring
• the calculations in a math function always evaluate in the context of wherever the math function is placed, so for example a % resolves according to the property and carries "percentage-ness" in the return value even if it was computed away by the actual math, 'em' resolves according to the property/element, etc.

An implication of this is that a stack of nested math functions all share the same context for things like unit resolution or % meaning. But media-progress() doesn't do that - it changes its <calc-sum> arguments to have a different resolution context, that of MQs (em resolves against the initial value, %s don't have meaning, etc). So it can't be math function, or else when you nested it inside of another math function, you'd get a calculation tree with disparate semantics for some values.

Like, in calc(2em * media-progress(width, 2em, 1000px)), the two 2em values mean totally different things.

[fantasai]

Flagging Needs Edits, since it seems like we should put this info in a note. :)

[weinig]

Thanks @tabatkins. That's very helpful.

It makes me want a more formal definition of the "context" concept.

I think the conceptual model of some functions (the "math functions") inheriting their context, and some creating their own new one is a good conceptual model. I am not sure "math functions" is the best name for functions that inherit.

As for which functions are "math functions", is it just the ones in CSS Values 4 and <progress()>? I assume anchor() and friends would not be.

[tabatkins]

Flagging Needs Edits, since it seems like we should put this info in a note. :)

Yeah, that's fair, I can definitely add some explanatory context.

I am not sure "math functions" is the best name for functions that inherit.

Other names welcome; the origin of the name is that all the math operations that could, in theory, just be operators or something are part of this set.

As for which functions are "math functions", is it just the ones in CSS Values 4 and <progress()>? I assume anchor() and friends would not be.

Correct, "math functions" are explicitly called out in their definitions.

[weinig]

Other names welcome; the origin of the name is that all the math operations that could, in theory, just be operators or something are part of this set.

"context inheriting functions" vs "context creating functions"?

[cdoublev]

552bf9e already put a formal definition of the things discussed here. It might not be enough, I do not know.

I understand that calc(2em * media-progress(width, 2em, 1000px)) might need to be represented with two clearly differentiated trees, somehow, even if one contains the other, but I do not understand the practical implications of not defining media-progress() as a math function, as I already noted in #11040.