From 5ced6d0b9636a1b904474d1546674b305346daa0 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Wed, 11 Sep 2024 15:18:23 +0200
Subject: [PATCH 01/26] Remove masonry-auto-flow and redirect to grid-auto-flow
 (#35471)

---
 files/en-us/_redirects.txt                    |   1 +
 files/en-us/_wikihistory.json                 |   4 -
 files/en-us/web/css/css_grid_layout/index.md  |   1 -
 .../css_grid_layout/masonry_layout/index.md   |   7 +-
 files/en-us/web/css/grid-auto-flow/index.md   |   4 +
 .../en-us/web/css/masonry-auto-flow/index.md  | 138 ------------------
 6 files changed, 6 insertions(+), 149 deletions(-)
 delete mode 100644 files/en-us/web/css/masonry-auto-flow/index.md

diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
index 2a7e6cf9c1e6442..b587e9a63a476e3 100644
--- a/files/en-us/_redirects.txt
+++ b/files/en-us/_redirects.txt
@@ -11660,6 +11660,7 @@
 /en-US/docs/Web/CSS/linear-gradient()	/en-US/docs/Web/CSS/gradient/linear-gradient
 /en-US/docs/Web/CSS/margin-new	/en-US/docs/Web/CSS/margin
 /en-US/docs/Web/CSS/margin_collapsing	/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing
+/en-US/docs/Web/CSS/masonry-auto-flow	/en-US/docs/Web/CSS/grid-auto-flow
 /en-US/docs/Web/CSS/max()	/en-US/docs/Web/CSS/max
 /en-US/docs/Web/CSS/media	/en-US/docs/Web/CSS/@media
 /en-US/docs/Web/CSS/media/Bitmap	/en-US/docs/Web/CSS/@media
diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
index 4d68d8f403ed4cc..9d074f9ae90e53a 100644
--- a/files/en-us/_wikihistory.json
+++ b/files/en-us/_wikihistory.json
@@ -86802,10 +86802,6 @@
       "Heycam"
     ]
   },
-  "Web/CSS/masonry-auto-flow": {
-    "modified": "2020-11-12T04:50:46.255Z",
-    "contributors": ["rachelandrew", "chrisdavidmills"]
-  },
   "Web/CSS/math-style": {
     "modified": "2020-12-12T22:36:34.292Z",
     "contributors": ["sideshowbarker", "chrisdavidmills", "rachelandrew"]
diff --git a/files/en-us/web/css/css_grid_layout/index.md b/files/en-us/web/css/css_grid_layout/index.md
index c53d603ce0afca0..b6593e6a375f393 100644
--- a/files/en-us/web/css/css_grid_layout/index.md
+++ b/files/en-us/web/css/css_grid_layout/index.md
@@ -106,7 +106,6 @@ The example below shows a three-column track grid with new rows created at a min
 - {{CSSxRef("row-gap")}}
 - {{CSSxRef("column-gap")}}
 - {{CSSxRef("gap")}}
-- {{CSSxRef("masonry-auto-flow")}}
 
 ### Functions
 
diff --git a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md
index afdcdec8af4705d..68339a8f777bf1a 100644
--- a/files/en-us/web/css/css_grid_layout/masonry_layout/index.md
+++ b/files/en-us/web/css/css_grid_layout/masonry_layout/index.md
@@ -50,12 +50,6 @@ This example includes an item which has positioning for columns. Items with defi
 
 {{EmbedGHLiveSample("css-examples/grid/masonry/positioned.html", '100%', 1000)}}
 
-## masonry-auto-flow
-
-The `masonry-auto-flow` property gives you a way to change how the masonry algorithm behaves. Give it a value of `next` and items will display in order on the grid axis, rather than going into whichever track has the most free space. The value `positioned` will ignore items with definite placement and place items in order-modified document order.
-
-{{EmbedGHLiveSample("css-examples/grid/masonry/masonry-auto-flow.html", '100%', 1000)}}
-
 ## Fallback
 
 In browsers [that do not support masonry](#browser_compatibility), regular grid auto-placement will be used instead.
@@ -66,4 +60,5 @@ In browsers [that do not support masonry](#browser_compatibility), regular grid
 
 ## See also
 
+- {{cssxref("grid-auto-flow")}} for controlling grid auto-placement
 - [Native CSS masonry layout in CSS grid](https://www.smashingmagazine.com/native-css-masonry-layout-css-grid/)
diff --git a/files/en-us/web/css/grid-auto-flow/index.md b/files/en-us/web/css/grid-auto-flow/index.md
index c1632c1cf956d1d..5f5827471b2469c 100644
--- a/files/en-us/web/css/grid-auto-flow/index.md
+++ b/files/en-us/web/css/grid-auto-flow/index.md
@@ -11,6 +11,10 @@ The **`grid-auto-flow`** [CSS](/en-US/docs/Web/CSS) property controls how the au
 
 {{EmbedInteractiveExample("pages/css/grid-auto-flow.html")}}
 
+> [!NOTE]
+> The `masonry-auto-flow` property was dropped from CSS [Masonry layout](/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout) in favor of `grid-auto-flow`.
+> See [csswg-drafts #10231](https://github.com/w3c/csswg-drafts/issues/10231) for details.
+
 ## Syntax
 
 ```css
diff --git a/files/en-us/web/css/masonry-auto-flow/index.md b/files/en-us/web/css/masonry-auto-flow/index.md
deleted file mode 100644
index 48dd26ad8c94e99..000000000000000
--- a/files/en-us/web/css/masonry-auto-flow/index.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: masonry-auto-flow
-slug: Web/CSS/masonry-auto-flow
-page-type: css-property
-status:
-  - experimental
-browser-compat: css.properties.masonry-auto-flow
----
-
-{{CSSRef}}{{SeeCompatTable}}
-
-The **`masonry-auto-flow`** [CSS](/en-US/docs/Web/CSS) property modifies how items are placed when using [masonry](/en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout) in [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout).
-
-## Syntax
-
-```css
-/* Keyword values */
-masonry-auto-flow: pack;
-masonry-auto-flow: next;
-masonry-auto-flow: ordered;
-masonry-auto-flow: definite-first;
-masonry-auto-flow: next ordered;
-
-/* Global values */
-masonry-auto-flow: inherit;
-masonry-auto-flow: initial;
-masonry-auto-flow: revert;
-masonry-auto-flow: revert-layer;
-masonry-auto-flow: unset;
-```
-
-This property may take one of two forms:
-
-- A single keyword: one of `pack`, `next`, `definite-first`, or `ordered`
-- Two keywords, for example `next ordered`.
-
-### Values
-
-- `pack`
-  - : As per the default masonry algorithm, items will be placed into the track with the most room.
-- `next`
-  - : Items will be placed one after the other in the grid axis.
-- `definite-first`
-  - : Display as in the default masonry algorithm, placing items with a definite place first before placing other masonry items.
-- `ordered`
-  - : Ignore any items with a definite placement, and place everything according to order-modified document order.
-
-## Formal definition
-
-{{cssinfo}}
-
-## Formal syntax
-
-{{csssyntax}}
-
-## Examples
-
-### Using the next keyword
-
-#### HTML
-
-```html
-<div id="grid">
-  <div id="item1"></div>
-  <div id="item2"></div>
-  <div id="item3"></div>
-  <div id="item4"></div>
-  <div id="item5"></div>
-</div>
-<select id="flow">
-  <option value="pack">pack</option>
-  <option value="next">next</option>
-</select>
-```
-
-#### CSS
-
-```css
-#grid {
-  height: 200px;
-  width: 200px;
-  display: grid;
-  gap: 10px;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: masonry;
-  masonry-auto-flow: pack;
-}
-
-#item1 {
-  background-color: lime;
-  height: 2em;
-}
-
-#item2 {
-  background-color: yellow;
-}
-
-#item3 {
-  background-color: blue;
-  height: 3em;
-}
-
-#item4 {
-  background-color: red;
-  height: 2.5em;
-}
-
-#item5 {
-  background-color: aqua;
-  height: 4em;
-}
-```
-
-```js
-const selectElem = document.querySelector("select");
-
-function changeMasonryFlow() {
-  const grid = document.getElementById("grid");
-  const direction = document.getElementById("flow");
-  const masonryAutoFlow = direction.value === "pack" ? "pack" : "next";
-
-  grid.style.masonryAutoFlow = masonryAutoFlow;
-}
-
-selectElem.addEventListener("change", changeMasonryFlow);
-```
-
-#### Result
-
-{{EmbedLiveSample("Using_the_next_keyword", "200px", "230px")}}
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}

From c9e9d3335165b225defae2d95de6a2f7fa28e885 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Ogam?= <gery.ogam@gmail.com>
Date: Wed, 11 Sep 2024 15:40:28 +0200
Subject: [PATCH 02/26] Remove an unnecessary div in the scrolltop example
 (#35828)

* Remove an unnecessary div in the scrolltop example

* Update files/en-us/web/api/element/scrolltop/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../en-us/web/api/element/scrolltop/index.md  | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/files/en-us/web/api/element/scrolltop/index.md b/files/en-us/web/api/element/scrolltop/index.md
index 1e3ed2deae4154b..589c55f2d23de96 100644
--- a/files/en-us/web/api/element/scrolltop/index.md
+++ b/files/en-us/web/api/element/scrolltop/index.md
@@ -24,22 +24,20 @@ The `scrollTop` property can be set, which causes the element to scroll to the s
 
 ### Scrolling an element
 
-In this example, try scrolling the inner container with the dashed border, and see how the value of `scrollTop` changes.
+In this example, try scrolling the container with the dashed border, and see how the value of `scrollTop` changes.
 
 #### HTML
 
 ```html
 <div id="container">
-  <div id="scroller">
-    <p>
-      Far out in the uncharted backwaters of the unfashionable end of the
-      western spiral arm of the Galaxy lies a small unregarded yellow sun.
-      Orbiting this at a distance of roughly ninety-two million miles is an
-      utterly insignificant little blue green planet whose ape-descended life
-      forms are so amazingly primitive that they still think digital watches are
-      a pretty neat idea.
-    </p>
-  </div>
+  <p>
+    Far out in the uncharted backwaters of the unfashionable end of the western
+    spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this
+    at a distance of roughly ninety-two million miles is an utterly
+    insignificant little blue green planet whose ape-descended life forms are so
+    amazingly primitive that they still think digital watches are a pretty neat
+    idea.
+  </p>
 </div>
 
 <div id="output">scrollTop: 0</div>
@@ -48,7 +46,7 @@ In this example, try scrolling the inner container with the dashed border, and s
 #### CSS
 
 ```css
-#scroller {
+#container {
   overflow: scroll;
   height: 150px;
   width: 150px;
@@ -63,11 +61,11 @@ In this example, try scrolling the inner container with the dashed border, and s
 #### JavaScript
 
 ```js
-const scroller = document.querySelector("#scroller");
+const container = document.querySelector("#container");
 const output = document.querySelector("#output");
 
-scroller.addEventListener("scroll", (event) => {
-  output.textContent = `scrollTop: ${scroller.scrollTop}`;
+container.addEventListener("scroll", (event) => {
+  output.textContent = `scrollTop: ${container.scrollTop}`;
 });
 ```
 

From abad787f40e4f80bfb0a9df78ba21bfac6206db4 Mon Sep 17 00:00:00 2001
From: Marco Dissel <mdissel@users.noreply.github.com>
Date: Wed, 11 Sep 2024 17:06:21 +0200
Subject: [PATCH 03/26] Fix example in Intl.ListFormat.formatToParts(list)
 (Issue #35833) (#35839)

---
 .../global_objects/intl/listformat/formattoparts/index.md       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md b/files/en-us/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md
index eb1e3f65496e4bd..e536b44bf4b8ac0 100644
--- a/files/en-us/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/intl/listformat/formattoparts/index.md
@@ -60,7 +60,7 @@ console.table(myListFormat.formatToParts(fruits));
 //  { "type": "element", "value": "Apple" },
 //  { "type": "literal", "value": ", " },
 //  { "type": "element", "value": "Orange" },
-//  { "type": "literal", "value": ", and " },
+//  { "type": "literal", "value": " and " },
 //  { "type": "element", "value": "Pineapple" }
 // ]
 ```

From 4f8a4458308af009a9598f6fa6b8a2f6992905ec Mon Sep 17 00:00:00 2001
From: "Queen Vinyl Da.i'gyu-Kazotetsu" <vinyldarkscratch@gmail.com>
Date: Wed, 11 Sep 2024 08:20:14 -0700
Subject: [PATCH 04/26] Add note that gamepad features aren't on all
 platforms/controllers (#35827)

---
 files/en-us/web/api/gamepad/index.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/files/en-us/web/api/gamepad/index.md b/files/en-us/web/api/gamepad/index.md
index 3067a48a173afca..8b1a926b44d6b00 100644
--- a/files/en-us/web/api/gamepad/index.md
+++ b/files/en-us/web/api/gamepad/index.md
@@ -11,6 +11,9 @@ The **`Gamepad`** interface of the [Gamepad API](/en-US/docs/Web/API/Gamepad_API
 
 A Gamepad object can be returned in one of two ways: via the `gamepad` property of the {{domxref("Window.gamepadconnected_event", "gamepadconnected")}} and {{domxref("Window.gamepaddisconnected_event", "gamepaddisconnected")}} events, or by grabbing any position in the array returned by the {{domxref("Navigator.getGamepads()")}} method.
 
+> [!NOTE]
+> The support of gamepad features varies across different combinations of platforms and controllers. Even if the controller supports a certain feature (for example, haptic feedback), the platform may not support it for that controller.
+
 ## Instance properties
 
 - {{domxref("Gamepad.axes")}} {{ReadOnlyInline}}

From 30d0a926fffe7bcf586def53959c12a5e526fa26 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Wed, 11 Sep 2024 11:24:12 -0400
Subject: [PATCH 05/26] New page for reflection properties of
 HTMLTextAreaElement (#35664)

* New page for reflection properties of HTMLTextAreaElement

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/api/htmltextareaelement/cols/index.md

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
---
 .../htmltextareaelement/autocomplete/index.md | 34 +++++++++++++++++
 .../web/api/htmltextareaelement/cols/index.md | 37 ++++++++++++++++++
 .../htmltextareaelement/defaultvalue/index.md | 38 +++++++++++++++++++
 .../api/htmltextareaelement/disabled/index.md | 37 ++++++++++++++++++
 .../htmltextareaelement/placeholder/index.md  | 35 +++++++++++++++++
 .../api/htmltextareaelement/readonly/index.md | 36 ++++++++++++++++++
 .../api/htmltextareaelement/required/index.md | 36 ++++++++++++++++++
 .../web/api/htmltextareaelement/rows/index.md | 38 +++++++++++++++++++
 .../htmltextareaelement/textlength/index.md   | 38 +++++++++++++++++++
 .../web/api/htmltextareaelement/wrap/index.md | 36 ++++++++++++++++++
 10 files changed, 365 insertions(+)
 create mode 100644 files/en-us/web/api/htmltextareaelement/autocomplete/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/cols/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/defaultvalue/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/disabled/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/placeholder/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/readonly/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/required/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/rows/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/textlength/index.md
 create mode 100644 files/en-us/web/api/htmltextareaelement/wrap/index.md

diff --git a/files/en-us/web/api/htmltextareaelement/autocomplete/index.md b/files/en-us/web/api/htmltextareaelement/autocomplete/index.md
new file mode 100644
index 000000000000000..b51975c7ae49358
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/autocomplete/index.md
@@ -0,0 +1,34 @@
+---
+title: "HTMLTextAreaElement: autocomplete property"
+short-title: autocomplete
+slug: Web/API/HTMLTextAreaElement/autocomplete
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.autocomplete
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`autocomplete`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates whether the value of the control can be automatically completed by the browser. It reflects the `<textarea>` element's [`autocomplete`](/en-US/docs/Web/HTML/Element/textarea#autocomplete) attribute.
+
+## Value
+
+A string that is `"on"`, `"off"`, or the empty string `""` if unspecified or set to an invalid value.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+console.log(textArea.autocomplete);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
diff --git a/files/en-us/web/api/htmltextareaelement/cols/index.md b/files/en-us/web/api/htmltextareaelement/cols/index.md
new file mode 100644
index 000000000000000..96cc7c6d48fefd2
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/cols/index.md
@@ -0,0 +1,37 @@
+---
+title: "HTMLTextAreaElement: cols property"
+short-title: cols
+slug: Web/API/HTMLTextAreaElement/cols
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.cols
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`cols`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface is a positive integer representing the visible width of the multi-line text control, in average character widths. It reflects the `<textarea>` element's [`cols`](/en-US/docs/Web/HTML/Element/textarea#cols) attribute.
+
+## Value
+
+A positive integer. Defaults to `20`.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+textArea.cols = 80;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.rows")}}
+- {{DOMXref("HTMLTextAreaElement.wrap")}}
+- CSS {{cssxref("resize")}} property
diff --git a/files/en-us/web/api/htmltextareaelement/defaultvalue/index.md b/files/en-us/web/api/htmltextareaelement/defaultvalue/index.md
new file mode 100644
index 000000000000000..b6e286b6c8f21eb
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/defaultvalue/index.md
@@ -0,0 +1,38 @@
+---
+title: "HTMLTextAreaElement: defaultValue property"
+short-title: defaultValue
+slug: Web/API/HTMLTextAreaElement/defaultValue
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.defaultValue
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`defaultValue`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface represents the default text content of this text area. Getting and setting this value is equivalent to getting and setting {{domxref("Node.textContent", "textContent")}} on the {{htmlelement("textarea")}}.
+
+## Value
+
+A string.
+
+## Examples
+
+In the example below, the `defaultValue` still returns the value originally written in the HTML. If a default value is set, either via HTML or the `defaultValue` property, user input will update the `value` but will not overwrite the `defaultValue`.
+
+```js
+const textareaElement = document.getElementById("comment");
+console.log(textArea.defaultValue);
+textArea.defaultValue = "This is the default text now!";
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.value")}}
diff --git a/files/en-us/web/api/htmltextareaelement/disabled/index.md b/files/en-us/web/api/htmltextareaelement/disabled/index.md
new file mode 100644
index 000000000000000..65d7939d22b449c
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/disabled/index.md
@@ -0,0 +1,37 @@
+---
+title: "HTMLTextAreaElement: disabled property"
+short-title: disabled
+slug: Web/API/HTMLTextAreaElement/disabled
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.disabled
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`disabled`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates whether this multi-line text control is disabled and cannot be interacted with. It reflects the {{htmlelement("textarea")}} element's [`disabled`](/en-US/docs/Web/HTML/Element/textarea#autocomplete) attribute. When `false`, this `textarea` may still be disabled if its containing element, such as a {{htmlelement("fieldset")}}, is disabled.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+if (commentsDisabled) {
+  textareaElement.disabled = true;
+}
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.readOnly")}}
diff --git a/files/en-us/web/api/htmltextareaelement/placeholder/index.md b/files/en-us/web/api/htmltextareaelement/placeholder/index.md
new file mode 100644
index 000000000000000..9b171dc755f3875
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/placeholder/index.md
@@ -0,0 +1,35 @@
+---
+title: "HTMLTextAreaElement: placeholder property"
+short-title: placeholder
+slug: Web/API/HTMLTextAreaElement/placeholder
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.placeholder
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`placeholder`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface represents a hint to the user of what can be entered in the control. It reflects the {{htmlelement("textarea")}} element's [`placeholder`](/en-US/docs/Web/HTML/Element/textarea#placeholder) attribute.
+
+## Value
+
+A string.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+console.log(textArea.placeholder);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.value")}}
diff --git a/files/en-us/web/api/htmltextareaelement/readonly/index.md b/files/en-us/web/api/htmltextareaelement/readonly/index.md
new file mode 100644
index 000000000000000..57a9cdb47a13012
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/readonly/index.md
@@ -0,0 +1,36 @@
+---
+title: "HTMLTextAreaElement: readOnly property"
+short-title: readOnly
+slug: Web/API/HTMLTextAreaElement/readOnly
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.readOnly
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`readOnly`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates that the user cannot modify the value of the control. Unlike the {{domxref("HTMLTextAreaElement.disabled", "disabled")}} attribute, the `readonly` attribute does not prevent the user from clicking or selecting in the control. It reflects the {{htmlelement("textarea")}} element's [`readonly`](/en-US/docs/Web/HTML/Element/textarea#readonly) attribute.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+console.log(textArea.readOnly);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.disabled")}}
+- {{cssxref(":read-only")}} pseudo-class
diff --git a/files/en-us/web/api/htmltextareaelement/required/index.md b/files/en-us/web/api/htmltextareaelement/required/index.md
new file mode 100644
index 000000000000000..d4cf15b35102ab9
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/required/index.md
@@ -0,0 +1,36 @@
+---
+title: "HTMLTextAreaElement: required property"
+short-title: required
+slug: Web/API/HTMLTextAreaElement/required
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.required
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`required`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface specifies that the user must fill in a value before submitting a form. It reflects the {{htmlelement("textarea")}} element's [`required`](/en-US/docs/Web/HTML/Element/textarea#required) attribute.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+console.log(textArea.required);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.validity")}}
+- {{cssxref(":required")}} pseudo-class
diff --git a/files/en-us/web/api/htmltextareaelement/rows/index.md b/files/en-us/web/api/htmltextareaelement/rows/index.md
new file mode 100644
index 000000000000000..88648f54e819be7
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/rows/index.md
@@ -0,0 +1,38 @@
+---
+title: "HTMLTextAreaElement: rows property"
+short-title: rows
+slug: Web/API/HTMLTextAreaElement/rows
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.rows
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`rows`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface is a positive integer representing the visible text lines of the text control. It reflects the `<textarea>` element's [`rows`](/en-US/docs/Web/HTML/Element/textarea#rows) attribute.
+
+## Value
+
+A positive integer. Defaults to `2`.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+const textLines = textArea.rows;
+textArea.rows = textLines + 2;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.cols")}}
+- {{DOMXref("HTMLTextAreaElement.wrap")}}
+- CSS {{cssxref("resize")}} property
diff --git a/files/en-us/web/api/htmltextareaelement/textlength/index.md b/files/en-us/web/api/htmltextareaelement/textlength/index.md
new file mode 100644
index 000000000000000..5f52960a14d9932
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/textlength/index.md
@@ -0,0 +1,38 @@
+---
+title: "HTMLTextAreaElement: textLength property"
+short-title: textLength
+slug: Web/API/HTMLTextAreaElement/textLength
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.textLength
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`textLength`** read-only property of the {{DOMxRef("HTMLTextAreaElement")}} interface is a non-negative integer representing the number of characters, in UTF-16 code units, of the {{htmlelement("textarea")}} element's value. It is a shortcut of accessing {{jsxref("String/length", "length")}} on its {{domxref("HTMLTextAreaElement/value", "value")}} property.
+
+## Value
+
+A non-negative integer.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+console.log(textArea.textLength);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.rows")}}
+- {{DOMXref("HTMLTextAreaElement.cols")}}
+- {{DOMXref("HTMLTextAreaElement.minLength")}}
+- {{DOMXref("HTMLTextAreaElement.maxLength")}}
diff --git a/files/en-us/web/api/htmltextareaelement/wrap/index.md b/files/en-us/web/api/htmltextareaelement/wrap/index.md
new file mode 100644
index 000000000000000..20ca52704e46143
--- /dev/null
+++ b/files/en-us/web/api/htmltextareaelement/wrap/index.md
@@ -0,0 +1,36 @@
+---
+title: "HTMLTextAreaElement: wrap property"
+short-title: wrap
+slug: Web/API/HTMLTextAreaElement/wrap
+page-type: web-api-instance-property
+browser-compat: api.HTMLTextAreaElement.wrap
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`wrap`** property of the {{DOMxRef("HTMLTextAreaElement")}} interface indicates how the control should wrap the value for form submission. It reflects the `<textarea>` element's [`wrap`](/en-US/docs/Web/HTML/Element/textarea#wrap) attribute. Note that the `"hard"` value only has an effect when the {{domxref("HTMLTextAreaElement.cols", "cols")}} attribute is also set.
+
+## Value
+
+See [`wrap`](/en-US/docs/Web/HTML/Element/textarea#wrap) for the possible values. Defaults to `"soft"`.
+
+## Examples
+
+```js
+const textareaElement = document.getElementById("comment");
+const oldWrap = textArea.wrap;
+textArea.wrap = "hard"; // Add line breaks (CR+LF) during form submission
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("textarea")}}
+- {{DOMXref("HTMLTextAreaElement.cols")}}

From e472a1caa80ace5959961f741fec330a9e61b672 Mon Sep 17 00:00:00 2001
From: wbamberg <will@bootbonnet.ca>
Date: Wed, 11 Sep 2024 12:09:54 -0700
Subject: [PATCH 06/26] =?UTF-8?q?Follow=20up=20to=20PR=2031039:=20cross=20?=
 =?UTF-8?q?link=20for=20more=20information=20about=20onerror=20=E2=80=A6?=
 =?UTF-8?q?=20(#32290)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Follow up to PR 31039: cross link for more information about onerror special behavior

* Update files/en-us/web/api/workerglobalscope/error_event/index.md

* Update index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 files/en-us/web/api/window/error_event/index.md   | 15 ++++++++++-----
 .../api/workerglobalscope/error_event/index.md    |  5 +++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/files/en-us/web/api/window/error_event/index.md b/files/en-us/web/api/window/error_event/index.md
index f3d2314a4596455..868b446d90bacef 100644
--- a/files/en-us/web/api/window/error_event/index.md
+++ b/files/en-us/web/api/window/error_event/index.md
@@ -17,11 +17,11 @@ Use the event name in methods like {{domxref("EventTarget.addEventListener", "ad
 ```js
 addEventListener("error", (event) => {});
 
-onerror = (event, source, lineno, colno, error) => {};
+onerror = (message, source, lineno, colno, error) => {};
 ```
 
 > [!NOTE]
-> Due to historical reasons, `onerror` on `window` is the only event handler property that receives more than one argument.
+> For historical reasons, `onerror` on `Window` and {{domxref("WorkerGlobalScope")}} objects is the only event handler property that receives more than one argument.
 
 ## Event type
 
@@ -29,11 +29,11 @@ The event object is a {{domxref("ErrorEvent")}} instance if it was generated fro
 
 {{InheritanceDiagram("ErrorEvent")}}
 
-## Usage notes
+## Description
 
 ### Event handler property
 
-For historical reasons, the `onerror` event handler property, on `Window` objects only, has different behavior from other event handler properties.
+For historical reasons, the `onerror` event handler property, on `Window` and {{domxref("WorkerGlobalScope")}} objects only, has different behavior from other event handler properties.
 
 Note that this only applies to handlers assigned to `onerror`, not to handlers added using `addEventListener()`.
 
@@ -57,8 +57,13 @@ When canceled, the error won't appear in the console, but the current script wil
 
 The event handler's signature is asymmetric between `addEventListener()` and `onerror`. The event handler passed to `Window.addEventListener()` receives a single {{domxref("ErrorEvent")}} object, while the `onerror` handler receives five arguments, matching the {{domxref("ErrorEvent")}} object's properties:
 
-- `event`
+- `message`
+
   - : A string containing a human-readable error message describing the problem. Same as {{domxref("ErrorEvent.message")}}.
+
+    > [!NOTE]
+    > In HTML, the [content event handler attribute](/en-US/docs/Web/HTML/Attributes#event_handler_attributes) `onerror` on the {{HTMLElement("body")}} element attaches `error` event listeners to `window` (_not_ the `<body>` element). For this event handler, the first parameter is called `event`, not `message`, although it still contains a string; that is, you would use `<body onerror="console.error(event)">` to log the error message.
+
 - `source`
   - : A string containing the URL of the script that generated the error.
 - `lineno`
diff --git a/files/en-us/web/api/workerglobalscope/error_event/index.md b/files/en-us/web/api/workerglobalscope/error_event/index.md
index 42f46f27742ece2..dccdadda00d58e8 100644
--- a/files/en-us/web/api/workerglobalscope/error_event/index.md
+++ b/files/en-us/web/api/workerglobalscope/error_event/index.md
@@ -20,6 +20,11 @@ addEventListener("error", (event) => {});
 onerror = (message, filename, lineno, colno, error) => {};
 ```
 
+> [!NOTE]
+> For historical reasons, `onerror` on {{domxref("Window")}} and `WorkerGlobalScope` objects is the only event handler property that receives more than one argument.
+>
+> For more details about this, see the page for the {{domxref("Window.error_event", "error")}} event on `Window` objects.
+
 ## Event type
 
 A generic {{domxref("Event")}}.

From a2a069e9e9a1a2375d57591e8b6cb878bd4dde97 Mon Sep 17 00:00:00 2001
From: meiqinyan <meiqinyan@myyahoo.com>
Date: Thu, 12 Sep 2024 03:23:58 +0800
Subject: [PATCH 07/26] Remove outdated reference to W3C DOM spec (#35844)

* Remove outdated reference to W3C DOM spec

* Removed leading whitespace

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Delete outdated note about getElementsByTagNameNS return value

* Update files/en-us/web/api/document/getelementsbytagnamens/index.md

* Fix another

* Update index.md

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 .../document/getelementsbytagname/index.md    |  4 ----
 .../document/getelementsbytagnamens/index.md  | 20 ++++++-------------
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/files/en-us/web/api/document/getelementsbytagname/index.md b/files/en-us/web/api/document/getelementsbytagname/index.md
index b2d49d7f4b82be3..42921983e137417 100644
--- a/files/en-us/web/api/document/getelementsbytagname/index.md
+++ b/files/en-us/web/api/document/getelementsbytagname/index.md
@@ -33,10 +33,6 @@ getElementsByTagName(name)
 
 A live {{domxref("HTMLCollection")}} of found elements in the order they appear in the tree.
 
-> **Note:** [The latest W3C specification](https://dom.spec.whatwg.org/#interface-document) says returned value is an
-> `HTMLCollection`; however, this method returns a {{domxref("NodeList")}} in
-> WebKit browsers. See [Firefox bug 14869](https://bugzil.la/14869) for details.
-
 ## Examples
 
 In the following example, `getElementsByTagName()` starts from a particular
diff --git a/files/en-us/web/api/document/getelementsbytagnamens/index.md b/files/en-us/web/api/document/getelementsbytagnamens/index.md
index 6b7f213e8bbe202..d375169bcf9f1ee 100644
--- a/files/en-us/web/api/document/getelementsbytagnamens/index.md
+++ b/files/en-us/web/api/document/getelementsbytagnamens/index.md
@@ -20,25 +20,17 @@ getElementsByTagNameNS(namespace, name)
 ### Parameters
 
 - `namespace`
-  - : The namespace URI of elements to look for (see
-    {{domxref("Element.namespaceURI", "element.namespaceURI")}}).
+  - : The namespace URI of elements to look for (see {{domxref("Element.namespaceURI", "element.namespaceURI")}}).
 - `name`
-  - : Either the local name of elements to look for or the special
-    value `*`, which matches all elements (see {{domxref("Element.localName", "element.localName")}}).
 
-### Return value
+  - : Either the local name of elements to look for or the special value `*`, which matches all elements (see {{domxref("Element.localName", "element.localName")}}).
 
-A live {{DOMxRef("NodeList")}} (but see the note below) of
-found elements in the order they appear in the tree.
+    > [!NOTE]
+    > Unlike {{domxref("document.getElementsByTagName()")}}, the parameters for `getElementsByTagNameNS()` are case-sensitive.
 
-> [!NOTE]
-> While the W3C specification says returned value is a `NodeList`, this method returns a {{DOMxRef("HTMLCollection")}} in Firefox.
-> Opera returns a `NodeList`, but with a `namedItem` method implemented, which makes it similar to a `HTMLCollection`. As of January 2012, only in WebKit browsers is the returned value a pure `NodeList`.
-> See [bug 14869](https://bugzil.la/14869) for details.
+### Return value
 
-> [!NOTE]
-> Currently parameters in this method are case-sensitive, but they were case-insensitive in Firefox 3.5 and before.
-> See the [developer release note for Firefox 3.6](/en-US/docs/Mozilla/Firefox/Releases/3.6#dom) and a note in Browser compatibility section in {{domxref("Element.getElementsByTagNameNS")}} for details.
+A live {{DOMxRef("HTMLCollection")}} of found elements in the order they appear in the tree.
 
 ## Examples
 

From 2311785a00338178e2db425d7decb281d7c80bed Mon Sep 17 00:00:00 2001
From: David Winiecki <david.winiecki@gmail.com>
Date: Wed, 11 Sep 2024 12:25:35 -0700
Subject: [PATCH 08/26] Fix typo in "Element: mouseenter event" article
 (#35843)

---
 files/en-us/web/api/element/mouseenter_event/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/element/mouseenter_event/index.md b/files/en-us/web/api/element/mouseenter_event/index.md
index 7756c62a28f0eff..6b062e2e6707e64 100644
--- a/files/en-us/web/api/element/mouseenter_event/index.md
+++ b/files/en-us/web/api/element/mouseenter_event/index.md
@@ -10,7 +10,7 @@ browser-compat: api.Element.mouseenter_event
 
 The **`mouseenter`** event is fired at an {{domxref("Element")}} when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.
 
-Note that "moving into an event" refers to the element's position in the DOM tree, not to its visual position. For example, if a child element is positioned so it is placed outside its parent, then moving into the child element will trigger `mouseenter` on the parent element, even though the pointer is still outside the bounds of the parent element.
+Note that "moving into an element" refers to the element's position in the DOM tree, not to its visual position. For example, if a child element is positioned so it is placed outside its parent, then moving into the child element will trigger `mouseenter` on the parent element, even though the pointer is still outside the bounds of the parent element.
 
 ## Syntax
 

From 3cd9e1f8280992b00230dcd680518ae2ef7a8f86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=96zg=C3=BCr?= <ozgur@central.network>
Date: Wed, 11 Sep 2024 22:27:53 +0300
Subject: [PATCH 09/26] Add definition for data (#35841)

* Update index.md

data argument not defined in context

* Update index.md

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 files/en-us/web/api/webglrenderingcontext/buffersubdata/index.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/files/en-us/web/api/webglrenderingcontext/buffersubdata/index.md b/files/en-us/web/api/webglrenderingcontext/buffersubdata/index.md
index 46b9d46bf7094b1..84f156cd81a83a6 100644
--- a/files/en-us/web/api/webglrenderingcontext/buffersubdata/index.md
+++ b/files/en-us/web/api/webglrenderingcontext/buffersubdata/index.md
@@ -79,6 +79,7 @@ None ({{jsxref("undefined")}}).
 const canvas = document.getElementById("canvas");
 const gl = canvas.getContext("webgl");
 const buffer = gl.createBuffer();
+const data = new Float32Array([1, 2, 3, 4]);
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 gl.bufferData(gl.ARRAY_BUFFER, 1024, gl.STATIC_DRAW);
 gl.bufferSubData(gl.ARRAY_BUFFER, 512, data);

From dad91b2a7c51b05d98cd79e436f61565810a42a5 Mon Sep 17 00:00:00 2001
From: zhangenming <282126346@qq.com>
Date: Thu, 12 Sep 2024 03:40:31 +0800
Subject: [PATCH 10/26] Add text-transform: math-auto (#35540)

* Update index.md

* Update index.md

* Description, example

* Update index.md

* Update files/en-us/web/css/text-transform/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/en-us/web/css/text-transform/index.md | 62 ++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/css/text-transform/index.md b/files/en-us/web/css/text-transform/index.md
index 6bf556862df1c63..1b3e09ed2e40133 100644
--- a/files/en-us/web/css/text-transform/index.md
+++ b/files/en-us/web/css/text-transform/index.md
@@ -35,6 +35,7 @@ text-transform: uppercase;
 text-transform: lowercase;
 text-transform: full-width;
 text-transform: full-size-kana;
+text-transform: math-auto;
 
 /* Global values */
 text-transform: inherit;
@@ -64,6 +65,9 @@ text-transform: unset;
   - : Is a keyword that forces the writing of a character — mainly ideograms and Latin scripts — inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).
 - `full-size-kana`
   - : Generally used for {{htmlelement("ruby")}} annotation text, the keyword converts all small Kana characters to the equivalent full-size Kana, to compensate for legibility issues at the small font sizes typically used in ruby.
+- `math-auto`
+  - : Used to automatically render text in math italic where appropriate. It transforms Latin and Greek letters, and a few other math-related symbols, to [italic mathematical symbols](https://www.unicode.org/charts/PDF/U1D400.pdf) but only if it's applied on a text node containing a single character. For example, "x" will become "𝑥" (U+1D465), but "exp" will stay as "exp".
+    It is primarily used to specify the behavior of {{mathmlelement("mi")}} elements in MathML. You should generally use MathML markup which automatically applies the right styling.
 
 ## Accessibility
 
@@ -441,7 +445,6 @@ The Japanese half-width katakana was used to represent katakana in 8-bit charact
 ```html
 <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
 <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p>
-</p>
 ```
 
 ```css
@@ -452,6 +455,63 @@ p:nth-of-type(2) {
 
 {{ EmbedLiveSample('Example using "full-size-kana"', '100%', '175px') }}
 
+### Example using "math-auto"
+
+In this example, we use pure HTML markup to create a math formula:
+
+```html
+<div>
+  (<span class="math-id">sin</span>&#8198;<span class="math-id">x</span>)<sup
+    >2</sup
+  >
+  + (<span class="math-id">cos</span>&#8198;<span class="math-id">x</span>)<sup
+    >2</sup
+  >
+  = 1
+</div>
+```
+
+We give every `.math-id` element `text-transform: math-auto`. However, note how only the `x` characters become italic, while the `sin` and `cos` remain unchanged.
+
+```css
+.math-id {
+  text-transform: math-auto;
+}
+```
+
+{{ EmbedLiveSample('Example using "math-auto"', '', '100px') }}
+
+However, you are encouraged to use [MathML](/en-US/docs/Web/MathML) for mathematical formulas, as it provides a more robust and accessible way to represent mathematical content. Here's the same formula using MathML:
+
+```xml
+<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
+  <semantics>
+    <mrow>
+      <mo stretchy="false">(</mo>
+      <mo lspace="0em" rspace="0em">sin</mo>
+      <mspace width="0.16666666666666666em"></mspace>
+      <mi>x</mi>
+      <msup>
+        <mo stretchy="false">)</mo>
+        <mn>2</mn>
+      </msup>
+      <mo>+</mo>
+      <mo stretchy="false">(</mo>
+      <mo lspace="0em" rspace="0em">cos</mo>
+      <mspace width="0.16666666666666666em"></mspace>
+      <mi>x</mi>
+      <msup>
+        <mo stretchy="false">)</mo>
+        <mn>2</mn>
+      </msup>
+      <mo>=</mo>
+      <mn>1</mn>
+    </mrow>
+    <annotation encoding="TeX">(\sin\,x)^2+(\cos\,x)^2=1</annotation>
+  </semantics>
+</math>
+```
+
 ## Specifications
 
 {{Specifications}}

From 694fcee3661206baded9795045cab396836fac60 Mon Sep 17 00:00:00 2001
From: David Winiecki <david.winiecki@gmail.com>
Date: Wed, 11 Sep 2024 13:41:55 -0700
Subject: [PATCH 11/26] Fix typo in "Element: mouseleave event" article
 (#35846)

---
 files/en-us/web/api/element/mouseleave_event/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/element/mouseleave_event/index.md b/files/en-us/web/api/element/mouseleave_event/index.md
index 96257c7dc118951..058216cee3e2a0a 100644
--- a/files/en-us/web/api/element/mouseleave_event/index.md
+++ b/files/en-us/web/api/element/mouseleave_event/index.md
@@ -14,7 +14,7 @@ The **`mouseleave`** event is fired at an {{domxref("Element")}} when the cursor
 
 The `mouseleave` and `mouseout` events will not be triggered when the element is replaced or removed from the DOM.
 
-Note that "moving out of an event" refers to the element's position in the DOM tree, not to its visual position. For example, if two sibling elements are positioned so one is placed inside the other, then moving from the outer element into the inner element will trigger `mouseleave` on the outer element, even though the pointer is still in the bounds of the outer element.
+Note that "moving out of an element" refers to the element's position in the DOM tree, not to its visual position. For example, if two sibling elements are positioned so one is placed inside the other, then moving from the outer element into the inner element will trigger `mouseleave` on the outer element, even though the pointer is still in the bounds of the outer element.
 
 ## Syntax
 

From b88bb62326a0392832590d2910f357b9c9284b98 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Thu, 12 Sep 2024 11:02:59 +0100
Subject: [PATCH 12/26] Remove out-of-date blog link (#35851)

---
 files/en-us/web/api/topics_api/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/topics_api/index.md b/files/en-us/web/api/topics_api/index.md
index c6909b2e7cc44ce..d5bcf61e706be61 100644
--- a/files/en-us/web/api/topics_api/index.md
+++ b/files/en-us/web/api/topics_api/index.md
@@ -22,7 +22,7 @@ The **Topics API** provides a mechanism for developers to implement use cases su
 
 A typical mechanism for advertising on the web involves a user visiting **publisher** sites that use an advertising technology (ad tech) platform to publish ads for an **advertiser**'s products or services. The publisher is paid to display the ads, which helps to fund their content, and more business is driven to advertiser sites.
 
-The above process can be made more effective using interest-based advertising (IBA). The idea is that when users visit the publisher sites, they are served a **personalized** selection of ads based on their interests. Their interests are inferred from sites they have previously visited. In the past, third-party tracking cookies have been used to collect information on user interests, but browsers are [phasing out the availability of third-party cookies](/en-US/blog/goodbye-third-party-cookies/) for an increasing proportion of users. The Topics API provides part of the path towards this goal — a mechanism to implement IBA that does not depend on user tracking.
+The above process can be made more effective using interest-based advertising (IBA). The idea is that when users visit the publisher sites, they are served a **personalized** selection of ads based on their interests. Their interests are inferred from sites they have previously visited. In the past, third-party tracking cookies have been used to collect information on user interests, but browsers are phasing out the availability of third-party cookies for an increasing proportion of users. The Topics API provides part of the path towards this goal — a mechanism to implement IBA that does not depend on user tracking.
 
 First of all, the browser infers a user's interests from the URLs of sites they visit that have ad tech `<iframe>`s embedded. These interests are mapped to specific **topics of interest**, and the browser calculates and records the users' top topic (i.e. the topic that their interests mapped to most often) at the end of each **epoch**. An epoch is a week by default. The top topic is updated each week so that interests are kept current and users don't start to see ads for topics that they are no longer interested in.
 

From e452bf7276167b8b9dae27df697ca4af0f2c5177 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Thu, 12 Sep 2024 06:59:06 -0400
Subject: [PATCH 13/26] Add a few missing spec links (#35838)

---
 .../payerdetailchange_event/index.md                |  4 ++++
 .../web/api/paymentresponse/payeremail/index.md     |  4 ++++
 .../web/api/paymentresponse/payername/index.md      |  4 ++++
 .../web/api/paymentresponse/payerphone/index.md     |  4 ++++
 .../api/paymentresponse/shippingaddress/index.md    |  4 ++++
 .../web/api/paymentresponse/shippingoption/index.md |  4 ++++
 files/en-us/web/http/csp/index.md                   |  4 ++++
 files/en-us/web/javascript/guide/modules/index.md   | 13 ++-----------
 8 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/files/en-us/web/api/paymentresponse/payerdetailchange_event/index.md b/files/en-us/web/api/paymentresponse/payerdetailchange_event/index.md
index c871f21e22ba5b6..5b8605b90bebccb 100644
--- a/files/en-us/web/api/paymentresponse/payerdetailchange_event/index.md
+++ b/files/en-us/web/api/paymentresponse/payerdetailchange_event/index.md
@@ -119,6 +119,10 @@ response.addEventListener("payerdetailchange", async (ev) => {
 });
 ```
 
+## Specifications
+
+{{Specifications}}
+
 ## Browser compatibility
 
 {{Compat}}
diff --git a/files/en-us/web/api/paymentresponse/payeremail/index.md b/files/en-us/web/api/paymentresponse/payeremail/index.md
index 04acaf51206095d..8f30b1229390916 100644
--- a/files/en-us/web/api/paymentresponse/payeremail/index.md
+++ b/files/en-us/web/api/paymentresponse/payeremail/index.md
@@ -18,6 +18,10 @@ when the `requestPayerEmail` option is set to `true` in the
 
 A string.
 
+## Specifications
+
+{{Specifications}}
+
 ## Browser compatibility
 
 {{Compat}}
diff --git a/files/en-us/web/api/paymentresponse/payername/index.md b/files/en-us/web/api/paymentresponse/payername/index.md
index 930359c1420763d..d2f58d85e631bb5 100644
--- a/files/en-us/web/api/paymentresponse/payername/index.md
+++ b/files/en-us/web/api/paymentresponse/payername/index.md
@@ -18,6 +18,10 @@ option is only present when the `requestPayerName` option is set to
 
 A string containing the payer name.
 
+## Specifications
+
+{{Specifications}}
+
 ## Browser compatibility
 
 {{Compat}}
diff --git a/files/en-us/web/api/paymentresponse/payerphone/index.md b/files/en-us/web/api/paymentresponse/payerphone/index.md
index e738f898fd0c54b..6616f8e45377c58 100644
--- a/files/en-us/web/api/paymentresponse/payerphone/index.md
+++ b/files/en-us/web/api/paymentresponse/payerphone/index.md
@@ -18,6 +18,10 @@ when the `requestPayerPhone` option is set to `true` in the
 
 A string.
 
+## Specifications
+
+{{Specifications}}
+
 ## Browser compatibility
 
 {{Compat}}
diff --git a/files/en-us/web/api/paymentresponse/shippingaddress/index.md b/files/en-us/web/api/paymentresponse/shippingaddress/index.md
index eabeb597085fd6f..ec4612852a677f6 100644
--- a/files/en-us/web/api/paymentresponse/shippingaddress/index.md
+++ b/files/en-us/web/api/paymentresponse/shippingaddress/index.md
@@ -79,6 +79,10 @@ function updateDetails(details, shippingAddress, resolve) {
 }
 ```
 
+## Specifications
+
+{{Specifications}}
+
 ## Browser compatibility
 
 {{Compat}}
diff --git a/files/en-us/web/api/paymentresponse/shippingoption/index.md b/files/en-us/web/api/paymentresponse/shippingoption/index.md
index a2833f0d5a15c6a..ac4a9c2b4ff5989 100644
--- a/files/en-us/web/api/paymentresponse/shippingoption/index.md
+++ b/files/en-us/web/api/paymentresponse/shippingoption/index.md
@@ -68,6 +68,10 @@ function updateDetails(details, shippingOption, resolve, reject) {
 }
 ```
 
+## Specifications
+
+{{Specifications}}
+
 ## Browser compatibility
 
 {{Compat}}
diff --git a/files/en-us/web/http/csp/index.md b/files/en-us/web/http/csp/index.md
index c5c0d8d45ef8f9f..fb74d02de296ebe 100644
--- a/files/en-us/web/http/csp/index.md
+++ b/files/en-us/web/http/csp/index.md
@@ -208,6 +208,10 @@ A typical object might look like this:
 You need to set up a server to receive reports with the given JSON format and content type.
 The server handling these requests can then store or process the incoming reports in a way that best suits your needs.
 
+## Specifications
+
+{{Specifications}}
+
 ## Browser compatibility
 
 {{Compat}}
diff --git a/files/en-us/web/javascript/guide/modules/index.md b/files/en-us/web/javascript/guide/modules/index.md
index 6be055a25a9c90a..1108f70380f842b 100644
--- a/files/en-us/web/javascript/guide/modules/index.md
+++ b/files/en-us/web/javascript/guide/modules/index.md
@@ -2,9 +2,6 @@
 title: JavaScript modules
 slug: Web/JavaScript/Guide/Modules
 page-type: guide
-browser-compat:
-  - javascript.statements.import
-  - javascript.statements.export
 ---
 
 {{jsSidebar("JavaScript Guide")}}{{Previous("Web/JavaScript/Guide/Meta_programming")}}
@@ -15,15 +12,9 @@ This guide gives you all you need to get started with JavaScript module syntax.
 
 JavaScript programs started off pretty small — most of its usage in the early days was to do isolated scripting tasks, providing a bit of interactivity to your web pages where needed, so large scripts were generally not needed. Fast forward a few years and we now have complete applications being run in browsers with a lot of JavaScript, as well as JavaScript being used in other contexts ([Node.js](/en-US/docs/Glossary/Node.js), for example).
 
-It has therefore made sense in recent years to start thinking about providing mechanisms for splitting JavaScript programs up into separate modules that can be imported when needed. Node.js has had this ability for a long time, and there are a number of JavaScript libraries and frameworks that enable module usage (for example, other [CommonJS](https://en.wikipedia.org/wiki/CommonJS) and [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md)-based module systems like [RequireJS](https://requirejs.org/), and more recently [Webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/)).
+Complex projects necessitate a mechanism for splitting JavaScript programs into separate modules that can be imported when needed. Node.js has had this ability for a long time, and there are a number of JavaScript libraries and frameworks that enable module usage (for example, other [CommonJS](https://en.wikipedia.org/wiki/CommonJS) and [AMD](https://github.com/amdjs/amdjs-api/blob/master/AMD.md)-based module systems like [RequireJS](https://requirejs.org/), [Webpack](https://webpack.js.org/), and [Babel](https://babeljs.io/)).
 
-The good news is that modern browsers have started to support module functionality natively, and this is what this article is all about. This can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips.
-
-Use of native JavaScript modules is dependent on the {{jsxref("Statements/import", "import")}} and {{jsxref("Statements/export", "export")}} statements; these are supported in browsers as shown in the compatibility table below.
-
-## Browser compatibility
-
-{{Compat}}
+All modern browsers support module features natively without needing transpilation. It can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips. It does not obsolete bundlers like Webpack, though — bundlers still do a good job at partitioning code into reasonably sized chunks, and are able to do other optimizations like minification, dead code elimination, and tree-shaking.
 
 ## Introducing an example
 

From 95b616378ae463831754e5c16f2018c77d3f56e3 Mon Sep 17 00:00:00 2001
From: Himesh <thehimesh026@gmail.com>
Date: Thu, 12 Sep 2024 16:31:42 +0530
Subject: [PATCH 14/26] Refactor outdated and insensitive comparisons in
 documentation (#35853)

**Commit Message:**
Refactor outdated and insensitive comparisons in documentation

**Extended Description:**
This commit removes references to specific countries, workers' wages, and outdated comparisons of low-cost devices in documentation. The changes focus on technical performance challenges in low-resource environments without highlighting sensitive or potentially offensive comparisons between regions or incomes.

- Removed the comparison of a $35 Huawei device in rural India and replaced it with a more general reference to low-cost devices with limited coverage.
- Eliminated references to the cost of data in different countries, focusing instead on the impact of data costs in areas with metered connections or international roaming plans.

These changes aim to maintain the integrity of the content while removing potentially outdated or insensitive language.

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
---
 files/en-us/learn/performance/why_web_performance/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/learn/performance/why_web_performance/index.md b/files/en-us/learn/performance/why_web_performance/index.md
index 672680aa829e97d..34dd873788adc08 100644
--- a/files/en-us/learn/performance/why_web_performance/index.md
+++ b/files/en-us/learn/performance/why_web_performance/index.md
@@ -42,11 +42,11 @@ As an example, consider the loading experience of CNN.com, which at the time of
 
 - Imagine loading this on a desktop computer connected to a fibre optic network. This would seem relatively fast, and the file size would be largely irrelevant.
 - Imagine loading that same site using tethered mobile data on a nine-year-old iPad while commuting home on public transportation. The same site will be slow to load, possibly verging on unusable depending on cell coverage. You might give up before it finishes loading.
-- Imagine loading that same site on a $35 Huawei device in a rural India with limited coverage or no coverage. The site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse CPU impact causing browser crashes if it does load.
+- Imagine loading that same site on a low-cost device in an area with limited coverage. The site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse CPU impact potentially causing browser crashes if it does load.
 
 A 22.6 MB site could take up to 83 seconds to load on a 3G network, with [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) (meaning the site's base HTML structure) at 31.86 seconds.
 
-And it isn't just the time taken to download that is a major problem. A lot of countries still have internet connections that bill per megabyte. Our example 22.6 MB CNN.com experience would cost about 11% of the average Indian's daily wage to download. From a mobile device in Northwest Africa, it might cost two days of an average salary. And if this site were loaded on a US carrier's international roaming plan? The costs would make anyone cry. (See [how much your site costs to download](https://whatdoesmysitecost.com/).)
+And it isn't just the time taken to download that is a major problem. In some regions, internet connections are billed per megabyte, making large downloads prohibitively expensive. Our example 22.6 MB CNN.com experience would cost a significant portion of a mobile data user's daily allowance or even lead to high charges in certain international roaming plans.(See [how much your site costs to download](https://whatdoesmysitecost.com/).)
 
 ### Improve conversion rates
 

From 8c36614793c9feadf8fea07fd10b6372be4fd179 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Thu, 12 Sep 2024 15:05:35 +0200
Subject: [PATCH 15/26] chore(http): clarifications about Server header, link
 to HTTP Observatory, OWASP Secure Headers Project (#35834)

* chore(http): clarifications about Server header, link to HTTP Observatory, OWASP Secure Headers Project

* chore(http): reorg details about Server header, mention pros and cons
---
 .../first_steps/website_security/index.md     |  4 +++
 files/en-us/web/http/headers/server/index.md  | 28 +++++++++----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/files/en-us/learn/server-side/first_steps/website_security/index.md b/files/en-us/learn/server-side/first_steps/website_security/index.md
index a0d7817d8f91216..fe9f34f9d2de697 100644
--- a/files/en-us/learn/server-side/first_steps/website_security/index.md
+++ b/files/en-us/learn/server-side/first_steps/website_security/index.md
@@ -140,6 +140,10 @@ A number of other concrete steps you can take are:
 - Keep track of the most popular threats (the [current OWASP list is here](https://owasp.org/www-project-top-ten/)) and address the most common vulnerabilities first.
 - Use [vulnerability scanning tools](https://owasp.org/www-community/Vulnerability_Scanning_Tools) to perform automated security testing on your site. Later on, your very successful website may also find bugs by offering a bug bounty [like Mozilla does here](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/).
 - Only store and display data that you need. For example, if your users must store sensitive information like credit card details, only display enough of the card number that it can be identified by the user, and not enough that it can be copied by an attacker and used on another site. The most common pattern at this time is to only display the last 4 digits of a credit card number.
+- Keep software up-to-date.
+  Most servers have regular security updates that fix or mitigate known vulnerabilities.
+  If possible, schedule regular automated updates, and ideally, schedule updates during times when your website has the lowest amount of traffic.
+  It's best to back up your data before updating and test new software versions to make sure there's no compatibility issues on your server.
 
 Web frameworks can help mitigate many of the more common vulnerabilities.
 
diff --git a/files/en-us/web/http/headers/server/index.md b/files/en-us/web/http/headers/server/index.md
index 000da25bb8a0a23..39c448e2c78c356 100644
--- a/files/en-us/web/http/headers/server/index.md
+++ b/files/en-us/web/http/headers/server/index.md
@@ -7,13 +7,17 @@ browser-compat: http.headers.Server
 
 {{HTTPSidebar}}
 
-The **`Server`** header describes the
-software used by the origin server that handled the request — that is, the server that
-generated the response.
+The **`Server`** header describes the software used by the origin server that handled the request and generated a response.
+
+The benefits of advertising the server type and version via this header are that it helps with analytics and identifying how widespread specific interoperability issues are.
+Historically, clients have used the server version information to avoid known limitations, such as inconsistent support for [range requests](/en-US/docs/Web/HTTP/Range_requests) in specific software versions.
 
 > [!WARNING]
-> Avoid overly-detailed `Server` values, as they can reveal information that
-> may make it (slightly) easier for attackers to exploit known security holes.
+> The presence of this header in responses, especially when it contains fine-grained implementation details about server software, may make known vulnerabilities easier to detect.
+
+Too much detail in the `Server` header is not advised for response latency and the security reason mentioned above.
+It's debatable whether obscuring the information in this header provides much benefit because fingerprinting server software is possible via other means.
+In general, a more robust approach to server security is to ensure software is regularly updated or patched against known vulnerabilities instead.
 
 <table class="properties">
   <tbody>
@@ -36,15 +40,9 @@ Server: <product>
 
 ## Directives
 
-- \<product>
-  - : A name of the software or the product that handled the request. Usually in a format
-    similar to {{HTTPHeader('User-Agent')}}.
-
-How much detail to include is an interesting balance to strike; exposing the OS version
-is probably a bad idea, as mentioned in the earlier warning about overly-detailed
-values. However, exposed Apache versions helped browsers to work around a bug of the
-versions with {{HTTPHeader('Content-Encoding')}} and
-{{HTTPHeader('Range')}} in combination.
+- `<product>`
+  - : A name of the software or the product that handled the request.
+    Usually in a format similar to {{HTTPHeader('User-Agent')}}.
 
 ## Examples
 
@@ -63,3 +61,5 @@ Server: Apache/2.4.1 (Unix)
 ## See also
 
 - {{HTTPHeader("Allow")}}
+- [HTTP Observatory](/en-US/observatory)
+- [Prevent information disclosure via HTTP headers](https://owasp.org/www-project-secure-headers/index.html#prevent-information-disclosure-via-http-headers) - OWASP Secure Headers Project

From 4b653b12c3b2c8276dba7412eed0aa6a683a7433 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:52:33 +0000
Subject: [PATCH 16/26] Bump husky from 9.1.5 to 9.1.6 (#35855)

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 03cf12eb06ed34e..ffe80ae94892d75 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "env-cmd": "10.1.0",
     "fdir": "^6.3.0",
     "gray-matter": "^4.0.3",
-    "husky": "9.1.5",
+    "husky": "9.1.6",
     "js-yaml": "^4.1.0",
     "lint-staged": "15.2.10",
     "markdownlint-cli2": "0.14.0",
diff --git a/yarn.lock b/yarn.lock
index d9a500b5d40c1e9..067eca2359d117b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4339,10 +4339,10 @@ humanize-ms@^1.2.1:
   dependencies:
     ms "^2.0.0"
 
-husky@9.1.5:
-  version "9.1.5"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.5.tgz#2b6edede53ee1adbbd3a3da490628a23f5243b83"
-  integrity sha512-rowAVRUBfI0b4+niA4SJMhfQwc107VLkBUgEYYAOQAbqDCnra1nYh83hF/MDmhYs9t9n1E3DuKOrs2LYNC+0Ag==
+husky@9.1.6:
+  version "9.1.6"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-9.1.6.tgz#e23aa996b6203ab33534bdc82306b0cf2cb07d6c"
+  integrity sha512-sqbjZKK7kf44hfdE94EoX8MZNk0n7HeW37O4YrVGCF4wzgQjp+akPAkfUK5LZ6KuR/6sqeAVuXHji+RzQgOn5A==
 
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"

From 8ca92ab289aa7a0b9d99765c4a12d606a90af2dc Mon Sep 17 00:00:00 2001
From: Gagan Bhullar <g.deepsingh1@gmail.com>
Date: Thu, 12 Sep 2024 09:41:30 -0600
Subject: [PATCH 17/26] remove datalist password example (#35856)

---
 files/en-us/web/html/element/datalist/index.md | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/files/en-us/web/html/element/datalist/index.md b/files/en-us/web/html/element/datalist/index.md
index a6a7efdbceb5b82..fda492794fd7f75 100644
--- a/files/en-us/web/html/element/datalist/index.md
+++ b/files/en-us/web/html/element/datalist/index.md
@@ -104,20 +104,6 @@ The {{HTMLElement("input/color", "color")}} type can show predefined colors in a
 
 {{EmbedLiveSample("Color_type", 600, 70)}}
 
-### Password type
-
-The specification allows linking `<datalist>` with a {{HTMLElement("input/password", "password")}} type, but no browser supports it for security reasons.
-
-```html
-<label for="pwd">Enter a password:</label>
-<input type="password" list="randomPassword" id="pwd" />
-<datalist id="randomPassword">
-  <option value="5Mg[_3DnkgSu@!q#"></option>
-</datalist>
-```
-
-{{EmbedLiveSample("Password_type", 600, 40)}}
-
 ## Technical summary
 
 <table class="properties">

From 167a81945e7292ea5e02251538b09a4467237582 Mon Sep 17 00:00:00 2001
From: Kirk Waiblinger <kirk.waiblinger@gmail.com>
Date: Thu, 12 Sep 2024 09:46:39 -0600
Subject: [PATCH 18/26] add note that the void operator doesn't work on arrow
 function iifes (#35857)

---
 .../en-us/web/javascript/reference/operators/void/index.md  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/files/en-us/web/javascript/reference/operators/void/index.md b/files/en-us/web/javascript/reference/operators/void/index.md
index f4aca5c92ec66d7..ce591b320dfe428 100644
--- a/files/en-us/web/javascript/reference/operators/void/index.md
+++ b/files/en-us/web/javascript/reference/operators/void/index.md
@@ -74,6 +74,12 @@ This is a bit longer than wrapping the function expression in parentheses, which
 })();
 ```
 
+Note that this trick only applies to IIFEs defined with the `function` keyword. Attempting to use the `void` operator to avoid parentheses for an arrow function results in a syntax error. Arrow function expressions always require parentheses around them when being called.
+
+```js example-bad
+void () => { console.log("iife!"); }(); // SyntaxError: Malformed arrow function parameter list
+```
+
 ### JavaScript URIs
 
 When a browser follows a [`javascript:` URI](/en-US/docs/Web/URI/Schemes/javascript), it evaluates the code in the URI

From f56df7cd1613660f455108682e3d1e95fc4749e8 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Thu, 12 Sep 2024 19:23:39 +0100
Subject: [PATCH 19/26] Editorial review: Document WebSocketStream (#35548)

* Document WebSocketStream

* Add WebSocket interface documentation

* Update files/en-us/web/api/websockets_api/using_websocketstream/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websockets_api/using_websocketstream/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websockets_api/using_websocketstream/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websockets_api/using_websocketstream/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websockets_api/using_websocketstream/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websockets_api/using_websocketstream/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websocketstream/closed/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websocketstream/opened/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websocketstream/url/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* Update files/en-us/web/api/websocketstream/websocketstream/index.md

Co-authored-by: Thomas Steiner <tomac@google.com>

* make protocol usage consistent ascross example snippets

* Fixes for wbamberg review comments

* Fixes for 2nd round of wbamberg review

* typo

---------

Co-authored-by: Thomas Steiner <tomac@google.com>
Co-authored-by: wbamberg <will@bootbonnet.ca>
---
 files/en-us/web/api/closeevent/code/index.md  |   4 +-
 files/en-us/web/api/closeevent/index.md       |   2 +-
 files/en-us/web/api/websocket/index.md        |   3 +
 files/en-us/web/api/websockets_api/index.md   |  25 +-
 .../using_websocketstream/index.md            | 303 ++++++++++++++++++
 .../web/api/websocketstream/close/index.md    |  71 ++++
 .../web/api/websocketstream/closed/index.md   |  54 ++++
 files/en-us/web/api/websocketstream/index.md  |  95 ++++++
 .../web/api/websocketstream/opened/index.md   |  71 ++++
 .../web/api/websocketstream/url/index.md      |  40 +++
 .../websocketstream/websocketstream/index.md  |  78 +++++
 files/jsondata/GroupData.json                 |  10 +-
 12 files changed, 743 insertions(+), 13 deletions(-)
 create mode 100644 files/en-us/web/api/websockets_api/using_websocketstream/index.md
 create mode 100644 files/en-us/web/api/websocketstream/close/index.md
 create mode 100644 files/en-us/web/api/websocketstream/closed/index.md
 create mode 100644 files/en-us/web/api/websocketstream/index.md
 create mode 100644 files/en-us/web/api/websocketstream/opened/index.md
 create mode 100644 files/en-us/web/api/websocketstream/url/index.md
 create mode 100644 files/en-us/web/api/websocketstream/websocketstream/index.md

diff --git a/files/en-us/web/api/closeevent/code/index.md b/files/en-us/web/api/closeevent/code/index.md
index 50f222f3e4c4d89..dd80a8d6f92fcc5 100644
--- a/files/en-us/web/api/closeevent/code/index.md
+++ b/files/en-us/web/api/closeevent/code/index.md
@@ -8,11 +8,11 @@ browser-compat: api.CloseEvent.code
 
 {{APIRef("Websockets API")}}
 
-The **`code`** read-only property of the {{domxref("CloseEvent")}} interface returns a [WebSocket connection close code](https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5) indicating the reason the server gave for closing the connection.
+The **`code`** read-only property of the {{domxref("CloseEvent")}} interface returns a [WebSocket connection close code](https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5) indicating the reason the connection was closed.
 
 ## Value
 
-An integer [WebSocket connection close code](https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5) in the range `1000` - `4999`, indicating the reason the server gave for closing the connection.
+An integer [WebSocket connection close code](https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5) in the range `1000` - `4999`, indicating the reason the connection was closed.
 
 <table class="no-markdown">
   <thead>
diff --git a/files/en-us/web/api/closeevent/index.md b/files/en-us/web/api/closeevent/index.md
index 237ddd3b628cdbf..2800eb565cadec7 100644
--- a/files/en-us/web/api/closeevent/index.md
+++ b/files/en-us/web/api/closeevent/index.md
@@ -21,7 +21,7 @@ A `CloseEvent` is sent to clients using {{Glossary("WebSockets")}} when the conn
 _This interface also inherits properties from its parent, {{domxref("Event")}}._
 
 - {{domxref("CloseEvent.code")}} {{ReadOnlyInline}}
-  - : Returns an `unsigned short` containing the close code sent by the server.
+  - : Returns an `unsigned short` containing the close code.
 - {{domxref("CloseEvent.reason")}} {{ReadOnlyInline}}
   - : Returns a string indicating the reason the server closed the connection. This is specific to the particular server and sub-protocol.
 - {{domxref("CloseEvent.wasClean")}} {{ReadOnlyInline}}
diff --git a/files/en-us/web/api/websocket/index.md b/files/en-us/web/api/websocket/index.md
index d0c8e80d7505f93..48e06a3f1c1a89e 100644
--- a/files/en-us/web/api/websocket/index.md
+++ b/files/en-us/web/api/websocket/index.md
@@ -11,6 +11,9 @@ The `WebSocket` object provides the API for creating and managing a [WebSocket](
 
 To construct a `WebSocket`, use the [`WebSocket()`](/en-US/docs/Web/API/WebSocket/WebSocket) constructor.
 
+> [!NOTE]
+> The `WebSocket` API has no way to apply [backpressure](/en-US/docs/Web/API/Streams_API/Concepts#backpressure), therefore when messages arrive faster than the application can process them, the application will either fill up the device's memory by buffering those messages, become unresponsive due to 100% CPU usage, or both. For an alternative that provides backpressure automatically, see {{domxref("WebSocketStream")}}.
+
 {{InheritanceDiagram}}
 
 ## Constructor
diff --git a/files/en-us/web/api/websockets_api/index.md b/files/en-us/web/api/websockets_api/index.md
index 4417e6be6fbdd0d..347b857565fbbef 100644
--- a/files/en-us/web/api/websockets_api/index.md
+++ b/files/en-us/web/api/websockets_api/index.md
@@ -2,12 +2,21 @@
 title: The WebSocket API (WebSockets)
 slug: Web/API/WebSockets_API
 page-type: web-api-overview
-browser-compat: api.WebSocket
+browser-compat:
+  - api.WebSocket
+  - api.WebSocketStream
 ---
 
 {{DefaultAPISidebar("WebSockets API")}}
 
-The **WebSocket API** is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
+The **WebSocket API** makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive responses without having to poll the server for a reply.
+
+The WebSocket API provides two alternative mechanisms for creating and using web socket connections: the {{domxref("WebSocket")}} interface and the {{domxref("WebSocketStream")}} interface.
+
+- The `WebSocket` interface is stable and has good browser and server support. However it doesn't support [backpressure](/en-US/docs/Web/API/Streams_API/Concepts#backpressure). As a result, when messages arrive faster than the application can process them it will either fill up the device's memory by buffering those messages, become unresponsive due to 100% CPU usage, or both.
+- The `WebSocketStream` is a {{jsxref("Promise")}}-based alternative to `WebSocket`. It uses the [Streams API](/en-US/docs/Web/API/Streams_API) to handle receiving and sending messages, meaning that socket connections can take advantage of stream backpressure automatically, regulating the speed of reading or writing to avoid bottlenecks in the application. However, `WebSocketSteam` is non-standard and currently only supported in one rendering engine.
+
+Additionally, the [WebTransport API](/en-US/docs/Web/API/WebTransport_API) is expected to replace the WebSocket API for many applications. WebTransport is a versatile, low-level API that provides backpressure and many other features not supported by either `WebSocket` or `WebSocketStream`, such as unidirectional streams, out-of-order delivery, and unreliable data transmission via datagrams. WebTransport is more complex to use than WebSockets and its cross-browser support is not as wide, but it enables the implementation of sophisticated solutions. If standard WebSocket connections are a good fit for your use case and you need wide browser compatibility, you should employ the WebSockets API to get up and running quickly. However, if your application requires a non-standard custom solution, then you should use the WebTransport API.
 
 > [!NOTE]
 > While a WebSocket connection is functionally somewhat similar to standard Unix-style sockets, they are not related.
@@ -16,6 +25,8 @@ The **WebSocket API** is an advanced technology that makes it possible to open a
 
 - [`WebSocket`](/en-US/docs/Web/API/WebSocket)
   - : The primary interface for connecting to a WebSocket server and then sending and receiving data on the connection.
+- [`WebSocketStream`](/en-US/docs/Web/API/WebSocketStream) {{non-standard_inline}}
+  - : Promise-based interface for connecting to a WebSocket server; uses [streams](/en-US/docs/Web/API/Streams_API) to send and receive data on the connection.
 - [`CloseEvent`](/en-US/docs/Web/API/CloseEvent)
   - : The event sent by the WebSocket object when the connection closes.
 - [`MessageEvent`](/en-US/docs/Web/API/MessageEvent)
@@ -49,28 +60,26 @@ The HTTP headers are used in the [WebSocket handshake](/en-US/docs/Web/API/WebSo
 - [Writing a WebSocket server in C#](/en-US/docs/Web/API/WebSockets_API/Writing_WebSocket_server)
 - [Writing a WebSocket server in Java](/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java)
 - [Writing a WebSocket server in JavaScript (Deno)](/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno)
+- [Using WebSocketStream to write a client](/en-US/docs/Web/API/WebSockets_API/Using_WebSocketStream)
 
 ## Tools
 
 - [AsyncAPI](https://www.asyncapi.com/): A specification for describing event-driven architectures based on protocols like WebSocket. You can use it to describe WebSocket-based APIs just as you would describe REST APIs with the OpenAPI specification. Learn [why you should consider using AsyncAPI with WebSocket](https://www.asyncapi.com/blog/websocket-part1) and [how to do so](https://www.asyncapi.com/blog/websocket-part2).
-- [HumbleNet](https://hacks.mozilla.org/2017/06/introducing-humblenet-a-cross-platform-networking-library-that-works-in-the-browser/): A cross-platform networking library that works in the browser. It consists of a C wrapper around WebSockets and WebRTC that abstracts away cross-browser differences, facilitating the creation of multi-user networking functionality for games and other apps.
 - [µWebSockets](https://github.com/uNetworking/uWebSockets): Highly scalable WebSocket server and client implementation for [C++11](https://isocpp.org/) and [Node.js](https://nodejs.org/).
 - [Socket.IO](https://socket.io/): A long polling/WebSocket based third party transfer protocol for [Node.js](https://nodejs.org/).
 - [SocketCluster](https://socketcluster.io/): A pub/sub WebSocket framework for [Node.js](https://nodejs.org/) with a focus on scalability.
 - [WebSocket-Node](https://github.com/theturtle32/WebSocket-Node): A WebSocket server API implementation for [Node.js](https://nodejs.org/).
 - [Total.js](https://www.totaljs.com/): Web application framework for [Node.js](https://nodejs.org/en) (Example: [WebSocket chat](https://github.com/totaljs/examples/tree/master/websocket))
-- [Faye](https://www.npmjs.com/package/faye-websocket): A {{DOMxRef("WebSocket")}} (two-ways connections) and [EventSource](/en-US/docs/Web/API/EventSource) (one-way connections) for [Node.js](https://nodejs.org/) Server and Client.
 - [SignalR](https://dotnet.microsoft.com/en-us/apps/aspnet/signalr): SignalR will use WebSockets under the covers when it's available, and gracefully fallback to other techniques and technologies when it isn't, while your application code stays the same.
 - [Caddy](https://caddyserver.com/): A web server capable of proxying arbitrary commands (stdin/stdout) as a websocket.
 - [ws](https://github.com/websockets/ws): a popular WebSocket client & server library for [Node.js](https://nodejs.org/en).
-- [jsonrpc-bidirectional](https://github.com/bigstepinc/jsonrpc-bidirectional): Asynchronous RPC which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client).
 - [cowboy](https://github.com/ninenines/cowboy): Cowboy is a small, fast and modern HTTP server for Erlang/OTP with WebSocket support.
 - [ZeroMQ](https://zeromq.org/): ZeroMQ is embeddable networking library that carries messages across in-process, IPC, TCP, UDP, TIPC, multicast and WebSocket.
 - [WebSocket King](https://websocketking.com/): A client tool to help develop, test and work with WebSocket servers.
 - [PHP WebSocket Server](https://github.com/napengam/phpWebSocketServer): Server written in PHP to handle connections via websockets `wss://` or `ws://` and normal sockets over `ssl://`, `tcp://`
-- [Channels](https://channels.readthedocs.io/en/stable/index.html): Django library that adds support for WebSockets (and other protocols that require long running asynchronous connections).
-- [Channels](https://hexdocs.pm/phoenix/channels.html): Scalable real-time communication using WebSocket in Elixir Phoenix framework.
-- [LiveView](https://github.com/phoenixframework/phoenix_live_view): Real-time interactive web experiences through WebSocket in Elixir Phoenix framework.
+- [Django Channels](https://channels.readthedocs.io/en/stable/index.html): Django library that adds support for WebSockets (and other protocols that require long running asynchronous connections).
+- [(Phoenix) Channels](https://hexdocs.pm/phoenix/channels.html): Scalable real-time communication using WebSocket in Elixir Phoenix framework.
+- [Phoenix LiveView](https://github.com/phoenixframework/phoenix_live_view): Real-time interactive web experiences through WebSocket in Elixir Phoenix framework.
 - [Flask-SocketIO](https://flask-socketio.readthedocs.io/en/latest/): gives Flask applications access to low latency bi-directional communications between the clients and the server.
 - [Gorilla WebSocket](https://pkg.go.dev/github.com/gorilla/websocket): Gorilla WebSocket is a [Go](https://go.dev/) implementation of the WebSocket protocol.
 
diff --git a/files/en-us/web/api/websockets_api/using_websocketstream/index.md b/files/en-us/web/api/websockets_api/using_websocketstream/index.md
new file mode 100644
index 000000000000000..2ed559edbdbdbda
--- /dev/null
+++ b/files/en-us/web/api/websockets_api/using_websocketstream/index.md
@@ -0,0 +1,303 @@
+---
+title: Using WebSocketStream to write a client
+slug: Web/API/WebSockets_API/Using_WebSocketStream
+page-type: guide
+status:
+  - experimental
+  - non-standard
+---
+
+{{DefaultAPISidebar("WebSockets API")}}{{non-standard_header}}
+
+The {{domxref("WebSocketStream")}} API is a {{jsxref("Promise")}}-based alternative to {{domxref("WebSocket")}} for creating and using client-side WebSocket connections. `WebSocketStream` uses the [Streams API](/en-US/docs/Web/API/Streams_API) to handle receiving and sending messages, meaning that socket connections can take advantage of stream [backpressure](/en-US/docs/Web/API/Streams_API/Concepts#backpressure) automatically (no additional action required by the developer), regulating the speed of reading or writing to avoid bottlenecks in the application.
+
+This article explains how to use the {{domxref("WebSocketStream")}} API to create a WebSocket client.
+
+## Feature detection
+
+To check whether the `WebSocketStream` API is supported, you can use the following:
+
+```js
+if ("WebSocketStream" in self) {
+  // WebSocketStream is supported
+}
+```
+
+## Creating a WebSocketStream object
+
+To create a WebSocket client, you first need to create a new `WebSocketStream` instance using the {{domxref("WebSocketStream.WebSocketStream", "WebSocketStream()")}} constructor. In its simplest form, it takes the URL of the WebSocket server as an argument:
+
+```js
+const wss = new WebSocketStream("wss://example.com/wss");
+```
+
+It can also take an options object containing custom protocols and/or an {{domxref("AbortSignal")}} (see [Closing the connection](#closing_the_connection)):
+
+```js
+const controller = new AbortController();
+const chatWSS = new WebSocketStream("wss://example.com/chat", {
+  protocols: ["chat", "chatv2"],
+  signal: controller.signal,
+});
+```
+
+## Sending and receiving data
+
+The `WebSocketStream` instance has an {{domxref("WebSocketStream.opened", "opened")}} property — this returns a promise that fulfills with an object containing a {{domxref("ReadableStream")}} and a {{domxref("WritableStream")}} instance once the WebSocket connection is opened successfully:
+
+```js
+const { readable, writable } = await wss.opened;
+```
+
+Calling {{domxref("ReadableStream.getReader", "getReader()")}} and {{domxref("WritableStream.getWriter", "getWriter()")}} on these objects provides us with a {{domxref("ReadableStreamDefaultReader")}} and a {{domxref("WritableStreamDefaultWriter")}} respectively, which can be used to read from and write to the socket connection:
+
+```js
+const reader = readable.getReader();
+const writer = writable.getWriter();
+```
+
+To write data to the socket, you can use {{domxref("WritableStreamDefaultWriter.write()")}}:
+
+```js
+writer.write("My message");
+```
+
+To read data from the socket, you can continuously call {{domxref("ReadableStreamDefaultReader.read()")}} until the stream has finished, which is indicated by `done` being `true`:
+
+```js
+while (true) {
+  const { value, done } = await reader.read();
+  if (done) {
+    break;
+  }
+
+  // Process value in some way
+}
+```
+
+The browser automatically controls the rate at which the client receives and sends data by applying backpressure when needed. If data is arriving faster than the client can `read()` it, the underlying Streams API exerts backpressure on the server. In addition, `write()` operations will only proceed if it is safe to do so.
+
+## Closing the connection
+
+With `WebSocketStream`, the information previously available via the `WebSocket` {{domxref("WebSocket.close_event", "close")}} and {{domxref("WebSocket.error_event", "error")}} events is now available via the {{domxref("WebSocketStream.closed", "closed")}} property — this returns a promise that fulfills with an object containing the closing code (see the full list of [`CloseEvent` status codes](/en-US/docs/Web/API/CloseEvent/code#value)) and reason indicating why the server closed the connection:
+
+```js
+const { code, reason } = await wss.closed;
+```
+
+As mentioned earlier, the WebSocket connection can be closed using an {{domxref("AbortController")}}. The necessary {{domxref("AbortSignal")}} is passed to the `WebSocketStream` constructor during creation, and {{domxref("AbortController.abort()")}} can then be called when required:
+
+```js
+const controller = new AbortController();
+const wss = new WebSocketStream("wss://example.com/wss", {
+  signal: controller.signal,
+});
+
+// some time later
+
+controller.abort();
+```
+
+Alternatively you can use the {{domxref("WebSocketStream.close()")}} method to close a connection. This is mainly used if you wish to specify a custom code and/or reason:
+
+```js
+wss.close({
+  code: 4000,
+  reason: "Night draws to a close",
+});
+```
+
+> [!NOTE]
+> Depending on the server setup and status code you use, the server may choose to ignore a custom code in favor of a valid code that is correct for the closing reason.
+
+## A complete sample client
+
+To demonstrate basic usage of `WebSocketStream`, we've created a sample client. You can see the [full listing](#full_listing) at the bottom of the article, and follow along with the explanation below.
+
+> [!NOTE]
+> To get the example working, you'll also need a server component. We wrote our client to work along with the Deno server explained in [Writing a WebSocket server in JavaScript (Deno)](/en-US/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno), but any compatible server will do.
+
+The HTML for the demo is as follows. It includes informational [`<h2>`](/en-US/docs/Web/HTML/Element/Heading_Elements) and {{htmlelement("p")}} elements, a {{htmlelement("button")}} to close the WebSocket connection that is initially disabled, and a {{htmlelement("div")}} for us to write output messages into.
+
+```html
+<h2>WebSocketStream Test</h2>
+<p>Sends a ping every five seconds</p>
+<button id="close" disabled>Close socket connection</button>
+<div id="output"></div>
+```
+
+Now on to the JavaScript. First we grab references to the output `<div>` and the close `<button>`, and define a utility function that writes messages to the `<div>`:
+
+```js
+const output = document.querySelector("#output");
+const closeBtn = document.querySelector("#close");
+
+function writeToScreen(message) {
+  const pElem = document.createElement("p");
+  pElem.textContent = message;
+  output.appendChild(pElem);
+}
+```
+
+Next, we create an `if ... else` structure to feature detect `WebSocketStream` and output an informative message on non-supporting browsers:
+
+```js
+if (!("WebSocketStream" in self)) {
+  writeToScreen("Your browser does not support WebSocketStream");
+} else {
+  // supporting code path
+}
+```
+
+In the supporting code path, we begin by defining a variable containing the WebSocket server URL, and constructing a new `WebSocketServer` instance:
+
+```js
+const wsURL = "ws://127.0.0.1/";
+const wss = new WebSocketStream(wsURL);
+```
+
+> [!NOTE]
+> Best practice is to use secure WebSockets (`wss://`) in production apps. However, in this demo we are connecting to localhost, therefore we need to use the non-secure WebSocket protocol (`ws://`) for the example to work.
+
+The main bulk of our code is contained within the `start()` function, which we define and then immediately invoke. We await the {{domxref("WebSocketStream.opened", "opened")}} promise, then after it fulfills write a message to let the reader know the connection is successful and create {{domxref("ReadableStreamDefaultReader")}} and {{domxref("WritableStreamDefaultWriter")}} instances from the returned `readable` and `writable` properties.
+
+Next, we create a `start()` function that sends "ping" messages to the server and receives "pong" messages back, and invoke it. In the function body we await the `wss.opened` promise and create a reader and writer from its fulfillment values. Once the socket is open, we communicate that to the user and enable the close button. Next, we `write()` a `"ping"` value to the socket and communicate that to the user. At this point, the server will respond with a `"pong"` message. We await the `read()` of the response, communicate it to the user, then write another `"ping"` to the server after a timeout of 5 seconds. This continues the `"ping"`/`"pong"` loop indefinitely.
+
+```js
+async function start() {
+  const { readable, writable } = await wss.opened;
+  writeToScreen("CONNECTED");
+  closeBtn.disabled = false;
+  const reader = readable.getReader();
+  const writer = writable.getWriter();
+
+  writer.write("ping");
+  writeToScreen("SENT: ping");
+
+  while (true) {
+    const { value, done } = await reader.read();
+    writeToScreen(`RECEIVED: ${value}`);
+    if (done) {
+      break;
+    }
+
+    setTimeout(async () => {
+      try {
+        await writer.write("ping");
+        writeToScreen("SENT: ping");
+      } catch (e) {
+        writeToScreen(`Error writing to socket: ${e.message}`);
+      }
+    }, 5000);
+  }
+}
+
+start();
+```
+
+> [!NOTE]
+> The {{domxref("setTimeout")}} function wraps the `write()` call in a [`try...catch`](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) block to handle any errors that can arise if the application tries to write to the stream after it has been closed.
+
+We now include a promise-style code section to inform the user of the code and reason if the WebSocket connection is closed, as signalled by the {{domxref("WebSocketStream.closed", "closed")}} promise fulfilling:
+
+```js
+wss.closed.then((result) => {
+  writeToScreen(
+    `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
+  );
+  console.log("Socket closed", result.closeCode, result.reason);
+});
+```
+
+Finally, we add an event listener to the close button that closes the conenction using the `close()` method, with a code and custom reason. The function also disables the close button — we don't want users to press it once the connection is already closed.
+
+```js
+closeBtn.addEventListener("click", () => {
+  wss.close({
+    code: 1000,
+    reason: "That's all folks",
+  });
+
+  closeBtn.disabled = true;
+});
+```
+
+### Full listing
+
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>WebSocketStream Test</title>
+  </head>
+
+  <body>
+    <h2>WebSocketStream Test</h2>
+    <p>Sends a ping every five seconds</p>
+    <button id="close" disabled>Close socket connection</button>
+    <div id="output"></div>
+    <script>
+      const output = document.querySelector("#output");
+      const closeBtn = document.querySelector("#close");
+
+      function writeToScreen(message) {
+        const pElem = document.createElement("p");
+        pElem.textContent = message;
+        output.appendChild(pElem);
+      }
+
+      if (!("WebSocketStream" in self)) {
+        writeToScreen("Your browser does not support WebSocketStream");
+      } else {
+        const wsURL = "ws://127.0.0.1/";
+        const wss = new WebSocketStream(wsURL);
+
+        console.log(wss.url);
+
+        async function start() {
+          const { readable, writable, extensions, protocol } = await wss.opened;
+          writeToScreen("CONNECTED");
+          closeBtn.disabled = false;
+          const reader = readable.getReader();
+          const writer = writable.getWriter();
+
+          writer.write("ping");
+          writeToScreen("SENT: ping");
+
+          while (true) {
+            const { value, done } = await reader.read();
+            writeToScreen(`RECEIVED: ${value}`);
+            if (done) {
+              break;
+            }
+
+            setTimeout(() => {
+              writer.write("ping");
+              writeToScreen("SENT: ping");
+            }, 5000);
+          }
+        }
+
+        start();
+
+        wss.closed.then((result) => {
+          writeToScreen(
+            `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
+          );
+          console.log("Socket closed", result.closeCode, result.reason);
+        });
+
+        closeBtn.addEventListener("click", () => {
+          wss.close({
+            code: 1000,
+            reason: "That's all folks",
+          });
+
+          closeBtn.disabled = true;
+        });
+      }
+    </script>
+  </body>
+</html>
+```
diff --git a/files/en-us/web/api/websocketstream/close/index.md b/files/en-us/web/api/websocketstream/close/index.md
new file mode 100644
index 000000000000000..e5da648f510653a
--- /dev/null
+++ b/files/en-us/web/api/websocketstream/close/index.md
@@ -0,0 +1,71 @@
+---
+title: "WebSocketStream: close() method"
+short-title: close()
+slug: Web/API/WebSocketStream/close
+page-type: web-api-instance-method
+status:
+  - experimental
+  - non-standard
+browser-compat: api.WebSocketStream.close
+---
+
+{{APIRef("WebSockets API")}}{{non-standard_header}}
+
+The **`close()`** method of the
+{{domxref("WebSocketStream")}} interface closes the WebSocket connection. The method optionally accepts an object containing a custom code and/or reason indicating why the connection was closed.
+
+An alternative mechanism for closing a `WebSocketStream` is to specify an {{domxref("AbortSignal")}} in the [`signal`](/en-US/docs/Web/API/WebSocketStream/WebSocketStream#signal) option of the constructor upon creation. The associated {{domxref("AbortController")}} can then be used to close the WebSocket connection. This is generally the preferred mechanism. However, `close()` can be used if you wish to specify a custom code and/or reason.
+
+## Syntax
+
+```js-nolint
+close()
+close(options)
+```
+
+### Parameters
+
+- `options` {{optional_inline}}
+  - : An options object containing the following properties:
+    - `closeCode` {{optional_inline}}
+      - : A number representing the closing code (see the full list of [`CloseEvent` status codes](/en-US/docs/Web/API/CloseEvent/code#value)).
+    - `reason` {{optional_inline}}
+      - : A string representing a human-readable description of the reason why the socket connection is closed. The maximum allowed length for a `reason` string is 123 bytes. The string is automatically encoded as UTF-8 when the function is invoked.
+
+> [!NOTE]
+> Depending on the server setup and status code you use, the server may choose to ignore a custom code in favor of a valid code that is correct for the closing reason. Valid codes are 1000, and any code within the range 3000 to 4999, inclusive.
+
+### Return value
+
+None (`undefined`).
+
+### Exceptions
+
+- `SyntaxError` {{domxref("DOMException")}}
+  - : Thrown if the provided `reason` is longer than the maximum allowed length of 123 bytes.
+
+## Examples
+
+```js
+const wsURL = "wss://127.0.0.1/";
+const wss = new WebSocketStream(wsURL);
+
+setTimeout(() => {
+  wss.close({
+    code: 1000,
+    reason: "That's all folks",
+  });
+}, 10000);
+```
+
+## Specifications
+
+Not currently a part of any specification. See https://github.com/whatwg/websockets/pull/48 for standardization progress.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [WebSocketStream: integrating streams with the WebSocket API](https://developer.chrome.com/docs/capabilities/web-apis/websocketstream), developer.chrome.com (2020)
diff --git a/files/en-us/web/api/websocketstream/closed/index.md b/files/en-us/web/api/websocketstream/closed/index.md
new file mode 100644
index 000000000000000..333fd2cd9ff3861
--- /dev/null
+++ b/files/en-us/web/api/websocketstream/closed/index.md
@@ -0,0 +1,54 @@
+---
+title: "WebSocketStream: closed property"
+short-title: closed
+slug: Web/API/WebSocketStream/closed
+page-type: web-api-instance-property
+status:
+  - experimental
+  - non-standard
+browser-compat: api.WebSocketStream.closed
+---
+
+{{APIRef("WebSockets API")}}{{non-standard_header}}
+
+The **`closed`** read-only property of the
+{{domxref("WebSocketStream")}} interface returns a {{jsxref("Promise")}} that fulfills with an object once the socket connection is closed. The object contains the closing code and reason.
+
+## Value
+
+A promise, which fulfills with an object containing the following properties:
+
+- `closeCode`
+  - : A number representing the closing code (see the full list of [`CloseEvent` status codes](/en-US/docs/Web/API/CloseEvent/code#value)).
+- `reason`
+  - : A string representing a human-readable description of the reason why the socket connection was closed.
+
+The promise rejects if the WebSocket connection did not close cleanly (for a clean close, the associated TCP connection must be closed _after_ the WebSocket closing handshake is completed).
+
+## Examples
+
+```js
+const wsURL = "wss://127.0.0.1/";
+const wss = new WebSocketStream(wsURL);
+
+wss.closed.then((result) => {
+  writeToScreen(
+    `DISCONNECTED: code ${result.closeCode}, message "${result.reason}"`,
+  );
+  console.log("Socket closed", result.closeCode, result.reason);
+});
+```
+
+See [Using WebSocketStream to write a client](/en-US/docs/Web/API/WebSockets_API/Using_WebSocketStream) for a complete example with full explanation.
+
+## Specifications
+
+Not currently a part of any specification. See https://github.com/whatwg/websockets/pull/48 for standardization progress.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [WebSocketStream: integrating streams with the WebSocket API](https://developer.chrome.com/docs/capabilities/web-apis/websocketstream), developer.chrome.com (2020)
diff --git a/files/en-us/web/api/websocketstream/index.md b/files/en-us/web/api/websocketstream/index.md
new file mode 100644
index 000000000000000..462c2f47157b75e
--- /dev/null
+++ b/files/en-us/web/api/websocketstream/index.md
@@ -0,0 +1,95 @@
+---
+title: WebSocketStream
+slug: Web/API/WebSocketStream
+page-type: web-api-interface
+status:
+  - experimental
+  - non-standard
+browser-compat: api.WebSocketStream
+---
+
+{{APIRef("WebSockets API")}}{{non-standard_header}}
+
+The **`WebSocketStream`** interface of the {{domxref("WebSockets API", "WebSockets API", "", "nocode")}} is a promise-based API for connecting to a WebSocket server. It uses [streams](/en-US/docs/Web/API/Streams_API) to send and receive data on the connection, and can therefore take advantage of stream [backpressure](/en-US/docs/Web/API/Streams_API/Concepts#backpressure) automatically, regulating the speed of reading or writing to avoid bottlenecks in the application.
+
+{{InheritanceDiagram}}
+
+## Constructor
+
+- {{domxref("WebSocketStream.WebSocketStream", "WebSocketStream()")}}
+  - : Creates a new `WebSocketStream` object instance.
+
+## Instance properties
+
+- {{domxref("WebSocketStream.url", "url")}} {{ReadOnlyInline}}
+  - : Returns the URL of the WebSocket server that the `WebSocketStream` instance was created with.
+- {{domxref("WebSocketStream.closed", "closed")}} {{ReadOnlyInline}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with an object once the socket connection is closed. The object contains the closing code and reason as sent by the server.
+- {{domxref("WebSocketStream.opened", "opened")}} {{ReadOnlyInline}}
+  - : Returns a {{jsxref("Promise")}} that fulfills with an object once the socket connection is successfully opened. Among other features, this object contains a {{domxref("ReadableStream")}} and a {{domxref("WritableStream")}} instance for receiving and sending data on the connection.
+
+## Instance methods
+
+- {{domxref("WebSocketStream.close", "close()")}}
+  - : Closes the WebSocket connection.
+
+## Examples
+
+```js
+const output = document.querySelector("#output");
+
+function writeToScreen(message) {
+  const pElem = document.createElement("p");
+  pElem.textContent = message;
+  output.appendChild(pElem);
+}
+
+if (!("WebSocketStream" in self)) {
+  writeToScreen("Your browser does not support WebSocketStream");
+} else {
+  const wsURL = "ws://127.0.0.1/";
+  const wss = new WebSocketStream(wsURL);
+
+  console.log(wss.url);
+
+  async function start() {
+    const { readable, writable, extensions, protocol } = await wss.opened;
+    writeToScreen("CONNECTED");
+    closeBtn.disabled = false;
+    const reader = readable.getReader();
+    const writer = writable.getWriter();
+
+    writer.write("ping");
+    writeToScreen("SENT: ping");
+
+    while (true) {
+      const { value, done } = await reader.read();
+      writeToScreen(`RECEIVED: ${value}`);
+      if (done) {
+        break;
+      }
+
+      setTimeout(() => {
+        writer.write("ping");
+        writeToScreen("SENT: ping");
+      }, 5000);
+    }
+  }
+
+  start();
+}
+```
+
+See [Using WebSocketStream to write a client](/en-US/docs/Web/API/WebSockets_API/Using_WebSocketStream) for a complete example with full explanation.
+
+## Specifications
+
+Not currently a part of any specification. See https://github.com/whatwg/websockets/pull/48 for standardization progress.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [WebSocketStream: integrating streams with the WebSocket API](https://developer.chrome.com/docs/capabilities/web-apis/websocketstream), developer.chrome.com (2020)
diff --git a/files/en-us/web/api/websocketstream/opened/index.md b/files/en-us/web/api/websocketstream/opened/index.md
new file mode 100644
index 000000000000000..7526f783c11a5d5
--- /dev/null
+++ b/files/en-us/web/api/websocketstream/opened/index.md
@@ -0,0 +1,71 @@
+---
+title: "WebSocketStream: opened property"
+short-title: opened
+slug: Web/API/WebSocketStream/opened
+page-type: web-api-instance-property
+status:
+  - experimental
+  - non-standard
+browser-compat: api.WebSocketStream.opened
+---
+
+{{APIRef("WebSockets API")}}{{non-standard_header}}
+
+The **`opened`** read-only property of the
+{{domxref("WebSocketStream")}} interface returns a {{jsxref("Promise")}} that fulfills with an object once the socket connection is successfully opened. Among other features, this object contains a {{domxref("ReadableStream")}} and a {{domxref("WritableStream")}} instance for receiving and sending data on the connection.
+
+## Value
+
+A promise, which fulfills with an object containing the following properties:
+
+- `extensions`
+  - : A string representing any extensions applied to the `WebSocketStream`. Such extensions are not currently defined, but may be in the future. Currently returns an empty string.
+- `protocol`
+  - : A string representing the sub-protocol used to open the current WebSocket connection (chosen from the options specified in the [`protocols`](/en-US/docs/Web/API/WebSocketStream/WebSocketStream#protocols) option of the `WebSocketStream()` constructor). Returns an empty string if no sub-protocol has been used to open the connection (i.e. no sub-protocol options were included in the constructor call).
+- `readable`
+  - : A {{domxref("ReadableStream")}} instance. Call {{domxref("ReadableStream.getReader()")}} on it to obtain a {{domxref("ReadableStreamDefaultReader")}} instance that can be used to read incoming WebSocket data.
+- `writable`
+  - : A {{domxref("WritableStream")}} instance. Call {{domxref("WritableStream.getWriter()")}} on it to obtain a {{domxref("WritableStreamDefaultWriter")}} instance that can be used to write data to the WebSocket connection.
+
+The promise rejects if the WebSocket connection fails.
+
+## Examples
+
+```js
+const wsURL = "wss://127.0.0.1/";
+const wss = new WebSocketStream(wsURL);
+
+async function start() {
+  const { readable, writable, extensions, protocol } = await wss.opened;
+
+  const reader = readable.getReader();
+  const writer = writable.getWriter();
+
+  writer.write("ping");
+
+  while (true) {
+    const { value, done } = await reader.read();
+    if (done) {
+      break;
+    }
+
+    setTimeout(() => {
+      writer.write("ping");
+    }, 5000);
+  }
+}
+```
+
+See [Using WebSocketStream to write a client](/en-US/docs/Web/API/WebSockets_API/Using_WebSocketStream) for a complete example with full explanation.
+
+## Specifications
+
+Not currently a part of any specification. See https://github.com/whatwg/websockets/pull/48 for standardization progress.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [WebSocketStream: integrating streams with the WebSocket API](https://developer.chrome.com/docs/capabilities/web-apis/websocketstream), developer.chrome.com (2020)
diff --git a/files/en-us/web/api/websocketstream/url/index.md b/files/en-us/web/api/websocketstream/url/index.md
new file mode 100644
index 000000000000000..3761d3d14627ea9
--- /dev/null
+++ b/files/en-us/web/api/websocketstream/url/index.md
@@ -0,0 +1,40 @@
+---
+title: "WebSocketStream: url property"
+short-title: url
+slug: Web/API/WebSocketStream/url
+page-type: web-api-instance-property
+status:
+  - experimental
+  - non-standard
+browser-compat: api.WebSocketStream.url
+---
+
+{{APIRef("WebSockets API")}}{{non-standard_header}}
+
+The **`url`** read-only property of the
+{{domxref("WebSocketStream")}} interface returns the URL of the WebSocket server that the `WebSocketStream` instance was created with.
+
+## Value
+
+A string.
+
+## Examples
+
+```js
+const wss = new WebSocketStream("wss://example.com/wss");
+
+// Logs "example.com/wss" to the console
+console.log(wss.url);
+```
+
+## Specifications
+
+Not currently a part of any specification. See https://github.com/whatwg/websockets/pull/48 for standardization progress.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [WebSocketStream: integrating streams with the WebSocket API](https://developer.chrome.com/docs/capabilities/web-apis/websocketstream), developer.chrome.com (2020)
diff --git a/files/en-us/web/api/websocketstream/websocketstream/index.md b/files/en-us/web/api/websocketstream/websocketstream/index.md
new file mode 100644
index 000000000000000..d73e1a642ab8a66
--- /dev/null
+++ b/files/en-us/web/api/websocketstream/websocketstream/index.md
@@ -0,0 +1,78 @@
+---
+title: "WebSocketStream: WebSocketStream() constructor"
+short-title: WebSocketStream()
+slug: Web/API/WebSocketStream/WebSocketStream
+page-type: web-api-constructor
+status:
+  - experimental
+  - non-standard
+browser-compat: api.WebSocketStream.WebSocketStream
+---
+
+{{APIRef("WebSockets API")}}{{non-standard_header}}
+
+The **`WebSocketStream()`** constructor creates a new
+{{domxref("WebSocketStream")}} object instance.
+
+## Syntax
+
+```js-nolint
+new WebSocketStream(url)
+new WebSocketStream(url, options)
+```
+
+### Parameters
+
+- `url`
+  - : A string representing the URL of the WebSocket server you want to connect to with this `WebSocketStream` instance. Allowed URL schemes are `"ws"`, `"wss"`, `"http"`, and `"https"`.
+- `options` {{optional_inline}}
+  - : An object that can contain the following properties:
+    - `protocols` {{optional_inline}}
+      - : A single string or an array of strings representing the sub-protocol(s) that the client would like to use, for example `"chat"` or `"chatv2"`. Subprotocols may be selected from the [IANA WebSocket Subprotocol Name Registry](https://www.iana.org/assignments/websocket/websocket.xml#subprotocol-name) or may be custom names jointly understood by the client and the server. A single server can implement multiple WebSocket sub-protocols, and handle different types of interactions depending on the specified value. If it is omitted, an empty array is used by default. If `protocols` is included, the connection will only be established if the server reports that it has selected one of these sub-protocols.
+    - `signal` {{optional_inline}}
+      - : An {{domxref("AbortSignal")}} belonging to an {{domxref("AbortController")}} that you want to use to close the WebSocket connection.
+
+### Exceptions
+
+- `SyntaxError` {{domxref("DOMException")}}
+  - : Thrown if the URL scheme is not one of `"ws"`, `"wss"`, `"http"`, or `"https"`.
+
+## Examples
+
+The most basic example takes the URL of a WebSocket server as an argument:
+
+```js
+const wss = new WebSocketStream("wss://example.com/wss");
+```
+
+A more advanced example could also include an options object containing custom protocols and/or an {{domxref("AbortSignal")}}:
+
+```js
+const controller = new AbortController();
+const chatWSS = new WebSocketStream("wss://example.com/chat", {
+  protocols: ["chat", "chatv2"],
+  signal: controller.signal,
+});
+```
+
+At a later time, {{domxref("AbortController.abort()")}} can be called when required to close the connection:
+
+```js
+controller.abort();
+```
+
+Alternatively, you can use the {{domxref("WebSocketStream.close()")}} method to close a connection, however this is mainly needed if you wish to specify a custom code and/or reason for the server to report.
+
+See [Using WebSocketStream to write a client](/en-US/docs/Web/API/WebSockets_API/Using_WebSocketStream) for a complete example with full explanation.
+
+## Specifications
+
+Not currently a part of any specification. See https://github.com/whatwg/websockets/pull/48 for standardization progress.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [WebSocketStream: integrating streams with the WebSocket API](https://developer.chrome.com/docs/capabilities/web-apis/websocketstream), developer.chrome.com (2020)
diff --git a/files/jsondata/GroupData.json b/files/jsondata/GroupData.json
index 2488184fcb57c9f..1bd627d2a20efb0 100644
--- a/files/jsondata/GroupData.json
+++ b/files/jsondata/GroupData.json
@@ -2251,9 +2251,15 @@
         "/docs/Web/API/WebSockets_API/Writing_WebSocket_servers",
         "/docs/Web/API/WebSockets_API/Writing_WebSocket_server",
         "/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_Java",
-        "/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno"
+        "/docs/Web/API/WebSockets_API/Writing_a_WebSocket_server_in_JavaScript_Deno",
+        "/docs/Web/API/WebSockets_API/Using_WebSocketStream"
+      ],
+      "interfaces": [
+        "WebSocket",
+        "WebSocketStream",
+        "CloseEvent",
+        "MessageEvent"
       ],
-      "interfaces": ["WebSocket", "CloseEvent", "MessageEvent"],
       "methods": [],
       "properties": [],
       "events": []

From 050bcdba594e759c0a4dde172de5d334f5a3b20f Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Thu, 12 Sep 2024 12:02:27 -0700
Subject: [PATCH 20/26] Fixes: capture and autocomplete (#35845)

* Fixes: capture and autocomplete

* move capture to under file input type

* token list autocomplete value for textarea

* link to attribute

* Apply suggestions from code review

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>

---------

Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
---
 files/en-us/web/api/htmlinputelement/index.md             | 8 ++++----
 .../web/api/htmltextareaelement/autocomplete/index.md     | 5 ++++-
 files/en-us/web/html/element/textarea/index.md            | 3 ++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/files/en-us/web/api/htmlinputelement/index.md b/files/en-us/web/api/htmlinputelement/index.md
index cdbec43f7188db8..b7f9a09ce60db0f 100644
--- a/files/en-us/web/api/htmlinputelement/index.md
+++ b/files/en-us/web/api/htmlinputelement/index.md
@@ -162,6 +162,10 @@ Some properties only apply to input element types that support the corresponding
 
   - : A string that represents the element's [`accept`](/en-US/docs/Web/HTML/Element/input#accept) attribute, containing comma-separated list of file types that can be selected.
 
+- {{domxref("HTMLInputElement.capture", "capture")}}
+
+  - : A string that represents the element's [`capture`](/en-US/docs/Web/HTML/Element/input#capture) attribute, indicating the media capture input method in file upload controls.
+
 - {{domxref("HTMLInputElement.files", "files")}}
 
   - : A {{domxref("FileList")}} that represents the files selected for upload.
@@ -179,10 +183,6 @@ Some properties only apply to input element types that support the corresponding
 
   - : A string that represents the element's [`autocomplete`](/en-US/docs/Web/HTML/Element/input#autocomplete) attribute, indicating whether the value of the control can be automatically completed by the browser.
 
-- {{domxref("HTMLInputElement.capture", "capture")}}
-
-  - : A string that represents the element's [`capture`](/en-US/docs/Web/HTML/Element/input#capture) attribute, indicating the media capture input method in file upload controls.
-
 - {{domxref("HTMLInputElement.max", "max")}}
 
   - : A string that represents the element's [`max`](/en-US/docs/Web/HTML/Element/input#max) attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ([`min`](/en-US/docs/Web/HTML/Element/input#min) attribute) value.
diff --git a/files/en-us/web/api/htmltextareaelement/autocomplete/index.md b/files/en-us/web/api/htmltextareaelement/autocomplete/index.md
index b51975c7ae49358..6245ffad6a4c78e 100644
--- a/files/en-us/web/api/htmltextareaelement/autocomplete/index.md
+++ b/files/en-us/web/api/htmltextareaelement/autocomplete/index.md
@@ -12,7 +12,7 @@ The **`autocomplete`** property of the {{DOMxRef("HTMLTextAreaElement")}} interf
 
 ## Value
 
-A string that is `"on"`, `"off"`, or the empty string `""` if unspecified or set to an invalid value.
+A string representing the value of the `autocomplete` attribute (`"on"`, `"off"`, or a [`<token-list>`](/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens)) or the empty string (`""`) if unspecified.
 
 ## Examples
 
@@ -32,3 +32,6 @@ console.log(textArea.autocomplete);
 ## See also
 
 - {{HTMLElement("textarea")}}
+- HTML [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute
+- ARIA [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) attribute
+- [Turning off autocompletion](/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion)
diff --git a/files/en-us/web/html/element/textarea/index.md b/files/en-us/web/html/element/textarea/index.md
index 0d9b66fa1a77cda..b806436b31cb98f 100644
--- a/files/en-us/web/html/element/textarea/index.md
+++ b/files/en-us/web/html/element/textarea/index.md
@@ -34,8 +34,9 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Global_attrib
 
     - `off`: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.
     - `on`: The browser can automatically complete the value based on values that the user has entered during previous uses.
+    - [`<token-list>`](/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens): An ordered set of space-separated autofill detail tokens, optionally preceded by a sectioning token, a billing or shipping grouping token, and/or a token identifying the type of recipient.
 
-    If the `autocomplete` attribute is not specified on a `<textarea>` element, then the browser uses the `autocomplete` attribute value of the `<textarea>` element's form owner. The form owner is either the {{HTMLElement("form")}} element that this `<textarea>` element is a descendant of or the form element whose `id` is specified by the `form` attribute of the input element. For more information, see the [`autocomplete`](/en-US/docs/Web/HTML/Element/form#autocomplete) attribute in {{HTMLElement("form")}}.
+    `<textarea>` elements that don't specify the `autocomplete` attribute inherit the `autocomplete` `on` or `off` status set on the `<textarea>`'s form owner. The form owner is either the {{HTMLElement("form")}} element that this `<textarea>` element is a descendant of or the form element whose `id` is specified by the `form` attribute of the input element. For more information, see the [`autocomplete`](/en-US/docs/Web/HTML/Element/form#autocomplete) attribute in {{HTMLElement("form")}}.
 
 - `autocorrect` {{non-standard_inline}}
 

From a24234ea6552cbd126d20fbf61e8f2bb010e1f20 Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@weyl.org>
Date: Thu, 12 Sep 2024 12:09:26 -0700
Subject: [PATCH 21/26] New pages: seven HTMLInputElement reflective properties
 (#35848)

* New pages: six HTMLInputElement reflective properties

* New pages: six HTMLInputElement reflective properties

* New pages: seven HTMLInputElement reflective properties

* grammar nit

* update attribute/prop confusion
---
 .../web/api/htmlinputelement/accept/index.md  | 40 ++++++++++++++++++
 .../htmlinputelement/autocomplete/index.md    | 38 +++++++++++++++++
 .../web/api/htmlinputelement/capture/index.md | 41 +++++++++++++++++++
 .../web/api/htmlinputelement/pattern/index.md | 41 +++++++++++++++++++
 .../api/htmlinputelement/placeholder/index.md | 37 +++++++++++++++++
 .../api/htmlinputelement/readonly/index.md    | 41 +++++++++++++++++++
 .../api/htmlinputelement/required/index.md    | 41 +++++++++++++++++++
 7 files changed, 279 insertions(+)
 create mode 100644 files/en-us/web/api/htmlinputelement/accept/index.md
 create mode 100644 files/en-us/web/api/htmlinputelement/autocomplete/index.md
 create mode 100644 files/en-us/web/api/htmlinputelement/capture/index.md
 create mode 100644 files/en-us/web/api/htmlinputelement/pattern/index.md
 create mode 100644 files/en-us/web/api/htmlinputelement/placeholder/index.md
 create mode 100644 files/en-us/web/api/htmlinputelement/readonly/index.md
 create mode 100644 files/en-us/web/api/htmlinputelement/required/index.md

diff --git a/files/en-us/web/api/htmlinputelement/accept/index.md b/files/en-us/web/api/htmlinputelement/accept/index.md
new file mode 100644
index 000000000000000..f14ec80646d29cf
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/accept/index.md
@@ -0,0 +1,40 @@
+---
+title: "HTMLInputElement: accept property"
+short-title: accept
+slug: Web/API/HTMLInputElement/accept
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.accept
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`accept`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`accept`](/en-US/docs/Web/HTML/Element/input#accept) attribute, generally a comma-separated list of unique file type specifiers providing a hint for the expected file type for an [`<input>` of type `file`](/en-US/docs/Web/HTML/Element/input/file). If the attribute is not explicitly set, the `accept` property is an empty string.
+
+## Value
+
+A string representing the element's `accept` value or an empty string if no `accept` is explicitly set.
+
+## Example
+
+```js
+const inputElement = document.querySelector("#time");
+console.log(inputElement.accept); // the current value of the accept attribute
+inputElement.accept = ".doc,.docx,.xml,application/msword"; // sets the accept value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLInputElement.type")}}
+- {{domxref("HTMLInputElement.multiple")}}
+- {{domxref("HTMLInputElement.capture")}}
+- [File type specifiers](/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
+- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
+- [File API](/en-US/docs/Web/API/File_API)
diff --git a/files/en-us/web/api/htmlinputelement/autocomplete/index.md b/files/en-us/web/api/htmlinputelement/autocomplete/index.md
new file mode 100644
index 000000000000000..2d4d53ac84959a6
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/autocomplete/index.md
@@ -0,0 +1,38 @@
+---
+title: "HTMLInputElement: autocomplete property"
+short-title: autocomplete
+slug: Web/API/HTMLInputElement/autocomplete
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.autocomplete
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`autocomplete`** property of the {{DOMxRef("HTMLInputElement")}} interface indicates whether the value of the control can be automatically completed by the browser. It reflects the {{htmlelement("input")}} element's [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute.
+
+## Value
+
+A string; the value of the `autocomplete` attribute (`"on"`, `"off"`, a [`<token-list>`](/en-US/docs/Web/HTML/Attributes/autocomplete#token_list_tokens)), or the empty string `""` if unspecified.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("name");
+console.log(inputElement.autocomplete);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMxRef("HTMLInputElement.value")}}
+- HTML [`autocomplete`](/en-US/docs/Web/HTML/Attributes/autocomplete) attribute
+- ARIA [`aria-autocomplete`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-autocomplete) attribute
+- [Turning off autocompletion](/en-US/docs/Web/Security/Practical_implementation_guides/Turning_off_form_autocompletion)
diff --git a/files/en-us/web/api/htmlinputelement/capture/index.md b/files/en-us/web/api/htmlinputelement/capture/index.md
new file mode 100644
index 000000000000000..2efbae78b72190b
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/capture/index.md
@@ -0,0 +1,41 @@
+---
+title: "HTMLInputElement: capture property"
+short-title: capture
+slug: Web/API/HTMLInputElement/capture
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.capture
+---
+
+{{ApiRef("HTML DOM")}}
+
+The **`capture`** property of the {{domxref("HTMLInputElement")}} interface reflects the {{HTMLElement("input")}} element's [`capture`](/en-US/docs/Web/HTML/Attributes/capture) attribute. Only relevant to the [`<input>` of type `file`](/en-US/docs/Web/HTML/Element/input/file), the property and attribute specify whether, a new file should be captured from a user-facing (`user`) or outward facing (`environment`) camera or microphone. The type of file is defined the [`accept`](/en-US/docs/Web/HTML/Attributes/accept) attribute. If the attribute is not explicitly set, the `capture` property is an empty string.
+
+## Value
+
+A string; Generally either `user` or `environment`, or an empty string (`""`).
+
+## Example
+
+```js
+const inputElement = document.querySelector("avatar");
+console.log(inputElement.capture); // the current value of the capture attribute
+inputElement.capture = "user"; // sets the capture value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLInputElement.type")}}
+- {{domxref("HTMLInputElement.multiple")}}
+- {{domxref("HTMLInputElement.accept")}}
+- {{domxref("HTMLInputElement.files")}}
+- [File type specifiers](/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
+- [Using files from web applications](/en-US/docs/Web/API/File_API/Using_files_from_web_applications)
+- [File API](/en-US/docs/Web/API/File_API)
diff --git a/files/en-us/web/api/htmlinputelement/pattern/index.md b/files/en-us/web/api/htmlinputelement/pattern/index.md
new file mode 100644
index 000000000000000..db8e0931dc0c9b6
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/pattern/index.md
@@ -0,0 +1,41 @@
+---
+title: "HTMLInputElement: pattern property"
+short-title: pattern
+slug: Web/API/HTMLInputElement/pattern
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.pattern
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`pattern`** property of the {{DOMxRef("HTMLInputElement")}} interface represents a [regular expression](/en-US/docs/Web/JavaScript/Guide/Regular_expressions) a non-null {{HTMLElement("input")}} value should match. It reflects the {{htmlelement("input")}} element's [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute.
+
+Valid for `text`, `search`, `url`, `tel`, `email`, and `password` types, the `pattern` attribute defines a regular expression that the input's {{DOMxRef("HTMLInputElement.value", "value")}} must match in order for the value to pass [constraint validation](/en-US/docs/Web/HTML/Constraint_validation).
+
+If a non-`null` value doesn't conform to the constraints set by the `pattern` value, the {{domxref('ValidityState')}} object's read-only {{domxref('ValidityState.patternMismatch','patternMismatch')}} property will be true.
+
+## Value
+
+A string.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("year");
+console.log(input.pattern);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMXref("HTMLInputElement.value")}}
+- [Client-side validation](/en-US/docs/Web/HTML/Element/input#client-side_validation)
+- {{CSSXref(":valid")}} and {{CSSXref(":invalid")}} pseudo-classes
diff --git a/files/en-us/web/api/htmlinputelement/placeholder/index.md b/files/en-us/web/api/htmlinputelement/placeholder/index.md
new file mode 100644
index 000000000000000..a06f77be31b5ac9
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/placeholder/index.md
@@ -0,0 +1,37 @@
+---
+title: "HTMLInputElement: placeholder property"
+short-title: placeholder
+slug: Web/API/HTMLInputElement/placeholder
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.placeholder
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`placeholder`** property of the {{DOMxRef("HTMLInputElement")}} interface represents a hint to the user of what can be entered in the control. It reflects the {{htmlelement("input")}} element's [`placeholder`](/en-US/docs/Web/HTML/Element/input#placeholder) attribute.
+
+## Value
+
+A string.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("phone");
+console.log(input.placeholder);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMXref("HTMLInputElement.value")}}
+- {{cssxref("::placeholder")}} pseudo-element
+- {{CSSXref(":placeholder-shown")}} pseudo-class
diff --git a/files/en-us/web/api/htmlinputelement/readonly/index.md b/files/en-us/web/api/htmlinputelement/readonly/index.md
new file mode 100644
index 000000000000000..b9b020e7b275b36
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/readonly/index.md
@@ -0,0 +1,41 @@
+---
+title: "HTMLInputElement: readOnly property"
+short-title: readOnly
+slug: Web/API/HTMLInputElement/readOnly
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.readOnly
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`readOnly`** property of the {{DOMxRef("HTMLInputElement")}} interface indicates that the user cannot modify the value of the {{htmlelement("input")}}. It reflects the {{htmlelement("input")}} element's [`readonly`](/en-US/docs/Web/HTML/Element/input#readonly) boolean attribute; returning `true` if the attribute is present and `false` when omitted.
+
+Unlike a form control with a true {{domxref("HTMLInputElement.disabled", "disabled")}} property, a true `readOnly` property value does not prevent the user from clicking or selecting in the control.
+
+While the HTML `readonly` attribute is ignored if the type is `hidden`, `range`, `color`, `checkbox`, `radio`, `file`, `submit`, `reset`, `button`, and `image`, the `readOnly` property is `true` for these input types if the attribute is present, `false` otherwise.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("total");
+console.log(inputElement.readOnly);
+inputElement.readOnly = true;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMXref("HTMLInputElement.disabled")}}
+- {{cssxref(":read-only")}} pseudo-class
diff --git a/files/en-us/web/api/htmlinputelement/required/index.md b/files/en-us/web/api/htmlinputelement/required/index.md
new file mode 100644
index 000000000000000..5be32f7e326a2c7
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/required/index.md
@@ -0,0 +1,41 @@
+---
+title: "HTMLInputElement: required property"
+short-title: required
+slug: Web/API/HTMLInputElement/required
+page-type: web-api-instance-property
+browser-compat: api.HTMLInputElement.required
+---
+
+{{ APIRef("HTML DOM") }}
+
+The **`required`** property of the {{DOMxRef("HTMLInputElement")}} interface specifies that the user must fill in a value before submitting a form. It reflects the {{htmlelement("input")}} element's [`required`](/en-US/docs/Web/HTML/Element/input#required) attribute.
+
+While the HTML boolean `required` attribute is ignored if the type is `hidden`, `range`, `color`, `submit`, `reset`, `button`, and `image`, the `required` property is `true` for these input types if the attribute is present, `false` otherwise.
+
+If a required input doesn't have a value, the {{domxref('ValidityState')}} object's read-only {{domxref('ValidityState.valueMissing','valueMissing')}} property will be true.
+
+## Value
+
+A boolean.
+
+## Examples
+
+```js
+const inputElement = document.getElementById("name");
+console.log(inputElement.required);
+inputElement.required = true;
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{HTMLElement("input")}}
+- {{DOMXref("HTMLInputElement.validity")}}
+- {{cssxref(":required")}} pseudo-class

From 3a970f7ba10b9551446257eb146374a83f5c2597 Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Fri, 13 Sep 2024 03:27:59 +0530
Subject: [PATCH 22/26] fix(css): add more info to the ::part() page (#35509)

* fix(css): add more info to the ::part() page

* Apply suggestions from code review

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>

* Apply suggestions from code review

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

---------

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
---
 .../en-us/web/css/_doublecolon_part/index.md  | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/files/en-us/web/css/_doublecolon_part/index.md b/files/en-us/web/css/_doublecolon_part/index.md
index 49863161c16d760..50f0dcb82b2add0 100644
--- a/files/en-us/web/css/_doublecolon_part/index.md
+++ b/files/en-us/web/css/_doublecolon_part/index.md
@@ -7,7 +7,7 @@ browser-compat: css.selectors.part
 
 {{CSSRef}}
 
-The **`::part`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents any element within a [shadow tree](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) that has a matching [`part`](/en-US/docs/Web/HTML/Global_attributes#part) attribute.
+The **`::part`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) represents any element within a [shadow tree](/en-US/docs/Web/API/Web_components/Using_shadow_DOM) that has a matching [`part`](/en-US/docs/Web/HTML/Global_attributes/part) attribute.
 
 ```css
 custom-element::part(foo) {
@@ -15,6 +15,18 @@ custom-element::part(foo) {
 }
 ```
 
+## Descripton
+
+The global [`part`](/en-US/docs/Web/HTML/Global_attributes/part) attribute makes a shadow tree element visible to its parent DOM. The part names declared using the `part` attribute are used as the parameter of the `::part()` pseudo-element. In this way, you can apply CSS styles to elements in the shadow tree from outside of it.
+
+Part names are similar to CSS classes: multiple elements can have the same part name, and a single element can have multiple part names. All part names used in `::part()` pseudo-element must be present in the `part` value declared on the shadow tree element but the order of the part names doesn't matter, i.e., the selectors `::part(tab active)` and `::part(active tab)` are the same.
+
+The `::part()` pseudo-element is only visible to the parent DOM. This means that when a shadow tree is nested, the parts are not visible to any ancestors other than the direct parent. The [`exportparts`](/en-US/docs/Web/HTML/Global_attributes/exportparts) attribute solves this limitation by explicitly exporting already defined `part` names, making them globally stylable.
+
+[Pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) (such as `::part(label):hover`) can be appended to the `::part()` selector, but [structural pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes) that match based on tree information (such as `:empty`), rather than local element information (such as `:last-child`), cannot be appended.
+
+Additional pseudo-elements, such as `::before`, can be appended to the `::part()` selector, but additional `::part()` element can't be appended. For example, `::part(confirm-button)::part(active)` never matches anything, i.e, it is not the same as `::part(confirm-button active)`. This is because doing so would expose more structural information than is intended.
+
 ## Syntax
 
 ```css
@@ -40,9 +52,9 @@ custom-element::part(foo) {
       display: flex;
     }
   </style>
-  <div part="tab active">Tab 1</div>
-  <div part="tab">Tab 2</div>
-  <div part="tab">Tab 3</div>
+  <div part="tab active">Tab A</div>
+  <div part="tab">Tab B</div>
+  <div part="tab">Tab C</div>
 </template>
 
 <tabbed-custom-element></tabbed-custom-element>
@@ -52,38 +64,24 @@ custom-element::part(foo) {
 
 ```css
 tabbed-custom-element::part(tab) {
-  color: #0c0dcc;
-  border-bottom: transparent solid 2px;
+  color: blue;
+  border-bottom: transparent solid 4px;
 }
 
 tabbed-custom-element::part(tab):hover {
-  background-color: #0c0d19;
-  color: #ffffff;
-  border-color: #0c0d33;
-}
-
-tabbed-custom-element::part(tab):hover:active {
-  background-color: #0c0d33;
-  color: #ffffff;
-}
-
-tabbed-custom-element::part(tab):focus {
-  box-shadow:
-    0 0 0 1px #0a84ff inset,
-    0 0 0 1px #0a84ff,
-    0 0 0 4px rgb(10 132 255 / 30%);
+  background-color: black;
+  color: white;
 }
 
-tabbed-custom-element::part(active) {
-  color: #0060df;
-  border-color: #0a84ff !important;
+tabbed-custom-element::part(tab active) {
+  border-color: blue !important;
 }
 ```
 
 ### JavaScript
 
 ```js
-let template = document.querySelector("#tabbed-custom-element");
+const template = document.querySelector("#tabbed-custom-element");
 globalThis.customElements.define(
   template.id,
   class extends HTMLElement {

From 260f4700362dffe26227ad3b9cf15335916cef44 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith <brian@smith.berlin>
Date: Fri, 13 Sep 2024 01:07:32 +0200
Subject: [PATCH 23/26] feat(HTTP): Refresh request method pages (#35745)

* feat(http): minor update to request methods

* feat(http): refresh request method pages

* Update index.md

* PUT - summary sentence to match suggestions

* chore(http): format into as 'the <verb> HTTP method'

* Apply suggestions from code review

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>

* chore(http): improvements to syntax following reviewer feedback

* Options - heading to note

* Update files/en-us/web/http/methods/head/index.md

* chore(http): improvements following reviewer feedback

* chore(http): improvements following reviewer feedback, optional inline

* chore(http): make TRACE request return a 200 for illustration

* Update files/en-us/web/http/methods/head/index.md

Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>

---------

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Co-authored-by: Vadim Makeev <hi@pepelsbey.dev>
---
 .vscode/ignore-list.txt                       |  3 +
 files/en-us/web/http/methods/connect/index.md | 50 +++++++----
 files/en-us/web/http/methods/delete/index.md  | 63 ++++++++++----
 files/en-us/web/http/methods/get/index.md     | 51 +++++++++--
 files/en-us/web/http/methods/head/index.md    | 54 ++++++++++--
 files/en-us/web/http/methods/index.md         | 47 ++++++++---
 files/en-us/web/http/methods/options/index.md | 37 ++++++--
 files/en-us/web/http/methods/patch/index.md   | 84 +++++++++++++------
 files/en-us/web/http/methods/post/index.md    | 70 +++++++++++-----
 files/en-us/web/http/methods/put/index.md     | 31 ++++---
 files/en-us/web/http/methods/trace/index.md   | 57 +++++++++++--
 11 files changed, 416 insertions(+), 131 deletions(-)

diff --git a/.vscode/ignore-list.txt b/.vscode/ignore-list.txt
index 5393e3158c605ba..5b8bf9c17347399 100644
--- a/.vscode/ignore-list.txt
+++ b/.vscode/ignore-list.txt
@@ -1123,6 +1123,7 @@ Digi
 Digianswer
 dignissim
 Dijit
+dimoulis
 dinocons
 dinodescr
 Dinos
@@ -1663,6 +1664,7 @@ Freecodecamp
 Freemium
 Freetype
 Freitag
+Frida
 fringilla
 fringille
 fromcharcode
@@ -2368,6 +2370,7 @@ JXON
 Kadir
 Kadlec
 kaios
+Kahlo
 Kakao
 Kaku
 Kaply
diff --git a/files/en-us/web/http/methods/connect/index.md b/files/en-us/web/http/methods/connect/index.md
index e88255ea646e706..717b49c24928e5a 100644
--- a/files/en-us/web/http/methods/connect/index.md
+++ b/files/en-us/web/http/methods/connect/index.md
@@ -7,18 +7,25 @@ browser-compat: http.methods.CONNECT
 
 {{HTTPSidebar}}
 
-The **HTTP `CONNECT` method** starts two-way communications
-with the requested resource. It can be used to open a tunnel.
+The **`CONNECT`** HTTP method requests that a {{Glossary("Proxy server", "proxy")}} establish a HTTP tunnel to a destination server, and if successful, blindly forward data in both directions until the tunnel is closed.
 
-For example, the `CONNECT` method can be used to access websites that use
-{{Glossary("TLS")}} ({{Glossary("HTTPS")}}). The client asks an HTTP {{Glossary("Proxy server")}}
-to tunnel the [TCP](/en-US/docs/Glossary/TCP) connection to
-the desired destination. The proxy server then proceeds to make the connection on behalf of
-the client. Once the connection is established, the
-proxy server continues to relay the TCP stream to and
-from the client.
+The request target is unique to this method in that it consists of only the host and port number of the tunnel destination, separated by a colon (see [Syntax](#syntax) for details).
+Any [2XX successful response status code](/en-US/docs/Web/HTTP/Status#successful_responses) means that the proxy will switch to 'tunnel mode' and any data in the success response body is from the server identified by the request target.
 
-`CONNECT` is a hop-by-hop method.
+If a website is behind a proxy and it's enforced via network rules that all external traffic must pass through the proxy, the `CONNECT` method allows you to establish a {{Glossary("TLS")}} ({{Glossary("HTTPS")}}) connection with that website:
+
+- The client asks the proxy to tunnel the {{Glossary("TCP")}} connection to the desired destination.
+- The proxy server makes a secure connection to the server on behalf of the client.
+- Once the connection is established, the proxy server continues to relay the TCP stream to and from the client.
+
+Aside from enabling secure access to websites behind proxies, a HTTP tunnel provides a way to allow traffic that would otherwise be restricted (SSH or FTP) over the HTTP(S) protocol.
+
+`CONNECT` is a hop-by-hop method, meaning proxies will only forward the `CONNECT` request if there is another inbound proxy in front of the origin server since most origin servers do not implement `CONNECT`.
+
+> [!WARNING]
+> If you are running a proxy that supports `CONNECT`, restrict its use to a set of known ports or a configurable list of safe request targets.
+> There are significant risks in establishing a tunnel to arbitrary servers, particularly when the destination is a well-known or reserved TCP port that is not intended for Web traffic.
+> A loosely-configured proxy may be abused to forward traffic such as SMTP to relay spam email, for example.
 
 <table class="properties">
   <tbody>
@@ -54,13 +61,20 @@ from the client.
 ## Syntax
 
 ```http
-CONNECT www.example.com:443 HTTP/1.1
+CONNECT <host>:<port> HTTP/1.1
 ```
 
-## Example
+- `<host>`
+  - : A host which may be a registered hostname (e.g., `example.com`) or an IP address (IPv4, IPv6).
+- `<port>`
+  - : A port number in decimal (e.g., `80`, `443`). There is no default port, so a client **must** send one.
+
+## Examples
+
+### Proxy authorization
 
-Some proxy servers might need authority to create a tunnel. See also the
-{{HTTPHeader("Proxy-Authorization")}} header.
+A request for proxy servers that require authorization to create a tunnel looks as follows.
+See the {{HTTPHeader("Proxy-Authorization")}} header for more information.
 
 ```http
 CONNECT server.example.com:80 HTTP/1.1
@@ -78,5 +92,9 @@ Proxy-Authorization: basic aGVsbG86d29ybGQ=
 
 ## See also
 
-- {{Glossary("Proxy server")}}
-- {{HTTPHeader("Proxy-Authorization")}}
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
+- {{Glossary("Proxy server")}} glossary entry
+- {{HTTPHeader("Proxy-Authorization")}} header
+- [How To Use SSH Over An HTTP Proxy](https://www.dimoulis.net/posts/ssh-over-proxy/) dimoulis.net (2023)
diff --git a/files/en-us/web/http/methods/delete/index.md b/files/en-us/web/http/methods/delete/index.md
index 64d47bf8d6d6913..2d5354d61115402 100644
--- a/files/en-us/web/http/methods/delete/index.md
+++ b/files/en-us/web/http/methods/delete/index.md
@@ -7,8 +7,9 @@ browser-compat: http.methods.DELETE
 
 {{HTTPSidebar}}
 
-The **HTTP `DELETE` request method** deletes the specified
-resource.
+The **`DELETE`** HTTP method asks the server to delete a specified resource.
+
+The `DELETE` method has no defined semantics for the message body, so this should be empty.
 
 <table class="properties">
   <tbody>
@@ -44,37 +45,62 @@ resource.
 ## Syntax
 
 ```http
-DELETE /file.html HTTP/1.1
+DELETE <request-target>["?"<query>] HTTP/1.1
 ```
 
-## Example
+- `<request-target>`
+  - : Identifies the target resource of the request when combined with the information provided in the {{HTTPHeader("Host")}} header.
+    This is an absolute path (e.g., `/path/to/file.html`) in requests to an origin server, and an absolute URL in requests to proxies (e.g., `http://www.example.com/path/to/file.html`).
+- `<query>` {{optional_inline}}
+  - : An optional query component preceded by a question-mark `?`.
+    Often used to carry identifying information in the form of `key=value` pairs.
+
+## Examples
+
+### Successfully deleting a resource
 
-### Request
+The following request asks the server to delete the resource `file.html`:
 
 ```http
 DELETE /file.html HTTP/1.1
 Host: example.com
 ```
 
-### Responses
+If the request is successful, there are several possible [successful response status codes](/en-US/docs/Web/HTTP/Status#successful_responses).
+A {{HTTPStatus("204", "204 No Content")}} response means the request was successful and no additional information needs to be sent back to the client:
 
-If a `DELETE` method is successfully applied, there are several response
-status codes possible:
+```http
+HTTP/1.1 204 No Content
+Date: Wed, 04 Sep 2024 10:16:04 GMT
+```
 
-- A {{HTTPStatus("202")}} (`Accepted`) status code if the action will
-  likely succeed but has not yet been enacted.
-- A {{HTTPStatus("204")}} (`No Content`) status code if the action has been
-  enacted and no further information is to be supplied.
-- A {{HTTPStatus("200")}} (`OK`) status code if the action has been enacted
-  and the response message includes a representation describing the status.
+A {{HTTPStatus("200", "200 OK")}} response means the request was successful and the response body includes a representation describing the outcome:
 
 ```http
 HTTP/1.1 200 OK
-Date: Wed, 21 Oct 2015 07:28:00 GMT
+Content-Type: text/html; charset=UTF-8
+Date: Fri, 21 Jun 2024 14:18:33 GMT
+Content-Length: 1234
+
+<html>
+  <body>
+    <h1>File "file.html" deleted.</h1>
+  </body>
+</html>
+```
+
+A {{HTTPStatus("202", "202 Accepted")}} response means the request has been accepted and will probably succeed, but the resource has not yet been deleted by the server.
+
+```http
+HTTP/1.1 202 Accepted
+Date: Wed, 26 Jun 2024 12:00:00 GMT
+Content-Type: text/html; charset=UTF-8
+Content-Length: 1234
 
 <html>
   <body>
-    <h1>File deleted.</h1>
+    <h1>Deletion of "file.html" accepted.</h1>
+    <p>See <a href="http://example.com/tasks/123/status">the status monitor</a> for details.</p>
   </body>
 </html>
 ```
@@ -89,4 +115,7 @@ Date: Wed, 21 Oct 2015 07:28:00 GMT
 
 ## See also
 
-- HTTP status: {{HTTPStatus("200")}}, {{HTTPStatus("202")}}, {{HTTPStatus("204")}}
+- HTTP statuses: {{HTTPStatus("200")}}, {{HTTPStatus("202")}}, {{HTTPStatus("204")}}
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
diff --git a/files/en-us/web/http/methods/get/index.md b/files/en-us/web/http/methods/get/index.md
index f853ae77d99e430..aede84a5a327e6a 100644
--- a/files/en-us/web/http/methods/get/index.md
+++ b/files/en-us/web/http/methods/get/index.md
@@ -7,12 +7,12 @@ browser-compat: http.methods.GET
 
 {{HTTPSidebar}}
 
-The **HTTP `GET` method** requests a representation of the specified resource.
-Requests using `GET` should only be used to request data and shouldn't include {{Glossary("HTTP Content", "content")}}.
+The **`GET`** HTTP method requests a representation of the specified resource.
+Requests using `GET` should only be used to request data and shouldn't contain a body.
 
 > [!NOTE]
-> While not strictly prohibited by the specification, the semantics of sending a message body in `GET` requests are undefined.
-> Some systems may reject the request with a {{HTTPStatus("400")}} or another [4XX client error](/en-US/docs/Web/HTTP/Status#client_error_responses).
+> The semantics of sending a message body in `GET` requests are undefined.
+> Some servers may reject the request with a [4XX client error](/en-US/docs/Web/HTTP/Status#client_error_responses) response.
 
 <table class="properties">
   <tbody>
@@ -46,7 +46,40 @@ Requests using `GET` should only be used to request data and shouldn't include {
 ## Syntax
 
 ```http
-GET /index.html
+GET <request-target>["?"<query>] HTTP/1.1
+```
+
+- `<request-target>`
+  - : Identifies the target resource of the request when combined with the information provided in the {{HTTPHeader("Host")}} header.
+    This is an absolute path (e.g., `/path/to/file.html`) in requests to an origin server, and an absolute URL in requests to proxies (e.g., `http://www.example.com/path/to/file.html`).
+- `<query>` {{optional_inline}}
+  - : An optional query component preceded by a question-mark `?`.
+    Often used to carry identifying information in the form of `key=value` pairs.
+
+## Examples
+
+### Successfully retrieving a resource
+
+The following `GET` request asks for the resource at `example.com/contact`:
+
+```http
+GET /contact HTTP/1.1
+Host: example.com
+User-Agent: curl/8.6.0
+Accept: */*
+```
+
+The server sends back the resource with a {{HTTPStatus("200", "200 OK")}} status code, indicating success:
+
+```http
+HTTP/1.1 200 OK
+Content-Type: text/html; charset=UTF-8
+Date: Fri, 21 Jun 2024 14:18:33 GMT
+Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
+Content-Length: 1234
+
+<!doctype html>
+<!-- HTML content follows -->
 ```
 
 ## Specifications
@@ -59,6 +92,8 @@ GET /index.html
 
 ## See also
 
-- [HTTP Headers](/en-US/docs/Web/HTTP/Headers)
-- {{HTTPHeader("Range")}}
-- {{HTTPMethod("POST")}}
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
+- {{HTTPHeader("Range")}} header
+- {{HTTPMethod("POST")}} method
diff --git a/files/en-us/web/http/methods/head/index.md b/files/en-us/web/http/methods/head/index.md
index 95aa2d3cccfd627..f7652a9fdaeef24 100644
--- a/files/en-us/web/http/methods/head/index.md
+++ b/files/en-us/web/http/methods/head/index.md
@@ -7,13 +7,15 @@ browser-compat: http.methods.HEAD
 
 {{HTTPSidebar}}
 
-The **HTTP `HEAD` method** requests the [headers](/en-US/docs/Web/HTTP/Headers) that would be returned if the `HEAD` request's URL was instead requested with the HTTP {{HTTPMethod("GET")}} method. For example, if a URL might produce a large download, a `HEAD` request could read its {{HTTPHeader("Content-Length")}} header to check the filesize without actually downloading the file.
-
-> [!WARNING]
-> A response to a `HEAD` method _should not_ have a body. If it has one anyway, that body **must be** ignored: any {{glossary("Representation header", "representation headers")}} that might describe the erroneous body are instead assumed to describe the response which a similar `GET` request would have received.
+The **`HEAD`** HTTP method requests the metadata of a resource in the form of [headers](/en-US/docs/Web/HTTP/Headers) that the server would have sent if the {{HTTPMethod("GET")}} method was used instead.
+This method can be used in cases where a URL might produce a large download, for example, a `HEAD` request can read the {{HTTPHeader("Content-Length")}} header to check the file size before downloading the file with a `GET`.
 
 If the response to a `HEAD` request shows that a cached URL response is now outdated, the cached copy is invalidated even if no `GET` request was made.
 
+> [!WARNING]
+> If a response to a `HEAD` request has a body, the response body must be ignored.
+> Any {{glossary("Representation header", "representation headers")}} that describe the erroneous body are assumed to describe the response body that a `GET` request would have received.
+
 <table class="properties">
   <tbody>
     <tr>
@@ -48,7 +50,44 @@ If the response to a `HEAD` request shows that a cached URL response is now outd
 ## Syntax
 
 ```http
-HEAD /index.html
+HEAD <request-target>["?"<query>] HTTP/1.1
+```
+
+- `<request-target>`
+  - : Identifies the target resource of the request when combined with the information provided in the {{HTTPHeader("Host")}} header.
+    This is an absolute path (e.g., `/path/to/file.html`) in requests to an origin server, and an absolute URL in requests to proxies (e.g., `http://www.example.com/path/to/file.html`).
+- `<query>` {{optional_inline}}
+  - : An optional query component preceded by a question-mark `?`.
+    Often used to carry identifying information in the form of `key=value` pairs.
+
+## Examples
+
+### Successfully retrieving resource metadata
+
+The following `curl` command creates a `HEAD` request for `example.com`:
+
+```bash
+curl --head example.com
+```
+
+This is the equivalent to a `GET` request, except the server shouldn't include a message body in the response.
+It creates an HTTP request that looks like this:
+
+```http
+HEAD / HTTP/1.1
+Host: example.com
+User-Agent: curl/8.6.0
+Accept: */*
+```
+
+The server sends back a {{HTTPStatus("200", "200 OK")}} response comprised only of headers.
+The response is effectively metadata that describes the resource instead of the resource itself (some [caching](/en-US/docs/Web/HTTP/Caching) headers are omitted in this example for brevity):
+
+```http
+HTTP/1.1 200 OK
+Content-Type: text/html; charset=UTF-8
+Date: Wed, 04 Sep 2024 10:33:11 GMT
+Content-Length: 1234567
 ```
 
 ## Specifications
@@ -61,4 +100,7 @@ HEAD /index.html
 
 ## See also
 
-- {{HTTPMethod("GET")}}
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
+- {{HTTPMethod("GET")}} method
diff --git a/files/en-us/web/http/methods/index.md b/files/en-us/web/http/methods/index.md
index 2c25d6ab6047424..93682fcb5758ff1 100644
--- a/files/en-us/web/http/methods/index.md
+++ b/files/en-us/web/http/methods/index.md
@@ -1,5 +1,6 @@
 ---
 title: HTTP request methods
+short-title: Request methods
 slug: Web/HTTP/Methods
 page-type: landing-page
 browser-compat: http.methods
@@ -7,27 +8,48 @@ browser-compat: http.methods
 
 {{HTTPSidebar}}
 
-HTTP defines a set of **request methods** to indicate the desired action to be performed for a given resource. Although they can also be nouns, these request methods are sometimes referred to as _HTTP verbs_. Each of them implements a different semantic, but some common features are shared by a group of them: e.g. a request method can be {{glossary("Safe/HTTP", "safe")}}, {{glossary("idempotent")}}, or {{glossary("cacheable")}}.
+HTTP defines a set of **request methods** to indicate the purpose of the request and what is expected if the request is successful.
+Although they can also be nouns, these request methods are sometimes referred to as _HTTP verbs_.
+Each request method has it's own semantics, but some characteristics are shared across multiple methods, specifically request methods can be {{glossary("Safe/HTTP", "safe")}}, {{glossary("idempotent")}}, or {{glossary("cacheable")}}.
 
-- [`GET`](/en-US/docs/Web/HTTP/Methods/GET)
-  - : The `GET` method requests a representation of the specified resource. Requests using `GET` should only retrieve data.
-- [`HEAD`](/en-US/docs/Web/HTTP/Methods/HEAD)
-  - : The `HEAD` method asks for a response identical to a `GET` request, but without the response body.
-- [`POST`](/en-US/docs/Web/HTTP/Methods/POST)
+- {{HTTPMethod("GET")}}
+  - : The `GET` method requests a representation of the specified resource.
+    Requests using `GET` should only retrieve data and should not contain a request {{Glossary("HTTP Content", "content")}}.
+- {{HTTPMethod("HEAD")}}
+  - : The `HEAD` method asks for a response identical to a `GET` request, but without a response body.
+- {{HTTPMethod("POST")}}
   - : The `POST` method submits an entity to the specified resource, often causing a change in state or side effects on the server.
-- [`PUT`](/en-US/docs/Web/HTTP/Methods/PUT)
+- {{HTTPMethod("PUT")}}
   - : The `PUT` method replaces all current representations of the target resource with the request {{Glossary("HTTP Content", "content")}}.
-- [`DELETE`](/en-US/docs/Web/HTTP/Methods/DELETE)
+- {{HTTPMethod("DELETE")}}
   - : The `DELETE` method deletes the specified resource.
-- [`CONNECT`](/en-US/docs/Web/HTTP/Methods/CONNECT)
+- {{HTTPMethod("CONNECT")}}
   - : The `CONNECT` method establishes a tunnel to the server identified by the target resource.
-- [`OPTIONS`](/en-US/docs/Web/HTTP/Methods/OPTIONS)
+- {{HTTPMethod("OPTIONS")}}
   - : The `OPTIONS` method describes the communication options for the target resource.
-- [`TRACE`](/en-US/docs/Web/HTTP/Methods/TRACE)
+- {{HTTPMethod("TRACE")}}
   - : The `TRACE` method performs a message loop-back test along the path to the target resource.
-- [`PATCH`](/en-US/docs/Web/HTTP/Methods/PATCH)
+- {{HTTPMethod("PATCH")}}
   - : The `PATCH` method applies partial modifications to a resource.
 
+## Safe, idempotent, and cacheable request methods
+
+The following table lists HTTP request methods and their categorization in terms of safety, cacheability, and idempotency.
+
+| Method                    | Safe | Idempotent | Cacheable     |
+| ------------------------- | ---- | ---------- | ------------- |
+| {{HTTPMethod("GET")}}     | Yes  | Yes        | Yes           |
+| {{HTTPMethod("HEAD")}}    | Yes  | Yes        | Yes           |
+| {{HTTPMethod("OPTIONS")}} | Yes  | Yes        | No            |
+| {{HTTPMethod("TRACE")}}   | Yes  | Yes        | No            |
+| {{HTTPMethod("PUT")}}     | No   | Yes        | No            |
+| {{HTTPMethod("DELETE")}}  | No   | Yes        | No            |
+| {{HTTPMethod("POST")}}    | No   | No         | Conditional\* |
+| {{HTTPMethod("PATCH")}}   | No   | No         | Conditional\* |
+| {{HTTPMethod("CONNECT")}} | No   | No         | No            |
+
+\* `POST` and `PATCH` are cacheable when responses explicitly include [freshness](/en-US/docs/Web/HTTP/Caching) information and a matching {{HTTPHeader("Content-Location")}} header.
+
 ## Specifications
 
 {{Specifications}}
@@ -38,4 +60,5 @@ HTTP defines a set of **request methods** to indicate the desired action to be p
 
 ## See also
 
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
 - [HTTP headers](/en-US/docs/Web/HTTP/Headers)
diff --git a/files/en-us/web/http/methods/options/index.md b/files/en-us/web/http/methods/options/index.md
index b2a06076f953f77..6b2b0d729a88c03 100644
--- a/files/en-us/web/http/methods/options/index.md
+++ b/files/en-us/web/http/methods/options/index.md
@@ -7,7 +7,9 @@ browser-compat: http.methods.OPTIONS
 
 {{HTTPSidebar}}
 
-The **HTTP `OPTIONS` method** requests permitted communication options for a given URL or server. A client can specify a URL with this method, or an asterisk (`*`) to refer to the entire server.
+The **`OPTIONS`** HTTP method requests permitted communication options for a given URL or server.
+This can be used to test the allowed HTTP methods for a request, or to determine whether a request would succeed when making a CORS preflighted request.
+A client can specify a URL with this method, or an asterisk (`*`) to refer to the entire server.
 
 <table class="properties">
   <tbody>
@@ -41,10 +43,20 @@ The **HTTP `OPTIONS` method** requests permitted communication options for a giv
 ## Syntax
 
 ```http
-OPTIONS /index.html HTTP/1.1
-OPTIONS * HTTP/1.1
+OPTIONS *|<request-target>["?"<query>] HTTP/1.1
 ```
 
+The request target may be either in 'asterisk form' `*` indicating the whole server, or a request target as is common with other methods:
+
+- `*`
+  - : Indicates that the client wishes to request `OPTIONS` for the server as a whole, as opposed to a specific named resource of that server.
+- `<request-target>`
+  - : Identifies the target resource of the request when combined with the information provided in the {{HTTPHeader("Host")}} header.
+    This is an absolute path (e.g., `/path/to/file.html`) in requests to an origin server, and an absolute URL in requests to proxies (e.g., `http://www.example.com/path/to/file.html`).
+- `<query>` {{optional_inline}}
+  - : An optional query component preceded by a question-mark `?`.
+    Often used to carry identifying information in the form of `key=value` pairs.
+
 ## Examples
 
 ### Identifying allowed request methods
@@ -55,7 +67,16 @@ To find out which request methods a server supports, one can use the `curl` comm
 curl -X OPTIONS https://example.org -i
 ```
 
-The response then contains an {{HTTPHeader("Allow")}} header that holds the allowed methods:
+This creates the following HTTP request:
+
+```http
+OPTIONS / HTTP/2
+Host: example.org
+User-Agent: curl/8.7.1
+Accept: */*
+```
+
+The response contains an {{HTTPHeader("Allow")}} header that holds the allowed methods:
 
 ```http
 HTTP/1.1 204 No Content
@@ -108,9 +129,8 @@ Keep-Alive: timeout=2, max=100
 Connection: Keep-Alive
 ```
 
-## Status Code
-
-Both {{HTTPStatus("200")}} OK and {{HTTPStatus("204")}} No Content are [permitted status codes](https://fetch.spec.whatwg.org/#ref-for-ok-status), but some browsers incorrectly believe `204 No Content` applies to the resource and do not send the subsequent request to fetch it.
+> [!NOTE]
+> Both {{HTTPStatus("200", "200 OK")}} and {{HTTPStatus("204", "204 No Content")}} are [permitted status codes](https://fetch.spec.whatwg.org/#ref-for-ok-status), but some browsers incorrectly believe `204 No Content` applies to the resource and do not send a subsequent request to fetch it.
 
 ## Specifications
 
@@ -122,5 +142,8 @@ Both {{HTTPStatus("200")}} OK and {{HTTPStatus("204")}} No Content are [permitte
 
 ## See also
 
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
 - {{HTTPHeader("Allow")}} header
 - [CORS](/en-US/docs/Web/HTTP/CORS)
diff --git a/files/en-us/web/http/methods/patch/index.md b/files/en-us/web/http/methods/patch/index.md
index 9ec46ba0a66bbdc..900733573ffc3e8 100644
--- a/files/en-us/web/http/methods/patch/index.md
+++ b/files/en-us/web/http/methods/patch/index.md
@@ -7,19 +7,18 @@ spec-urls: https://www.rfc-editor.org/rfc/rfc5789
 
 {{HTTPSidebar}}
 
-The **HTTP `PATCH` request method** applies partial modifications to a resource.
+The **`PATCH`** HTTP method applies partial modifications to a resource.
 
 `PATCH` is somewhat analogous to the "update" concept found in {{Glossary("CRUD")}} (in general, HTTP is different than {{Glossary("CRUD")}}, and the two should not be confused).
 
-A `PATCH` request is considered a set of instructions on how to modify a resource. Contrast this with {{HTTPMethod("PUT")}}; which is a complete representation of a resource.
+In comparison with {{HTTPMethod("PUT")}}, a `PATCH` serves as a set of instructions for modifying a resource, whereas `PUT` represents a complete replacement of the resource.
+A `PUT` request is always {{Glossary("idempotent")}} (repeating the same request multiple times results in the resource remaining in the same state), whereas a `PATCH` request may not always be idempotent.
+For instance, if a resource includes an auto-incrementing counter, a `PUT` request will overwrite the counter (since it replaces the entire resource), but a `PATCH` request may not.
 
-A `PATCH` is not necessarily idempotent, although it can be. Contrast this with {{HTTPMethod("PUT")}}; which is always idempotent. The word "idempotent" means that any number of repeated, identical requests will leave the resource in the same state. For example if an auto-incrementing counter field is an integral part of the resource, then a {{HTTPMethod("PUT")}} will naturally overwrite it (since it overwrites everything), but not necessarily so for `PATCH`.
+Like {{HTTPMethod("POST")}}, a `PATCH` request can potentially have side effects on other resources.
 
-`PATCH` (like {{HTTPMethod("POST")}}) _may_ have side-effects on other resources.
-
-To find out whether a server supports `PATCH`, a server can advertise its support by adding it to the list in the {{HTTPHeader("Allow")}} or {{HTTPHeader("Access-Control-Allow-Methods")}} (for [CORS](/en-US/docs/Web/HTTP/CORS)) response headers.
-
-Another (implicit) indication that `PATCH` is allowed, is the presence of the {{HTTPHeader("Accept-Patch")}} header, which specifies the patch document formats accepted by the server.
+A server can advertise support for `PATCH` by adding it to the list in the {{HTTPHeader("Allow")}} or {{HTTPHeader("Access-Control-Allow-Methods")}} (for [CORS](/en-US/docs/Web/HTTP/CORS)) response headers.
+Another implicit indication that `PATCH` is supported is the {{HTTPHeader("Accept-Patch")}} header (usually after an {{HTTPMethod("OPTIONS")}} request on a resource), which lists the media-types the server is able to understand in a `PATCH` request for a resource.
 
 <table class="properties">
   <tbody>
@@ -55,32 +54,62 @@ Another (implicit) indication that `PATCH` is allowed, is the presence of the {{
 ## Syntax
 
 ```http
-PATCH /file.txt HTTP/1.1
+PATCH <request-target>["?"<query>] HTTP/1.1
 ```
 
-## Example
+- `<request-target>`
+  - : Identifies the target resource of the request when combined with the information provided in the {{HTTPHeader("Host")}} header.
+    This is an absolute path (e.g., `/path/to/file.html`) in requests to an origin server, and an absolute URL in requests to proxies (e.g., `http://www.example.com/path/to/file.html`).
+- `<query>` {{optional_inline}}
+  - : An optional query component preceded by a question-mark `?`.
+    Often used to carry identifying information in the form of `key=value` pairs.
+
+## Examples
+
+### Successfully modifying a resource
+
+Assume there is a resource on the server representing a user with a numeric ID of `123` in the following format:
+
+```json
+{
+  "firstName": "Example",
+  "LastName": "User",
+  "userId": 123,
+  "signupDate": "2024-09-09T21:48:58Z",
+  "status": "active",
+  "registeredDevice": {
+    "id": 1,
+    "name": "personal",
+    "manufacturer": {
+      "name": "Hardware corp"
+    }
+  }
+}
+```
 
-### Request
+Instead of sending a JSON object to fully overwrite a resource, a `PATCH` modifies only specific parts of the resource.
+This request updates the `status` field:
 
 ```http
-PATCH /file.txt HTTP/1.1
-Host: www.example.com
-Content-Type: application/example
-If-Match: "e0023aa4e"
-Content-Length: 100
-
-[description of changes]
+PATCH /users/123 HTTP/1.1
+Host: example.com
+Content-Type: application/json
+Content-Length: 27
+Authorization: Bearer ABC123
+
+{
+  "status": "suspended"
+}
 ```
 
-### Response
-
-A successful response is indicated by any [2xx](https://httpwg.org/specs/rfc9110.html#status.2xx) status code.
-
-In the example below a {{HTTPStatus("204")}} response code is used, because the response does not contain a body (alternatively, a {{HTTPStatus("200")}} response that contains a body with information about the action could be used instead).
+The interpretation and authentication of the `PATCH` request depend on the implementation.
+Success can be indicated by any of the [successful response status codes](/en-US/docs/Web/HTTP/Status#successful_responses).
+In this example, a {{HTTPStatus("204", "204 No Content")}} is used as there's no need to transmit a body with additional context about the operation.
+An {{HTTPHeader("ETag")}} is provided so the caller can perform a [conditional request](/en-US/docs/Web/HTTP/Conditional_requests) in future:
 
 ```http
 HTTP/1.1 204 No Content
-Content-Location: /file.txt
+Content-Location: /users/123
 ETag: "e0023aa4f"
 ```
 
@@ -90,6 +119,9 @@ ETag: "e0023aa4f"
 
 ## See also
 
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
 - {{HTTPStatus("204")}}
-- {{HTTPHeader("Allow")}}, {{HTTPHeader("Access-Control-Allow-Methods")}}
-- {{HTTPHeader("Accept-Patch")}} – specifies the patch document formats accepted by the server.
+- {{HTTPHeader("Allow")}}, {{HTTPHeader("Access-Control-Allow-Methods")}} headers
+- {{HTTPHeader("Accept-Patch")}} – specifies the patch document formats accepted by the server
diff --git a/files/en-us/web/http/methods/post/index.md b/files/en-us/web/http/methods/post/index.md
index e52ee54ee5f2cf6..0579ec23d9a674b 100644
--- a/files/en-us/web/http/methods/post/index.md
+++ b/files/en-us/web/http/methods/post/index.md
@@ -7,23 +7,29 @@ browser-compat: http.methods.POST
 
 {{HTTPSidebar}}
 
-The **HTTP `POST` method** sends data to the server. The type of the body of the request is indicated by the {{HTTPHeader("Content-Type")}} header.
+The **`POST`** HTTP method sends data to the server. The type of the body of the request is indicated by the {{HTTPHeader("Content-Type")}} header.
 
-The difference between {{HTTPMethod("PUT")}} and `POST` is that `PUT` is idempotent: calling it once or several times successively has the same effect (that is no _side_ effect), where successive identical `POST` may have additional effects, like passing an order several times.
+The difference between {{HTTPMethod("PUT")}} and `POST` is that `PUT` is {{Glossary("idempotent")}}: calling it once is no different from calling it several times successively (there are no _side_ effects).
+Successive identical `POST` requests may have additional effects, such as creating the same order several times.
 
-A `POST` request is typically sent via an [HTML form](/en-US/docs/Learn/Forms) and results in a change on the server. In this case, the content type is selected by putting the adequate string in the [`enctype`](/en-US/docs/Web/HTML/Element/form#enctype) attribute of the {{HTMLElement("form")}} element or the [`formenctype`](/en-US/docs/Web/HTML/Element/input#formenctype) attribute of the {{HTMLElement("input") }} or {{HTMLElement("button")}} elements:
+[HTML forms](/en-US/docs/Learn/Forms) typically send data using `POST` and this usually results in a change on the server.
+For HTML forms the format/encoding of the body content is determined by the [`enctype`](/en-US/docs/Web/HTML/Element/form#enctype) attribute of the {{HTMLElement("form")}} element or the [`formenctype`](/en-US/docs/Web/HTML/Element/input#formenctype) attribute of the {{HTMLElement("input") }} or {{HTMLElement("button")}} elements.
+The encoding may be one of the following:
 
-- `application/x-www-form-urlencoded`: the keys and values are encoded in key-value tuples separated by `'&'`, with a `'='` between the key and the value. Non-alphanumeric characters in both keys and values are {{Glossary("Percent-encoding", "percent-encoded")}}: this is the reason why this type is not suitable to use with binary data (use `multipart/form-data` instead)
-- `multipart/form-data`: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part. The keys are given in the `Content-Disposition` header of each part.
+- `application/x-www-form-urlencoded`: the keys and values are encoded in key-value tuples separated by an ampersand (`&`), with an equals symbol (`=`) between the key and the value (e.g., `firstname=Frida&lastname=Kahlo`).
+  Non-alphanumeric characters in both keys and values are {{Glossary("Percent-encoding", "percent-encoded")}}: this is the reason why this type is not suitable to use with binary data and you should use `multipart/form-data` for this purpose instead.
+- `multipart/form-data`: each value is sent as a block of data ("body part"), with a user agent-defined delimiter (for example, `boundary="delimiter12345"`) separating each part.
+  The keys are described in the {{HTTPHeader("Content-Disposition")}} header of each part or block of data.
 - `text/plain`
 
-When the `POST` request is sent via a method other than an HTML form, such as a {{domxref("Window/fetch", "fetch()")}} call, the body can take any type. As described in the HTTP 1.1 specification, `POST` is designed to allow a uniform method to cover the following functions:
+When the `POST` request is sent following a {{domxref("Window/fetch", "fetch()")}} call, or for any other reason than an HTML form, the body can be any type.
+As described in the HTTP 1.1 specification, `POST` is designed to allow a uniform method to cover the following functions:
 
 - Annotation of existing resources
-- Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles;
-- Adding a new user through a signup modal;
-- Providing a block of data, such as the result of submitting a form, to a data-handling process;
-- Extending a database through an append operation.
+- Posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles
+- Adding a new user through a signup form
+- Providing a block of data, such as the result of submitting a form, to a data-handling process
+- Extending a database through an append operation
 
 <table class="properties">
   <tbody>
@@ -59,40 +65,55 @@ When the `POST` request is sent via a method other than an HTML form, such as a
 ## Syntax
 
 ```http
-POST /test
+POST <request-target>["?"<query>] HTTP/1.1
 ```
 
-## Example
+- `<request-target>`
+  - : Identifies the target resource of the request when combined with the information provided in the {{HTTPHeader("Host")}} header.
+    This is an absolute path (e.g., `/path/to/file.html`) in requests to an origin server, and an absolute URL in requests to proxies (e.g., `http://www.example.com/path/to/file.html`).
+- `<query>` {{optional_inline}}
+  - : An optional query component preceded by a question-mark `?`.
+    Often used to carry identifying information in the form of `key=value` pairs.
 
-A simple form using the default `application/x-www-form-urlencoded` content type:
+## Examples
+
+### URL-encoded form submission
+
+A form using `application/x-www-form-urlencoded` content encoding (the default) sends a request where the body contains the form data in `key=value` pairs, with each pair separated by an `&` symbol, as shown below:
 
 ```http
 POST /test HTTP/1.1
-Host: foo.example
+Host: example.com
 Content-Type: application/x-www-form-urlencoded
 Content-Length: 27
 
 field1=value1&field2=value2
 ```
 
-A form using the `multipart/form-data` content type:
+### Multipart form submission
+
+The `multipart/form-data` encoding is used when a form includes files or a lot of data.
+This request body delineates each part of the form using a boundary string.
+An example of a request in this format:
 
 ```http
 POST /test HTTP/1.1
-Host: foo.example
-Content-Type: multipart/form-data;boundary="boundary"
+Host: example.com
+Content-Type: multipart/form-data;boundary="delimiter12345"
 
---boundary
+--delimiter12345
 Content-Disposition: form-data; name="field1"
 
 value1
---boundary
+--delimiter12345
 Content-Disposition: form-data; name="field2"; filename="example.txt"
 
 value2
---boundary--
+--delimiter12345--
 ```
 
+The {{HTTPHeader("Content-Disposition")}} header indicates how the form data should be processed, specifying the field `name` and `filename`, if appropriate.
+
 ## Specifications
 
 {{Specifications}}
@@ -103,6 +124,9 @@ value2
 
 ## See also
 
-- {{HTTPHeader("Content-Type")}}
-- {{HTTPHeader("Content-Disposition")}}
-- {{HTTPMethod("GET")}}
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
+- {{HTTPHeader("Content-Type")}} header
+- {{HTTPHeader("Content-Disposition")}} header
+- {{HTTPMethod("GET")}} method
diff --git a/files/en-us/web/http/methods/put/index.md b/files/en-us/web/http/methods/put/index.md
index df27e674ff53c64..794e92d4835e5e0 100644
--- a/files/en-us/web/http/methods/put/index.md
+++ b/files/en-us/web/http/methods/put/index.md
@@ -7,9 +7,9 @@ browser-compat: http.methods.PUT
 
 {{HTTPSidebar}}
 
-The **HTTP `PUT` request method** creates a new resource or replaces a representation of the target resource with the request {{Glossary("HTTP Content", "content")}}.
+The **`PUT`** HTTP method creates a new resource or replaces a representation of the target resource with the request {{Glossary("HTTP Content", "content")}}.
 
-The difference between `PUT` and {{HTTPMethod("POST")}} is that `PUT` is idempotent: calling it once or several times successively has the same effect (that is no _side_ effect), whereas successive identical {{HTTPMethod("POST")}} requests may have additional effects, akin to placing an order several times.
+The difference between `PUT` and {{HTTPMethod("POST")}} is that `PUT` is {{Glossary("idempotent")}}: calling it once is no different from calling it several times successively (there are no _side_ effects).
 
 <table class="properties">
   <tbody>
@@ -45,12 +45,21 @@ The difference between `PUT` and {{HTTPMethod("POST")}} is that `PUT` is idempot
 ## Syntax
 
 ```http
-PUT /new.html HTTP/1.1
+PUT <request-target>["?"<query>] HTTP/1.1
 ```
 
-## Example
+- `<request-target>`
+  - : Identifies the target resource of the request when combined with the information provided in the {{HTTPHeader("Host")}} header.
+    This is an absolute path (e.g., `/path/to/file.html`) in requests to an origin server, and an absolute URL in requests to proxies (e.g., `http://www.example.com/path/to/file.html`).
+- `<query>` {{optional_inline}}
+  - : An optional query component preceded by a question-mark `?`.
+    Often used to carry identifying information in the form of `key=value` pairs.
+
+## Examples
 
-### Request
+### Successfully creating a resource
+
+The following `PUT` request asks to create a resource at `example.com/new.html` with the content `<p>New File</p>`:
 
 ```http
 PUT /new.html HTTP/1.1
@@ -61,16 +70,14 @@ Content-length: 16
 <p>New File</p>
 ```
 
-### Responses
-
-If the target resource does not have a current representation and the `PUT` request successfully creates one, then the origin server must inform the user agent by sending a {{HTTPStatus("201")}} (`Created`) response.
+If the target resource **does not** have a current representation and the `PUT` request successfully creates one, then the origin server must send a {{HTTPStatus("201", "201 Created")}} response:
 
 ```http
 HTTP/1.1 201 Created
 Content-Location: /new.html
 ```
 
-If the target resource does have a current representation and that representation is successfully modified in accordance with the state of the enclosed representation, then the origin server must send either a {{HTTPStatus("200")}} (`OK`) or a {{HTTPStatus("204")}} (`No Content`) response to indicate successful completion of the request.
+If the target resource **does** have a current representation and that representation is successfully modified with the state in the request, the origin server must send either a {{HTTPStatus("200", "200 OK")}} or a {{HTTPStatus("204", "204 No Content")}} to indicate successful completion of the request:
 
 ```http
 HTTP/1.1 204 No Content
@@ -87,5 +94,7 @@ Content-Location: /existing.html
 
 ## See also
 
-- {{HTTPStatus("201")}}
-- {{HTTPStatus("204")}}
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
+- {{HTTPStatus("201", "201 Created")}}, {{HTTPStatus("204", "204 No Content")}} response statuses
diff --git a/files/en-us/web/http/methods/trace/index.md b/files/en-us/web/http/methods/trace/index.md
index c4c1c5ff84b4f00..206be0fa4b4af64 100644
--- a/files/en-us/web/http/methods/trace/index.md
+++ b/files/en-us/web/http/methods/trace/index.md
@@ -7,11 +7,14 @@ spec-urls: https://www.rfc-editor.org/rfc/rfc9110#TRACE
 
 {{HTTPSidebar}}
 
-The **HTTP `TRACE` method** performs a message loop-back test along the path to the target resource, providing a useful debugging mechanism.
+The **`TRACE`** HTTP method performs a message loop-back test along the path to the target resource.
 
-The final recipient of the request should reflect the message received, excluding any fields that might include sensitive data, back to the client as the message body of a {{HTTPStatus("200")}} (`OK`) response with a {{HTTPHeader("Content-Type")}} of `message/http`. The final recipient is either the origin server or the first server to receive a {{HTTPHeader("Max-Forwards")}} value of 0 in the request.
+The final recipient of the request should reflect the message as received (excluding any fields that might include sensitive data) back to the client as the message body of a {{HTTPStatus("200", "200 OK")}} response with a {{HTTPHeader("Content-Type")}} of `message/http`.
+The final recipient is either the origin server or the first server to receive a {{HTTPHeader("Max-Forwards")}} value of `0` in the request.
 
-Note that the client must not send content in the request, or generate fields that might include sensitive data, such as stored user credentials or cookies.
+The client must not send {{Glossary("HTTP Content", "content")}} in the request, or generate headers that might include sensitive data such as user credentials or cookies.
+Not all servers implement the `TRACE` method, and some server owners have historically disallowed the use of the `TRACE` method due to security concerns.
+In such cases, a {{HTTPStatus("405", "405 Method Not Allowed")}} [client error response](/en-US/docs/Web/HTTP/Status#client_error_responses) will be sent.
 
 <table class="properties">
   <tbody>
@@ -45,7 +48,48 @@ Note that the client must not send content in the request, or generate fields th
 ## Syntax
 
 ```http
-TRACE /index.html
+TRACE <request-target>["?"<query>] HTTP/1.1
+```
+
+- `<request-target>`
+  - : Identifies the target resource of the request when combined with the information provided in the {{HTTPHeader("Host")}} header.
+    This is an absolute path (e.g., `/path/to/file.html`) in requests to an origin server, and an absolute URL in requests to proxies (e.g., `http://www.example.com/path/to/file.html`).
+- `<query>` {{optional_inline}}
+  - : An optional query component preceded by a question-mark `?`.
+    Often used to carry identifying information in the form of `key=value` pairs.
+
+## Examples
+
+### Successful TRACE request
+
+A `TRACE` request can be performed using `curl`:
+
+```bash
+curl -v -X TRACE example.com
+```
+
+This produces the following HTTP request:
+
+```http
+TRACE / HTTP/1.1
+Host: example.com
+User-Agent: curl/8.7.1
+Accept: */*
+```
+
+A {{HTTPStatus("200", "200 OK")}} response with the request headers contained in response body is sent back to the client:
+
+```http
+HTTP/1.1 200 OK
+Content-Length: 123
+Date: Wed, 04 Sep 2024 11:50:24 GMT
+Server: Apache/2.4.59 (Unix)
+Content-Type: message/http
+
+TRACE / HTTP/1.1
+Host: example.com
+User-Agent: curl/8.7.1
+Accept: */*
 ```
 
 ## Specifications
@@ -54,4 +98,7 @@ TRACE /index.html
 
 ## See also
 
-- [HTTP methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP request methods](/en-US/docs/Web/HTTP/Methods)
+- [HTTP response status codes](/en-US/docs/Web/HTTP/Status)
+- [HTTP headers](/en-US/docs/Web/HTTP/Headers)
+- [Cross-Site Tracing (XST)](https://owasp.org/www-community/attacks/Cross_Site_Tracing)

From c2636b43e43eb705d142aae874c5412b4b3e6b6e Mon Sep 17 00:00:00 2001
From: Hamish Willee <hamishwillee@gmail.com>
Date: Fri, 13 Sep 2024 09:10:49 +1000
Subject: [PATCH 24/26] FF131 Relnote: PointerEvent.azimuth/altitudeAngle +
 updates (#35804)

---
 .../mozilla/firefox/releases/131/index.md     |  1 +
 .../api/pointerevent/pointerevent/index.md    | 10 ++++++--
 .../en-us/web/api/pointerevent/tiltx/index.md | 24 ++++++++++++------
 .../pointerevent/tiltx/tilt_x_y_angles.svg    |  1 +
 .../en-us/web/api/pointerevent/tilty/index.md | 25 +++++++++++++------
 .../pointerevent/tilty/tilt_x_y_angles.svg    |  1 +
 6 files changed, 44 insertions(+), 18 deletions(-)
 create mode 100644 files/en-us/web/api/pointerevent/tiltx/tilt_x_y_angles.svg
 create mode 100644 files/en-us/web/api/pointerevent/tilty/tilt_x_y_angles.svg

diff --git a/files/en-us/mozilla/firefox/releases/131/index.md b/files/en-us/mozilla/firefox/releases/131/index.md
index 38724ea909de290..5b596b07d32e3bd 100644
--- a/files/en-us/mozilla/firefox/releases/131/index.md
+++ b/files/en-us/mozilla/firefox/releases/131/index.md
@@ -42,6 +42,7 @@ This article provides information about the changes in Firefox 131 that affect d
 
 ### APIs
 
+- The {{domxref('PointerEvent.altitudeAngle','altitudeAngle')}} and {{domxref('PointerEvent.azimuthAngle','azimuthAngle')}} properties of the {{domxref('PointerEvent')}} interface are supported, providing the angle between the pointer/stylus and the screen (X-Y plane), and the rotation of the stylus over the screen relative to its x-axis, respectively. ([Firefox bug 1909673](https://bugzil.la/1909673)).
 - [Text fragments](/en-US/docs/Web/URI/Fragment/Text_fragments) are now supported, allowing users to link to and highlight specific portions of text in a web page. This feature uses a particular syntax in the [URL fragment](/en-US/docs/Web/URI/Fragment) that identifies the target based on patterns in the rendered text.
   Website developers can also use the existence of the {{domxref("Document.fragmentDirective")}} property (an instance of the {{domxref("FragmentDirective")}} interface) to feature check for text fragment support, and the {{CSSxRef("::target-text")}} pseudo element to select and style text that has been selected using a text fragment link. ([Firefox bug 1914877](https://bugzil.la/1914877))
 
diff --git a/files/en-us/web/api/pointerevent/pointerevent/index.md b/files/en-us/web/api/pointerevent/pointerevent/index.md
index 461bea9a1214ebe..62c96705ad44e39 100644
--- a/files/en-us/web/api/pointerevent/pointerevent/index.md
+++ b/files/en-us/web/api/pointerevent/pointerevent/index.md
@@ -24,7 +24,9 @@ new PointerEvent(type, options)
   - : A string representing the name of the event
     (see [PointerEvent event types](/en-US/docs/Web/API/PointerEvent#pointer_event_types)).
 - `options` {{optional_inline}}
+
   - : An object that, _in addition of the properties defined in {{domxref("MouseEvent/MouseEvent", "MouseEvent()")}}_, can have the following properties:
+
     - `pointerId`
       - : A number, defaulting to `0`, that sets the value of the instance's {{domxref("PointerEvent.pointerId")}}.
     - `width`
@@ -35,10 +37,14 @@ new PointerEvent(type, options)
       - : A number, defaulting to `0`, that sets the value of the instance's {{domxref("PointerEvent.pressure")}}.
     - `tangentialPressure`
       - : A number, defaulting to `0`, that sets the value of the instance's {{domxref("PointerEvent.tangentialPressure")}}.
+    - `altitudeAngle`
+      - : A number that sets the value of the instance's {{domxref("PointerEvent.altitudeAngle")}}.
+    - `azimuthAngle`
+      - : A number that sets the value of the instance's {{domxref("PointerEvent.azimuthAngle")}}.
     - `tiltX`
-      - : A number, defaulting to `0`, that sets the value of the instance's {{domxref("PointerEvent.tiltX")}}.
+      - : A number that sets the value of the instance's {{domxref("PointerEvent.tiltX")}}.
     - `tiltY`
-      - : A number, defaulting to `0`, that sets the value of the instance's {{domxref("PointerEvent.tiltY")}}.
+      - : A number that sets the value of the instance's {{domxref("PointerEvent.tiltY")}}.
     - `twist`
       - : A number, defaulting to `0`, that sets the value of the instance's {{domxref("PointerEvent.twist")}}.
     - `pointerType`
diff --git a/files/en-us/web/api/pointerevent/tiltx/index.md b/files/en-us/web/api/pointerevent/tiltx/index.md
index d6c4dafa4e93ad3..967d83b680735f3 100644
--- a/files/en-us/web/api/pointerevent/tiltx/index.md
+++ b/files/en-us/web/api/pointerevent/tiltx/index.md
@@ -8,21 +8,23 @@ browser-compat: api.PointerEvent.tiltX
 
 {{ APIRef("Pointer Events") }}
 
-The **`tiltX`** read-only property of the
-{{domxref("PointerEvent")}} interface is the angle (in degrees) between the _Y-Z
-plane_ of the pointer and the screen. This property is typically only useful for a
-pen/stylus pointer type.
+The **`tiltX`** read-only property of the {{domxref("PointerEvent")}} interface is the angle (in degrees) between the _Y-Z plane_ of the pointer and the screen.
+This property is typically only useful for a pen/stylus pointer type.
 
-For an illustration of this property see [Figure 2 in the specification](https://w3c.github.io/pointerevents/#dom-pointerevent-tiltx).
+Depending on the specific hardware and platform, user agents will likely only receive one set of values for the transducer orientation relative to the screen plane — either `tiltX` and {{domxref("PointerEvent.tilty", "tiltY")}} or {{domxref("PointerEvent.altitudeAngle", "altitudeAngle")}} and {{domxref("PointerEvent.azimuthAngle", "azimuthAngle")}}.
+
+![The tiltX angle of a pointer compared to the tiltY angle](tilt_x_y_angles.svg)
+
+For an additional illustration of this property see [Figure 2 in the specification](https://w3c.github.io/pointerevents/#dom-pointerevent-tiltx).
 
 ## Value
 
-The angle in degrees between the Y-Z plane of the pointer (stylus) and the screen. The range of values is `-90` to `90`, inclusive, where a positive value is a tilt to the right. For devices that do not support this property, the value is `0`.
+The angle in degrees between the Y-Z plane of the pointer (stylus) and the screen. The range of values is `-90` to `90`, inclusive, where a positive value is a tilt to the right.
+For devices that do not support this property, the value is `0`.
 
 ## Examples
 
-This example illustrates simple accessing of the `tiltX` and
-{{domxref("PointerEvent.tiltY","tiltY")}} properties.
+This example illustrates simple accessing of the `tiltX` and {{domxref("PointerEvent.tiltY","tiltY")}} properties.
 
 ```js
 someElement.addEventListener(
@@ -41,3 +43,9 @@ someElement.addEventListener(
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("PointerEvent.tiltY")}}
+- {{domxref("PointerEvent.altitudeAngle")}}
+- {{domxref("PointerEvent.azimuthAngle")}}
diff --git a/files/en-us/web/api/pointerevent/tiltx/tilt_x_y_angles.svg b/files/en-us/web/api/pointerevent/tiltx/tilt_x_y_angles.svg
new file mode 100644
index 000000000000000..53a1b6ce77f973c
--- /dev/null
+++ b/files/en-us/web/api/pointerevent/tiltx/tilt_x_y_angles.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" clip-rule="evenodd" viewBox="0 0 567.658 536.105"><defs><marker id="b" orient="auto" refX="0" refY="0" style="overflow:visible"><path d="m0 0 5-5-17.5 5L5 5z" style="fill-rule:evenodd;stroke:#81008e;stroke-width:1pt;stroke-opacity:1;fill:#81008e;fill-opacity:1" transform="rotate(180 -5 0)scale(.8)"/></marker><marker id="a" orient="auto" refX="0" refY="0" style="overflow:visible"><path d="m0 0 5-5-17.5 5L5 5z" style="fill-rule:evenodd;stroke:#81008e;stroke-width:1pt;stroke-opacity:1;fill:#81008e;fill-opacity:1" transform="rotate(180 -5 0)scale(.8)"/></marker><marker id="c" orient="auto" refX="0" refY="0" style="overflow:visible"><path d="m0 0 5-5-17.5 5L5 5Z" style="fill:#81008e;fill-opacity:1;fill-rule:evenodd;stroke:#81008e;stroke-width:1pt;stroke-opacity:1" transform="rotate(180 -5 0)scale(.8)"/></marker><marker id="d" orient="auto" refX="0" refY="0" style="overflow:visible"><path d="m0 0 5-5-17.5 5L5 5Z" style="fill:#81008e;fill-opacity:1;fill-rule:evenodd;stroke:#81008e;stroke-width:1pt;stroke-opacity:1" transform="rotate(180 -5 0)scale(.8)"/></marker></defs><path fill="#e2e2e2" d="M106.586 226.507c0-4.917 2.955-8.903 6.6-8.903H404.97c3.645 0 6.6 3.986 6.6 8.903s-2.955 8.902-6.6 8.902H113.186c-3.645 0-6.6-3.985-6.6-8.902"/><path fill="#726a6a" d="m323.167 120.659 7.91-7.948c3.774-3.793 3.942-8.298.27-11.953l-3.493-3.595c-3.613-3.655-8.237-3.283-12.012.39l-7.909 7.888zm-79.864 80.324 72.435-72.917-15.294-15.158-72.435 72.918-6.025 16.412c-1.193 3.246 2.057 6.06 4.878 5.033z"/><path fill="none" stroke="#c91e3e" stroke-dasharray="2" stroke-linecap="butt" stroke-width="2" d="M90.043 226.507h334.702" style="stroke:#00f;stroke-opacity:1"/><path d="m211.676 223.377 2.66-162.746" style="fill:none;stroke:red;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:4,1;stroke-dashoffset:0;stroke-opacity:1"/><path d="M218.052 68.594c37.07 1.037 63.162 17.77 82.392 44.314" style="fill:none;stroke:#81008e;stroke-width:1.67356;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:5.02069,1.67356;stroke-dashoffset:0;stroke-opacity:1;marker-mid:url(#a);marker-end:url(#b)"/><text xml:space="preserve" x="420.162" y="241.46" style="font-size:24px;line-height:1.25;font-family:&quot;Fugaz One&quot;;-inkscape-font-specification:&quot;Fugaz One, Normal&quot;"><tspan x="420.162" y="241.46" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-family:Arial;-inkscape-font-specification:Arial">x-axis</tspan></text><text xml:space="preserve" x="178.17" y="51.058" style="font-size:24px;line-height:1.25;font-family:Arial;-inkscape-font-specification:&quot;Arial, Normal&quot;"><tspan x="178.17" y="51.058">z-axis</tspan></text><text xml:space="preserve" x="228.696" y="109.561" style="font-size:24px;line-height:1.25;font-family:Arial;-inkscape-font-specification:&quot;Arial, Normal&quot;;stroke:#1e23c9;stroke-opacity:1"><tspan x="228.696" y="109.561">tiltX</tspan></text><path fill="#e2e2e2" d="M104.619 474.289c0-4.917 2.955-8.903 6.6-8.903h291.783c3.645 0 6.6 3.986 6.6 8.903s-2.955 8.902-6.6 8.902H111.219c-3.645 0-6.6-3.985-6.6-8.902"/><path fill="#726a6a" d="m321.2 368.44 7.909-7.947c3.775-3.793 3.943-8.298.27-11.953l-3.492-3.595c-3.613-3.655-8.237-3.283-12.012.39l-7.91 7.888zm-79.864 80.325 72.435-72.917-15.294-15.158-72.435 72.918-6.025 16.412c-1.193 3.246 2.057 6.06 4.878 5.033z"/><path fill="none" stroke="#c91e3e" stroke-dasharray="2" stroke-linecap="butt" stroke-width="2" d="M88.076 474.289h334.702" style="stroke:#0f0;stroke-opacity:1"/><path d="m209.709 471.159 2.66-162.746" style="fill:none;stroke:red;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:4,1;stroke-dashoffset:0;stroke-opacity:1"/><path d="M216.084 316.375c37.07 1.038 63.163 17.771 82.393 44.315" style="fill:none;stroke:#81008e;stroke-width:1.67356;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:5.02069,1.67356;stroke-dashoffset:0;stroke-opacity:1;marker-mid:url(#c);marker-end:url(#d)"/><text xml:space="preserve" x="418.194" y="489.242" style="font-size:24px;line-height:1.25;font-family:&quot;Fugaz One&quot;;-inkscape-font-specification:&quot;Fugaz One, Normal&quot;"><tspan x="418.194" y="489.242" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-family:Arial;-inkscape-font-specification:Arial">y-axis</tspan></text><text xml:space="preserve" x="176.202" y="298.839" style="font-size:24px;line-height:1.25;font-family:Arial;-inkscape-font-specification:&quot;Arial, Normal&quot;"><tspan x="176.202" y="298.839">z-axis</tspan></text><text xml:space="preserve" x="226.728" y="357.343" style="font-size:24px;line-height:1.25;font-family:Arial;-inkscape-font-specification:&quot;Arial, Normal&quot;;fill:#0f0;fill-opacity:1;stroke:#0f0;stroke-opacity:1"><tspan x="226.728" y="357.343">tiltY</tspan></text><ellipse cx="211.108" cy="226.771" rx="1.839" ry="2.604" style="fill:#0f0;fill-opacity:1;stroke:#0f0;stroke-width:2.15879;stroke-miterlimit:10;stroke-dasharray:6.47637,2.15879;stroke-dashoffset:0;stroke-opacity:1"/><ellipse cx="209.363" cy="474.243" rx="2.504" ry="2.744" style="fill:#00f;fill-opacity:1;stroke:#00f;stroke-width:1.31782;stroke-miterlimit:10;stroke-dasharray:3.95348,1.31782;stroke-dashoffset:0;stroke-opacity:1"/></svg>
\ No newline at end of file
diff --git a/files/en-us/web/api/pointerevent/tilty/index.md b/files/en-us/web/api/pointerevent/tilty/index.md
index 0a3b17589d1e3f3..d48ad5329d21f26 100644
--- a/files/en-us/web/api/pointerevent/tilty/index.md
+++ b/files/en-us/web/api/pointerevent/tilty/index.md
@@ -8,21 +8,24 @@ browser-compat: api.PointerEvent.tiltY
 
 {{ APIRef("Pointer Events") }}
 
-The **`tiltY`** read-only property of the
-{{domxref("PointerEvent")}} interface is the angle (in degrees) between the _X-Z
-plane_ of the pointer and the screen. This property is typically only useful for a
-pen/stylus pointer type.
+The **`tiltY`** read-only property of the {{domxref("PointerEvent")}} interface is the angle (in degrees) between the _X-Z plane_ of the pointer and the screen.
+This property is typically only useful for a pen/stylus pointer type.
 
-For an illustration of this property, see [Figure 3 in the specification](https://w3c.github.io/pointerevents/#dom-pointerevent-tilty).
+Depending on the specific hardware and platform, user agents will likely only receive one set of values for the transducer orientation relative to the screen plane — either {{domxref("PointerEvent.tiltx", "tiltX")}} and `tiltY` or {{domxref("PointerEvent.altitudeAngle", "altitudeAngle")}} and {{domxref("PointerEvent.azimuthAngle", "azimuthAngle")}}.
+
+![The tiltX angle of a pointer compared to the tiltY angle](tilt_x_y_angles.svg)
+
+For an additional illustration of this property, see [Figure 3 in the specification](https://w3c.github.io/pointerevents/#dom-pointerevent-tilty).
 
 ## Value
 
-The angle in degrees between the X-Z plane of the pointer (stylus) and the screen. The range of values is `-90` to `90`, inclusive, where a positive value is a tilt towards the user. For devices that do not support this property, the value is `0`.
+The angle in degrees between the X-Z plane of the pointer (stylus) and the screen.
+The range of values is `-90` to `90`, inclusive, where a positive value is a tilt towards the user.
+For devices that do not support this property, the value is `0`.
 
 ## Examples
 
-This example illustrates simple accessing of the
-{{domxref("PointerEvent.tiltX","tiltX")}} and `tiltY` properties.
+This example illustrates simple accessing of the {{domxref("PointerEvent.tiltX","tiltX")}} and `tiltY` properties.
 
 ```js
 someElement.addEventListener(
@@ -41,3 +44,9 @@ someElement.addEventListener(
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("PointerEvent.tiltX")}}
+- {{domxref("PointerEvent.altitudeAngle")}}
+- {{domxref("PointerEvent.azimuthAngle")}}
diff --git a/files/en-us/web/api/pointerevent/tilty/tilt_x_y_angles.svg b/files/en-us/web/api/pointerevent/tilty/tilt_x_y_angles.svg
new file mode 100644
index 000000000000000..53a1b6ce77f973c
--- /dev/null
+++ b/files/en-us/web/api/pointerevent/tilty/tilt_x_y_angles.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" clip-rule="evenodd" viewBox="0 0 567.658 536.105"><defs><marker id="b" orient="auto" refX="0" refY="0" style="overflow:visible"><path d="m0 0 5-5-17.5 5L5 5z" style="fill-rule:evenodd;stroke:#81008e;stroke-width:1pt;stroke-opacity:1;fill:#81008e;fill-opacity:1" transform="rotate(180 -5 0)scale(.8)"/></marker><marker id="a" orient="auto" refX="0" refY="0" style="overflow:visible"><path d="m0 0 5-5-17.5 5L5 5z" style="fill-rule:evenodd;stroke:#81008e;stroke-width:1pt;stroke-opacity:1;fill:#81008e;fill-opacity:1" transform="rotate(180 -5 0)scale(.8)"/></marker><marker id="c" orient="auto" refX="0" refY="0" style="overflow:visible"><path d="m0 0 5-5-17.5 5L5 5Z" style="fill:#81008e;fill-opacity:1;fill-rule:evenodd;stroke:#81008e;stroke-width:1pt;stroke-opacity:1" transform="rotate(180 -5 0)scale(.8)"/></marker><marker id="d" orient="auto" refX="0" refY="0" style="overflow:visible"><path d="m0 0 5-5-17.5 5L5 5Z" style="fill:#81008e;fill-opacity:1;fill-rule:evenodd;stroke:#81008e;stroke-width:1pt;stroke-opacity:1" transform="rotate(180 -5 0)scale(.8)"/></marker></defs><path fill="#e2e2e2" d="M106.586 226.507c0-4.917 2.955-8.903 6.6-8.903H404.97c3.645 0 6.6 3.986 6.6 8.903s-2.955 8.902-6.6 8.902H113.186c-3.645 0-6.6-3.985-6.6-8.902"/><path fill="#726a6a" d="m323.167 120.659 7.91-7.948c3.774-3.793 3.942-8.298.27-11.953l-3.493-3.595c-3.613-3.655-8.237-3.283-12.012.39l-7.909 7.888zm-79.864 80.324 72.435-72.917-15.294-15.158-72.435 72.918-6.025 16.412c-1.193 3.246 2.057 6.06 4.878 5.033z"/><path fill="none" stroke="#c91e3e" stroke-dasharray="2" stroke-linecap="butt" stroke-width="2" d="M90.043 226.507h334.702" style="stroke:#00f;stroke-opacity:1"/><path d="m211.676 223.377 2.66-162.746" style="fill:none;stroke:red;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:4,1;stroke-dashoffset:0;stroke-opacity:1"/><path d="M218.052 68.594c37.07 1.037 63.162 17.77 82.392 44.314" style="fill:none;stroke:#81008e;stroke-width:1.67356;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:5.02069,1.67356;stroke-dashoffset:0;stroke-opacity:1;marker-mid:url(#a);marker-end:url(#b)"/><text xml:space="preserve" x="420.162" y="241.46" style="font-size:24px;line-height:1.25;font-family:&quot;Fugaz One&quot;;-inkscape-font-specification:&quot;Fugaz One, Normal&quot;"><tspan x="420.162" y="241.46" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-family:Arial;-inkscape-font-specification:Arial">x-axis</tspan></text><text xml:space="preserve" x="178.17" y="51.058" style="font-size:24px;line-height:1.25;font-family:Arial;-inkscape-font-specification:&quot;Arial, Normal&quot;"><tspan x="178.17" y="51.058">z-axis</tspan></text><text xml:space="preserve" x="228.696" y="109.561" style="font-size:24px;line-height:1.25;font-family:Arial;-inkscape-font-specification:&quot;Arial, Normal&quot;;stroke:#1e23c9;stroke-opacity:1"><tspan x="228.696" y="109.561">tiltX</tspan></text><path fill="#e2e2e2" d="M104.619 474.289c0-4.917 2.955-8.903 6.6-8.903h291.783c3.645 0 6.6 3.986 6.6 8.903s-2.955 8.902-6.6 8.902H111.219c-3.645 0-6.6-3.985-6.6-8.902"/><path fill="#726a6a" d="m321.2 368.44 7.909-7.947c3.775-3.793 3.943-8.298.27-11.953l-3.492-3.595c-3.613-3.655-8.237-3.283-12.012.39l-7.91 7.888zm-79.864 80.325 72.435-72.917-15.294-15.158-72.435 72.918-6.025 16.412c-1.193 3.246 2.057 6.06 4.878 5.033z"/><path fill="none" stroke="#c91e3e" stroke-dasharray="2" stroke-linecap="butt" stroke-width="2" d="M88.076 474.289h334.702" style="stroke:#0f0;stroke-opacity:1"/><path d="m209.709 471.159 2.66-162.746" style="fill:none;stroke:red;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:4,1;stroke-dashoffset:0;stroke-opacity:1"/><path d="M216.084 316.375c37.07 1.038 63.163 17.771 82.393 44.315" style="fill:none;stroke:#81008e;stroke-width:1.67356;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:5.02069,1.67356;stroke-dashoffset:0;stroke-opacity:1;marker-mid:url(#c);marker-end:url(#d)"/><text xml:space="preserve" x="418.194" y="489.242" style="font-size:24px;line-height:1.25;font-family:&quot;Fugaz One&quot;;-inkscape-font-specification:&quot;Fugaz One, Normal&quot;"><tspan x="418.194" y="489.242" style="font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-family:Arial;-inkscape-font-specification:Arial">y-axis</tspan></text><text xml:space="preserve" x="176.202" y="298.839" style="font-size:24px;line-height:1.25;font-family:Arial;-inkscape-font-specification:&quot;Arial, Normal&quot;"><tspan x="176.202" y="298.839">z-axis</tspan></text><text xml:space="preserve" x="226.728" y="357.343" style="font-size:24px;line-height:1.25;font-family:Arial;-inkscape-font-specification:&quot;Arial, Normal&quot;;fill:#0f0;fill-opacity:1;stroke:#0f0;stroke-opacity:1"><tspan x="226.728" y="357.343">tiltY</tspan></text><ellipse cx="211.108" cy="226.771" rx="1.839" ry="2.604" style="fill:#0f0;fill-opacity:1;stroke:#0f0;stroke-width:2.15879;stroke-miterlimit:10;stroke-dasharray:6.47637,2.15879;stroke-dashoffset:0;stroke-opacity:1"/><ellipse cx="209.363" cy="474.243" rx="2.504" ry="2.744" style="fill:#00f;fill-opacity:1;stroke:#00f;stroke-width:1.31782;stroke-miterlimit:10;stroke-dasharray:3.95348,1.31782;stroke-dashoffset:0;stroke-opacity:1"/></svg>
\ No newline at end of file

From f7e5cd5c99785abe0408d9db6c427212c37b02e7 Mon Sep 17 00:00:00 2001
From: Hamish Willee <hamishwillee@gmail.com>
Date: Fri, 13 Sep 2024 09:17:08 +1000
Subject: [PATCH 25/26] fragmentDirective - live examples (#35716)

* fragmentDirective - live examples

* Apply suggestions from code review

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>

---------

Co-authored-by: Brian Thomas Smith <brian@smith.berlin>
---
 .../api/document/fragmentdirective/index.md   | 33 ++++++++++++++---
 .../en-us/web/api/fragmentdirective/index.md  | 35 +++++++++++++++----
 2 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/files/en-us/web/api/document/fragmentdirective/index.md b/files/en-us/web/api/document/fragmentdirective/index.md
index 92593ba004aa26b..bd8b85ce2b08dbf 100644
--- a/files/en-us/web/api/document/fragmentdirective/index.md
+++ b/files/en-us/web/api/document/fragmentdirective/index.md
@@ -16,15 +16,38 @@ A {{domxref("FragmentDirective")}} object.
 
 ## Examples
 
-Try running the following in a supporting browser's devtools, in a tab with one or more matched text fragments:
+### Checking if text fragments are supported
+
+The code below logs whether or not text fragments are supported in your browser by checking for existence of the object.
+Note that the object is empty, and at present it is mainly intended for feature detection.
+In the future, it might include other information.
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = text;
+}
+```
+
+```css hidden
+#log {
+  height: 20px;
+}
+```
 
 ```js
-document.fragmentDirective;
-// returns an empty FragmentDirective object, if supported
-// undefined otherwise
+if (document.fragmentDirective) {
+  log("Your browser supports text fragments.");
+} else {
+  log("Text fragments are not supported in your browser.");
+}
 ```
 
-This functionality is mainly intended for feature detection at present. In the future, the `FragmentDirective` object could include additional information.
+{{EmbedLiveSample("Checking if text fragments are supported","100%","30px")}}
 
 ## Specifications
 
diff --git a/files/en-us/web/api/fragmentdirective/index.md b/files/en-us/web/api/fragmentdirective/index.md
index a67b6e180c7d8c2..c7e39486c69efcb 100644
--- a/files/en-us/web/api/fragmentdirective/index.md
+++ b/files/en-us/web/api/fragmentdirective/index.md
@@ -7,7 +7,7 @@ browser-compat: api.FragmentDirective
 
 {{APIRef("URL Fragment Text Directives")}}
 
-The **`FragmentDirective`** interface is an object exposed for feature detectability, that is, whether or not a browser supports text fragments.
+The **`FragmentDirective`** interface is an object exposed to allow code to check whether or not a browser supports text fragments.
 
 It is accessed via the {{domxref("Document.fragmentDirective")}} property.
 
@@ -21,15 +21,38 @@ None.
 
 ## Examples
 
-Try running the following in a supporting browser's devtools, in a tab with one or more matched text fragments:
+### Checking if text fragments are supported
+
+The code below logs whether or not text fragments are supported in your browser by checking that {{domxref("Document.fragmentDirective")}} is defined.
+Note that the object is empty, and at present is mainly intended for feature detection.
+In the future, it might include other information.
+
+```html hidden
+<pre id="log"></pre>
+```
+
+```js hidden
+const logElement = document.querySelector("#log");
+function log(text) {
+  logElement.innerText = text;
+}
+```
+
+```css hidden
+#log {
+  height: 20px;
+}
+```
 
 ```js
-document.fragmentDirective;
-// returns an empty FragmentDirective object, if supported
-// undefined otherwise
+if (document.fragmentDirective) {
+  log("Your browser supports text fragments.");
+} else {
+  log("Text fragments are not supported in your browser.");
+}
 ```
 
-This functionality is mainly intended for feature detection at present. In the future, the `FragmentDirective` object could include additional information.
+{{EmbedLiveSample("Checking if text fragments are supported","100%","30px")}}
 
 ## Specifications
 

From 3fdf7ec9351f9ee8e62648146a7e73e7a6196d5f Mon Sep 17 00:00:00 2001
From: kaushik95 <kaushik.19995@gmail.com>
Date: Fri, 13 Sep 2024 05:11:56 +0530
Subject: [PATCH 26/26] Navigator: cookieEnabled warning regarding Safari is
 outdated #32845 (#35725)

* Navigator: cookieEnabled warning regarding Safari is outdated #32845

Signed-off-by: Kowshik BV <kowshik.bv@fmr.com>

* Update index.md

Removed note section as it is not needed.

Signed-off-by: kaushik95 <kaushik.19995@gmail.com>

---------

Signed-off-by: Kowshik BV <kowshik.bv@fmr.com>
Signed-off-by: kaushik95 <kaushik.19995@gmail.com>
---
 files/en-us/web/api/navigator/cookieenabled/index.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/files/en-us/web/api/navigator/cookieenabled/index.md b/files/en-us/web/api/navigator/cookieenabled/index.md
index 42a28473c5a9278..3ebb743258ac194 100644
--- a/files/en-us/web/api/navigator/cookieenabled/index.md
+++ b/files/en-us/web/api/navigator/cookieenabled/index.md
@@ -16,9 +16,6 @@ The property is read-only.
 
 A boolean.
 
-> [!NOTE]
-> When the browser is configured to block [third-party cookies](/en-US/docs/Web/Privacy/Third-party_cookies), and `navigator.cookieEnabled` is invoked inside a third-party `<iframe>`, it returns `true` in Safari and IE (while trying to set a cookie in such scenario would fail). It returns `false` in Firefox and Chromium-based browsers.
-
 > [!NOTE]
 > Web browsers may prevent writing certain cookies in certain scenarios. For example, Chrome-based browsers, as well as some experimental version of Firefox, does not allow creating cookies with [`SameSite=None`](/en-US/docs/Web/HTTP/Headers/Set-Cookie#samesitesamesite-value) attribute, unless they are created over HTTPS and with `Secure` attribute.