[pull] main from mdn:main

files/en-us/web/css/@property/index.md

@@ -118,7 +118,7 @@ We use the two custom properties to style the items:
 }
 ```
 
-{{ EmbedLiveSample('examples', '100%', '250px') }}
+{{ EmbedLiveSample('Using `@property` to register and use a custom property', '100%', '250px') }}
 
 The two custom properties, `--item-size: 20%` and `--item-color: orange;` are set on the `container` parent, overriding the `40%` and `aqua` default values set when these custom properties were defined. The size is set to be inheritable; the color is not.
 
@@ -128,6 +128,43 @@ For item two, CSS global keywords are set for both custom properties which are v
 
 For item three, the `--item-size` value gets set to `1000px`. While `1000px` is a {{cssxref("length")}} value, the `@property` declaration requires the value be a `<percentage>`, so the declaration is not valid and is ignored, meaning the inheritable `20%` set on the parent is used. The `xyz` value is also invalid. As `registerProperty()` set `--item-color` to not be inherited, the default initial value of `aqua` is used and not the parent's `orange` value.
 
+### Animating a custom property value
+
+In this example, we define a custom property called `--progress` using `@property`: this accepts [`<percentage>`](/en-US/docs/Web/CSS/percentage) values and has an initial value of `25%`. We use `--progress` to define the position value of the color stops in a {{cssxref("linear-gradient()")}}, specifying where a green color stops, and black starts. We then animate the value of `--progress` to `100%` over 2.5 seconds, giving the effect of animating a progress bar.
+
+```html
+<div class="bar"></div>
+```
+
+```css
+@property --progress {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 25%;
+}
+
+.bar {
+  display: inline-block;
+  --progress: 25%;
+  width: 100%;
+  height: 5px;
+  background: linear-gradient(
+    to right,
+    #00d230 var(--progress),
+    #000000 var(--progress)
+  );
+  animation: progressAnimation 2.5s ease infinite;
+}
+
+@keyframes progressAnimation {
+  to {
+    --progress: 100%;
+  }
+}
+```
+
+{{ EmbedLiveSample('Animating a custom property value', '100%', '60px') }}
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/css/css_values_and_units/index.md

@@ -88,7 +88,7 @@ Additional functions, including `calc-mix()`, `crossorigin()`, `first-valid()`,
 
 #### Units
 
-- [`%` (percentage)](/en-US/docs/Web/CSS/length#cap)
+- [`%` (percentage)](/en-US/docs/Web/CSS/percentage)
 - [`cap`](/en-US/docs/Web/CSS/length#cap)
 - [`ch`](/en-US/docs/Web/CSS/length#ch)
 - [`cm`](/en-US/docs/Web/CSS/length#cm)

files/en-us/web/javascript/reference/global_objects/intl/getcanonicallocales/index.md

@@ -24,8 +24,7 @@ try {
   Intl.getCanonicalLocales("EN_US");
 } catch (err) {
   console.log(err.toString());
-  // Expected output (Firefox/Safari): RangeError: invalid language tag: "EN_US"
-  // Expected output (Chrome): RangeError: Incorrect locale information provided
+  // Expected output: RangeError: invalid language tag: "EN_US"
 }
 ```
 

files/en-us/web/javascript/reference/global_objects/intl/listformat/resolvedoptions/index.md

@@ -16,8 +16,7 @@ const deListFormatter = new Intl.ListFormat("de-DE", { type: "disjunction" });
 const options = deListFormatter.resolvedOptions();
 
 console.log(options.locale);
-// Expected output (Firefox / Safari): "de-DE"
-// Expected output (Chrome): "de"
+// Expected output: "de-DE"
 
 console.log(options.style);
 // Expected output: "long"

files/en-us/web/javascript/reference/global_objects/intl/numberformat/resolvedoptions/index.md

@@ -16,8 +16,7 @@ const numberFormat = new Intl.NumberFormat("de-DE");
 const options = numberFormat.resolvedOptions();
 
 console.log(options.locale);
-// Expected output (Firefox / Safari): "de-DE"
-// Expected output (Chrome): "de"
+// Expected output: "de-DE"
 
 console.log(options.numberingSystem);
 // Expected output: "latn"

files/en-us/web/javascript/reference/global_objects/regexp/tostring/index.md

@@ -22,7 +22,7 @@ console.log(new RegExp("bar", "g").toString());
 // Expected output: "/bar/g"
 
 console.log(new RegExp("\n", "g").toString());
-// Expected output (if your browser supports escaping): "/\n/g"
+// Expected output: "/\n/g"
 
 console.log(new RegExp("\\n", "g").toString());
 // Expected output: "/\n/g"