docs(css): FF126 - Support for `shape()` function #33446

dipikabh · 2024-05-06T18:02:41Z

🎯 Target release date

📆 May 14, 2024

Description

Firefox 126 adds support for a new function in the <basic-shape> data type: shape().

The support is currently available behind the preference layout.css.basic-shape-shape.enabled, which is enabled by default in Nightly.

Specification: https://drafts.csswg.org/css-shapes-2/#shape-function

Firefox bugs:

Notes for reviewers

You can start your review with this new page: /en-us/Web/CSS/basic-shape/shape
- The "Specifications" and "Browser compatibility" sections are yet to be updated, so they will show as broken at the moment.
Next page that can be reviewed: /en-us/Web/CSS/basic-shape
- Added the new bit about shape()
- Updated the Interpolation section to add info about shape()
  (section in spec: https://drafts.csswg.org/css-shapes-2/#interpolating-shape)
/en-US/docs/Web/CSS/clip-path and /en-US/docs/Web/CSS/offset-path have been updated to add a reference to the shape() function.
/en-us/Web/CSS/basic-shape/circle: Added info about the circle function
/en-us/Web/CSS/path: Minor update in syntax formatting
/en-us/Web/SVG/Attribute/d: Added anchor links to the command sections to aid in navigation and updated few headings for consistency

Additional details

Coming soon:

PR to update BCD
PR to add Firefox release note

Related issues and pull requests

Doc issue tracker: #33081

github-actions · 2024-05-06T18:04:04Z

Preview URLs (10 pages)

External URLs (1)

URL: /en-US/docs/Mozilla/Firefox/Releases/97
Title: Firefox 97 for developers

https://bugzil.la/1744599 (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-05-27 14:10:53)

dipikabh · 2024-05-06T19:41:10Z

The CSSRef macro flaws showing up in this PR are similar to the FirefixSidebar macro flaws in #33450 (comment), but at least the "Check URL issues" test is passing in other PR.

hamishwillee · 2024-05-06T21:52:50Z

@dipikabh I'm unmarking myself as reviewer, because @estelle has far more background. If you need me to though, then please add me back.

dipikabh · 2024-05-09T21:14:20Z

I've added the following note to the <basic-shape>, path(), and shape() pages:

Note: <fill-rule> is not supported in the {{cssxref("offset-path")}} property.

path() and shape() can both be used with clip-path and offset-path properties, so it is important to let folks know that fill-rule works (currently) only with the clip-path property.

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

files/en-us/web/css/basic-shape/index.md

dipikabh · 2024-05-14T17:35:28Z

Hi @estelle, thanks again for the great feedback. I've taken care of all your comments except for explaining quadratic and smooth curves. I think we're close to landing this.

dipikabh · 2024-05-16T17:14:05Z

Hi @estelle, could I get an approval on this PR? If there's any outstanding feedback, I can address them via a new issue/PR. Thank you!

estelle · 2024-05-16T17:17:44Z

Hi @estelle, could I get an approval on this PR? If there's any outstanding feedback, I can address them via a new issue/PR. Thank you!

I already created three new MDN/content/issues to address issues that don't need to be addressed to merge this PR.

The re-review of this PR is on my todo list.

estelle

review of shape() function page

files/en-us/web/css/basic-shape/shape/index.md

Co-authored-by: Estelle Weyl <[email protected]>

files/en-us/web/css/basic-shape/shape/index.md

dipikabh · 2024-05-21T19:24:36Z

Hi @estelle, let me know if you have any more feedback for the shape() page. If not, could I get an approval on this PR? Thank you!

OnkarRuikar

Looking at the cool animation demos I couldn't help myself.

files/en-us/web/css/basic-shape/shape/index.md

estelle

still working on it.

files/en-us/web/css/basic-shape/index.md

files/en-us/web/css/basic-shape/shape/index.md

Co-authored-by: Estelle Weyl <[email protected]>

dipikabh · 2024-05-24T04:18:59Z

Hi @estelle, I see more comments on the basic-shape page when the focus of this PR is to document the shape() function. I would appreciate it if you could limit your feedback to the shape() function in this PR. I'll take up your review comments on the basic-shape page in a separate PR.

still working on it.

Let me know when you've completed the review of the shape() function page so that I can address all comments in one go.

estelle

reviewed shape

files/en-us/web/css/basic-shape/shape/index.md

files/en-us/web/css/basic-shape/path/index.md

files/en-us/web/css/basic-shape/shape/index.md

Co-authored-by: Estelle Weyl <[email protected]>

I'll address the review comments in a new PR

dipikabh · 2024-05-27T14:23:56Z

Hi @estelle, thanks for your thorough review, I appreciate it.

I've accepted some of your suggestions from the last set, but I'll have to address the remaining feedback and comments in a new PR. I've been delayed in delivering the shape() page as part of the Firefox release.

To allow this one to land, I'll need to ask somebody else from the content team for approval. I'm happy to work on further iterations on the page in a follow-up PR.

pepelsbey

Looks good to me. Great work!

Let’s merge this one first and then continue improving it if needed.

dipikabh · 2024-05-27T23:21:50Z

@estelle, fyi - I'm working on a new PR to address your other comments. Will link to this PR soon.

* upstream/main: (55 commits) Replace `.` with `#` in example given selectors are `#ids` (mdn#33791) update info in cross browser testing strategies (mdn#33730) Clarify that `navigator.storage.persist()` depends on heuristics (mdn#33780) fix typo (mdn#33785) feat: improvements on Glossary/Hoisting (mdn#33787) CSS update: overview of shapes guide (mdn#33771) CSS update: Shapes from box values (mdn#33770) Fix issue 033506: correct droppedEntriesCount (mdn#33538) Revert "=== Symbol("foo")" (mdn#33782) docs(css): FF126 - Support for `shape()` function (mdn#33446) Bump lint-staged from 15.2.4 to 15.2.5 (mdn#33777) Bump ajv from 8.13.0 to 8.14.0 (mdn#33776) Add missing spaces for `subtlecrypto` (mdn#33774) fix: typo in `color_and_luminca` (mdn#33775) feat: improvments on gutters (mdn#33751) FF127Relnote- data: and javascript: URLS forbidden in base HREF (mdn#33738) update the content of SVG `<view>` element (mdn#33710) Clipboard.write() - log and fixes (mdn#33769) updated ClipboardItem and Clipboard documentation and examples using … (mdn#33262) Fix error in the code snippet for Symbol (mdn#33765) ...

dipikabh added 8 commits May 1, 2024 22:51

wip

f31c073

tests link updates

ee92aee

adds more inline links)

420a2b2

test links in shape page

c945c9d

adds reminaing links to path commands

c1f29cb

updates other basic-shape pages

7580009

undo's the alphabetical ordering of shape functions

9804085

updates fill-rule example syntax

850d551

dipikabh requested review from a team as code owners May 6, 2024 18:02

dipikabh requested review from estelle and hamishwillee and removed request for a team May 6, 2024 18:02

github-actions bot added Content:CSS Cascading Style Sheets docs Content:SVG SVG docs size/m [PR only] 51-500 LoC changed labels May 6, 2024

dipikabh added 2 commits May 6, 2024 14:08

fixes shape() link

0ff428d

fixes broken link

78a618a

dipikabh mentioned this pull request May 6, 2024

docs(relnote): Update FF126 release note for the new shape() function #33450

Merged

hamishwillee removed their request for review May 6, 2024 21:52

dipikabh mentioned this pull request May 6, 2024

[CSS] Firefox 126 adds shape() function support mdn/browser-compat-data#23017

Merged

Merge branch 'main' into css-shape-function

0b2ce4e

dipikabh mentioned this pull request May 7, 2024

[CSS] Implement shape() function for clip-path, offset-path #33081

Closed

7 tasks

This comment was marked as resolved.

Sign in to view

partial review fixes

3f8de16

Apply suggestions from linter

bd9dfdc

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

dipikabh commented May 14, 2024

View reviewed changes

files/en-us/web/css/basic-shape/index.md Outdated Show resolved Hide resolved

dipikabh added 2 commits May 14, 2024 13:28

fixes shape and basic-shape feedback

97dec8d

element -> property

12ce922

dipikabh requested a review from estelle May 14, 2024 17:35

estelle reviewed May 17, 2024

View reviewed changes

Apply suggestions from code review

120c7f6

Co-authored-by: Estelle Weyl <[email protected]>

dipikabh commented May 17, 2024

View reviewed changes

files/en-us/web/css/basic-shape/shape/index.md Outdated Show resolved Hide resolved

files/en-us/web/css/basic-shape/shape/index.md Outdated Show resolved Hide resolved

files/en-us/web/css/basic-shape/shape/index.md Outdated Show resolved Hide resolved

Apply suggestions from code review

5a05e1e

dipikabh requested a review from estelle May 17, 2024 15:50

OnkarRuikar reviewed May 22, 2024

View reviewed changes

estelle reviewed May 23, 2024

View reviewed changes

Apply suggestions from code review

f5806c6

Co-authored-by: Estelle Weyl <[email protected]>

estelle reviewed May 26, 2024

View reviewed changes

estelle mentioned this pull request May 27, 2024

CSS update: overview of shapes guide #33771

Merged

Apply suggestions from code review

676fe2b

Co-authored-by: Estelle Weyl <[email protected]>

dipikabh requested a review from pepelsbey May 27, 2024 14:24

pepelsbey approved these changes May 27, 2024

View reviewed changes

dipikabh merged commit 8cd0816 into mdn:main May 27, 2024
9 checks passed

dipikabh deleted the css-shape-function branch May 27, 2024 23:21

dipikabh mentioned this pull request May 28, 2024

docs(css): Follow-up PR for shape() function page #33783

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(css): FF126 - Support for `shape()` function #33446

docs(css): FF126 - Support for `shape()` function #33446

dipikabh commented May 6, 2024 •

edited

Loading

github-actions bot commented May 6, 2024 •

edited

Loading

dipikabh commented May 6, 2024

hamishwillee commented May 6, 2024

This comment was marked as resolved.

dipikabh commented May 9, 2024

dipikabh commented May 14, 2024

dipikabh commented May 16, 2024

estelle commented May 16, 2024

estelle left a comment

dipikabh commented May 21, 2024

OnkarRuikar left a comment

estelle left a comment

dipikabh commented May 24, 2024

estelle left a comment

dipikabh commented May 27, 2024

pepelsbey left a comment

dipikabh commented May 27, 2024

docs(css): FF126 - Support for shape() function #33446

docs(css): FF126 - Support for shape() function #33446

Conversation

dipikabh commented May 6, 2024 • edited Loading

🎯 Target release date

Description

Notes for reviewers

Additional details

Related issues and pull requests

github-actions bot commented May 6, 2024 • edited Loading

dipikabh commented May 6, 2024

hamishwillee commented May 6, 2024

This comment was marked as resolved.

dipikabh commented May 9, 2024

dipikabh commented May 14, 2024

dipikabh commented May 16, 2024

estelle commented May 16, 2024

estelle left a comment

Choose a reason for hiding this comment

dipikabh commented May 21, 2024

OnkarRuikar left a comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

dipikabh commented May 24, 2024

estelle left a comment

Choose a reason for hiding this comment

dipikabh commented May 27, 2024

pepelsbey left a comment

Choose a reason for hiding this comment

dipikabh commented May 27, 2024

docs(css): FF126 - Support for `shape()` function #33446

docs(css): FF126 - Support for `shape()` function #33446

dipikabh commented May 6, 2024 •

edited

Loading

github-actions bot commented May 6, 2024 •

edited

Loading