[CSS] Implement trigonometric functions and constants

[Rumyra]

Acceptance Criteria

• The listed features are documented sufficiently on MDN
• BCD is updated
• Interactive example and data repos are updated if appropriate
• The content has been reviewed as needed

For folks helping with Firefox related documentation

• Set bugs to dev-doc-complete
• Add entry to Firefox release notes if feature is enabled in release
  or
• Add entry to Firefox experimental features page if feature is not yet enabled in release

Features to document

Implement trigonometric functions and constants https://drafts.csswg.org/css-values-4/#trig-funcs

Related Gecko bugs

https://bugzilla.mozilla.org/show_bug.cgi?id=1774589

Issues and PRs

• Compat data: feat(css): Update Firefox support for CSS trigonometric functions browser-compat-data#17505
• MDN/content
• Exp. feat. table: flags(CSS): add details about trig functions flag #20654
• Constants <calc-constant> - New CSS data type #20856
• Relnote: relnote(105): Add details of CSS trig functions and constants #21844

[bsmth]

The functions to be added to mdn/content:

• sin(), cos() (already existed when starting task)
• tan() done in tan() - New CSS functional notation #19145 (comment)
• [ ] asin() acos() atan() atan2()

see Ramiy's comment below for the status of PRs

[ramiy]

Hi, I've already started documenting all the trig functions.

mdn/content:

• CSS sin() - sin() - New CSS functional notation #19016
• CSS cos() - cos() - New CSS functional notation #19119
• CSS tan() - tan() - New CSS functional notation #19145
• CSS asin() - asin() - New CSS functional notation #20383
• CSS acos() - acos() - New CSS functional notation #20420
• CSS atan() - atan() - New CSS functional notation #20492
• CSS atan2() - atan2() - New CSS functional notation #20592

mdn/browser-compat-data:

• CSS sin() - feat(css): Add CSS Values Level 4 sin() compatibility data browser-compat-data#17170
• CSS cos() - feat(css): Add CSS Values Level 4 cos() compatibility data browser-compat-data#17205
• CSS tan() - feat(css): Add CSS Values Level 4 tan() compatibility data browser-compat-data#17206
• CSS asin() - feat(css): Add CSS Values Level 4 asin() compatibility data browser-compat-data#17207
• CSS acos() - feat(css): Add CSS Values Level 4 acos() compatibility data browser-compat-data#17218
• CSS atan() - feat(css): Add CSS Values Level 4 atan() compatibility data browser-compat-data#17220
• CSS atan2() - feat(css): Add CSS Values Level 4 atan2() compatibility data browser-compat-data#17221

mdn/data:

• CSS Syntaxes - Add syntaxes to CSS trigonometric functions data#592

[ramiy]

Hi @Rumyra ,

Since Firefox 103, those functions are behind the layout.css.trig.enabled flag.

We need to make sure they will ship in Firefox 105 (not Nightly).

Please read the comments at mdn/browser-compat-data#17505

[bsmth]

Hi @ramiy that's great, thanks a lot for your contribution. Do you already have a branch for the outstanding functions? I think we could probably get them all to land in a single PR, what do you think?

[ramiy]

Hi @ramiy that's great, thanks a lot for your contribution. Do you already have a branch for the outstanding functions? I think we could probably get them all to land in a single PR, what do you think?

No, they are not ready yet.

[bsmth]

OK, thanks. Would you like to collaborate on a fork? I can open a draft PR to compare changes if that's convenient. Let me know how you would like to proceed.

[Rumyra]

Hi @ramiy - these are to be shipped in 105 - see the afore mentioned bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1774589

Hence why the issue is open, as the content team works on updates monthly. As these are for 105 we're looking to get them complete by the end of next week. If you need @bsmth support to do this please let us know - thanks!

[evilpie]

They are not enabled by default in 105, but behind a flag. https://searchfox.org/mozilla-beta/source/modules/libpref/init/StaticPrefList.yaml#7633-7638

https://bugzilla.mozilla.org/show_bug.cgi?id=1787070 will enable them.

[Rumyra]

Thanks @evilpie that's really helpful.

@ramiy if you still need our support let us know. We can also do the relevant bcd updates when they are released to stable if that helps

[bsmth]

As I see it now, the only outstanding changes are BCD updates. I'm holding off from adding the dev-doc-complete label on Bugzilla until then.

I'm also skipping interactive examples for the moment because the mdn/content pages already have nice-looking examples.

[ramiy]

@Rumyra @bsmth

How should we document the trigonometric constants ( e | pi | infinity | -infinity | NaN ) ?

[bsmth]

Shall we put them under numbers -> https://developer.mozilla.org/en-US/docs/Web/CSS/number

Note: While not technically numbers, these keywords act as numeric values, similar to e and pi. Thus to get an infinite length, for example, requires an expression like calc(infinity * 1px).

[ramiy]

See the Calc Syntax section in the spec.

<calc-constant> = e | pi | infinity | -infinity | NaN

Should we create a new CSS data type ? Even is the answer is "no", eventually we will have to create this new type.

[bsmth]

Should we create a new CSS data type ?

I think we can skip that for now and add a "Numeric Constants" subsection to numbers for the moment, what do you think? We might indeed have to add a dedicated page in future. One thing to inform that decision: the spec lists these constants under math expressions not under numeric data types.

[ramiy]

Why am I hesitating?

Because infinity/-infinity is not just a <number>, it can also be a <dimension> which can specify distances (<length>), durations (<time>), frequencies (<frequency>), resolutions (<resolution>), and other quantities.

I prefer to create new data types for <calc-sum>, <calc-product>, <calc-value> and <calc-constant>.

[bsmth]

OK, I see your point. How about we mention e | pi | infinity | -infinity | NaN on the values and units page under numeric constants as they're still not types, as such, but referred to in the spec as "keywords" under math expressions.

I'm curious where <calc-sum> etc. would fit in the our docs. Note that we have the following: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

[bsmth]

@ramiy I think we should limit the scope of these changes for the moment. Let's just add some basic notes about the constants (one or two paras) as a sibling or child of numeric types either on the values or types page. We need to have a longer think about where it makes sense to have <calc-constant> and friends documented. 🙌🏻

[bsmth]

@ramiy -> If you would like to make bigger changes (i.e. adding pages), could you please fill out a content suggestion issue so we can plan for it? Thank you! :)

[ramiy]

I'm curious where <calc-sum> etc. would fit in the our docs. Note that we have the following: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

See the calc syntax. The spec talks about calc-sum & friends too. I thin they should be documented in MDN.

Some of the content currently documented in calc() will be moved to <calc-sum>, <calc-product>, <calc-value> and <calc-constant>.

[bsmth]

Yes, I think this makes sense. Could you please fill out a content suggestion issue so that we can track this? Thanks a lot

[hamishwillee]

@bsmth How is this one going? I was just doing a sweep of 105 items that still have dev-doc-needed and it includes these two:

• 1682444 Math function 'calc()' should allow infinity and NaN
• 1774589 [css-values-4] Implement trigonometric functions and constants

Mostly just checking that 1682444 is part of this so we don't need another release issue to be created?

[bsmth]

Hi @hamishwillee thanks for checking. I think you're right in including this one into this ticket:

• Math function 'calc()' should allow infinity and NaN
  • <calc-constant> - New CSS data type #20856 includes the content changes to cover infinity and NaN. I would add a release not when this is merged to make sure this bug is also complete.

Although 1682444 looks unrelated, did you mean to link to this?

[hamishwillee]

Although 1682444 looks unrelated, did you mean to link to this?

Whoops. No. . Should we add a note to the calc one that it is addressed by this issue?

[bsmth]

Should we add a note to the calc one that it is addressed by this issue?

Good idea, just added a comment to the bug 👍🏻

[hamishwillee]

Thanks! I think its a generally good idea to cross link so that anyone in the team can tell that a bugzilla bug is already being addressed in some way. We're not so bad at that in more recent times.