[pull] main from mdn:main

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

@@ -55,6 +55,7 @@ Firefox 142 is the current [Beta version of Firefox](https://www.firefox.com/en-
 #### DOM
 
 - The {{domxref("Selection.getComposedRanges()")}} method is now supported, allowing developers to accurately get selected text ranges across shadow DOM boundaries. In addition, the methods {{domxref("Selection.setBaseAndExtent()","setBaseAndExtent()")}}, {{domxref("Selection.collapse()","collapse()")}}, and {{domxref("Selection.extend()","extend()")}} of the {{domxref("Selection")}} interface have been modified to accept nodes inside a shadow root. ([Firefox bug 1903870](https://bugzil.la/1903870)).
+- The {{domxref("Animation.overallProgress")}} property is now supported, allowing developers to track and display progress through an animation. ([Firefox bug 1834878](https://bugzil.la/1834878)).
 - The {{domxref("Animation.commitStyles()")}} method no longer requires [`fill`](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#fill) to be set on an animation to commit the computed styles after the animation has finished. Note that until more browsers support this change, you should continue to set `fill`. ([Firefox bug 1973203](https://bugzil.la/1973203)).
 
 <!-- #### Media, WebRTC, and Web Audio -->

files/en-us/web/accessibility/aria/reference/attributes/aria-label/index.md

@@ -27,7 +27,7 @@ The code below shows an example of how to use the `aria-label` attribute to prov
     xmlns="http://www.w3.org/2000/svg">
     <path
       d="m.967 14.217 5.8-5.906-5.765-5.89L3.094.26l5.783 5.888L14.66.26l2.092 2.162-5.766 5.889 5.801 5.906-2.092 2.162-5.818-5.924-5.818 5.924-2.092-2.162Z"
-      fill="#000" />
+      fill="black" />
   </svg>
 </button>
 ```

files/en-us/web/accessibility/aria/reference/roles/button_role/index.md

@@ -210,7 +210,7 @@ button,
 button:active,
 button:focus,
 [role="button"][aria-pressed="true"] {
-  border: 2px solid #000;
+  border: 2px solid black;
 }
 ```
 

files/en-us/web/accessibility/aria/reference/roles/grid_role/index.md

@@ -211,13 +211,13 @@ tbody td {
 }
 
 tbody td {
-  border: 1px solid #000;
+  border: 1px solid black;
   text-align: right;
   color: #767676;
 }
 
 tbody td[role="gridcell"] {
-  color: #000;
+  color: black;
 }
 
 tbody td[role="gridcell"]:hover,

files/en-us/web/accessibility/guides/colors_and_luminance/index.md

@@ -130,7 +130,7 @@ Where accessibility is concerned, however, standards and guidelines are currentl
 
 ### Querying color values
 
-The {{domxref('Window.getComputedStyle()')}} method returns values using the RGB Decimal Reference scale or via `color(srgb...)`. For example, calling `Window.getComputedStyle()` on a `<div>` with `background-color: #ff0000` set on it returns the computed background color as `rgb(255 0 0)` — the RGB Decimal reference. However, when [using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) (for example `background-color: rgb(from blue 255 0 0)`), calling `Window.getComputedStyle()` returns the computed background color as `color(srgb 1 0 0)`. Being tied to computer hardware, `Window.getComputedStyle()` measures color in terms of RGB, not how the human eye perceives color.
+The {{domxref('Window.getComputedStyle()')}} method returns values using the RGB Decimal Reference scale or via `color(srgb...)`. For example, calling `Window.getComputedStyle()` on a `<div>` with `background-color: red` set on it returns the computed background color as `rgb(255, 0, 0)` — the RGB Decimal reference. However, when [using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) (for example `background-color: rgb(from blue 255 0 0)`), calling `Window.getComputedStyle()` returns the computed background color as `color(srgb 1 0 0)`. Being tied to computer hardware, `Window.getComputedStyle()` measures color in terms of RGB, not how the human eye perceives color.
 
 ### Red / green color blindness
 

files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

@@ -136,7 +136,7 @@ function draw() {
   ctx.fillRect(0, 75, 75, 75);
   ctx.fillStyle = "#F30";
   ctx.fillRect(75, 75, 75, 75);
-  ctx.fillStyle = "#FFF";
+  ctx.fillStyle = "white";
 
   // set transparency value
   ctx.globalAlpha = 0.2;
@@ -391,7 +391,7 @@ function draw() {
   ctx.strokeRect(-5, 50, 160, 50);
 
   // Set line styles
-  ctx.strokeStyle = "#000";
+  ctx.strokeStyle = "black";
   ctx.lineWidth = 10;
 
   // check input
@@ -517,13 +517,13 @@ function draw() {
   // Create gradients
   const linGrad = ctx.createLinearGradient(0, 0, 0, 150);
   linGrad.addColorStop(0, "#00ABEB");
-  linGrad.addColorStop(0.5, "#fff");
+  linGrad.addColorStop(0.5, "white");
   linGrad.addColorStop(0.5, "#26C000");
-  linGrad.addColorStop(1, "#fff");
+  linGrad.addColorStop(1, "white");
 
   const linGrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  linGrad2.addColorStop(0.5, "#000");
-  linGrad2.addColorStop(1, "rgb(0 0 0 / 0%)");
+  linGrad2.addColorStop(0.5, "black");
+  linGrad2.addColorStop(1, "transparent");
 
   // assign gradients to fill and stroke styles
   ctx.fillStyle = linGrad;
@@ -561,22 +561,22 @@ function draw() {
   const radGrad = ctx.createRadialGradient(45, 45, 10, 52, 50, 30);
   radGrad.addColorStop(0, "#A7D30C");
   radGrad.addColorStop(0.9, "#019F62");
-  radGrad.addColorStop(1, "rgb(1 159 98 / 0%)");
+  radGrad.addColorStop(1, "transparent");
 
   const radGrad2 = ctx.createRadialGradient(105, 105, 20, 112, 120, 50);
   radGrad2.addColorStop(0, "#FF5F98");
   radGrad2.addColorStop(0.75, "#FF0188");
-  radGrad2.addColorStop(1, "rgb(255 1 136 / 0%)");
+  radGrad2.addColorStop(1, "transparent");
 
   const radGrad3 = ctx.createRadialGradient(95, 15, 15, 102, 20, 40);
   radGrad3.addColorStop(0, "#00C9FF");
   radGrad3.addColorStop(0.8, "#00B5E2");
-  radGrad3.addColorStop(1, "rgb(0 201 255 / 0%)");
+  radGrad3.addColorStop(1, "transparent");
 
   const radGrad4 = ctx.createRadialGradient(0, 150, 50, 0, 140, 90);
   radGrad4.addColorStop(0, "#F4F201");
   radGrad4.addColorStop(0.8, "#E4C700");
-  radGrad4.addColorStop(1, "rgb(228 199 0 / 0%)");
+  radGrad4.addColorStop(1, "transparent");
 
   // draw shapes
   ctx.fillStyle = radGrad4;
@@ -615,7 +615,7 @@ function draw() {
   // Create gradients
   const conicGrad1 = ctx.createConicGradient(2, 62, 75);
   conicGrad1.addColorStop(0, "#A7D30C");
-  conicGrad1.addColorStop(1, "#fff");
+  conicGrad1.addColorStop(1, "white");
 
   const conicGrad2 = ctx.createConicGradient(0, 187, 75);
   // we multiply our values by Math.PI/180 to convert degrees to radians

files/en-us/web/api/canvas_api/tutorial/basic_animations/index.md

@@ -218,7 +218,7 @@ function clock() {
   ctx.beginPath();
   ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
   ctx.stroke();
-  ctx.fillStyle = "rgb(0 0 0 / 0%)";
+  ctx.fillStyle = "transparent";
   ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
   ctx.fill();
   ctx.restore();

files/en-us/web/api/canvas_api/tutorial/compositing/index.md

@@ -61,7 +61,7 @@ function draw() {
 function generateStars(ctx) {
   for (let j = 1; j < 50; j++) {
     ctx.save();
-    ctx.fillStyle = "#fff";
+    ctx.fillStyle = "white";
     ctx.translate(
       75 - Math.floor(Math.random() * 150),
       75 - Math.floor(Math.random() * 150),
@@ -147,7 +147,7 @@ function draw() {
 function generateStars(ctx) {
   for (let j = 1; j < 50; j++) {
     ctx.save();
-    ctx.fillStyle = "#fff";
+    ctx.fillStyle = "white";
     ctx.translate(
       75 - Math.floor(Math.random() * 150),
       75 - Math.floor(Math.random() * 150),

files/en-us/web/api/canvas_api/tutorial/pixel_manipulation_with_canvas/index.md

@@ -60,7 +60,7 @@ To create a new, blank `ImageData` object, you should use the {{domxref("CanvasR
 const myImageData = ctx.createImageData(width, height);
 ```
 
-This creates a new `ImageData` object with the specified dimensions. All pixels are preset to transparent black (all zeroes, i.e., rgb(0 0 0 / 0%)).
+This creates a new `ImageData` object with the specified dimensions. All pixels are preset to transparent.
 
 You can also create a new `ImageData` object with the same dimensions as the object specified by `anotherImageData`. The new object's pixels are all preset to transparent black. **This does not copy the image data!**
 

files/en-us/web/api/canvas_api/tutorial/transformations/index.md

@@ -56,7 +56,7 @@ function draw() {
   ctx.fillRect(15, 15, 120, 120); // Draw a Blue rectangle with new settings
   ctx.save(); // Save the current state
 
-  ctx.fillStyle = "#FFF"; // Make changes to saved settings
+  ctx.fillStyle = "white"; // Make changes to saved settings
   ctx.globalAlpha = 0.5;
   ctx.fillRect(30, 30, 90, 90); // Draw a 50%-White rectangle with newest settings
 

files/en-us/web/api/canvasrenderingcontext2d/arcto/index.md

@@ -255,11 +255,11 @@ label {
   margin: 10px;
 }
 .input {
-  color: #00f;
+  color: blue;
   text-decoration: underline;
 }
 #canvas {
-  border: 1px solid #000;
+  border: 1px solid black;
 }
 ```
 
@@ -729,8 +729,8 @@ function moveActivePointAndUpdate(pointCursor) {
 
 function drawCanvas() {
   const rPoint = 4;
-  const colorConstruction = "#080";
-  const colorDraggable = "#00F";
+  const colorConstruction = "green";
+  const colorDraggable = "blue";
   const [P0, P1, P2] = state.controlPoints;
 
   ctx.font = "italic 14pt sans-serif";
@@ -765,7 +765,7 @@ function drawCanvas() {
     ctx.arc(state.C.x, state.C.y, state.radius, 0, 2 * Math.PI);
     ctx.stroke();
 
-    ctx.fillStyle = "#000";
+    ctx.fillStyle = "black";
     ctx.fillText("C", state.C.x, state.C.y - 15);
     ctx.fillText("T\u2081", state.T1.x, state.T1.y - 15);
     ctx.fillText("T\u2082", state.T2.x, state.T2.y - 15);
@@ -792,7 +792,7 @@ function drawCanvas() {
     ctx.fillStyle = colorDraggable;
     ctx.fill();
   });
-  ctx.fillStyle = "#000";
+  ctx.fillStyle = "black";
   ctx.fillText("P\u2080", P0.x, P0.y - 15);
   ctx.fillText("P\u2081", P1.x, P1.y - 15);
   ctx.fillText("P\u2082", P2.x, P2.y - 15);
@@ -803,7 +803,7 @@ function drawCanvas() {
   ctx.moveTo(P0.x, P0.y);
   ctx.setLineDash([]);
   ctx.arcTo(P1.x, P1.y, P2.x, P2.y, state.radius);
-  ctx.strokeStyle = "#000";
+  ctx.strokeStyle = "black";
   ctx.stroke();
 } /* end of function drawCanvas */
 

files/en-us/web/api/canvasrenderingcontext2d/clearrect/index.md

@@ -26,7 +26,7 @@ clearRect(x, y, width, height)
 ```
 
 The `clearRect()` method sets the pixels in a rectangular area to
-transparent black (`rgb(0 0 0 / 0%)`). The rectangle's top-left corner is at
+transparent. The rectangle's top-left corner is at
 `(x, y)`, and its size is specified by `width` and
 `height`.
 

files/en-us/web/api/canvasrenderingcontext2d/globalalpha/index.md

@@ -81,7 +81,7 @@ ctx.fillStyle = "#09F";
 ctx.fillRect(0, 75, 75, 75);
 ctx.fillStyle = "#F30";
 ctx.fillRect(75, 75, 75, 75);
-ctx.fillStyle = "#FFF";
+ctx.fillStyle = "white";
 
 // Set transparency value
 ctx.globalAlpha = 0.2;

files/en-us/web/api/canvasrenderingcontext2d/globalcompositeoperation/index.md

@@ -202,7 +202,7 @@ And this code, `runComposite()`, handles the bulk of the work, relying on a numb
 function createCanvas() {
   const canvas = document.createElement("canvas");
   canvas.style.background = `url(${JSON.stringify(op_8x8.data)})`;
-  canvas.style.border = "1px solid #000";
+  canvas.style.border = "1px solid black";
   canvas.style.margin = "5px";
   canvas.width = width / 2;
   canvas.height = height / 2;
@@ -235,7 +235,7 @@ function runComposite() {
     ctx.globalCompositeOperation = "source-over";
     ctx.fillStyle = "rgb(0 0 0 / 80%)";
     ctx.fillRect(0, height / 2 - 20, width / 2, 20);
-    ctx.fillStyle = "#FFF";
+    ctx.fillStyle = "white";
     ctx.font = "14px arial";
     ctx.fillText(pop, 5, height / 2 - 5);
     ctx.restore();
@@ -246,7 +246,7 @@ function runComposite() {
     ctx.drawImage(canvas1, 0, 0, width / 2, height / 2);
     ctx.fillStyle = "rgb(0 0 0 / 80%)";
     ctx.fillRect(0, height / 2 - 20, width / 2, 20);
-    ctx.fillStyle = "#FFF";
+    ctx.fillStyle = "white";
     ctx.font = "14px arial";
     ctx.fillText("existing content", 5, height / 2 - 5);
     ctx.restore();
@@ -257,7 +257,7 @@ function runComposite() {
     ctx.drawImage(canvas2, 0, 0, width / 2, height / 2);
     ctx.fillStyle = "rgb(0 0 0 / 80%)";
     ctx.fillRect(0, height / 2 - 20, width / 2, 20);
-    ctx.fillStyle = "#FFF";
+    ctx.fillStyle = "white";
     ctx.font = "14px arial";
     ctx.fillText("new content", 5, height / 2 - 5);
     ctx.restore();
@@ -281,20 +281,20 @@ const lightMix = () => {
   ctx.save();
   ctx.globalCompositeOperation = "lighter";
   ctx.beginPath();
-  ctx.fillStyle = "rgb(255 0 0 / 100%)";
+  ctx.fillStyle = "red";
   ctx.arc(100, 200, 100, Math.PI * 2, 0, false);
   ctx.fill();
   ctx.beginPath();
-  ctx.fillStyle = "rgb(0 0 255 / 100%)";
+  ctx.fillStyle = "blue";
   ctx.arc(220, 200, 100, Math.PI * 2, 0, false);
   ctx.fill();
   ctx.beginPath();
-  ctx.fillStyle = "rgb(0 255 0 / 100%)";
+  ctx.fillStyle = "lime";
   ctx.arc(160, 100, 100, Math.PI * 2, 0, false);
   ctx.fill();
   ctx.restore();
   ctx.beginPath();
-  ctx.fillStyle = "#f00";
+  ctx.fillStyle = "red";
   ctx.fillRect(0, 0, 30, 30);
   ctx.fill();
 };
@@ -317,9 +317,9 @@ const colorSphere = (element) => {
       oTop + halfWidth,
     );
     const color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
-    gradient.addColorStop(0, "rgb(0 0 0 / 0%)");
-    gradient.addColorStop(0.7, `rgb(${color.R} ${color.G} ${color.B} / 100%)`);
-    gradient.addColorStop(1, "rgb(255 255 255 / 100%)");
+    gradient.addColorStop(0, "transparent");
+    gradient.addColorStop(0.7, `rgb(${color.R} ${color.G} ${color.B})`);
+    gradient.addColorStop(1, "white");
     ctx.beginPath();
     ctx.moveTo(oLeft + halfWidth, oTop);
     ctx.lineTo(oLeft + halfWidth, oTop + halfWidth);
@@ -331,7 +331,7 @@ const colorSphere = (element) => {
     ctx.translate(-(oLeft + halfWidth), -(oTop + halfWidth));
   }
   ctx.beginPath();
-  ctx.fillStyle = "#00f";
+  ctx.fillStyle = "blue";
   ctx.fillRect(15, 15, 30, 30);
   ctx.fill();
   return ctx.canvas;
@@ -410,7 +410,7 @@ const createInterlace = (size, color1, color2) => {
   return pattern;
 };
 
-const op_8x8 = createInterlace(8, "#FFF", "#eee");
+const op_8x8 = createInterlace(8, "white", "#eee");
 ```
 
 #### Result

files/en-us/web/api/css/registerproperty_static/index.md

@@ -77,7 +77,7 @@ works, but that it doesn't with the unregistered property!
 ```css
 .registered {
   --my-color: #c0ffee;
-  background-image: linear-gradient(to right, #fff, var(--my-color));
+  background-image: linear-gradient(to right, white, var(--my-color));
   transition: --my-color 1s ease-in-out;
 }
 
@@ -88,7 +88,7 @@ works, but that it doesn't with the unregistered property!
 
 .unregistered {
   --unregistered: #c0ffee;
-  background-image: linear-gradient(to right, #fff, var(--unregistered));
+  background-image: linear-gradient(to right, white, var(--unregistered));
   transition: --unregistered 1s ease-in-out;
 }
 

files/en-us/web/api/css_properties_and_values_api/guide/index.md

@@ -56,7 +56,7 @@ In this example, the custom property `--registered` has been registered using th
 ```css
 .registered {
   --registered: #c0ffee;
-  background-image: linear-gradient(to right, #fff, var(--registered));
+  background-image: linear-gradient(to right, white, var(--registered));
   transition: --registered 1s ease-in-out;
 }
 
@@ -67,7 +67,7 @@ In this example, the custom property `--registered` has been registered using th
 
 .unregistered {
   --unregistered: #c0ffee;
-  background-image: linear-gradient(to right, #fff, var(--unregistered));
+  background-image: linear-gradient(to right, white, var(--unregistered));
   transition: --unregistered 1s ease-in-out;
 }
 

files/en-us/web/api/cssrulelist/index.md

@@ -51,7 +51,7 @@ body {
 
 .container > * {
   background-color: #3740ff;
-  color: #fff;
+  color: white;
 }
 ```
 

files/en-us/web/api/csstransition/index.md

@@ -33,7 +33,7 @@ The transition in the following example changes the width of the box on hover. C
 ```css
 .box {
   background-color: #165baa;
-  color: #fff;
+  color: white;
   width: 100px;
   height: 100px;
   transition: width 4s;

files/en-us/web/api/csstransition/transitionproperty/index.md

@@ -30,7 +30,7 @@ that the transition is created for, which is `width`.
 ```css
 .box {
   background-color: #165baa;
-  color: #fff;
+  color: white;
   width: 100px;
   height: 100px;
   transition: width 4s;