[pull] main from mdn:main

files/en-us/mozilla/firefox/experimental_features/index.md

@@ -133,7 +133,7 @@ You can alternatively use the {{cssxref("animation-timeline/scroll")}} functiona
 
 For more information, see [Firefox bug 1807685](https://bugzil.la/1807685), [Firefox bug 1804573](https://bugzil.la/1804573), [Firefox bug 1809005](https://bugzil.la/1809005), [Firefox bug 1676791](https://bugzil.la/1676791), [Firefox bug 1754897](https://bugzil.la/1754897), [Firefox bug 1817303](https://bugzil.la/1817303), and [Firefox bug 1737918](https://bugzil.la/1737918).
 
-The {{cssxref('timeline-scope')}}, {{cssxref('animation-range-start')}} and {{cssxref('animation-range-end')}} properties (and the {{cssxref('animation-range')}} shorthand property) are not yet supported. For more information, see [Firefox bug 1676779](https://bugzil.la/1676779).
+The {{cssxref('timeline-scope')}} property is not yet supported. For more information, see [Firefox bug 1676779](https://bugzil.la/1676779).
 
 | Release channel   | Version added | Enabled by default? |
 | ----------------- | ------------- | ------------------- |

files/en-us/mozilla/firefox/releases/150/index.md

@@ -49,6 +49,8 @@ Firefox 150 is the current [Beta version of Firefox](https://www.firefox.com/en-
 
 - The media-based pseudo-classes {{cssxref(":buffering")}}, {{cssxref(":muted")}}, {{cssxref(":paused")}}, {{cssxref(":playing")}}, {{cssxref(":seeking")}}, {{cssxref(":stalled")}}, and {{cssxref(":volume-locked")}} are now supported. They allow you to style {{htmlelement("audio")}} and {{htmlelement("video")}} elements based on their current state, such as playing or paused. ([Firefox bug 2020775](https://bugzil.la/2020775)).
 
+- The {{cssxref("animation-range-start")}} and {{cssxref("animation-range-end")}} properties (and the {{cssxref("animation-range")}} shorthand property) are now supported. These properties set the start and end of an animation's attachment range along its timeline, allowing you to control where along a [scroll-driven animation](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) timeline an animation will start and end. ([Firefox bug 1825427](https://bugzil.la/1825427)).
+
 <!-- #### Removals -->
 
 <!-- ### JavaScript -->

files/en-us/web/css/reference/properties/animation-range-end/index.md

@@ -37,7 +37,7 @@ animation-range-end: unset;
 - {{cssxref("length-percentage")}}
   - : Specifies a length or percentage value measured from the beginning of the timeline.
 - {{cssxref("timeline-range-name")}}
-  - : Specifies a named timeline range within the overall timeline. The range starts at `0%`.
+  - : Specifies a named timeline range within the overall timeline. The range ends at `100%`.
 - `<timeline-range-name> <length-percentage>`
   - : Specifies a length or percentage value measured from the beginning of the specified named timeline range.
 

files/en-us/web/css/reference/properties/animation-range-start/index.md

@@ -61,7 +61,7 @@ The `animation-range-start`, along with the {{cssxref("animation-range-end")}} p
 
 ## Examples
 
-### Creating a scroll view progress timeline with range start
+### Creating a scroll progress timeline with range start
 
 In this example, the `animation-range-start` is applied to an element animated via a scroll progress timeline. This makes the animation start well before the element enters the scrollport.
 
@@ -184,7 +184,7 @@ p {
 
 Scroll to see the element animate. Notice how the element is already scaled and semi-opaque as it enters the viewport. This is because the element started animating well before it entered the viewport.
 
-{{EmbedLiveSample("Creating a named view progress timeline with range start", "100%", "480px")}}
+{{EmbedLiveSample("Creating a scroll progress timeline with range start", "100%", "480px")}}
 
 ## Specifications
 

files/en-us/web/css/reference/properties/animation-range/index.md

@@ -44,11 +44,11 @@ animation-range: cover 0% cover 200px;
 animation-range: entry 10% exit 100%;
 
 /* Global values */
-animation-timeline: inherit;
-animation-timeline: initial;
-animation-timeline: revert;
-animation-timeline: revert-layer;
-animation-timeline: unset;
+animation-range: inherit;
+animation-range: initial;
+animation-range: revert;
+animation-range: revert-layer;
+animation-range: unset;
 ```
 
 The `animation-range` shorthand property is specified as one or more single animation ranges, separated by commas. Each animation range is specified as one to four space separated values composed of `<timeline-range-name>` values, `<length-percentage>` values, and/or the keyword `normal`.
@@ -62,7 +62,7 @@ The `animation-range` shorthand property is specified as one or more single anim
 
 ## Description
 
-The `animation-range` shorthand property sets the `animation-range-start` and `animation-range-end` values, defining where along the animation timeline the animation will start and end. By default, the styles defined in a keyframe animation are only applied to an element while that element is being animated. When a keyframe animation is applied to an element depends on the animation timeline of that animation. By default, animation are only applied between the timeline's range start and range end. To apply the animation outside of this range, set the {{cssxref("animation-fill-mode")}} to `backwards`, `forwards`, or `both`. These three `animation-fill-mode` values apply the first keyframe styles until range start, the last keyframe styles after the animation ends, or both before and after, respectively.
+The `animation-range` shorthand property sets the `animation-range-start` and `animation-range-end` values, defining where along the animation timeline the animation will start and end. By default, the styles defined in a keyframe animation are only applied to an element while that element is being animated. When a keyframe animation is applied to an element depends on the animation timeline of that animation. By default, animations are only applied between the timeline's range start and range end. To apply the animation outside of this range, set the {{cssxref("animation-fill-mode")}} to `backwards`, `forwards`, or `both`. These three `animation-fill-mode` values apply the first keyframe styles until range start, the last keyframe styles after the animation ends, or both before and after, respectively.
 
 The {{glossary("Scroll container", "scroll port")}} area known as the view progress visibility range is the area inside which the subject element of a [named view progress timeline](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations/Timelines#view_progress_timelines) animation is deemed to be visible. By default, this is the full range of the scrollport, but it can be adjusted using the {{cssxref("view-timeline-inset")}} property.
 
@@ -75,7 +75,7 @@ When you define only the `<animation-range-start>`, either by setting a single {
 If the value is a single `<length-percentage>` or the keyword `normal`, this value defines the `<animation-range-start>` and the `<animation-range-end>` is implicitly set to `normal`. For example:
 
 - `animation-range: 20%;` is the equivalent to `animation-range-start: 20%; animation-range-end: normal;`
-- `animation-range: normal;` is the equivalent to `animation-range-start: 0%; animation-range-end: 100%;`
+- `animation-range: normal;` is the equivalent to `animation-range-start: normal; animation-range-end: normal;`
 
 If the value is a single {{cssxref("timeline-range-name")}} (without a `<length-percentage>` following it), that timeline range name is applied to both the `<animation-range-start>` and `<animation-range-end>` components, and the ranges of `0%` and `100%`, respectively, are implied. For example:
 
@@ -93,14 +93,14 @@ If two or more values are included in your `animation-range` declaration and the
 
 If you include two values and the first value is the keyword `normal` or a `<length-percentage>`, that value defines the `<animation-range-start>`, and the second value defines the `<animation-range-end>`. For example:
 
-- `animation-range: normal 25%;` is equivalent to `animation-range-start: 0%; animation-range-end: 25%;`
+- `animation-range: normal 25%;` is equivalent to `animation-range-start: normal; animation-range-end: 25%;`
 - `animation-range: 25% 50%;` is equivalent to `animation-range-start: 25%; animation-range-end: 50%;`
 - `animation-range: 25% contain;` is equivalent to `animation-range-start: 25%; animation-range-end: contain 100%;`
-- `animation-range: 25% normal;` is equivalent to `animation-range-start: 25%; animation-range-end: 100%;`
+- `animation-range: 25% normal;` is equivalent to `animation-range-start: 25%; animation-range-end: normal;`
 
 ### Multiple animations
 
-When specifying ranges for multiple animations, the `animation-range` shorthand property is specified as one or more single animation ranges, separated by commas. Each animation-range is applied to the animations in the order in which the {{cssxref("animation-name")}}s appear. For situations where the number of animations and the `animation-range` property values do not match, if there are more `animation-range` value than animations, the extra ranges are ignore. If there are more animations than ranges, the list of `animation-range` values are repeated until there is a corresponding range for each animation. For example, if we set `animation-range: 25% 75%, normal;`, the animation range of all the odd numbered animations `25% 75%` and all the even animations will be `0% 100%`.
+When specifying ranges for multiple animations, the `animation-range` shorthand property is specified as one or more single animation ranges, separated by commas. Each animation-range is applied to the animations in the order in which the {{cssxref("animation-name")}}s appear. For situations where the number of animations and the `animation-range` property values do not match, if there are more `animation-range` values than animations, the extra ranges are ignored. If there are more animations than ranges, the list of `animation-range` values are repeated until there is a corresponding range for each animation. For example, if we set `animation-range: 25% 75%, normal;`, the animation range of all the odd numbered animations `25% 75%` and all the even animations will be `0% 100%`.
 
 ## Formal definition
 

files/en-us/web/javascript/reference/operators/addition/index.md

@@ -70,12 +70,17 @@ false + false; // 0
 1n + 2n; // 3n
 ```
 
-You cannot mix BigInt and number operands in addition.
+You cannot mix BigInt and number operands in addition. `null`, `undefined`, and boolean values are coerced to numbers and are forbidden as well.
 
 ```js example-bad
 1n + 2; // TypeError: Cannot mix BigInt and other types, use explicit conversions
 2 + 1n; // TypeError: Cannot mix BigInt and other types, use explicit conversions
-"1" + 2n; // TypeError: Cannot mix BigInt and other types, use explicit conversions
+```
+
+Strings have priority over over types, so adding a string to a BigInt produces string concatenation rather than a `TypeError`.
+
+```js
+"1" + 2n; // "12"
 ```
 
 To do addition with a BigInt and a non-BigInt, convert either operand: