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.

Sign up for GitHub

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

31103-rect-xywh-ff-release #31661

Merged
merged 6 commits into from
Jan 23, 2024
Merged

31103-rect-xywh-ff-release #31661

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4a1b25a
remove experimental note and added release note for rect() & xywh() b…
dletorey Jan 11, 2024
38eef7e
Merge branch 'main' into 31103-rect-xywh-ff-release
dletorey Jan 11, 2024
3e18462
Merge branch 'main' into 31103-rect-xywh-ff-release
dletorey Jan 16, 2024
8f96369
Merge branch 'main' into 31103-rect-xywh-ff-release
dletorey Jan 16, 2024
afb9126
Merge branch 'main' into 31103-rect-xywh-ff-release
dletorey Jan 23, 2024
a579b9b
Merge branch 'main' into 31103-rect-xywh-ff-release
dletorey Jan 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 0 additions & 43 deletions files/en-us/mozilla/firefox/experimental_features/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -772,49 +772,6 @@ See ([Firefox bug 1808410](https://bugzil.la/1808410)) for more details.
</tbody>
</table>

### rect() and xywh() basic shape functions

The CSS [`rect()`](/en-US/docs/Web/CSS/basic-shape/rect) and [`xywh()`](/en-US/docs/Web/CSS/basic-shape/xywh) shape functions enable you to define a rectangle using the [`<basic-shape>`](/en-US/docs/Web/CSS/basic-shape) data type. In CSS properties such as {{cssxref("offset-path")}}, these functions are used to define the shape of the path along which an element moves. Using the `rect()` function, you specify the rectangle edge offsets from the top edge and left edges of the containing block. Using the `xywh()` function, you specify the rectangle edge offsets from the left and top edges of the containing block as well as the width and height of the rectangle. In both the functions, you can optionally round off the corners.
For more details, see [Firefox bug 1786161](https://bugzil.la/1786161) for the `rect()` function and [Firefox bug 1786160](https://bugzil.la/1786160) for the `xywh()` function.

<table>
<thead>
<tr>
<th>Release channel</th>
<th>Version added</th>
<th>Enabled by default?</th>
</tr>
</thead>
<tbody>
<tr>
<th>Nightly</th>
<td>117</td>
<td>Yes</td>
</tr>
<tr>
<th>Developer Edition</th>
<td>117</td>
<td>No</td>
</tr>
<tr>
<th>Beta</th>
<td>117</td>
<td>No</td>
</tr>
<tr>
<th>Release</th>
<td>117</td>
<td>No</td>
</tr>
<tr>
<th>Preference names</th>
<td colspan="2">
<code>layout.css.motion-path-basic-shapes.enabled</code>, <code>layout.css.basic-shape-rect.enabled</code>, <code>layout.css.basic-shape-xywh.enabled</code>
</td>
</tr>
</tbody>
</table>

### zoom property

The non-standard CSS {{cssxref("zoom")}} property is enabled in the Nightly release and lets you magnify an element similar to the {{cssxref("transform")}} property, but it affects the layout size of the element.
Expand Down
2 changes: 2 additions & 0 deletions files/en-us/mozilla/firefox/releases/122/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@ This article provides information about the changes in Firefox 122 that affect d

- The CSS {{cssxref("ray")}} function is now available by default. You can use this function to define an {{cssxref("offset-path")}} as a line segment that begins from an {{cssxref("offset-position")}} and extends in the direction of the specified angle. ([Firefox bug 1598151](https://bugzil.la/1598151))

- The {{CSSxref("clip-path")}} and {{CSSxref("offset-path")}} properties now accept [`rect()`](/en-US/docs/Web/CSS/basic-shape/rect) and [`xywh()`](/en-US/docs/Web/CSS/basic-shape/xywh) shape functions. These {{CSSXref("basic-shape")}} values allow the clipping and offsetting of elements with a rectangle defined by distance from the edge of the element (`rect()`) or coordinates and size (`xywh()`). ([Firefox bug 1868722](https://bugzil.la/1868722)).

#### Removals

### JavaScript
Expand Down