Merge branch 'main' into patch-1

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

@@ -68,9 +68,9 @@ _This interface doesn't inherit any methods. None of the following methods alter
 - {{domxref("DOMMatrixReadOnly.skewY()")}}
   - : Returns a new {{domxref("DOMMatrix")}} created by applying the specified skew transformation to the source matrix along its Y-axis. The original matrix is not modified.
 - {{domxref("DOMMatrixReadOnly.toFloat32Array()")}}
-  - : Returns a new {{jsxref("Float32Array")}} containing all 16 elements (`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`) which comprise the matrix. The elements are stored into the array as single-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)
+  - : Returns a new {{jsxref("Float32Array")}} of single-precision floating-point numbers, containing all 16 elements which comprise the matrix.
 - {{domxref("DOMMatrixReadOnly.toFloat64Array()")}}
-  - : Returns a new {{jsxref("Float64Array")}} containing all 16 elements (`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`) which comprise the matrix. The elements are stored into the array as double-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)
+  - : Returns a new {{jsxref("Float64Array")}} of double-precision floating-point numbers, containing all 16 elements which comprise the matrix.
 - {{domxref("DOMMatrixReadOnly.toJSON()")}}
   - : Returns a JSON representation of the `DOMMatrixReadOnly` object.
 - {{domxref("DOMMatrixReadOnly.toString()")}}

files/en-us/web/api/dommatrixreadonly/tofloat32array/index.md

@@ -0,0 +1,64 @@
+---
+title: "DOMMatrixReadOnly: toFloat32Array() method"
+short-title: toFloat32Array()
+slug: Web/API/DOMMatrixReadOnly/toFloat32Array
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrixReadOnly.toFloat32Array
+---
+
+{{APIRef("DOM")}}
+
+The **`toFloat32Array()`** method of the {{domxref("DOMMatrixReadOnly")}} interface returns a new {{jsxref("Float32Array")}} containing all 16 elements (`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`) which comprise the matrix. The elements are stored into the array as single-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)
+
+For double-precision floating-point numbers, see {{domxref("DOMMatrixReadOnly.toFloat64Array()")}}.
+
+## Syntax
+
+```js-nolint
+DOMMatrixReadOnly.toFloat32Array()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A {{jsxref("Float32Array")}}; an array of the matrix's 16 element values.
+
+## Examples
+
+### Basic usage
+
+```js
+const matrix = new DOMMatrixReadOnly();
+const float32 = matrix.translate(20, 30, 50).toFloat32Array();
+console.log(float32); // Float64Array(16) [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 30, 0, 1 ] ]
+console.log(`m41: ${float32[12]}, m42: ${float32[13]}, m43: ${float32[14]}`); // m41: 20, m42: 30, M44: 40
+```
+
+### Single precision
+
+There are multiple ways to access the values of a matrix. This example rotates a matrix by 30deg, saving the rotated state as a JSON object using the {{domxref("DOMMatrixReadOnly.toJSON()")}} method and as a single-precision array using the `toFloat32Array()` method.
+
+```js
+const matrix = new DOMMatrixReadOnly();
+const json = matrix.rotate(30).toJSON();
+const float32 = matrix.rotate(30).toFloat32Array();
+
+console.log(`a: ${json["a"]}, b: ${json["b"]}`); // a: 0.8660254037844387, b: 0.49999999999999994
+console.log(`a: ${float32[0]}, b: ${float32[1]}`); // a: 0.8660253882408142, b: 0.5
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.toFloat64Array()")}}
+- {{domxref("DOMMatrix.setMatrixValue()")}}

files/en-us/web/api/dommatrixreadonly/tofloat64array/index.md

@@ -0,0 +1,51 @@
+---
+title: "DOMMatrixReadOnly: toFloat64Array() method"
+short-title: toFloat64Array()
+slug: Web/API/DOMMatrixReadOnly/toFloat64Array
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrixReadOnly.toFloat64Array
+---
+
+{{APIRef("DOM")}}
+
+The **`toFloat64Array()`** method of the {{domxref("DOMMatrixReadOnly")}} interface returns a new {{jsxref("Float64Array")}} containing all 16 elements (`m11`, `m12`, `m13`, `m14`, `m21`, `m22`, `m23`, `m24`, `m31`, `m32`, `m33`, `m34`, `m41`, `m42`, `m43`, `m44`) which comprise the matrix. The elements are stored into the array as double-precision floating-point numbers in column-major (colexographical access, or "colex") order. (In other words, down the first column from top to bottom, then the second column, and so forth.)
+
+## Syntax
+
+```js-nolint
+DOMMatrixReadOnly.toFloat64Array()
+```
+
+### Parameters
+
+None.
+
+### Return value
+
+A {{jsxref("Float64Array")}}; an array of the matrix's 16 element values.
+
+## Examples
+
+```js
+const matrix = new DOMMatrixReadOnly();
+let float64 = matrix.translate(20, 30, 50).toFloat64Array();
+console.log(float64); // Float64Array(16) [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 20, 30, 0, 1 ] ]
+console.log(`m41: ${float64[12]}, m42: ${float64[13]}, m43: ${float64[14]}`); // m41: 20, m42: 30, M44: 40
+
+float64 = matrix.rotate(30).toFloat64Array();
+console.log(float64);
+console.log(`m11: ${float64[0]}, m12: ${float64[1]}`); // m11: 0.8660254037844387, m12: 0.49999999999999994
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMMatrixReadOnly.toFloat32Array()")}}
+- {{domxref("DOMMatrix.setMatrixValue()")}}

files/en-us/web/api/dommatrixreadonly/transformpoint/index.md

@@ -0,0 +1,76 @@
+---
+title: "DOMMatrixReadOnly: transformPoint method"
+short-title: transformPoint
+slug: Web/API/DOMMatrixReadOnly/transformPoint
+page-type: web-api-instance-method
+browser-compat: api.DOMMatrixReadOnly.transformPoint
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The **`transformPoint`** method of the
+{{domxref("DOMMatrixReadOnly")}} interface creates a new {{domxref("DOMPoint")}} object, transforming a specified point by the matrix. Neither the matrix nor the original point are altered.
+
+You can also create a new `DOMPoint` by applying a matrix to a point with the {{domxref("DOMPointReadOnly.matrixTransform()")}} method.
+
+## Syntax
+
+```js
+DOMMatrixReadOnly.transformPoint();
+DOMMatrixReadOnly.transformPoint(point);
+```
+
+### Parameters
+
+- `point`
+
+  - : A {{domxref("DOMPoint")}} or {{domxref("DOMPointReadOnly")}} instance, or an object containing up to four of the following properties:
+
+    - `x`
+      - : The `x`-coordinate of the point in space as a number. The default value is `0`.
+    - `y`
+      - : The `y`-coordinate of the point in space as a number. The default value is `0`.
+    - `z`
+      - : The `z`-coordinate, or depth coordinate, of the point in space as a number. The default value is `0`.; positive values are closer to the user and negative values retreat back into the screen.
+    - `w`
+      - : The `w` perspective value of the point, as a number. The default is `1`.
+
+### Return value
+
+A {{domxref("DOMPoint")}}.
+
+## Examples
+
+### 2D transform
+
+```js
+const matrix = new DOMMatrixReadOnly();
+const point = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
+let newPoint = matrix.transformPoint(point); // DOMPoint {x: 10, y: 20, z: 0, w: 1}
+```
+
+### 3D transform
+
+In this example, we apply a 3D point to a 3D matrix:
+
+```js
+// Matrix with translate(22, 37, 10) applied
+const matrix3D = new DOMMatrixReadOnly([
+  1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 22, 37, 10, 1,
+]);
+const point3D = new DOMPointReadOnly(5, 10, 3); // DOMPointReadOnly {x: 5, y: 10, z: 3, w: 1}
+const transformedPoint3D = point3D.matrixTransform(matrix3D); // DOMPoint {x: 27, y: 47, z: 13, w: 1}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMPointReadOnly.matrixTransform()")}}
+- CSS {{cssxref("transform-function/matrix", "matrix()")}} and {{cssxref("transform-function/matrix3d", "matrix3d()")}} functions

files/en-us/web/api/dompointreadonly/matrixtransform/index.md

@@ -0,0 +1,72 @@
+---
+title: "DOMPointReadOnly: matrixTransform()"
+short-title: matrixTransform()
+slug: Web/API/DOMPointReadOnly/matrixTransform
+page-type: web-api-static-method
+browser-compat: api.DOMPointReadOnly.matrixTransform
+---
+
+{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}}
+
+The static **`matrixTransform()`** method of the {{domxref("DOMPointReadOnly")}} interface applies a matrix transform specified as an object to the DOMPointReadOnly object, creating and returning a new `DOMPointReadOnly` object. Neither the matrix nor the point are altered.
+
+If the matrix passed as a parameter is 2D (the {{domxref("DOMMatrix.is_2d")}}is `true`) then this is a 2D transformation and the point's `z` coordinate will be `0` and point's `w` perspective will be `1`. Otherwise this is a 3D transformation.
+
+You can also create a new `DOMPoint` with a point and matrix with the {{domxref("DOMMatrixReadOnly.transformPoint()")}} method.
+
+## Syntax
+
+```js-nolint
+DOMPointReadOnly.matrixTransform( )
+DOMPointReadOnly.matrixTransform( matrix )
+```
+
+### Parameters
+
+- `matrix`
+
+  - : A {{domxref("DOMMatrix")}} or {{domxref("DOMMatrixReadOnly")}} object.
+
+### Return value
+
+A new {{domxref("DOMPoint")}} object.
+
+## Examples
+
+### 2D transform
+
+In this example, we apply a 2D matrix transform to a `DOMPointReadOnly`, creating a new `DOMPoint`:
+
+```js
+const originalPoint = new DOMPointReadOnly(10, 20); // DOMPointReadOnly {x: 10, y: 20, z: 0, w: 1}
+const matrix = new DOMMatrix([1, 0, 0, 1, 15, 30]);
+
+const transformedPoint = originalPoint.matrixTransform(matrix); // DOMPoint {x: 25, y: 50, z: 0, w: 1}
+
+console.log(transformedPoint.toJSON()); // output: {x: 25, y: 50, z: 0, w: 1}
+```
+
+### 3D transform
+
+In this example, we apply a 3D matrix transform to a `DOMPointReadOnly`:
+
+```js
+const point = new DOMPointReadOnly(5, 10); // DOMPointReadOnly {x: 5, y: 10, z: 0, w: 1}
+const matrix3D = new DOMMatrix().translate(0, 0, 10);
+const transformedPoint = point.matrixTransform(matrix3D); // DOMPoint {x: 5, y: 10, z: 10, w: 1}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("DOMPoint")}}
+- {{domxref("DOMMatrix")}}
+- {{domxref("DOMMatrixReadOnly.transformPoint()")}}
+- CSS {{cssxref("transform-function/matrix", "matrix()")}} and {{cssxref("transform-function/matrix3d", "matrix3d()")}} functions

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

@@ -69,15 +69,12 @@ myWorker.port.start();
 When the port is started, both scripts post messages to the worker and handle messages sent from it using `port.postMessage()` and `port.onmessage`, respectively:
 
 ```js
-first.onchange = () => {
-  myWorker.port.postMessage([first.value, second.value]);
-  console.log("Message posted to worker");
-};
-
-second.onchange = () => {
-  myWorker.port.postMessage([first.value, second.value]);
-  console.log("Message posted to worker");
-};
+[first, second].forEach((input) => {
+  input.onchange = () => {
+    myWorker.port.postMessage([first.value, second.value]);
+    console.log("Message posted to worker");
+  };
+});
 
 myWorker.port.onmessage = (e) => {
   result1.textContent = e.data;

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

@@ -60,15 +60,12 @@ When the port is started, both scripts post messages to the worker and handle me
 > You can use browser devtools to debug your SharedWorker, by entering a URL in your browser address bar to access the devtools workers inspector; for example, in Chrome, the URL `chrome://inspect/#workers`, and in Firefox, the URL `about:debugging#workers`.
 
 ```js
-first.onchange = () => {
-  myWorker.port.postMessage([first.value, second.value]);
-  console.log("Message posted to worker");
-};
-
-second.onchange = () => {
-  myWorker.port.postMessage([first.value, second.value]);
-  console.log("Message posted to worker");
-};
+[first, second].forEach((input) => {
+  input.onchange = () => {
+    myWorker.port.postMessage([first.value, second.value]);
+    console.log("Message posted to worker");
+  };
+});
 
 myWorker.port.onmessage = (e) => {
   result1.textContent = e.data;

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

@@ -82,15 +82,12 @@ const myWorker = new SharedWorker("worker.js");
 
 myWorker.port.start();
 
-first.onchange = () => {
-  myWorker.port.postMessage([first.value, second.value]);
-  console.log("Message posted to worker");
-};
-
-second.onchange = () => {
-  myWorker.port.postMessage([first.value, second.value]);
-  console.log("Message posted to worker");
-};
+[first, second].forEach((input) => {
+  input.onchange = () => {
+    myWorker.port.postMessage([first.value, second.value]);
+    console.log("Message posted to worker");
+  };
+});
 
 myWorker.port.onmessage = (e) => {
   result1.textContent = e.data;