From bf1775f6305d95ae7c7022922c9cea2ef89212c1 Mon Sep 17 00:00:00 2001 From: Richard Michael Date: Tue, 17 Sep 2024 08:42:56 -0700 Subject: [PATCH 001/125] Update `pattern` attribute (#35874) * Update `pattern` attribute Mention implicit anchoring, and update the RegExp flag. Makes this description consistent with the dedicated [`pattern` attribute documentation](/en-US/docs/Web/HTML/Attributes/pattern). * Update files/en-us/web/html/element/input/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/html/element/input/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- files/en-us/web/html/element/input/index.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/html/element/input/index.md b/files/en-us/web/html/element/input/index.md index c12fbc3eb8e2d04..992dbcf18a66a41 100644 --- a/files/en-us/web/html/element/input/index.md +++ b/files/en-us/web/html/element/input/index.md @@ -534,9 +534,12 @@ A few additional non-standard attributes are listed following the descriptions o - [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) - - : Valid for `text`, `search`, `url`, `tel`, `email`, and `password`, the `pattern` attribute defines a regular expression that the input's [`value`](#value) must match in order for the value to pass [constraint validation](/en-US/docs/Web/HTML/Constraint_validation). It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our [guide on regular expressions](/en-US/docs/Web/JavaScript/Guide/Regular_expressions); the `'u'` flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as {{Glossary("ASCII")}}. No forward slashes should be specified around the pattern text. + - : Valid for `text`, `search`, `url`, `tel`, `email`, and `password`, the `pattern` attribute is used to compile a regular expression that the input's [`value`](#value) must match in order for the value to pass [constraint validation](/en-US/docs/Web/HTML/Constraint_validation). It must be a valid JavaScript regular expression, as used by the {{jsxref("RegExp")}} type, and as documented in our [guide on regular expressions](/en-US/docs/Web/JavaScript/Guide/Regular_expressions). No forward slashes should be specified around the pattern text. When compiling the regular expression: - If the `pattern` attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission. + 1. the pattern will be implicitly wrapped with `^(?:` and `)$`, such that the match is required against the _entire_ input value, i.e., `^(?:)$`. + 2. the `'v'` flag is specified so that the pattern is treated as a sequence of Unicode code points, instead of as {{Glossary("ASCII")}}. + + If the `pattern` attribute is present but is not specified or is invalid, no regular expression is applied and this attribute is ignored completely. If the pattern attribute is valid and a non-empty value does not match the pattern, constraint validation will prevent form submission. If the [`multiple`](/en-US/docs/Web/HTML/Attributes/multiple) is present, the compiled regular expression is matched against each comma separated value. > [!NOTE] > If using the `pattern` attribute, inform the user about the expected format by including explanatory text nearby. You can also include a [`title`](#title) attribute to explain what the requirements are to match the pattern; most browsers will display this title as a tooltip. The visible explanation is required for accessibility. The tooltip is an enhancement. From 47b7fcbc6a1073002232db85b9d37e87474775e1 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Tue, 17 Sep 2024 18:28:39 -0700 Subject: [PATCH 002/125] Add `background-clip: border-area` (#35878) * Add `background-clip: border-area` https://drafts.csswg.org/css-backgrounds-4/#valdef-background-clip-border-area * Update files/en-us/web/css/background-clip/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/background-clip/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update index.md * a teeny bit taller --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Estelle Weyl --- files/en-us/web/css/background-clip/index.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/background-clip/index.md b/files/en-us/web/css/background-clip/index.md index c90b957b9ae7da8..193cdc516574014 100644 --- a/files/en-us/web/css/background-clip/index.md +++ b/files/en-us/web/css/background-clip/index.md @@ -27,6 +27,7 @@ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; +background-clip: border-area; /* Global values */ background-clip: inherit; @@ -46,6 +47,8 @@ background-clip: unset; - : The background is painted within (clipped to) the content box. - `text` - : The background is painted within (clipped to) the foreground text. +- `border-area` + - : The background is painted within (clipped to) the area painted by the border, taking {{Cssxref("border-width")}} and {{Cssxref("border-style")}} into account but ignoring any transparency introduced by {{Cssxref("border-color")}}. ## Accessibility @@ -76,6 +79,9 @@ Consider using feature queries with {{cssxref("@supports")}} to test for support The background extends only to the edge of the content box.

The background is clipped to the foreground text.

+

+ The background is clipped to the area painted by the border. +

``` ### CSS @@ -105,11 +111,16 @@ p { background-clip: text; color: rgb(0 0 0 / 20%); } + +.border-area { + background-clip: border-area; + border-color: transparent; +} ``` #### Result -{{EmbedLiveSample('Examples', 600, 580)}} +{{EmbedLiveSample('Examples', 600, 630)}} ## Specifications From cca93afe31dd0ce15ad2149ba92f2429e7f434bc Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 18 Sep 2024 13:55:38 +0530 Subject: [PATCH 003/125] fix(api): add allow clipboard-read to clipboard live samples (#35928) --- files/en-us/web/api/clipboard/read/index.md | 6 +++--- files/en-us/web/api/clipboard/write/index.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/clipboard/read/index.md b/files/en-us/web/api/clipboard/read/index.md index bc48a0188df375b..fe85ff150ec20f0 100644 --- a/files/en-us/web/api/clipboard/read/index.md +++ b/files/en-us/web/api/clipboard/read/index.md @@ -127,7 +127,7 @@ Copy the butterfly image on the left by right-clicking the image and selecting " Then click on the empty frame on the right. The example will fetch the image data from the clipboard and display the image in the empty frame. -{{EmbedLiveSample("Reading image data from clipboard", "100%", "200")}} +{{EmbedLiveSample("Reading image data from clipboard", "100%", "250", "", "", "", "clipboard-read")}} > [!NOTE] > If prompted, grant permission in order to paste the image. @@ -242,7 +242,7 @@ async function pasteData() { Copy some text or the butterfly (JPG) image below (to copy images right-click on them and then select "Copy image" from the context menu). Select the indicated frame below to paste this information from the clipboard into the frame. -{{EmbedLiveSample("Reading data from the clipboard", "100%", "450")}} +{{EmbedLiveSample("Reading data from the clipboard", "100%", "500", "", "", "", "clipboard-read")}} Notes: @@ -346,7 +346,7 @@ pasteUnsanitizedButton.addEventListener("click", async () => { First click the "Copy HTML" button to write the HTML code from the first textarea to the clipboard. Then either click the "Paste HTML" button or the "Paste unsanitized HTML" button to paste the sanitized or unsanitized HTML code into the second textarea. -{{EmbedLiveSample("Reading unsanitized HTML from the clipboard", "100%", "220")}} +{{EmbedLiveSample("Reading unsanitized HTML from the clipboard", "100%", "250", "", "", "", "clipboard-read; clipboard-write")}} ## Specifications diff --git a/files/en-us/web/api/clipboard/write/index.md b/files/en-us/web/api/clipboard/write/index.md index c3b2665775f7521..17e08762f6c334b 100644 --- a/files/en-us/web/api/clipboard/write/index.md +++ b/files/en-us/web/api/clipboard/write/index.md @@ -203,7 +203,7 @@ img { The result is shown below. First click on the blue square, and then select the text "Paste here" and use your OS-specific keyboard combinatations to paste from the clipboard (such as `Ctrl+V` on Windows). -{{embedlivesample("write_canvas_contents_to_the_clipboard", "", "400")}} +{{embedlivesample("write_canvas_contents_to_the_clipboard", "", "420", "", "", "", "clipboard-write")}} ## Specifications From bd8dbe863a306cf7114752bd936d012524b13517 Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Wed, 18 Sep 2024 14:16:25 +0530 Subject: [PATCH 004/125] Synchronize with BCD v5.6.0 (#35923) Co-authored-by: OnkarRuikar --- .../api/csspositiontrydescriptors/index.md | 78 +++++++++---------- .../en-us/web/api/rtcpeerconnection/index.md | 2 +- .../web/api/websocketstream/close/index.md | 3 +- .../web/api/websocketstream/closed/index.md | 3 +- files/en-us/web/api/websocketstream/index.md | 13 ++-- .../web/api/websocketstream/opened/index.md | 3 +- .../web/api/websocketstream/url/index.md | 3 +- .../websocketstream/websocketstream/index.md | 3 +- 8 files changed, 51 insertions(+), 57 deletions(-) diff --git a/files/en-us/web/api/csspositiontrydescriptors/index.md b/files/en-us/web/api/csspositiontrydescriptors/index.md index ed497e10fac6133..672318b94343aed 100644 --- a/files/en-us/web/api/csspositiontrydescriptors/index.md +++ b/files/en-us/web/api/csspositiontrydescriptors/index.md @@ -26,83 +26,83 @@ _Inherits properties from its ancestor {{domxref("CSSStyleDeclaration")}}._ The following property names, in snake-case (accessed using bracket notation) and camel-case (accessed using dot notation), each represent the value of a descriptor in the corresponding `@position-try` at-rule: -- `align-self` or `alignSelf` +- `align-self` or `alignSelf` {{experimental_inline}} - : A string representing the value of an {{cssxref("align-self")}} descriptor. -- `block-size` or `blockSize` +- `block-size` or `blockSize` {{experimental_inline}} - : A string representing the value of a {{cssxref("block-size")}} descriptor. -- `bottom` +- `bottom` {{experimental_inline}} - : A string representing the value of a {{cssxref("bottom")}} descriptor. -- `height` +- `height` {{experimental_inline}} - : A string representing the value of a {{cssxref("height")}} descriptor. -- `inline-size` or `inlineSize` +- `inline-size` or `inlineSize` {{experimental_inline}} - : A string representing the value of an {{cssxref("inline-size")}} descriptor. -- `inset` +- `inset` {{experimental_inline}} - : A string representing the value of an {{cssxref("inset")}} descriptor. -- `position-area` or `positionArea` +- `position-area` or `positionArea` {{experimental_inline}} - : A string representing the value of a {{cssxref("position-area")}} descriptor. -- `inset-block` or `insetBlock` +- `inset-block` or `insetBlock` {{experimental_inline}} - : A string representing the value of an {{cssxref("inset-block")}} descriptor. -- `inset-block-end` or `insetBlockEnd` +- `inset-block-end` or `insetBlockEnd` {{experimental_inline}} - : A string representing the value of an {{cssxref("inset-block-end")}} descriptor. -- `inset-block-start` or `insetBlockStart` +- `inset-block-start` or `insetBlockStart` {{experimental_inline}} - : A string representing the value of an {{cssxref("inset-block-start")}} descriptor. -- `inset-inline` or `insetInline` +- `inset-inline` or `insetInline` {{experimental_inline}} - : A string representing the value of an {{cssxref("inset-inline")}} descriptor. -- `inset-inline-end` or `insetInlineEnd` +- `inset-inline-end` or `insetInlineEnd` {{experimental_inline}} - : A string representing the value of an {{cssxref("inset-inline-end")}} descriptor. -- `inset-inline-start` or `insetInlineStart` +- `inset-inline-start` or `insetInlineStart` {{experimental_inline}} - : A string representing the value of an {{cssxref("inset-inline-start")}} descriptor. -- `justify-self` or `justifySelf` +- `justify-self` or `justifySelf` {{experimental_inline}} - : A string representing the value of a {{cssxref("justify-self")}} descriptor. -- `left` +- `left` {{experimental_inline}} - : A string representing the value of a {{cssxref("left")}} descriptor. -- `margin` +- `margin` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin")}} descriptor. -- `margin-block` or `marginBlock` +- `margin-block` or `marginBlock` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-block")}} descriptor. -- `margin-block-end` or `marginBlockEnd` +- `margin-block-end` or `marginBlockEnd` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-block-end")}} descriptor. -- `margin-block-start` or `marginBlockStart` +- `margin-block-start` or `marginBlockStart` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-block-start")}} descriptor. -- `margin-bottom` or `marginBottom` +- `margin-bottom` or `marginBottom` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-bottom")}} descriptor. -- `margin-inline` or `marginInline` +- `margin-inline` or `marginInline` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-inline")}} descriptor. -- `margin-inline-end` or `marginInlineEnd` +- `margin-inline-end` or `marginInlineEnd` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-inline-end")}} descriptor. -- `margin-inline-start` or `marginInlineStart` +- `margin-inline-start` or `marginInlineStart` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-inline-start")}} descriptor. -- `margin-left` or `marginLeft` +- `margin-left` or `marginLeft` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-left")}} descriptor. -- `margin-right` or `marginRight` +- `margin-right` or `marginRight` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-right")}} descriptor. -- `margin-top` or `marginTop` +- `margin-top` or `marginTop` {{experimental_inline}} - : A string representing the value of a {{cssxref("margin-top")}} descriptor. -- `max-block-size` or `maxBlockSize` +- `max-block-size` or `maxBlockSize` {{experimental_inline}} - : A string representing the value of a {{cssxref("max-block-size")}} descriptor. -- `max-height` or `maxHeight` +- `max-height` or `maxHeight` {{experimental_inline}} - : A string representing the value of a {{cssxref("max-height")}} descriptor. -- `max-inline-size` or `maxInlineSize` +- `max-inline-size` or `maxInlineSize` {{experimental_inline}} - : A string representing the value of a {{cssxref("max-inline-size")}} descriptor. -- `max-width` or `maxWidth` +- `max-width` or `maxWidth` {{experimental_inline}} - : A string representing the value of a {{cssxref("max-width")}} descriptor. -- `min-block-size` or `minBlockSize` +- `min-block-size` or `minBlockSize` {{experimental_inline}} - : A string representing the value of a {{cssxref("min-block-size")}} descriptor. -- `min-height` or `minHeight` +- `min-height` or `minHeight` {{experimental_inline}} - : A string representing the value of a {{cssxref("min-height")}} descriptor. -- `min-inline-size` or `minInlineSize` +- `min-inline-size` or `minInlineSize` {{experimental_inline}} - : A string representing the value of a {{cssxref("min-inline-size")}} descriptor. -- `min-width` or `minWidth` +- `min-width` or `minWidth` {{experimental_inline}} - : A string representing the value of a {{cssxref("min-width")}} descriptor. -- `place-self` or `placeSelf` +- `place-self` or `placeSelf` {{experimental_inline}} - : A string representing the value of a {{cssxref("place-self")}} descriptor. -- `position-anchor` or `positionAnchor` +- `position-anchor` or `positionAnchor` {{experimental_inline}} - : A string representing the value of a {{cssxref("position-anchor")}} descriptor. -- `right` +- `right` {{experimental_inline}} - : A string representing the value of a {{cssxref("right")}} descriptor. -- `top` +- `top` {{experimental_inline}} - : A string representing the value of a {{cssxref("top")}} descriptor. -- `width` +- `width` {{experimental_inline}} - : A string representing the value of a {{cssxref("width")}} descriptor. ## Instance methods diff --git a/files/en-us/web/api/rtcpeerconnection/index.md b/files/en-us/web/api/rtcpeerconnection/index.md index 779409c78928502..6269c0d501553e4 100644 --- a/files/en-us/web/api/rtcpeerconnection/index.md +++ b/files/en-us/web/api/rtcpeerconnection/index.md @@ -129,7 +129,7 @@ _Also inherits methods from {{DOMxRef("EventTarget")}}._ - {{DOMxRef("RTCPeerConnection.addStream", "addStream()")}} {{Deprecated_Inline}} {{Non-standard_Inline}} - : Adds a {{DOMxRef("MediaStream")}} as a local source of audio or video. Instead of using this obsolete method, you should instead use {{DOMxRef("RTCPeerConnection.addTrack", "addTrack()")}} once for each track you wish to send to the remote peer. -- {{DOMxRef("RTCPeerConnection.createDTMFSender", "createDTMFSender()")}} {{Deprecated_Inline}} +- {{DOMxRef("RTCPeerConnection.createDTMFSender", "createDTMFSender()")}} {{Deprecated_Inline}} {{non-standard_inline}} - : Creates a new {{DOMxRef("RTCDTMFSender")}}, associated to a specific {{DOMxRef("MediaStreamTrack")}}, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection. - {{DOMxRef("RTCPeerConnection.removeStream", "removeStream()")}} {{Deprecated_Inline}} {{Non-standard_Inline}} - : Removes a {{DOMxRef("MediaStream")}} as a local source of audio or video. diff --git a/files/en-us/web/api/websocketstream/close/index.md b/files/en-us/web/api/websocketstream/close/index.md index e5da648f510653a..57e177a495fa546 100644 --- a/files/en-us/web/api/websocketstream/close/index.md +++ b/files/en-us/web/api/websocketstream/close/index.md @@ -5,11 +5,10 @@ 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}} +{{APIRef("WebSockets API")}}{{SeeCompatTable}} 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. diff --git a/files/en-us/web/api/websocketstream/closed/index.md b/files/en-us/web/api/websocketstream/closed/index.md index 333fd2cd9ff3861..f1198b7fb63a312 100644 --- a/files/en-us/web/api/websocketstream/closed/index.md +++ b/files/en-us/web/api/websocketstream/closed/index.md @@ -5,11 +5,10 @@ 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}} +{{APIRef("WebSockets API")}}{{SeeCompatTable}} 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. diff --git a/files/en-us/web/api/websocketstream/index.md b/files/en-us/web/api/websocketstream/index.md index 462c2f47157b75e..88ab63b7a53be82 100644 --- a/files/en-us/web/api/websocketstream/index.md +++ b/files/en-us/web/api/websocketstream/index.md @@ -4,11 +4,10 @@ slug: Web/API/WebSocketStream page-type: web-api-interface status: - experimental - - non-standard browser-compat: api.WebSocketStream --- -{{APIRef("WebSockets API")}}{{non-standard_header}} +{{APIRef("WebSockets API")}}{{SeeCompatTable}} 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. @@ -16,21 +15,21 @@ The **`WebSocketStream`** interface of the {{domxref("WebSockets API", "WebSocke ## Constructor -- {{domxref("WebSocketStream.WebSocketStream", "WebSocketStream()")}} +- {{domxref("WebSocketStream.WebSocketStream", "WebSocketStream()")}} {{experimental_inline}} - : Creates a new `WebSocketStream` object instance. ## Instance properties -- {{domxref("WebSocketStream.url", "url")}} {{ReadOnlyInline}} +- {{domxref("WebSocketStream.url", "url")}} {{ReadOnlyInline}} {{experimental_inline}} - : Returns the URL of the WebSocket server that the `WebSocketStream` instance was created with. -- {{domxref("WebSocketStream.closed", "closed")}} {{ReadOnlyInline}} +- {{domxref("WebSocketStream.closed", "closed")}} {{ReadOnlyInline}} {{experimental_inline}} - : 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}} +- {{domxref("WebSocketStream.opened", "opened")}} {{ReadOnlyInline}} {{experimental_inline}} - : 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()")}} +- {{domxref("WebSocketStream.close", "close()")}} {{experimental_inline}} - : Closes the WebSocket connection. ## Examples diff --git a/files/en-us/web/api/websocketstream/opened/index.md b/files/en-us/web/api/websocketstream/opened/index.md index 7526f783c11a5d5..b898050e0e4189e 100644 --- a/files/en-us/web/api/websocketstream/opened/index.md +++ b/files/en-us/web/api/websocketstream/opened/index.md @@ -5,11 +5,10 @@ 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}} +{{APIRef("WebSockets API")}}{{SeeCompatTable}} 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. diff --git a/files/en-us/web/api/websocketstream/url/index.md b/files/en-us/web/api/websocketstream/url/index.md index 3761d3d14627ea9..b1f4f0e7b0de96c 100644 --- a/files/en-us/web/api/websocketstream/url/index.md +++ b/files/en-us/web/api/websocketstream/url/index.md @@ -5,11 +5,10 @@ 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}} +{{APIRef("WebSockets API")}}{{SeeCompatTable}} The **`url`** read-only property of the {{domxref("WebSocketStream")}} interface returns the URL of the WebSocket server that the `WebSocketStream` instance was created with. diff --git a/files/en-us/web/api/websocketstream/websocketstream/index.md b/files/en-us/web/api/websocketstream/websocketstream/index.md index ec669c489420031..2c0948b56a29854 100644 --- a/files/en-us/web/api/websocketstream/websocketstream/index.md +++ b/files/en-us/web/api/websocketstream/websocketstream/index.md @@ -5,11 +5,10 @@ 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}} +{{APIRef("WebSockets API")}}{{SeeCompatTable}} The **`WebSocketStream()`** constructor creates a new {{domxref("WebSocketStream")}} object instance. From 779045977059a6809ba82548352ce1b00d70dfc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=BF=E3=81=91CAT?= Date: Wed, 18 Sep 2024 21:33:37 +0900 Subject: [PATCH 005/125] Fix GPUInternalError (#35931) --- files/en-us/web/api/gpuinternalerror/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/gpuinternalerror/index.md b/files/en-us/web/api/gpuinternalerror/index.md index 6adb0a8a85cd3d6..212c8b59c6c2dfd 100644 --- a/files/en-us/web/api/gpuinternalerror/index.md +++ b/files/en-us/web/api/gpuinternalerror/index.md @@ -9,7 +9,7 @@ browser-compat: api.GPUInternalError {{APIRef("WebGPU API")}}{{SeeCompatTable}}{{SecureContext_Header}} -The **`GPUInternalError`** interface of the {{domxref("WebGPU API", "WebGPU API", "", "nocode")}} describes an application error indicating that an operation did not pass the WebGPU API's validation constraints. +The **`GPUInternalError`** interface of the {{domxref("WebGPU API", "WebGPU API", "", "nocode")}} describes an application error indicating that an operation failed for a system or implementation-specific reason, even when all validation requirements were satisfied. It represents one of the types of errors surfaced by {{domxref("GPUDevice.popErrorScope")}} and the {{domxref("GPUDevice.uncapturederror_event", "uncapturederror")}} event. From 707518ff85e56b410289555e56328d10abbe1a9c Mon Sep 17 00:00:00 2001 From: Shell <116480892+shellheim@users.noreply.github.com> Date: Wed, 18 Sep 2024 13:56:08 +0000 Subject: [PATCH 006/125] Change wrongly used `` to ` +``` + +### JavaScript + +```js +const btn = document.getElementById("btn"); + +btn.addEventListener("click", () => { + changeText(); +}); + +function changeText() { + const textarea = document.getElementById("text-box"); + textarea.focus(); + textarea.setRangeText("ALREADY", 14, 17, "select"); +} +``` + +### Result + +{{EmbedLiveSample("Examples")}} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{HTMLElement("textarea")}} +- {{domxref("HTMLTextAreaElement")}} +- {{domxref("HTMLTextAreaElement.select()")}} +- {{domxref("HTMLTextAreaElement.setSelectionRange()")}} +- {{domxref("HTMLTextAreaElement.textLength")}} +- {{domxref("Selection")}} +- {{cssxref("::selection")}} pseudo-element diff --git a/files/en-us/web/api/htmltextareaelement/setselectionrange/index.md b/files/en-us/web/api/htmltextareaelement/setselectionrange/index.md new file mode 100644 index 000000000000000..635bf58682dc385 --- /dev/null +++ b/files/en-us/web/api/htmltextareaelement/setselectionrange/index.md @@ -0,0 +1,81 @@ +--- +title: "HTMLTextAreaElement: setSelectionRange() method" +short-title: setSelectionRange() +slug: Web/API/HTMLTextAreaElement/setSelectionRange +page-type: web-api-instance-method +browser-compat: api.HTMLTextAreaElement.setSelectionRange +--- + +{{APIRef("HTML DOM")}} + +The **setSelectionRange()`** method of the {{domxref("HTMLTextAreaElement")}} interface sets the start and end positions of the current text selection, and optionally the direction, in an {{HTMLElement("textarea")}} element. The direction indicates the in which selection should be considered to have occurred; for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning. In addition, the {{domxref("HTMLTextAreaElement.select_event", "select")}} and {{domxref("HTMLTextAreaElement.selectionchange_event", "selectchange")}} events are fired. + +This method also updates the {{domxref("HTMLTextAreaElement.selectionStart")}}, {{domxref("HTMLTextAreaElement.selectionEnd")}}, and {{domxref("HTMLTextAreaElement.selectionDirection")}} properties. + +> [!NOTE] +> The `
@@ -518,25 +520,25 @@ const h1 = document.querySelector("h1"); select.addEventListener("change", () => { const choice = select.value; + createCalendar(choice); +}); +function createCalendar(month) { let days = 31; - if (choice === "February") { + + if (month === "February") { days = 28; } else if ( - choice === "April" || - choice === "June" || - choice === "September" || - choice === "November" + month === "April" || + month === "June" || + month === "September" || + month === "November" ) { days = 30; } - createCalendar(days, choice); -}); - -function createCalendar(days, choice) { list.textContent = ""; - h1.textContent = choice; + h1.textContent = month; for (let i = 1; i <= days; i++) { const listItem = document.createElement("li"); listItem.textContent = i; @@ -544,7 +546,8 @@ function createCalendar(days, choice) { } } -createCalendar(31, "January");`; +select.value = "January"; +createCalendar("January");`; function outputDocument(code) { const outputBody = ` From bd0943479fcba3b885f72892a3c11cc1222878ce Mon Sep 17 00:00:00 2001 From: Brian Thomas Smith Date: Mon, 23 Sep 2024 11:57:01 +0200 Subject: [PATCH 061/125] feat(http): Describe how reverse proxies transform ETags when content encoding changes (#35849) * chore(http): Apache ETag transforms with mod_deflate compression * chore(http): Apache ETag transforms with mod_deflate compression * Update files/en-us/web/http/conditional_requests/index.md Co-authored-by: Hamish Willee * Update files/en-us/web/http/conditional_requests/index.md Co-authored-by: Hamish Willee * Update files/en-us/web/http/conditional_requests/index.md Co-authored-by: Hamish Willee --------- Co-authored-by: Hamish Willee --- .../web/http/conditional_requests/index.md | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/files/en-us/web/http/conditional_requests/index.md b/files/en-us/web/http/conditional_requests/index.md index 0cef5b3fffec138..f443dd1455da019 100644 --- a/files/en-us/web/http/conditional_requests/index.md +++ b/files/en-us/web/http/conditional_requests/index.md @@ -6,7 +6,9 @@ page-type: guide {{HTTPSidebar}} -HTTP has a concept of _conditional requests_, where the result, and even the success of a request, can be changed by comparing the affected resources with the value of a _validator_. Such requests can be useful to validate the content of a cache, and sparing a useless control, to verify the integrity of a document, like when resuming a download, or when preventing lost updates when uploading or modifying a document on the server. +HTTP has a concept of _conditional requests_, where the result, and even the success of a request, can be controlled by comparing the affected resources with a _validator_. +These requests are useful for validating cached content, ensuring that it is only fetched if it differs from the copy that is already available to the browser. +Conditional requests are also useful for ensuring the integrity of a document when resuming a download, or preventing lost updates when uploading or modifying a document on the server. ## Principles @@ -22,7 +24,7 @@ The different behaviors are defined by the method of the request used, and by th All conditional headers try to check if the resource stored on the server matches a specific version. To achieve this, the conditional requests need to indicate the version of the resource. As comparing the whole resource byte to byte is impracticable, and not always what is wanted, the request transmits a value describing the version. Such values are called _validators_, and are of two kinds: - the date of last modification of the document, the _last-modified_ date. -- an opaque string, uniquely identifying each version, called the _entity tag_, or the _etag_. +- an opaque string, uniquely identifying each version, called the _entity tag_, or the _ETag_. Comparing versions of the same resource is a bit tricky: depending on the context, there are two kinds of _equality checks_: @@ -37,9 +39,13 @@ Strong validation consists of guaranteeing that the resource is, byte to byte, i It is quite difficult to have a unique identifier for strong validation with {{HTTPHeader("Last-Modified")}}. Often this is done using an {{HTTPHeader("ETag")}} with the MD5 hash of the resource (or a derivative). +> [!NOTE] +> Because a change of content encoding requires a change to an ETag, some servers modify ETags when compressing responses from an origin server (reverse proxies, for example). +> Apache Server appends the name of the compression method (`-gzip`) to ETags by default, but this is [configurable using the `DeflateAlterETag` directive](https://httpd.apache.org/docs/2.4/mod/mod_deflate.html). + ### Weak validation -Weak validation differs from strong validation, as it considers two versions of the document as identical if the content is equivalent. For example, a page that would differ from another only by a different date in its footer, or different advertising, would be considered _identical_ to the other with weak validation. These same two versions are considered _different_ when using strong validation. Building a system of etags that creates weak validation may be complex, as it involves knowing the importance of the different elements of a page, but is very useful towards optimizing cache performance. +Weak validation differs from strong validation, as it considers two versions of the document as identical if the content is equivalent. For example, a page that would differ from another only by a different date in its footer, or different advertising, would be considered _identical_ to the other with weak validation. These same two versions are considered _different_ when using strong validation. Building a system of ETags that uses weak validation is very useful for optimizing cache performance, but may be complex, as it involves knowing the importance of the different elements of a page. ## Conditional headers @@ -54,7 +60,7 @@ Several HTTP headers, called conditional headers, lead to conditional requests. - {{HTTPHeader("If-Unmodified-Since")}} - : Succeeds if the {{HTTPHeader("Last-Modified")}} date of the distant resource is older or the same as the one given in this header. - {{HTTPHeader("If-Range")}} - - : Similar to {{HTTPHeader("If-Match")}}, or {{HTTPHeader("If-Unmodified-Since")}}, but can have only one single etag, or one date. If it fails, the range request fails, and instead of a {{HTTPStatus("206")}} `Partial Content` response, a {{HTTPStatus("200")}} `OK` is sent with the complete resource. + - : Similar to {{HTTPHeader("If-Match")}}, or {{HTTPHeader("If-Unmodified-Since")}}, but can have only one single ETag or one date. If it fails, the range request fails, and instead of a {{HTTPStatus("206", "206 Partial Content")}} response, a {{HTTPStatus("200", "200 OK")}} is sent with the complete resource. ## Use cases @@ -99,7 +105,7 @@ Even if this method works, it adds an extra response/request exchange when the d ![The If-Range headers allows the server to directly send back the complete resource if it has been modified, no need to send a 412 error and wait for the client to re-initiate the download.](https://mdn.github.io/shared-assets/images/diagrams/http/conditional-requests/resume-download-4.svg) -This solution is more efficient, but slightly less flexible, as only one etag can be used in the condition. Rarely is such additional flexibility needed. +This solution is more efficient, but slightly less flexible, as only one ETag can be used in the condition. Rarely is such additional flexibility needed. ### Avoiding the lost update problem with optimistic locking @@ -119,11 +125,11 @@ Conditional requests allow implementing the _optimistic locking algorithm_ (used ![Conditional requests allow to implement optimistic locking: now the quickest wins, and the others get an error.](https://mdn.github.io/shared-assets/images/diagrams/http/conditional-requests/optimistic-locking-3.svg) -This is implemented using the {{HTTPHeader("If-Match")}} or {{HTTPHeader("If-Unmodified-Since")}} headers. If the etag doesn't match the original file, or if the file has been modified since it has been obtained, the change is rejected with a {{HTTPStatus("412", "412 Precondition Failed")}} error. It is then up to the client to deal with the error: either by notifying the user to start again (this time on the newest version), or by showing the user a _diff_ of both versions, helping them decide which changes they wish to keep. +This is implemented using the {{HTTPHeader("If-Match")}} or {{HTTPHeader("If-Unmodified-Since")}} headers. If the ETag doesn't match the original file, or if the file has been modified since it has been obtained, the change is rejected with a {{HTTPStatus("412", "412 Precondition Failed")}} error. It is then up to the client to deal with the error: either by notifying the user to start again (this time on the newest version), or by showing the user a _diff_ of both versions, helping them decide which changes they wish to keep. ### Dealing with the first upload of a resource -The first upload of a resource is an edge case of the previous. Like any update of a resource, it is subject to a race condition if two clients try to perform at similar times. To prevent this, conditional requests can be used: by adding {{HTTPHeader("If-None-Match")}} with the special value of `'*'`, representing any etag. The request will succeed, only if the resource didn't exist before: +The first upload of a resource is an edge case of the previous. Like any update of a resource, it is subject to a race condition if two clients try to perform at similar times. To prevent this, conditional requests can be used: by adding {{HTTPHeader("If-None-Match")}} with the special value of `*`, representing any ETag. The request will succeed, only if the resource didn't exist before: ![Like for a regular upload, the first upload of a resource is subject to a race condition: If-None-Match can prevent it.](https://mdn.github.io/shared-assets/images/diagrams/http/conditional-requests/first-upload.svg) @@ -131,8 +137,14 @@ The first upload of a resource is an edge case of the previous. Like any update ## Conclusion -Conditional requests are a key feature of HTTP, and allow the building of efficient and complex applications. For caching or resuming downloads, the only work required for webmasters is to configure the server correctly; setting correct etags in some environments can be tricky. Once achieved, the browser will serve the expected conditional requests. +Conditional requests are a key feature of HTTP, and allow the building of efficient and complex applications. For caching or resuming downloads, the only work required for webmasters is to configure the server correctly; setting correct ETags in some environments can be tricky. Once achieved, the browser will serve the expected conditional requests. For locking mechanisms, it is the opposite: Web developers need to issue a request with the proper headers, while webmasters can mostly rely on the application to carry out the checks for them. In both cases it's clear, conditional requests are a fundamental feature behind the Web. + +## See also + +- {{HTTPStatus("304", "304 Not Modified")}} +- {{HTTPHeader("If-None-Match")}} +- [Apache Server `mod_deflate.c`](https://github.com/apache/httpd/blob/4348e8cb7d8c41b1c8019ceb0a1612bb4a3384f7/modules/filters/mod_deflate.c#L495-L500) transforms ETags during compression From a8038dcd29e001192ba1b2166dfbff5b76f1ce55 Mon Sep 17 00:00:00 2001 From: Abinash Satapathy Date: Mon, 23 Sep 2024 12:12:26 +0200 Subject: [PATCH 062/125] docs: Minor typo (#36010) --- files/en-us/web/http/status/403/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/http/status/403/index.md b/files/en-us/web/http/status/403/index.md index 49e021adab71673..b228b7575685cbe 100644 --- a/files/en-us/web/http/status/403/index.md +++ b/files/en-us/web/http/status/403/index.md @@ -12,7 +12,7 @@ This status is similar to {{HTTPStatus("401")}}, except that for **`403 Forbidde The request failure is tied to application logic, such as insufficient permissions to a resource or action. Clients that receive a `403` response should expect that repeating the request without modification will fail with the same error. -Server owners may decided to send a {{HTTPStatus("404")}} response instead of a 403 if acknowledging the existence of a resource to clients with insufficient privileges is not desired. +Server owners may decide to send a {{HTTPStatus("404")}} response instead of a 403 if acknowledging the existence of a resource to clients with insufficient privileges is not desired. ## Status From 3e7b55aa06cc2986747734b3b27e1facd6e690aa Mon Sep 17 00:00:00 2001 From: Tommy Joe Lund Date: Mon, 23 Sep 2024 12:13:56 +0200 Subject: [PATCH 063/125] fix: typo in files/en-us/web/html/element/datalist/index.md (#36008) Fix typo in index.md --- files/en-us/web/html/element/datalist/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/datalist/index.md b/files/en-us/web/html/element/datalist/index.md index fda492794fd7f75..c77f9fa86141411 100644 --- a/files/en-us/web/html/element/datalist/index.md +++ b/files/en-us/web/html/element/datalist/index.md @@ -16,7 +16,7 @@ Only certain types of {{HTMLElement("input")}} support this behavior, and it can Each `