From ca1fc680cd7c7c04bed18d8ab1fa3988bf7e972e Mon Sep 17 00:00:00 2001 From: Piyush Bhaskar <102078527+Piyush-r-bhaskar@users.noreply.github.com> Date: Mon, 28 Oct 2024 16:47:09 +0530 Subject: [PATCH 01/49] chore(learn): change forms AMPPS link to XAMPP for local PHP testing on Linux (#36494) Update index.md | XAMPP allows you to develop, test, and build websites on a local server. Co-authored-by: Brian Thomas Smith --- .../en-us/learn/forms/sending_and_retrieving_form_data/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/forms/sending_and_retrieving_form_data/index.md b/files/en-us/learn/forms/sending_and_retrieving_form_data/index.md index f7e27d083a2c5bd..d0eb96517113b2d 100644 --- a/files/en-us/learn/forms/sending_and_retrieving_form_data/index.md +++ b/files/en-us/learn/forms/sending_and_retrieving_form_data/index.md @@ -213,7 +213,7 @@ This example displays a page with the data we sent. You can see this in action i ![Otherwise blank web page with "hi mom", the data received in response after submitting form data to a php file with POST method](php-result.png) > [!NOTE] -> This example won't work when you load it into a browser locally — browsers cannot interpret PHP code, so when the form is submitted the browser will just offer to download the PHP file for you. To get it to work, you need to run the example through a PHP server of some kind. Good options for local PHP testing are [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) and [AMPPS](https://ampps.com/downloads/) (Mac, Windows, Linux). +> This example won't work when you load it into a browser locally — browsers cannot interpret PHP code, so when the form is submitted the browser will just offer to download the PHP file for you. To get it to work, you need to run the example through a PHP server of some kind. Good options for local PHP testing are [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) and [XAMPP](https://www.apachefriends.org/download.html) (Mac, Windows, Linux). > > Note also that if you are using MAMP but don't have MAMP Pro installed (or if the MAMP Pro demo time trial has expired), you might have trouble getting it working. To get it working again, we have found that you can load up the MAMP app, then choose the menu options _MAMP_ > _Preferences_ > _PHP_, and set "Standard Version:" to "7.2.x" (x will differ depending on what version you have installed). From 2379747e3cefc009c6a00ec52e88d66ff15c5397 Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Mon, 28 Oct 2024 12:37:24 +0000 Subject: [PATCH 02/49] Add features list to GPUSupportedFeatures page (#36398) * Add features list to GPUSupportedFeatures page * Add notes about feature requirements * Fixes for beaufortfrancois review comments * Add notes to make it clear which features are not supported yet --- .../begincomputepass/index.md | 2 +- .../beginrenderpass/index.md | 2 +- .../web/api/gpudevice/createqueryset/index.md | 3 ++- .../gpudevice/createrenderpipeline/index.md | 16 ++++++++++++- .../web/api/gpudevice/createsampler/index.md | 3 +++ .../api/gpudevice/createshadermodule/index.md | 6 +++++ .../web/api/gpudevice/createtexture/index.md | 14 +++++++++++ files/en-us/web/api/gpuqueryset/index.md | 4 ++-- files/en-us/web/api/gpuqueryset/type/index.md | 3 +++ .../drawindexedindirect/index.md | 3 +++ .../drawindirect/index.md | 3 +++ .../drawindexedindirect/index.md | 3 ++- .../drawindirect/index.md | 3 +++ .../web/api/gpusupportedfeatures/index.md | 24 +++++++++++++++++-- files/en-us/web/api/gputexture/index.md | 2 +- 15 files changed, 81 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/api/gpucommandencoder/begincomputepass/index.md b/files/en-us/web/api/gpucommandencoder/begincomputepass/index.md index 560bce724acca0c..73c3f33c326abb3 100644 --- a/files/en-us/web/api/gpucommandencoder/begincomputepass/index.md +++ b/files/en-us/web/api/gpucommandencoder/begincomputepass/index.md @@ -39,7 +39,7 @@ beginComputePass(descriptor) - `querySet`: The {{domxref("GPUQuerySet")}} that the timestamp will be written to. > [!NOTE] - > To use timestamp queries, the `timestamp-query` {{domxref("GPUSupportedFeatures", "feature", "", "nocode")}} must be enabled in the {{domxref("GPUDevice")}}. + > The `timestamp-query` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to use timestamp queries. ### Return value diff --git a/files/en-us/web/api/gpucommandencoder/beginrenderpass/index.md b/files/en-us/web/api/gpucommandencoder/beginrenderpass/index.md index aafc27a18a13e8a..2d6e406d0b0e884 100644 --- a/files/en-us/web/api/gpucommandencoder/beginrenderpass/index.md +++ b/files/en-us/web/api/gpucommandencoder/beginrenderpass/index.md @@ -46,7 +46,7 @@ beginRenderPass(descriptor) - `querySet`: The {{domxref("GPUQuerySet")}} that the timestamp will be written to. > [!NOTE] - > To use timestamp queries, the `timestamp-query` {{domxref("GPUSupportedFeatures", "feature", "", "nocode")}} must be enabled in the {{domxref("GPUDevice")}}. + > The `timestamp-query` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to use timestamp queries. ### Color attachment object structure diff --git a/files/en-us/web/api/gpudevice/createqueryset/index.md b/files/en-us/web/api/gpudevice/createqueryset/index.md index 17794d332b5eb42..c035e1b7ba875f4 100644 --- a/files/en-us/web/api/gpudevice/createqueryset/index.md +++ b/files/en-us/web/api/gpudevice/createqueryset/index.md @@ -39,7 +39,8 @@ createQuerySet(descriptor) - : Timestamp queries allow applications to write timestamps to a {{domxref("GPUQuerySet")}}. To run a timestamp query, appropriate {{domxref("GPUQuerySet")}}s must be provided inside the value of the `timestampWrites` descriptor property when invoking {{domxref("GPUCommandEncoder.beginRenderPass()")}} to run a render pass, or {{domxref("GPUCommandEncoder.beginComputePass()")}} to run a compute pass. Alternatively, you can run a single timestamp query at any time by invoking {{domxref("GPUCommandEncoder.writeTimeStamp()")}} with an appropriate {{domxref("GPUQuerySet")}} as a parameter. - To use timestamp queries, the `timestamp-query` {{domxref("GPUSupportedFeatures", "feature", "", "nocode")}} must be enabled in the {{domxref("GPUDevice")}}. + > [!NOTE] + > The `timestamp-query` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to use timestamp queries. ### Return value diff --git a/files/en-us/web/api/gpudevice/createrenderpipeline/index.md b/files/en-us/web/api/gpudevice/createrenderpipeline/index.md index c7caf8270fc35ae..2f5d47d08264080 100644 --- a/files/en-us/web/api/gpudevice/createrenderpipeline/index.md +++ b/files/en-us/web/api/gpudevice/createrenderpipeline/index.md @@ -162,16 +162,23 @@ The `fragment` object contains an array of objects, each of which can contain th - `"one"` - `"one-minus-dst"` - `"one-minus-src"` + - `"one-minus-src1"` - `"one-minus-src-alpha"` + - `"one-minus-src1-alpha"` - `"one-minus-dst-alpha"` - `"one-minus-constant"` - `"src"` + - `"src1"` - `"src-alpha"` + - `"src1-alpha"` - `"src-alpha-saturated"` - `"zero"` If omitted, `dstFactor` defaults to `"zero"`. + > [!NOTE] + > The `dual-source-blending` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled for the `src1`, `one-minus-src1`, `src1-alpha`, and `one-minus-src1-alpha` blend factor operations to be used successfully. If not, a {{domxref("GPUValidationError")}} is generated. + - `operation` {{optional_inline}} - : An enumerated value that defines the algorithm used to combine source and destination blend factors, to calculate the final values written to the target attachment components. Possible values are: @@ -250,6 +257,8 @@ The `primitive` object can contain the following properties: If omitted, `frontFace` defaults to `"ccw"`. + > [!NOTE] > `frontFace` and `cullMode` have no effect on `"point-list"`, `"line-list"`, or `"line-strip"` topologies. + - `stripIndexFormat` {{optional_inline}} - : An enumerated value that determines the index buffer format and primitive restart value in the case of pipelines with strip topologies (`"line-strip"` or `"triangle-strip"`). The primitive restart value specifies which index value indicates that a new primitive should be started rather than continuing to construct the strip with the prior indexed vertices. Possible values are: @@ -272,9 +281,11 @@ The `primitive` object can contain the following properties: If omitted, `topology` defaults to `"triangle-list"`. - `unclippedDepth` {{optional_inline}} + - : A boolean. A value of `true` indicates that depth clipping is disabled. If omitted, `unclippedDepth` defaults to `false`. Note that to control depth clipping, the `depth-clip-control` {{domxref("GPUSupportedFeatures", "feature", "", "nocode")}} must be enabled in the {{domxref("GPUDevice")}}. -> **Note:** `frontFace` and `cullMode` have no effect on `"point-list"`, `"line-list"`, or `"line-strip"` topologies. + > [!NOTE] + > The `depth-clip-control` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled for the `unclippedDepth` property to be used successfully. If not, a {{domxref("GPUValidationError")}} is generated. ### `vertex` object structure @@ -346,6 +357,9 @@ The following criteria must be met when calling **`createRenderPipeline()`**, ot - `targets.length` is less than or equal to the {{domxref("GPUDevice")}}'s `maxColorAttachments` {{domxref("GPUSupportedLimits", "limit", "", "nocode")}}. - For each `target`, `writeMask`'s numeric equivalent is less than 16. - If any of the used blend factor operations use the source alpha channel (for example `"src-alpha-saturated"`), the output has an alpha channel (that is, it must be a `vec4`). + - If the `src1`, `one-minus-src1`, `src1-alpha`, or `one-minus-src1-alpha` blend factor operations are used, the `dual-source-blending` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) is enabled. +- For `primitive` objects: + - If the `unclippedDepth` property is used, the `depth-clip-control` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) is enabled. ## Examples diff --git a/files/en-us/web/api/gpudevice/createsampler/index.md b/files/en-us/web/api/gpudevice/createsampler/index.md index e652eb40dcc3c42..46907ae3b4d4343 100644 --- a/files/en-us/web/api/gpudevice/createsampler/index.md +++ b/files/en-us/web/api/gpudevice/createsampler/index.md @@ -82,6 +82,9 @@ createSampler(descriptor) If omitted, `magFilter` defaults to `"nearest"`. + > [!NOTE] + > The `float32-filterable` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled for `r32float`-, `rg32float`-, and `rgba32float`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}s to be filterable. + - `minFilter` {{optional_inline}} - : An enumerated value specifying the sampling behavior when the sample footprint is larger than one texel. Possible and default values are the same as for `magFilter`. - `mipmapFilter` {{optional_inline}} diff --git a/files/en-us/web/api/gpudevice/createshadermodule/index.md b/files/en-us/web/api/gpudevice/createshadermodule/index.md index 8293006df130a58..082a0da392e77ae 100644 --- a/files/en-us/web/api/gpudevice/createshadermodule/index.md +++ b/files/en-us/web/api/gpudevice/createshadermodule/index.md @@ -49,6 +49,12 @@ createShaderModule(descriptor) A {{domxref("GPUShaderModule")}} object instance. +### Validation + +The following criteria must be met when calling **`createShaderModule()`**, otherwise a {{domxref("GPUValidationError")}} is generated and an invalid {{domxref("GPUShaderModule")}} object is returned: + +- If your shader's WGSL code uses the half-precision floating-point type [`f16`](https://gpuweb.github.io/gpuweb/wgsl/#extension-f16), it includes `enable f16;` at the top, and the associated {{domxref("GPUDevice")}} is created with the `shader-f16` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) enabled. + ## Examples In our [basic render demo](https://mdn.github.io/dom-examples/webgpu-render-demo/), our shader module is created using the following code: diff --git a/files/en-us/web/api/gpudevice/createtexture/index.md b/files/en-us/web/api/gpudevice/createtexture/index.md index 4cba5459ee99ef3..b6e812d4f91849b 100644 --- a/files/en-us/web/api/gpudevice/createtexture/index.md +++ b/files/en-us/web/api/gpudevice/createtexture/index.md @@ -36,7 +36,16 @@ createTexture(descriptor) `dimension` defaults to `"2d"` if the value is omitted. - `format` + - : An enumerated value specifying the format of the texture. See the [Texture formats](https://gpuweb.github.io/gpuweb/#enumdef-gputextureformat) section of the specification for all the possible values. + + > [!NOTE] + > + > - The `depth32float-stencil8` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to create `depth32float-stencil8`-format {{domxref("GPUTexture")}}s. + > - The `texture-compression-bc` feature needs to be enabled to create two-dimensional BC compressed `GPUTexture`s: `bc1-rgba-unorm`, `bc1-rgba-unorm-srgb`, `bc2-rgba-unorm`, `bc2-rgba-unorm-srgb`, `bc3-rgba-unorm`, `bc3-rgba-unorm-srgb`, `bc4-r-unorm`, `bc4-r-snorm`, `bc5-rg-unorm`, `bc5-rg-snorm`, `bc6h-rgb-ufloat`, `bc6h-rgb-float`, `bc7-rgba-unorm`, and `bc7-rgba-unorm-srgb` formats. + > - The `texture-compression-astc` feature needs to be enabled to create two-dimensional ASTC compressed `GPUTexture`s: `astc-4x4-unorm`, `astc-4x4-unorm-srgb`, `astc-5x4-unorm`, `astc-5x4-unorm-srgb`, `astc-5x5-unorm`, `astc-5x5-unorm-srgb`, `astc-6x5-unorm`, `astc-6x5-unorm-srgb`, `astc-6x6-unorm`, `astc-6x6-unorm-srgb`, `astc-8x5-unorm`, `astc-8x5-unorm-srgb`, `astc-8x6-unorm`, `astc-8x6-unorm-srgb`, `astc-8x8-unorm`, `astc-8x8-unorm-srgb`, `astc-10x5-unorm`, `astc-10x5-unorm-srgb`, `astc-10x6-unorm`, `astc-10x6-unorm-srgb`, `astc-10x8-unorm`, `astc-10x8-unorm-srgb`, `astc-10x10-unorm`, `astc-10x10-unorm-srgb`, `astc-12x10-unorm`, `astc-12x10-unorm-srgb`, and `astc-12x12-unorm``astc-12x12-unorm-srgb` formats. + > - The `texture-compression-etc2` feature needs to be enabled to create two-dimensional ETC2 compressed `GPUTexture`s: `etc2-rgb8unorm`, `etc2-rgb8unorm-srgb`, `etc2-rgb8a1unorm`, `etc2-rgb8a1unorm-srgb`, `etc2-rgba8unorm`, `etc2-rgba8unorm-srgb`, `eac-r11unorm`, `eac-r11snorm`, `eac-rg11unorm`, and `eac-rg11snorm` formats. + - `label` {{optional_inline}} - : A string providing a label that can be used to identify the object, for example in {{domxref("GPUError")}} messages or console warnings. - `mipLevelCount` {{optional_inline}} @@ -73,6 +82,11 @@ createTexture(descriptor) usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT; ``` + > [!NOTE] + > + > - The `bgra8unorm-storage` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to specify `STORAGE_BINDING` usage for a `bgra8unorm`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}. + > - The `rg11b10ufloat-renderable` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to specify `RENDER_ATTACHMENT` usage for a `rg11b10ufloat`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}, as well as its blending and multisampling. + - `viewFormats` {{optional_inline}} - : An array of enumerated values specifying other [texture formats](https://gpuweb.github.io/gpuweb/#enumdef-gputextureformat) permitted when calling {{domxref("GPUTexture.createView()")}} on this texture, in addition to the texture format specified in its `format` value. diff --git a/files/en-us/web/api/gpuqueryset/index.md b/files/en-us/web/api/gpuqueryset/index.md index 0f47bd99ede2705..380f53ae65da944 100644 --- a/files/en-us/web/api/gpuqueryset/index.md +++ b/files/en-us/web/api/gpuqueryset/index.md @@ -13,10 +13,10 @@ The **`GPUQuerySet`** interface of the {{domxref("WebGPU API", "WebGPU API", "", - Occlusion queries are available on render passes to query whether any fragment samples pass all the per-fragment tests for a set of drawing commands (including scissor, sample mask, alpha to coverage, stencil, and depth tests). To run an occlusion query, an appropriate `GPUQuerySet` must be provided as the value of the `occlusionQuerySet` descriptor property when invoking {{domxref("GPUCommandEncoder.beginRenderPass()")}} to run a render pass. -- Timestamp queries allow applications to write timestamps to a `GPUQuerySet`. To run a timestamp query, appropriate `GPUQuerySet`s must be provided inside the value of the `timestampWrites` descriptor property when invoking {{domxref("GPUCommandEncoder.beginRenderPass()")}} to run a render pass, or {{domxref("GPUCommandEncoder.beginComputePass()")}} to run a compute pass. Alternatively, you can run a single timestamp query at any time by invoking {{domxref("GPUCommandEncoder.writeTimeStamp()")}} with an appropriate `GPUQuerySet` as a parameter. +- Timestamp queries allow applications to write timestamps to a `GPUQuerySet`. To run a timestamp query, appropriate `GPUQuerySet`s must be provided inside the value of the `timestampWrites` descriptor property when invoking {{domxref("GPUCommandEncoder.beginRenderPass()")}} to run a render pass, or {{domxref("GPUCommandEncoder.beginComputePass()")}} to run a compute pass. > [!NOTE] -> To use timestamp queries, the `timestamp-query` {{domxref("GPUSupportedFeatures", "feature", "", "nocode")}} must be enabled in the {{domxref("GPUDevice")}}. +> The `timestamp-query` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to use timestamp queries. A `GPUQuerySet` object instance is created using the {{domxref("GPUDevice.createQuerySet()")}} method. diff --git a/files/en-us/web/api/gpuqueryset/type/index.md b/files/en-us/web/api/gpuqueryset/type/index.md index 801287c037fe835..cfc2ff2fb3ad38e 100644 --- a/files/en-us/web/api/gpuqueryset/type/index.md +++ b/files/en-us/web/api/gpuqueryset/type/index.md @@ -22,6 +22,9 @@ An enumerated value. Possible values are: - `"timestamp"` - : The `GPUQuerySet` manages timestamp queries. +> [!NOTE] +> The `timestamp-query` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to use timestamp queries. + ## Examples See the main [`GPUQuerySet`](/en-US/docs/Web/API/GPUQuerySet#examples) page for an example. diff --git a/files/en-us/web/api/gpurenderbundleencoder/drawindexedindirect/index.md b/files/en-us/web/api/gpurenderbundleencoder/drawindexedindirect/index.md index a7f69ba65627cb1..06790f2e83eb612 100644 --- a/files/en-us/web/api/gpurenderbundleencoder/drawindexedindirect/index.md +++ b/files/en-us/web/api/gpurenderbundleencoder/drawindexedindirect/index.md @@ -40,6 +40,9 @@ drawIndexedIndirect(indirectBuffer, indirectOffset) device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length); ``` + > [!NOTE] + > The `indirect-first-instance` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled for non-zero `firstInstance` values to be used. If the `indirect-first-instance` feature is not enabled and `firstInstance` is not zero, the `drawIndexedIndirect()` call will be treated as a no-op. + - `indirectOffset` - : The offset, in bytes, into `indirectBuffer` where the value data begins. diff --git a/files/en-us/web/api/gpurenderbundleencoder/drawindirect/index.md b/files/en-us/web/api/gpurenderbundleencoder/drawindirect/index.md index 9d154356123dfac..2df5a2fc8a9ca48 100644 --- a/files/en-us/web/api/gpurenderbundleencoder/drawindirect/index.md +++ b/files/en-us/web/api/gpurenderbundleencoder/drawindirect/index.md @@ -39,6 +39,9 @@ drawIndirect(indirectBuffer, indirectOffset) device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length); ``` + > [!NOTE] + > The `indirect-first-instance` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled for non-zero `firstInstance` values to be used. If the `indirect-first-instance` feature is not enabled and `firstInstance` is not zero, the `drawIndirect()` call will be treated as a no-op. + - `indirectOffset` - : The offset, in bytes, into `indirectBuffer` where the value data begins. diff --git a/files/en-us/web/api/gpurenderpassencoder/drawindexedindirect/index.md b/files/en-us/web/api/gpurenderpassencoder/drawindexedindirect/index.md index 3f8109d493c2df8..2e184072906ae36 100644 --- a/files/en-us/web/api/gpurenderpassencoder/drawindexedindirect/index.md +++ b/files/en-us/web/api/gpurenderpassencoder/drawindexedindirect/index.md @@ -37,7 +37,8 @@ drawIndexedIndirect(indirectBuffer, indirectOffset) device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length); ``` - The value corresponding to `firstInstance` must be 0, unless the `indirect-first-instance` feature is enabled. If the `indirect-first-instance` feature is not enabled and `firstInstance` is not zero, the `drawIndexedIndirect()` call will be treated as a no-op. + > [!NOTE] + > The `indirect-first-instance` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled for non-zero `firstInstance` values to be used. If the `indirect-first-instance` feature is not enabled and `firstInstance` is not zero, the `drawIndexedIndirect()` call will be treated as a no-op. - `indirectOffset` - : The offset, in bytes, into `indirectBuffer` where the value data begins. diff --git a/files/en-us/web/api/gpurenderpassencoder/drawindirect/index.md b/files/en-us/web/api/gpurenderpassencoder/drawindirect/index.md index c221cdc062e9715..982fc73dee2cb55 100644 --- a/files/en-us/web/api/gpurenderpassencoder/drawindirect/index.md +++ b/files/en-us/web/api/gpurenderpassencoder/drawindirect/index.md @@ -36,6 +36,9 @@ drawIndirect(indirectBuffer, indirectOffset) device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length); ``` + > [!NOTE] + > The `indirect-first-instance` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled for non-zero `firstInstance` values to be used. If the `indirect-first-instance` feature is not enabled and `firstInstance` is not zero, the `drawIndirect()` call will be treated as a no-op. + - `indirectOffset` - : The offset, in bytes, into `indirectBuffer` where the value data begins. diff --git a/files/en-us/web/api/gpusupportedfeatures/index.md b/files/en-us/web/api/gpusupportedfeatures/index.md index 1c840216d9e1738..3b6858bcb5fb7bd 100644 --- a/files/en-us/web/api/gpusupportedfeatures/index.md +++ b/files/en-us/web/api/gpusupportedfeatures/index.md @@ -11,7 +11,7 @@ browser-compat: api.GPUSupportedFeatures The **`GPUSupportedFeatures`** interface of the {{domxref("WebGPU API", "WebGPU API", "", "nocode")}} is a [`Set`-like object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#set-like_browser_apis) that describes additional functionality supported by a {{domxref("GPUAdapter")}}. -The `GPUSupportedFeatures` object for the current adapter is accessed via the {{domxref("GPUAdapter.features")}} property. +The `GPUSupportedFeatures` object for the current adapter is accessed via the {{domxref("GPUAdapter.features")}} property — use this to test what features your current setup supports. To create a {{domxref("GPUDevice")}} with a specific feature enabled, you need to specify it in the [`requiredFeatures`](/en-US/docs/Web/API/GPUAdapter/requestDevice#requiredfeatures) array of the {{domxref("GPUAdapter.requestDevice()")}} descriptor. You should note that not all features will be available to WebGPU in all browsers that support it, even if the features are supported by the underlying hardware. This could be due to constraints in the underlying system, browser, or adapter. For example: @@ -24,7 +24,26 @@ If you are hoping to take advantage of a specific additional feature in a WebGPU ## Available features -We have not listed the exact set of additional features available to be used in WebGPU, as it will vary between implementations and physical devices, and will change over time. For a list, refer to the [Feature Index](https://gpuweb.github.io/gpuweb/#feature-index) in the specification. +The following additional features are defined in WebGPU. Bear in mind that the exact set of features available will vary across implementations and physical devices, and will change over time. + +| Feature name | Description | +| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `bgra8unorm-storage` | When enabled, allows `STORAGE_BINDING` [`usage`](/en-US/docs/Web/API/GPUDevice/createTexture#usage) of `bgra8unorm`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}s. | +| `clip-distances` | When enabled, allows the use of [`clip_distances`](https://gpuweb.github.io/gpuweb/wgsl/#built-in-values-clip_distances) in WGSL. | +| `depth-clip-control` | Allows [depth-clipping](https://gpuweb.github.io/gpuweb/#depth-clipping) to be disabled. If `depth-clip-control` is enabled, the [`unclippedDepth`](/en-US/docs/Web/API/GPUDevice/createRenderPipeline#unclippeddepth) property is available on the `primitive` object included as part of the {{domxref("GPUDevice.createRenderPipeline", "createRenderPipeline()")}} or {{domxref("GPUDevice.createRenderPipelineAsync", "createRenderPipelineAsync()")}} descriptor when creating a {{domxref("GPURenderPipeline")}}. `primitive` describes how a pipeline constructs and rasterizes primitives from its vertex inputs. Set `unclipped-depth` to `true` to disable depth-clipping. | +| `depth32float-stencil8` | Allows creation of textures with the format `depth32float-stencil8`. If `depth32float-stencil8` is enabled, the `depth32float-stencil8` value can be used for the [`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) property of the {{domxref("GPUDevice.createTexture", "createTexture()")}} descriptor when creating a {{domxref("GPUTexture")}}. | +| `dual-source-blending` | When enabled, allows the use of [`dual_source_blending`](https://gpuweb.github.io/gpuweb/wgsl/#extension-dual_source_blending) in WGSL, which uses both pixel shader outputs (`@blend_src(0)` and `@blend_src(1)`) as inputs to a blending operation with the single color attachment at `@location(0)`. Over in WebGPU, `dual-source-blending` enables the following blend factor operations (specified in the [`dstFactor`](/en-US/docs/Web/API/GPUDevice/createRenderPipeline#dstfactor) and [`srcFactor`](/en-US/docs/Web/API/GPUDevice/createRenderPipeline#srcfactor) properties of {{domxref("GPUDevice.createRenderPipeline", "createRenderPipeline()")}} and {{domxref("GPUDevice.createRenderPipelineAsync", "createRenderPipelineAsync()")}} descriptors): `src1`, `one-minus-src1`, `src1-alpha`, and `one-minus-src1-alpha`. | +| `float32-blendable` | When enabled, allows blending of `r32float`-, `rg32float`-, and `rgba32float`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}s. | +| `float32-filterable` | When enabled, allows [filtering](/en-US/docs/Web/API/GPUDevice/createSampler#magfilter) of `r32float`-, `rg32float`-, and `rgba32float`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}s. | +| `indirect-first-instance` | When enabled, allows the use of non-zero `firstInstance` values in the `indirectBuffer` property of the `drawIndirect()` and `drawIndexedIndirect()` methods available on {{domxref("GPURenderPassEncoder")}} and {{domxref("GPURenderBundleEncoder")}} instances. | +| `rg11b10ufloat-renderable` | When enabled, allows `RENDER_ATTACHMENT` [`usage`](/en-US/docs/Web/API/GPUDevice/createTexture#usage) of `rg11b10ufloat`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}s, as well as their blending and multisampling. | +| `shader-f16` | When enabled, allows the use of the half-precision floating-point type [`f16`](https://gpuweb.github.io/gpuweb/wgsl/#extension-f16) in WGSL. | +| `texture-compression-bc` | Allows creation of two-dimensional BC compressed textures. If `texture-compression-bc` is enabled, the following values can be used for the [`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) property of the {{domxref("GPUDevice.createTexture", "createTexture()")}} descriptor when creating a {{domxref("GPUTexture")}}: `bc1-rgba-unorm`, `bc1-rgba-unorm-srgb`, `bc2-rgba-unorm`, `bc2-rgba-unorm-srgb`, `bc3-rgba-unorm`, `bc3-rgba-unorm-srgb`, `bc4-r-unorm`, `bc4-r-snorm`, `bc5-rg-unorm`, `bc5-rg-snorm`, `bc6h-rgb-ufloat`, `bc6h-rgb-float`, `bc7-rgba-unorm`, and `bc7-rgba-unorm-srgb`. | +| `texture-compression-bc-sliced-3d` | Allows creation of three-dimensional BC compressed textures. If `texture-compression-bc-sliced-3d` is enabled, `texture-compression-bc` must also be enabled, as it enables the BC texture formats to be used (see `texture-compression-bc`, above) in the first two dimensions. `texture-compression-bc-sliced-3d` enables those same textures to be used in the third dimension. Adapters that support `texture-compression-bc` always support `texture-compression-bc-sliced-3d`. **Note that this feature is not currently supported in any browser.** | +| `texture-compression-astc` | Allows creation of two-dimensional ASTC compressed textures. If `texture-compression-astc` is enabled, the following values can be used for the [`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) property of the {{domxref("GPUDevice.createTexture", "createTexture()")}} descriptor when creating a {{domxref("GPUTexture")}}: `astc-4x4-unorm`, `astc-4x4-unorm-srgb`, `astc-5x4-unorm`, `astc-5x4-unorm-srgb`, `astc-5x5-unorm`, `astc-5x5-unorm-srgb`, `astc-6x5-unorm`, `astc-6x5-unorm-srgb`, `astc-6x6-unorm`, `astc-6x6-unorm-srgb`, `astc-8x5-unorm`, `astc-8x5-unorm-srgb`, `astc-8x6-unorm`, `astc-8x6-unorm-srgb`, `astc-8x8-unorm`, `astc-8x8-unorm-srgb`, `astc-10x5-unorm`, `astc-10x5-unorm-srgb`, `astc-10x6-unorm`, `astc-10x6-unorm-srgb`, `astc-10x8-unorm`, `astc-10x8-unorm-srgb`, `astc-10x10-unorm`, `astc-10x10-unorm-srgb`, `astc-12x10-unorm`, `astc-12x10-unorm-srgb`, and `astc-12x12-unorm``astc-12x12-unorm-srgb`. | +| `texture-compression-astc-sliced-3d` | Allows creation of three-dimensional ASTC compressed textures. If `texture-compression-astc-sliced-3d` is enabled, `texture-compression-astc` must also be enabled, as it enables the ASTC texture formats to be used (see `texture-compression-astc`, above) in the first two dimensions. `texture-compression-astc-sliced-3d` enables those same textures to be used in the third dimension. Adapters that support `texture-compression-astc` do not always support `texture-compression-astc-sliced-3d`. **Note that this feature is not currently supported in any browser.** | +| `texture-compression-etc2` | Allows creation of two-dimensional ETC2 compressed textures. If `texture-compression-etc2` is enabled, the following values can be used for the [`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) property of the {{domxref("GPUDevice.createTexture", "createTexture()")}} descriptor when creating a {{domxref("GPUTexture")}}: `etc2-rgb8unorm`, `etc2-rgb8unorm-srgb`, `etc2-rgb8a1unorm`, `etc2-rgb8a1unorm-srgb`, `etc2-rgba8unorm`, `etc2-rgba8unorm-srgb`, `eac-r11unorm`, `eac-r11snorm`, `eac-rg11unorm`, and `eac-rg11snorm`. | +| `timestamp-query` | Allows timestamp queries to be run, which measure the time taken to run compute and render passes. If `timestamp-query` is enabled, the `timestamp` value can be set for the [`type`](/en-US/docs/Web/API/GPUDevice/createQuerySet#type) property of the {{domxref("GPUDevice.createQuerySet", "createQuerySet()")}} descriptor when creating a {{domxref("GPUQuerySet")}}. In addition, the `timestampWrites` property can be set on the {{domxref("GPUCommandEncoder.beginComputePass", "beginComputePass()")}} and {{domxref("GPUCommandEncoder.beginRenderPass", "beginRenderPass()")}} descriptor when creating a {{domxref("GPUComputePassEncoder")}} and {{domxref("GPURenderPassEncoder")}}, respectively. `GPUQuerySet` objects are referenced within the objects included in the `timestampWrites` property, to specify where timestamps should be written to. | ## Instance properties @@ -107,3 +126,4 @@ async function init() { ## See also - The [WebGPU API](/en-US/docs/Web/API/WebGPU_API) +- The specification [Feature Index](https://gpuweb.github.io/gpuweb/#feature-index) diff --git a/files/en-us/web/api/gputexture/index.md b/files/en-us/web/api/gputexture/index.md index 4e29dcb7d94663f..7c1b9ac8967a12e 100644 --- a/files/en-us/web/api/gputexture/index.md +++ b/files/en-us/web/api/gputexture/index.md @@ -22,7 +22,7 @@ A `GPUTexture` object instance is created using the {{domxref("GPUDevice.createT - {{domxref("GPUTexture.dimension", "dimension")}} {{Experimental_Inline}} {{ReadOnlyInline}} - : An enumerated value representing the dimension of the set of texels for each `GPUTexture` subresource. - {{domxref("GPUTexture.format", "format")}} {{Experimental_Inline}} {{ReadOnlyInline}} - - : An enumerated value representing the format of the `GPUTexture`. + - : An enumerated value representing the format of the `GPUTexture`. See the [Texture formats](https://gpuweb.github.io/gpuweb/#enumdef-gputextureformat) section of the specification for all the possible values. - {{domxref("GPUTexture.height", "height")}} {{Experimental_Inline}} {{ReadOnlyInline}} - : A number representing the height of the `GPUTexture` in pixels. - {{domxref("GPUTexture.label", "label")}} {{Experimental_Inline}} From 21b6abb0fae5d6df0fef94506995a781e3f5d49f Mon Sep 17 00:00:00 2001 From: Sta Zhu Date: Mon, 28 Oct 2024 20:43:14 +0800 Subject: [PATCH 03/49] Add HEVC for VideoDecoder/VideoEncoder (#36265) HEVC WebCodecs encoding support has been enabled by default since Chrome 130 (https://chromium-review.googlesource.com/c/chromium/src/+/5827845). Safari/WebKit also already supported HEVC WebCodecs API last year, so add the document for HEVC. --- .../api/videodecoder/isconfigsupported_static/index.md | 8 +++++++- files/en-us/web/api/videoencoder/encode/index.md | 6 ++++++ .../api/videoencoder/isconfigsupported_static/index.md | 8 +++++++- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/videodecoder/isconfigsupported_static/index.md b/files/en-us/web/api/videodecoder/isconfigsupported_static/index.md index 32949986f532083..d0704bd77d131ca 100644 --- a/files/en-us/web/api/videodecoder/isconfigsupported_static/index.md +++ b/files/en-us/web/api/videodecoder/isconfigsupported_static/index.md @@ -41,7 +41,13 @@ The following example tests if the browser supports accelerated and un-accelerat versions of several video codecs. ```js -const codecs = ["avc1.42001E", "vp8", "vp09.00.10.08", "av01.0.04M.08"]; +const codecs = [ + "avc1.42001E", + "hvc1.1.6.L123.00", + "vp8", + "vp09.00.10.08", + "av01.0.04M.08", +]; const accelerations = ["prefer-hardware", "prefer-software"]; const configs = []; diff --git a/files/en-us/web/api/videoencoder/encode/index.md b/files/en-us/web/api/videoencoder/encode/index.md index 4351b8fca546210..f0f73f12f6d9467 100644 --- a/files/en-us/web/api/videoencoder/encode/index.md +++ b/files/en-us/web/api/videoencoder/encode/index.md @@ -38,6 +38,10 @@ encode(frame, options) - : Encode options for the [AVC (H.264)](/en-US/docs/Web/Media/Formats/Video_codecs#avc_h.264) codec. - `quantizer` - : Frame quantizer value 0 to 51. Only effective if {{domxref("VideoEncoder")}} was configured with `quantizer` bitrate mode. + - `hevc` {{optional_inline}} + - : Encode options for the [HEVC (H.265)](/en-US/docs/Web/Media/Formats/Video_codecs#hevc_h.265) codec. + - `quantizer` + - : Frame quantizer value 0 to 51. Only effective if {{domxref("VideoEncoder")}} was configured with `quantizer` bitrate mode. ### Return value @@ -81,6 +85,8 @@ if (codec.includes("vp09")) { encodeOptions.av1 = { quantizer: qp }; } else if (codec.includes("avc")) { encodeOptions.avc = { quantizer: qp }; +} else if (codec.includes("hvc1" || codec.includes("hev1"))) { + encodeOptions.hevc = { quantizer: qp }; } encoder.encode(frame, encodeOptions); diff --git a/files/en-us/web/api/videoencoder/isconfigsupported_static/index.md b/files/en-us/web/api/videoencoder/isconfigsupported_static/index.md index 0c9d5079f88d6f4..f1d16e8a279d056 100644 --- a/files/en-us/web/api/videoencoder/isconfigsupported_static/index.md +++ b/files/en-us/web/api/videoencoder/isconfigsupported_static/index.md @@ -41,7 +41,13 @@ The following example tests if the browser supports accelerated and un-accelerat versions of several video codecs. ```js -const codecs = ["avc1.42001E", "vp8", "vp09.00.10.08", "av01.0.04M.08"]; +const codecs = [ + "avc1.420034", + "hvc1.1.6.L123.00", + "vp8", + "vp09.00.10.08", + "av01.0.04M.08", +]; const accelerations = ["prefer-hardware", "prefer-software"]; const configs = []; From 9a4005caa5cc13f5174e3b8981eeec5631ed83d1 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Mon, 28 Oct 2024 08:46:03 -0400 Subject: [PATCH 04/49] Fix typos and pseudo-typos 13 (#36254) --- .../keyboard_event_key_values/index.md | 6 ++++-- files/en-us/web/api/url_api/index.md | 8 ++++---- .../web/api/usbdevice/deviceclass/index.md | 2 +- files/en-us/web/api/visualviewport/index.md | 4 ++-- .../web/api/vrframedata/timestamp/index.md | 2 +- files/en-us/web/api/web_audio_api/index.md | 2 +- .../web_audio_api/using_iir_filters/index.md | 4 ++-- .../web_audio_spatialization_basics/index.md | 4 ++-- .../attestation_and_assertion/index.md | 2 +- .../using_custom_elements/index.md | 12 ++++++------ .../drawbuffers/index.md | 2 +- .../basic_2d_animation_example/index.md | 4 ++-- .../by_example/color_masking/index.md | 16 ++++++++-------- .../by_example/textures_from_code/index.md | 6 +++--- .../index.md | 4 ++-- .../getting_started_with_webgl/index.md | 4 ++-- .../connect_peers/show_hide_html/index.md | 10 +++++----- files/en-us/web/api/webrtc_api/index.md | 8 ++++---- .../webrtc_api/perfect_negotiation/index.md | 10 +++++----- .../signaling_and_video_calling/index.md | 6 +++--- .../simple_rtcdatachannel_sample/index.md | 8 ++++---- .../using_encoded_transforms/index.md | 4 ++-- .../index.md | 10 +++++----- .../writing_websocket_server/index.md | 18 +++++++++--------- files/en-us/web/api/webtransporterror/index.md | 2 +- .../web/api/webtransporterror/source/index.md | 2 +- .../webtransporterror/streamerrorcode/index.md | 2 +- .../webtransporterror/index.md | 2 +- files/en-us/web/api/webvr_api/index.md | 2 +- .../api/webvr_api/using_the_webvr_api/index.md | 2 +- files/en-us/web/api/webvtt_api/index.md | 4 ++-- .../web_video_text_tracks_format/index.md | 8 ++++---- .../movement_and_motion/index.md | 2 +- .../api/webxr_device_api/rendering/index.md | 2 +- .../startup_and_shutdown/index.md | 2 +- files/en-us/web/api/window/close/index.md | 2 +- files/en-us/web/api/window/fetch/index.md | 1 + .../hardwareconcurrency/index.md | 2 +- .../sending_and_receiving_binary_data/index.md | 6 +++--- .../using_formdata_objects/index.md | 10 +++++----- .../using_xmlhttprequest/index.md | 6 +++--- files/en-us/web/api/xrsessionevent/index.md | 4 ++-- .../web/api/xrwebgllayer/framebuffer/index.md | 2 +- files/en-us/web/api/xrwebgllayer/index.md | 2 +- files/en-us/web/api/xsltprocessor/index.md | 8 ++++---- 45 files changed, 116 insertions(+), 113 deletions(-) diff --git a/files/en-us/web/api/ui_events/keyboard_event_key_values/index.md b/files/en-us/web/api/ui_events/keyboard_event_key_values/index.md index 6c8eed1b7b82a28..eb4be74960aacbb 100644 --- a/files/en-us/web/api/ui_events/keyboard_event_key_values/index.md +++ b/files/en-us/web/api/ui_events/keyboard_event_key_values/index.md @@ -1361,6 +1361,8 @@ Some keys are common across multiple languages, while others exist only on keybo \[1] On the _X Window System_, the Compose key is called the Multi key. + + \[2] The NonConvert key is reported as `"Nonconvert"` instead of the correct `"NonConvert"` by Firefox versions 36 and earlier. \[3] The Process key currently returns `"Unidentified"` in Firefox. Google Chrome returns the value of the key as if IME were not in use. @@ -1577,7 +1579,7 @@ These keys are only available on Japanese keyboards. - "ZenkakuHanaku" [6] + "ZenkakuHankaku" [6] The Zenkaku/Hankaku (full width/half width) toggle key. @@ -3414,7 +3416,7 @@ The values below are derived in part from a number of consumer electronics techn "Lock" - Locks or unlocks the currently selected content or pgoram. + Locks or unlocks the currently selected content or program. VK_LOCK diff --git a/files/en-us/web/api/url_api/index.md b/files/en-us/web/api/url_api/index.md index 8f2abb794577603..1bb15e2047d2426 100644 --- a/files/en-us/web/api/url_api/index.md +++ b/files/en-us/web/api/url_api/index.md @@ -33,19 +33,19 @@ The snippet above creates a `URL` object for the article you're reading right no Most of the properties of `URL` are settable; you can write new values to them to alter the URL represented by the object. For example, to create a URL and set its username: ```js -let myUsername = "someguy"; +let myUsername = "some-guy"; let addr = new URL("https://example.com/login"); addr.username = myUsername; ``` -Setting the value of {{domxref("URL.username", "username")}} not only sets that property's value, but it updates the overall URL. After executing the code snippet above, the value returned by {{domxref("URL.href", "href")}} is `https://someguy@example.com/login`. This is true for any of the writable properties. +Setting the value of {{domxref("URL.username", "username")}} not only sets that property's value, but it updates the overall URL. After executing the code snippet above, the value returned by {{domxref("URL.href", "href")}} is `https://some-guy@example.com/login`. This is true for any of the writable properties. ### Queries -The {{domxref("URL.search", "search")}} property on a `URL` contains the query string portion of the URL. For example, if the URL is `https://example.com/login?user=someguy&page=news`, then the value of the `search` property is `?user=someguy&page=news`. You can also look up the values of individual parameters with the {{domxref("URLSearchParams")}} object's {{domxref("URLSearchParams.get", "get()")}} method: +The {{domxref("URL.search", "search")}} property on a `URL` contains the query string portion of the URL. For example, if the URL is `https://example.com/login?user=some-guy&page=news`, then the value of the `search` property is `?user=some-guy&page=news`. You can also look up the values of individual parameters with the {{domxref("URLSearchParams")}} object's {{domxref("URLSearchParams.get", "get()")}} method: ```js -let addr = new URL("https://example.com/login?user=someguy&page=news"); +let addr = new URL("https://example.com/login?user=some-guy&page=news"); try { loginUser(addr.searchParams.get("user")); gotoPage(addr.searchParams.get("page")); diff --git a/files/en-us/web/api/usbdevice/deviceclass/index.md b/files/en-us/web/api/usbdevice/deviceclass/index.md index d1221cec8fa23d4..bdb46c24e0e3ccb 100644 --- a/files/en-us/web/api/usbdevice/deviceclass/index.md +++ b/files/en-us/web/api/usbdevice/deviceclass/index.md @@ -13,7 +13,7 @@ browser-compat: api.USBDevice.deviceClass The **`deviceClass`** read only property of the {{domxref("USBDevice")}} interface one of three properties that identify USB devices for the purpose of loading a USB driver that will work with that device. The other two -properties are USBDevice.deviceSubclass and USBDevice.deviceprotocol. +properties are `USBDevice.deviceSubclass` and `USBDevice.deviceProtocol`. ## Value diff --git a/files/en-us/web/api/visualviewport/index.md b/files/en-us/web/api/visualviewport/index.md index e4c153c66fffdc9..ddec1836772e367 100644 --- a/files/en-us/web/api/visualviewport/index.md +++ b/files/en-us/web/api/visualviewport/index.md @@ -60,7 +60,7 @@ Listen to these events using {{domxref("EventTarget.addEventListener", "addEvent This example, taken from the [Visual Viewport README](https://github.com/WICG/visual-viewport), shows how to write a simple bit of code that will hide an overlaid box (which might contain an advert, say) when the user zooms in. This is a nice way to improve the user experience when zooming in on pages. A [live sample](https://wicg.github.io/visual-viewport/examples/hide-on-zoom.html) is also available. ```js -const bottomBar = document.getElementById("bottombar"); +const bottomBar = document.getElementById("bottom-bar"); const viewport = window.visualViewport; function resizeHandler() { @@ -75,7 +75,7 @@ window.visualViewport.addEventListener("resize", resizeHandler); This example, also taken from the [Visual Viewport README](https://github.com/WICG/visual-viewport), shows how to use this API to simulate `position: device-fixed`, which fixes elements to the visual viewport. A [live sample](https://wicg.github.io/visual-viewport/examples/fixed-to-viewport.html) is also available. ```js -const bottomBar = document.getElementById("bottombar"); +const bottomBar = document.getElementById("bottom-bar"); const viewport = window.visualViewport; function viewportHandler() { const layoutViewport = document.getElementById("layoutViewport"); diff --git a/files/en-us/web/api/vrframedata/timestamp/index.md b/files/en-us/web/api/vrframedata/timestamp/index.md index 23ba751251c7f44..8c939a23e09edf3 100644 --- a/files/en-us/web/api/vrframedata/timestamp/index.md +++ b/files/en-us/web/api/vrframedata/timestamp/index.md @@ -51,7 +51,7 @@ function drawVRScene() { // grab the current timestamp on each run of the rendering loop // and do something with it - framedata.timestamp; + frameData.timestamp; // … diff --git a/files/en-us/web/api/web_audio_api/index.md b/files/en-us/web/api/web_audio_api/index.md index b544ab91555b455..290dcc23d4235fe 100644 --- a/files/en-us/web/api/web_audio_api/index.md +++ b/files/en-us/web/api/web_audio_api/index.md @@ -190,7 +190,7 @@ It is possible to process/render an audio graph very quickly in the background ## Examples -You can find a number of examples at our [webaudio-example repo](https://github.com/mdn/webaudio-examples/) on GitHub. +You can find a number of examples at our [webaudio-examples repo](https://github.com/mdn/webaudio-examples/) on GitHub. ## Specifications diff --git a/files/en-us/web/api/web_audio_api/using_iir_filters/index.md b/files/en-us/web/api/web_audio_api/using_iir_filters/index.md index 4f6dbc1a7025f88..c655e3dde10bbec 100644 --- a/files/en-us/web/api/web_audio_api/using_iir_filters/index.md +++ b/files/en-us/web/api/web_audio_api/using_iir_filters/index.md @@ -30,7 +30,7 @@ A [biquad filter](https://www.mathworks.com/help/dsphdl/ref/biquadfilter.html) i When you are using an {{domxref("IIRFilterNode")}} instead of a {{domxref("BiquadFilterNode")}} you are creating the filter yourself, rather than just choosing a pre-programmed type. So you can create a highpass filter, or a lowpass filter, or a more bespoke one. And this is where the IIR filter node is useful — you can create your own if none of the already available settings is right for what you want. As well as this, if your audio graph needed a highpass and a bandpass filter within it, you could just use one IIR filter node in place of the two biquad filter nodes you would otherwise need for this. -With the IIRFIlter node it's up to you to set what `feedforward` and `feedback` values the filter needs — this determines the characteristics of the filter. The downside is that this involves some complex maths. +With the IIR filter node it's up to you to set what `feedforward` and `feedback` values the filter needs — this determines the characteristics of the filter. The downside is that this involves some complex maths. If you are looking to learn more there's some [information about the maths behind IIR filters here](https://ece.uccs.edu/~mwickert/ece2610/lecture_notes/ece2610_chap8.pdf). This enters the realms of signal processing theory — don't worry if you look at it and feel like it's not for you. @@ -126,7 +126,7 @@ filterButton.addEventListener( () => { if (filterButton.dataset.filteron === "false") { srcNode.disconnect(audioCtx.destination); - srcNode.connect(iirfilter).connect(audioCtx.destination); + srcNode.connect(iirFilter).connect(audioCtx.destination); // … } }, diff --git a/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md b/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md index c223b02cf721314..2988d3a15f5ac10 100644 --- a/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md +++ b/files/en-us/web/api/web_audio_api/web_audio_spatialization_basics/index.md @@ -33,7 +33,7 @@ See the [3D spatialization demo live](https://mdn.github.io/webaudio-examples/sp The boombox sits inside a room (defined by the edges of the browser viewport), and in this demo, we can move and rotate it with the provided controls. When we move the boombox, the sound it produces changes accordingly, panning as it moves to the left or right of the room, or becoming quieter as it is moved away from the user or is rotated so the speakers are facing away from them, etc. -This is done by setting the different properties of the `PannerNode` object instance in relation to that movement, to emulate spacialization. +This is done by setting the different properties of the `PannerNode` object instance in relation to that movement, to emulate spatialization. > [!NOTE] > The experience is much better if you use headphones, or have some kind of surround sound system to plug your computer into. @@ -79,7 +79,7 @@ These two together can nicely set the direction. Let's create our {{domxref("PannerNode")}}. This has a whole bunch of properties associated with it. Let's take a look at each of them: To start we can set the [`panningModel`](/en-US/docs/Web/API/PannerNode/panningModel). -This is the spacialization algorithm that's used to position the audio in 3D space. We can set this to: +This is the spatialization algorithm that's used to position the audio in 3D space. We can set this to: `equalpower` — The default and the general way panning is figured out diff --git a/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md b/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md index afac10ea54902f7..7de68c37ac4463c 100644 --- a/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md +++ b/files/en-us/web/api/web_authentication_api/attestation_and_assertion/index.md @@ -15,7 +15,7 @@ When an authenticator registers a new key pair with a service, the authenticator The attestation is returned through the WebAuthn API as the [AuthenticatorAttestationResponse](/en-US/docs/Web/API/AuthenticatorAttestationResponse). The attestation format contains two basic {{jsxref("ArrayBuffer")}} objects: - **clientDataJSON** - An ArrayBuffer that contains a JSON representation of what the browser saw when being asked to authenticate. -- [attestationObject](/en-US/docs/Web/API/AuthenticatorAttestationResponse/attestationObject) - Cryptographic attestation that a newly generated keypair was created by that authenticator. This contains: +- [attestationObject](/en-US/docs/Web/API/AuthenticatorAttestationResponse/attestationObject) - Cryptographic attestation that a newly generated key pair was created by that authenticator. This contains: - [Authenticator data](/en-US/docs/Web/API/Web_Authentication_API/Authenticator_data) containing an `attestedCredentialData` field, which in turn contains the `credentialId` and `credentialPublicKey`. The `attestedCredentialData` is an optional field used in attestation. It is not included when used in the AuthenticatorAssertionResponse. - An attestation statement, which is optionally present depending on whether the relying party requests attestation. In general, relying parties aren't encouraged to request attestation, so it's more likely that this statement won't be present. diff --git a/files/en-us/web/api/web_components/using_custom_elements/index.md b/files/en-us/web/api/web_components/using_custom_elements/index.md index 1aa76ee3412c50d..74e42ae35cffeed 100644 --- a/files/en-us/web/api/web_components/using_custom_elements/index.md +++ b/files/en-us/web/api/web_components/using_custom_elements/index.md @@ -472,15 +472,15 @@ class ExpandingList extends HTMLUListElement { // Add click handler to this span newSpan.addEventListener("click", (e) => { // next sibling to the span should be the ul - const nextul = e.target.nextElementSibling; + const nextUl = e.target.nextElementSibling; // Toggle visible state and update class attribute on ul - if (nextul.style.display == "block") { - nextul.style.display = "none"; - nextul.parentNode.setAttribute("class", "closed"); + if (nextUl.style.display == "block") { + nextUl.style.display = "none"; + nextUl.parentNode.setAttribute("class", "closed"); } else { - nextul.style.display = "block"; - nextul.parentNode.setAttribute("class", "open"); + nextUl.style.display = "block"; + nextUl.parentNode.setAttribute("class", "open"); } }); // Add the span and remove the bare text node from the li diff --git a/files/en-us/web/api/webgl2renderingcontext/drawbuffers/index.md b/files/en-us/web/api/webgl2renderingcontext/drawbuffers/index.md index 3fdfece9c05e223..6e9704fc6c55d72 100644 --- a/files/en-us/web/api/webgl2renderingcontext/drawbuffers/index.md +++ b/files/en-us/web/api/webgl2renderingcontext/drawbuffers/index.md @@ -10,7 +10,7 @@ browser-compat: api.WebGL2RenderingContext.drawBuffers The **`WebGL2RenderingContext.drawBuffers()`** method of the [WebGL 2 API](/en-US/docs/Web/API/WebGL_API) defines draw buffers to which fragment colors are written into. The draw buffer settings are part of the state of the -currently bound framebuffer or the drawingbuffer if no framebuffer is bound. +currently bound framebuffer or the drawing buffer if no framebuffer is bound. ## Syntax diff --git a/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md b/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md index ad3a1aa7318c82a..29818d7c3f2c034 100644 --- a/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md +++ b/files/en-us/web/api/webgl_api/basic_2d_animation_example/index.md @@ -69,7 +69,7 @@ This starts by specifying the precision of the `float` type, as required. Then w The HTML consists solely of the {{HTMLElement("canvas")}} that we'll obtain a WebGL context on. ```html - + Oh no! Your browser doesn't support canvas! ``` @@ -118,7 +118,7 @@ Initializing the program is handled through a {{domxref("Window/load_event", "lo window.addEventListener("load", startup, false); function startup() { - glCanvas = document.getElementById("glcanvas"); + glCanvas = document.getElementById("gl-canvas"); gl = glCanvas.getContext("webgl"); const shaderSet = [ diff --git a/files/en-us/web/api/webgl_api/by_example/color_masking/index.md b/files/en-us/web/api/webgl_api/by_example/color_masking/index.md index f67f8821f1c473a..db389f493a10a82 100644 --- a/files/en-us/web/api/webgl_api/by_example/color_masking/index.md +++ b/files/en-us/web/api/webgl_api/by_example/color_masking/index.md @@ -83,17 +83,17 @@ window.addEventListener( const timer = setInterval(drawAnimation, 1000); const mask = [true, true, true]; - const redtoggle = document.querySelector("#red-toggle"); - const greentoggle = document.querySelector("#green-toggle"); - const bluetoggle = document.querySelector("#blue-toggle"); - redtoggle.addEventListener("click", setColorMask, false); - greentoggle.addEventListener("click", setColorMask, false); - bluetoggle.addEventListener("click", setColorMask, false); + const redToggle = document.querySelector("#red-toggle"); + const greenToggle = document.querySelector("#green-toggle"); + const blueToggle = document.querySelector("#blue-toggle"); + redToggle.addEventListener("click", setColorMask, false); + greenToggle.addEventListener("click", setColorMask, false); + blueToggle.addEventListener("click", setColorMask, false); function setColorMask(evt) { const index = - (evt.target === greentoggle && 1) || - (evt.target === bluetoggle && 2) || + (evt.target === greenToggle && 1) || + (evt.target === blueToggle && 2) || 0; mask[index] = !mask[index]; evt.target.textContent = mask[index] ? "On" : "Off"; diff --git a/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md b/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md index 09d68743278be35..be72f67c2d1f8e2 100644 --- a/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md +++ b/files/en-us/web/api/webgl_api/by_example/textures_from_code/index.md @@ -63,10 +63,10 @@ button { void main() { vec2 fragmentPosition = 2.0*gl_PointCoord - 1.0; float distance = length(fragmentPosition); - float distanceSqrd = distance * distance; + float distanceSq = distance * distance; gl_FragColor = vec4( - 0.2/distanceSqrd, - 0.1/distanceSqrd, + 0.2/distanceSq, + 0.1/distanceSq, 0.0, 1.0 ); } diff --git a/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md b/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md index 58be911d44091df..77fa2e4240a0ddf 100644 --- a/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md +++ b/files/en-us/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.md @@ -33,7 +33,7 @@ This project uses the [glMatrix](https://glmatrix.net/) library to perform its m - + ``` @@ -274,7 +274,7 @@ function drawScene(gl, programInfo, buffers) { const zFar = 100.0; const projectionMatrix = mat4.create(); - // note: glmatrix.js always has the first argument + // note: glMatrix always has the first argument // as the destination to receive the result. mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar); diff --git a/files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md b/files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md index 915ff71782201a5..531ec361597907f 100644 --- a/files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md +++ b/files/en-us/web/api/webgl_api/tutorial/getting_started_with_webgl/index.md @@ -35,7 +35,7 @@ The "index.html" file should contain the following: - + ``` @@ -53,7 +53,7 @@ main(); // start here // function main() { - const canvas = document.querySelector("#glcanvas"); + const canvas = document.querySelector("#gl-canvas"); // Initialize the GL context const gl = canvas.getContext("webgl"); diff --git a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md index 13bba72cbcee5e1..31ed1ca130b0cdf 100644 --- a/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md +++ b/files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/show_hide_html/index.md @@ -14,12 +14,11 @@ Alright, so you've got the microphone permissions set up. The next step is to ma ```js peer.on("open", () => { - window.caststatus.textContent = `Your device ID is: ${peer.id}`; + document.getElementById("cast-status").textContent = + `Your device ID is: ${peer.id}`; }); ``` - Here you're replacing the text in the HTML element with the ID `caststatus`. - 2. Try reloading the app in your browser. Instead of `connecting...`, you should see `Your device ID is: `. ![A cream background with the words 'phone a friend' in bold, dark green font as the heading. 'Your device ID is: 3b77' is immediately below that and 'please use headphones!' below that. Following on, a big dark green button with 'Call' written in the same cream color of the background.](app_showing_device_id.png) @@ -31,14 +30,15 @@ Alright, so you've got the microphone permissions set up. The next step is to ma // Displays the call button and peer ID function showCallContent() { - window.caststatus.textContent = `Your device ID is: ${peer.id}`; + document.getElementById("cast-status").textContent = + `Your device ID is: ${peer.id}`; callBtn.hidden = false; audioContainer.hidden = true; } // Displays the audio controls and correct copy function showConnectedContent() { - window.caststatus.textContent = "You're connected"; + document.getElementById("cast-status").textContent = "You're connected"; callBtn.hidden = true; audioContainer.hidden = false; } diff --git a/files/en-us/web/api/webrtc_api/index.md b/files/en-us/web/api/webrtc_api/index.md index 25b4d23ce4e144b..7f492b1f4a65639 100644 --- a/files/en-us/web/api/webrtc_api/index.md +++ b/files/en-us/web/api/webrtc_api/index.md @@ -86,9 +86,9 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W - {{domxref("RTCPeerConnection.icecandidateerror_event", "icecandidateerror")}} - : An {{domxref("RTCPeerConnectionIceErrorEvent")}} indicating that an error has occurred while gathering ICE candidates. - {{domxref("RTCPeerConnection.iceconnectionstatechange_event", "iceconnectionstatechange")}} - - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE connection's state—found in the {{domxref("RTCPeerConnection.iceconnectionstate", "iceconnectionstate")}} property—changes. + - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE connection's state—found in the {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}} property—changes. - {{domxref("RTCPeerConnection.icegatheringstatechange_event", "icegatheringstatechange")}} - - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE gathering state—found in the {{domxref("RTCPeerConnection.icegatheringstate", "icegatheringstate")}} property—changes. + - : Sent to an {{domxref("RTCPeerConnection")}} when its ICE gathering state—found in the {{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}} property—changes. - {{domxref("RTCDataChannel.message_event", "message")}} - : A message has been received on the data channel. The event is of type {{domxref("MessageEvent")}}. - {{domxref("RTCPeerConnection.negotiationneeded_event", "negotiationneeded")}} @@ -98,9 +98,9 @@ These interfaces, dictionaries, and types are used to set up, open, and manage W - {{domxref("RTCIceTransport.selectedcandidatepairchange_event", "selectedcandidatepairchange")}} - : The currently-selected pair of ICE candidates has changed for the `RTCIceTransport` on which the event is fired. - {{domxref("RTCPeerConnection.track_event", "track")}} - - : The `track` event, of type {{domxref("RTCTrackevent")}} is sent to an {{domxref("RTCPeerConnection")}} when a new track is added to the connection following the successful negotiation of the media's streaming. + - : The `track` event, of type {{domxref("RTCTrackEvent")}} is sent to an {{domxref("RTCPeerConnection")}} when a new track is added to the connection following the successful negotiation of the media's streaming. - {{domxref("RTCPeerConnection.signalingstatechange_event", "signalingstatechange")}} - - : Sent to the peer connection when its {{domxref("RTCPeerConnection.signalingstate", "signalingstate")}} has changed. This happens as a result of a call to either {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} or {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}. + - : Sent to the peer connection when its {{domxref("RTCPeerConnection.signalingState", "signalingState")}} has changed. This happens as a result of a call to either {{domxref("RTCPeerConnection.setLocalDescription", "setLocalDescription()")}} or {{domxref("RTCPeerConnection.setRemoteDescription", "setRemoteDescription()")}}. - {{domxref("RTCDtlsTransport.statechange_event", "statechange")}} - : The state of the `RTCDtlsTransport` has changed. - {{domxref("RTCIceTransport.statechange_event", "statechange")}} diff --git a/files/en-us/web/api/webrtc_api/perfect_negotiation/index.md b/files/en-us/web/api/webrtc_api/perfect_negotiation/index.md index 694752d534e56d5..ded8afc8241f1f2 100644 --- a/files/en-us/web/api/webrtc_api/perfect_negotiation/index.md +++ b/files/en-us/web/api/webrtc_api/perfect_negotiation/index.md @@ -37,25 +37,25 @@ Note that this code is identical for both peers involved in the connection. ### Create the signaling and peer connections -First, the signaling channel needs to be opened and the {{domxref("RTCPeerConnection")}} needs to be created. The {{Glossary("STUN")}} server listed here is obviously not a real one; you'll need to replace `stun.myserver.tld` with the address of a real STUN server. +First, the signaling channel needs to be opened and the {{domxref("RTCPeerConnection")}} needs to be created. The {{Glossary("STUN")}} server listed here is obviously not a real one; you'll need to replace `stun.my-server.tld` with the address of a real STUN server. ```js const config = { - iceServers: [{ urls: "stun:stun.mystunserver.tld" }], + iceServers: [{ urls: "stun:stun.my-stun-server.tld" }], }; const signaler = new SignalingChannel(); const pc = new RTCPeerConnection(config); ``` -This code also gets the {{HTMLElement("video")}} elements using the classes "selfview" and "remoteview"; these will contain, respectively, the local user's self-view and the view of the incoming stream from the remote peer. +This code also gets the {{HTMLElement("video")}} elements using the classes "self-view" and "remote-view"; these will contain, respectively, the local user's self-view and the view of the incoming stream from the remote peer. ### Connecting to a remote peer ```js const constraints = { audio: true, video: true }; -const selfVideo = document.querySelector("video.selfview"); -const remoteVideo = document.querySelector("video.remoteview"); +const selfVideo = document.querySelector("video.self-view"); +const remoteVideo = document.querySelector("video.remote-view"); async function start() { try { diff --git a/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md b/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md index 19481c2352b0f3a..fb95766cfce1803 100644 --- a/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md +++ b/files/en-us/web/api/webrtc_api/signaling_and_video_calling/index.md @@ -188,11 +188,11 @@ The message object passed into this function is converted into a JSON string by #### UI to start a call -The code which handles the `"userlist"` message calls `handleUserlistMsg()`. Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose `users` property is an array of strings specifying the user names of every connected user. +The code which handles the `"user-list"` message calls `handleUserListMsg()`. Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose `users` property is an array of strings specifying the user names of every connected user. ```js -function handleUserlistMsg(msg) { - const listElem = document.querySelector(".userlistbox"); +function handleUserListMsg(msg) { + const listElem = document.querySelector(".user-list-box"); while (listElem.firstChild) { listElem.removeChild(listElem.firstChild); diff --git a/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md b/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md index 3edf3853b93adf4..2e0da345a6c398c 100644 --- a/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md +++ b/files/en-us/web/api/webrtc_api/simple_rtcdatachannel_sample/index.md @@ -52,7 +52,7 @@ Then there's a box which contains the text input box into which the user can typ Finally, there's the little box into which we'll insert the messages. This {{HTMLElement("div")}} block will be the second peer. ```html -
+

Messages received:

``` @@ -83,7 +83,7 @@ function startup() { disconnectButton = document.getElementById("disconnectButton"); sendButton = document.getElementById("sendButton"); messageInputBox = document.getElementById("message"); - receiveBox = document.getElementById("receivebox"); + receiveBox = document.getElementById("receive-box"); // Set event listeners for user interface widgets @@ -283,9 +283,9 @@ When a "message" event occurs on the remote channel, our `handleReceiveMessage() ```js function handleReceiveMessage(event) { const el = document.createElement("p"); - const txtNode = document.createTextNode(event.data); + const textNode = document.createTextNode(event.data); - el.appendChild(txtNode); + el.appendChild(textNode); receiveBox.appendChild(el); } ``` diff --git a/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md b/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md index d23f634bb5b8254..85f44bef139f7d0 100644 --- a/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md +++ b/files/en-us/web/api/webrtc_api/using_encoded_transforms/index.md @@ -259,8 +259,8 @@ event.transformer.options.port.onmessage = (event) => { // key is used by the transformer to encrypt frames (not shown) // Get codec to generate a new key frame using the rid - // Here 'rcevent' is the rtctransform event. - rcevent.transformer.generateKeyFrame(rid); + // Here 'rcEvent' is the rtctransform event. + rcEvent.transformer.generateKeyFrame(rid); }; ``` diff --git a/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md b/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md index b8462bb0ccac804..83d3cbd8c655ca7 100644 --- a/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md +++ b/files/en-us/web/api/websockets_api/writing_websocket_client_applications/index.md @@ -137,7 +137,7 @@ The code that interprets these incoming messages might look like this: ```js exampleSocket.onmessage = (event) => { - const f = document.getElementById("chatbox").contentDocument; + const f = document.getElementById("chat-box").contentDocument; let text = ""; const msg = JSON.parse(event.data); const time = new Date(msg.date); @@ -154,17 +154,17 @@ exampleSocket.onmessage = (event) => { case "message": text = `(${timeStr}) ${msg.name} : ${msg.text}
`; break; - case "rejectusername": + case "reject-username": text = `Your username has been set to ${msg.name} because the name you chose is in use.
`; break; - case "userlist": - document.getElementById("userlistbox").innerText = msg.users.join("\n"); + case "user-list": + document.getElementById("user-list-box").innerText = msg.users.join("\n"); break; } if (text.length) { f.write(text); - document.getElementById("chatbox").contentWindow.scrollByPages(1); + document.getElementById("chat-box").contentWindow.scrollByPages(1); } }; ``` diff --git a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md index 4a0708051c7b856..5e1c6cfb1876005 100644 --- a/files/en-us/web/api/websockets_api/writing_websocket_server/index.md +++ b/files/en-us/web/api/websockets_api/writing_websocket_server/index.md @@ -22,10 +22,10 @@ WebSockets communicate over a [TCP (Transmission Control Protocol)](https://en.w Constructor: ```cs -TcpListener(System.Net.IPAddress localaddr, int port) +TcpListener(System.Net.IPAddress localAddr, int port) ``` -`localaddr` specifies the IP of the listener, and `port` specifies the port. +`localAddr` specifies the IP of the listener, and `port` specifies the port. > [!NOTE] > To create an `IPAddress` object from a `string`, use the `Parse` static method of `IPAddress`. @@ -221,12 +221,12 @@ for (int i = 0; i < encoded.Length; i++) { ## Put together -### wsserver.cs +### ws-server.cs ```cs // -// csc wsserver.cs -// wsserver.exe +// csc ws-server.cs +// ws-server.exe using System; using System.Net; @@ -265,16 +265,16 @@ class Server { // 3. Compute SHA-1 and Base64 hash of the new value // 4. Write the hash back as the value of "Sec-WebSocket-Accept" response header in an HTTP response string swk = Regex.Match(s, "Sec-WebSocket-Key: (.*)").Groups[1].Value.Trim(); - string swka = swk + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"; - byte[] swkaSha1 = System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(swka)); - string swkaSha1Base64 = Convert.ToBase64String(swkaSha1); + string swkAndSalt = swk + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"; + byte[] swkAndSaltSha1 = System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(swkAndSalt)); + string swkAndSaltSha1Base64 = Convert.ToBase64String(swkAndSaltSha1); // HTTP/1.1 defines the sequence CR LF as the end-of-line marker byte[] response = Encoding.UTF8.GetBytes( "HTTP/1.1 101 Switching Protocols\r\n" + "Connection: Upgrade\r\n" + "Upgrade: websocket\r\n" + - "Sec-WebSocket-Accept: " + swkaSha1Base64 + "\r\n\r\n"); + "Sec-WebSocket-Accept: " + swkAndSaltSha1Base64 + "\r\n\r\n"); stream.Write(response, 0, response.Length); } else { diff --git a/files/en-us/web/api/webtransporterror/index.md b/files/en-us/web/api/webtransporterror/index.md index 646676376859d81..dae6eea9a653800 100644 --- a/files/en-us/web/api/webtransporterror/index.md +++ b/files/en-us/web/api/webtransporterror/index.md @@ -28,7 +28,7 @@ _Inherits properties from its parent, {{DOMxRef("DOMException")}}._ ## Examples ```js -const url = "notaurl"; +const url = "not-a-url"; async function initTransport(url) { try { diff --git a/files/en-us/web/api/webtransporterror/source/index.md b/files/en-us/web/api/webtransporterror/source/index.md index d35950d38ff671b..d1232c0748deb35 100644 --- a/files/en-us/web/api/webtransporterror/source/index.md +++ b/files/en-us/web/api/webtransporterror/source/index.md @@ -17,7 +17,7 @@ An enumerated value; can be either `stream` or `session`. ## Examples ```js -const url = "notaurl"; +const url = "not-a-url"; async function initTransport(url) { try { diff --git a/files/en-us/web/api/webtransporterror/streamerrorcode/index.md b/files/en-us/web/api/webtransporterror/streamerrorcode/index.md index 8cfede3fbad688b..5dbe1eea58fd29f 100644 --- a/files/en-us/web/api/webtransporterror/streamerrorcode/index.md +++ b/files/en-us/web/api/webtransporterror/streamerrorcode/index.md @@ -17,7 +17,7 @@ A number, or `null`. ## Examples ```js -const url = "notaurl"; +const url = "not-a-url"; async function initTransport(url) { try { diff --git a/files/en-us/web/api/webtransporterror/webtransporterror/index.md b/files/en-us/web/api/webtransporterror/webtransporterror/index.md index 9d9618695f48ef9..e560e2e23e64f5d 100644 --- a/files/en-us/web/api/webtransporterror/webtransporterror/index.md +++ b/files/en-us/web/api/webtransporterror/webtransporterror/index.md @@ -30,7 +30,7 @@ new WebTransportError(init) A developer would not use this constructor manually. A new `WebTransportError` object is constructed when an error related to WebTransport occurs, for example a server error or network connection problem. ```js -const url = "notaurl"; +const url = "not-a-url"; async function initTransport(url) { try { diff --git a/files/en-us/web/api/webvr_api/index.md b/files/en-us/web/api/webvr_api/index.md index c4099e51c7f92a7..60dab549b8cf0b2 100644 --- a/files/en-us/web/api/webvr_api/index.md +++ b/files/en-us/web/api/webvr_api/index.md @@ -93,7 +93,7 @@ The WebVR API extends the following APIs, adding the listed features. #### Navigator - {{DOMxRef("Navigator.activeVRDisplays")}} {{ReadOnlyInline}} - - : Returns an array containing every {{DOMxRef("VRDisplay")}} object that is currently presenting ({{DOMxRef("VRDisplay.ispresenting")}} is `true`). + - : Returns an array containing every {{DOMxRef("VRDisplay")}} object that is currently presenting ({{DOMxRef("VRDisplay.isPresenting")}} is `true`). - {{DOMxRef("Navigator.getVRDisplays()")}} - : Returns a promise that resolves to an array of {{DOMxRef("VRDisplay")}} objects representing any available VR displays connected to the computer. diff --git a/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md b/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md index 946250db610b4f9..7cb03f864df1d80 100644 --- a/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md +++ b/files/en-us/web/api/webvr_api/using_the_webvr_api/index.md @@ -114,7 +114,7 @@ To begin with, `start()` retrieves a WebGL context to use to render 3D graphics ```js function start() { - canvas = document.getElementById("glcanvas"); + canvas = document.getElementById("gl-canvas"); initWebGL(canvas); // Initialize the GL context diff --git a/files/en-us/web/api/webvtt_api/index.md b/files/en-us/web/api/webvtt_api/index.md index 130d3d8ead1c310..d3d53251b9a4e60 100644 --- a/files/en-us/web/api/webvtt_api/index.md +++ b/files/en-us/web/api/webvtt_api/index.md @@ -282,7 +282,7 @@ video::cue { } ``` -Then we style each of the tags above with a different colour. +Then we style each of the tags above with a different color. ```css video::cue(u) { @@ -298,7 +298,7 @@ video::cue(i) { } video::cue(c) { - color: lightpurple; + color: lavender; } ``` diff --git a/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md b/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md index ebe9dd9e8e6db9b..515f9ad0b9ede3b 100644 --- a/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md +++ b/files/en-us/web/api/webvtt_api/web_video_text_tracks_format/index.md @@ -378,7 +378,7 @@ Text marked up with these tags can be formatted in [`STYLE` blocks](#style_block - : Used to highlight text that has been marked up as belonging to a particular language or language variant using the format defined in {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}}. ```xml - Engish text as spoken in Great Britain! + English text as spoken in Great Britain! ``` ## NOTE blocks @@ -619,13 +619,13 @@ Note that escape sequences are used in WebVTT CSS in the same way as HTML pages. WEBVTT STYLE -::cue(#crédit\ de\ transcription) { +::cue(#transcription\ credits) { color: red; } -crédit de transcription +transcription credits 00:04.000 --> 00:05.000 -Transcrit par Célestes™ +Transcribed by Célestes™ ``` ## Specifications diff --git a/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md b/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md index c8ccea85abd1abe..5ba1c6f06d462ed 100644 --- a/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md +++ b/files/en-us/web/api/webxr_device_api/movement_and_motion/index.md @@ -277,7 +277,7 @@ After storing the newly-created {{domxref("XRSession")}} object into `xrSession` Then we get a reference to the {{HTMLElement("canvas")}} found in our HTML—as well as its WebGL rendering context—which will be used as the drawing surface for the scene. The `xrCompatible` property is requested when calling {{domxref("HTMLCanvasElement.getContext", "getContext()")}} on the element to gain access to the WebGL rendering context for the canvas. This ensures that the context is configured for use as a source for WebXR rendering. -Next, we add event handlers for the {{domxref("Element.mousemove_event", "mousemove")}} and {{domxref("Element.contextmenu_event","contextmenu")}}, but only if the `allowMouseRotation` constant is `true`. The `mousemove` handler will deal with the pitching and yawing of the view based upon the movement of the mouse. Since the "mouselook" feature functions only while the right mouse button is held down, and clicking using the right mouse button triggers the context menu, we add a handler for the `contextmenu` event to the canvas to prevent the context menu from appearing when the user initially begins their drag of the mouse. +Next, we add event handlers for the {{domxref("Element.mousemove_event", "mousemove")}} and {{domxref("Element.contextmenu_event","contextmenu")}}, but only if the `allowMouseRotation` constant is `true`. The `mousemove` handler will deal with the pitching and yawing of the view based upon the movement of the mouse. Since the "" feature functions only while the right mouse button is held down, and clicking using the right mouse button triggers the context menu, we add a handler for the `contextmenu` event to the canvas to prevent the context menu from appearing when the user initially begins their drag of the mouse. Next, we compile the shader programs; get references to its variables; initialize the buffers that store the array of each position; the indexes into the position table for each vertex; the vertex normals; and the texture coordinates for each vertex. This is all taken directly from the WebGL sample code, so refer to [Lighting in WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL) and its preceding articles [Creating 3D objects using WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL) and [Using textures in WebGL](/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL). Then our `loadTexture()` function is called to load the texture file. diff --git a/files/en-us/web/api/webxr_device_api/rendering/index.md b/files/en-us/web/api/webxr_device_api/rendering/index.md index f055004375b03ef..cfe891ff6d95668 100644 --- a/files/en-us/web/api/webxr_device_api/rendering/index.md +++ b/files/en-us/web/api/webxr_device_api/rendering/index.md @@ -201,7 +201,7 @@ We then get the {{domxref("XRViewerPose")}} object that describes the viewer's p With the viewer's pose in hand, we can then begin to render the frame. The first step is to obtain access to the framebuffer into which the WebXR device wants the frame drawn; this is done by getting the target WebGL layer from the session's {{domxref("XRSession.renderState", "renderState")}} object's {{domxref("XRRenderState.baseLayer", "baseLayer")}} property, then getting the {{domxref("XRWebGLLayer.framebuffer", "framebuffer")}} from that {{domxref("XRWebGLLayer")}} object. We then call [`gl.bindFrameBuffer()`](/en-US/docs/Web/API/WebGLRenderingContext/bindFramebuffer) to bind that framebuffer as the target for all upcoming drawing commands. -The next step is to erase the framebuffer. While you can in theory skip this step—_if and only if your rendering code is guaranteed to write every single pixel in the framebuffer_—it's generally safest to just go ahead and clear it before you begin to draw, unless you need to eke out every ounce of performance you can and know you're touching all the pixels anyway. The background color is set to fully opaque black using [`gl.clearColor()`](/en-US/docs/Web/API/WebGLRenderingContext/clearColor); the clear depth is set to 1.0 by calling [`gl.cleardepth()`](/en-US/docs/Web/API/WebGLRenderingContext/clearDepth), in order to clear all pixels regardless of how far away the object they're part of is; and finally, the frame's pixel and depth buffers are both erased by calling [`gl.clear()`](/en-US/docs/Web/API/WebGLRenderingContext/clear), passing in a bit mask in which both `COLOR_BUFFER_BIT` and `DEPTH_BUFFER_BIT` are set. +The next step is to erase the framebuffer. While you can in theory skip this step—_if and only if your rendering code is guaranteed to write every single pixel in the framebuffer_—it's generally safest to just go ahead and clear it before you begin to draw, unless you need to eke out every ounce of performance you can and know you're touching all the pixels anyway. The background color is set to fully opaque black using [`gl.clearColor()`](/en-US/docs/Web/API/WebGLRenderingContext/clearColor); the clear depth is set to 1.0 by calling [`gl.clearDepth()`](/en-US/docs/Web/API/WebGLRenderingContext/clearDepth), in order to clear all pixels regardless of how far away the object they're part of is; and finally, the frame's pixel and depth buffers are both erased by calling [`gl.clear()`](/en-US/docs/Web/API/WebGLRenderingContext/clear), passing in a bit mask in which both `COLOR_BUFFER_BIT` and `DEPTH_BUFFER_BIT` are set. Since WebXR uses a single framebuffer for every view, with viewports upon the view being used to separate each eye's viewpoint within the framebuffer, we only need to clear a single framebuffer rather than cleaning it for each eye (or other viewpoints, if any) individually. diff --git a/files/en-us/web/api/webxr_device_api/startup_and_shutdown/index.md b/files/en-us/web/api/webxr_device_api/startup_and_shutdown/index.md index cba75fa162396ae..07b73e0c979c526 100644 --- a/files/en-us/web/api/webxr_device_api/startup_and_shutdown/index.md +++ b/files/en-us/web/api/webxr_device_api/startup_and_shutdown/index.md @@ -210,7 +210,7 @@ async function runSession(session) { // Set up WebGL data and such - const worldData = loadGLPrograms(session, "worlddata.xml"); + const worldData = loadGLPrograms(session, "world-data.xml"); if (!worldData) { return null; } diff --git a/files/en-us/web/api/window/close/index.md b/files/en-us/web/api/window/close/index.md index 2a50df62f270db2..05f643641ec8c52 100644 --- a/files/en-us/web/api/window/close/index.md +++ b/files/en-us/web/api/window/close/index.md @@ -47,7 +47,7 @@ opened by calling {{domxref("window.open()")}}. let openedWindow; function openWindow() { - openedWindow = window.open("moreinfo.htm"); + openedWindow = window.open("more-info.htm"); } function closeOpenedWindow() { diff --git a/files/en-us/web/api/window/fetch/index.md b/files/en-us/web/api/window/fetch/index.md index 84ca194d7240db3..aff6f77e2ba8e98 100644 --- a/files/en-us/web/api/window/fetch/index.md +++ b/files/en-us/web/api/window/fetch/index.md @@ -70,6 +70,7 @@ A {{jsxref("Promise")}} that resolves to a {{domxref("Response")}} object. Invalid header name. + 
 // space in "C ontent-Type"
 const headers = {
diff --git a/files/en-us/web/api/workernavigator/hardwareconcurrency/index.md b/files/en-us/web/api/workernavigator/hardwareconcurrency/index.md
index e3bf6c9a963460f..48d0dc416a46c0a 100644
--- a/files/en-us/web/api/workernavigator/hardwareconcurrency/index.md
+++ b/files/en-us/web/api/workernavigator/hardwareconcurrency/index.md
@@ -42,7 +42,7 @@ let workerList = [];
 
 for (let i = 0; i < navigator.hardwareConcurrency; i++) {
   let newWorker = {
-    worker: new Worker("cpuworker.js"),
+    worker: new Worker("cpu-worker.js"),
     inUse: false,
   };
   workerList.push(newWorker);
diff --git a/files/en-us/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md b/files/en-us/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
index 84936689e4a18b9..94f5c00231e926d 100644
--- a/files/en-us/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
+++ b/files/en-us/web/api/xmlhttprequest_api/sending_and_receiving_binary_data/index.md
@@ -62,11 +62,11 @@ function loadBinaryResource(url) {
 The magic happens in the `overrideMimeType` function, which forces the browser to treat it as plain text, using a user-defined character set. This tells the browser not to parse it, and to let the bytes pass through unprocessed.
 
 ```js
-const filestream = loadBinaryResource(url);
-const abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
+const fileStream = loadBinaryResource(url);
+const lowestByte = fileStream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
 ```
 
-The example above fetches the byte at offset `x` within the loaded binary data. The valid range for `x` is from 0 to `filestream.length-1`.
+The example above fetches the byte at offset `x` within the loaded binary data. The valid range for `x` is from 0 to `fileStream.length-1`.
 
 See [downloading binary streams with XMLHttpRequest](https://web.archive.org/web/20071103070418/http://mgran.blogspot.com/2006/08/downloading-binary-streams-with.html) for a detailed explanation.
 
diff --git a/files/en-us/web/api/xmlhttprequest_api/using_formdata_objects/index.md b/files/en-us/web/api/xmlhttprequest_api/using_formdata_objects/index.md
index f84078f2c09e71c..d099ddb4bde09b5 100644
--- a/files/en-us/web/api/xmlhttprequest_api/using_formdata_objects/index.md
+++ b/files/en-us/web/api/xmlhttprequest_api/using_formdata_objects/index.md
@@ -18,7 +18,7 @@ const send = document.querySelector("#send");
 send.addEventListener("click", async () => {
   const formData = new FormData();
   formData.append("username", "Groucho");
-  formData.append("accountnum", 123456);
+  formData.append("accountNum", 123456);
 
   // A file  element
   const avatar = document.querySelector("#avatar");
@@ -27,7 +27,7 @@ send.addEventListener("click", async () => {
   // JavaScript file-like object
   const content = 'hey!';
   const blob = new Blob([content], { type: "text/xml" });
-  formData.append("webmasterfile", blob);
+  formData.append("webmasterFile", blob);
 
   const response = await fetch("http://example.org/post", {
     method: "POST",
@@ -38,9 +38,9 @@ send.addEventListener("click", async () => {
 ```
 
 > [!NOTE]
-> The fields `"avatar"` and `"webmasterfile"` both contain a file. The number assigned to the field `"accountnum"` is immediately converted into a string by the [`FormData.append()`](/en-US/docs/Web/API/FormData/append) method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string. If the value is neither a `Blob` nor a `File`, the value is converted to a string).
+> The fields `"avatar"` and `"webmasterFile"` both contain a file. The number assigned to the field `"accountNum"` is immediately converted into a string by the [`FormData.append()`](/en-US/docs/Web/API/FormData/append) method (the field's value can be a {{ domxref("Blob") }}, {{ domxref("File") }}, or a string. If the value is neither a `Blob` nor a `File`, the value is converted to a string).
 
-This example builds a `FormData` instance containing values for fields named `"username"`, `"accountnum"`, `"avatar"` and `"webmasterfile"`, then uses {{domxref("Window/fetch", "fetch()")}} to send the form's data. The field `"webmasterfile"` is a {{domxref("Blob")}}. A `Blob` object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{ domxref("File") }} interface is based on `Blob`, inheriting blob functionality and expanding it to support files on the user's system. In order to build a `Blob` you can invoke [the `Blob()` constructor](/en-US/docs/Web/API/Blob/Blob).
+This example builds a `FormData` instance containing values for fields named `"username"`, `"accountNum"`, `"avatar"` and `"webmasterFile"`, then uses {{domxref("Window/fetch", "fetch()")}} to send the form's data. The field `"webmasterFile"` is a {{domxref("Blob")}}. A `Blob` object represents a file-like object of immutable, raw data. Blobs represent data that isn't necessarily in a JavaScript-native format. The {{ domxref("File") }} interface is based on `Blob`, inheriting blob functionality and expanding it to support files on the user's system. In order to build a `Blob` you can invoke [the `Blob()` constructor](/en-US/docs/Web/API/Blob/Blob).
 
 ## Retrieving a `FormData` object from an HTML form
 
@@ -112,7 +112,7 @@ You can also send files using `FormData`. Include an {{ HTMLElement("input") }}
   

     
   

   

diff --git a/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md b/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
index 1755eac75ef8489..b5aa407f728a75d 100644
--- a/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
+++ b/files/en-us/web/api/xmlhttprequest_api/using_xmlhttprequest/index.md
@@ -187,7 +187,7 @@ function getHeaderTime() {
 const req = new XMLHttpRequest();
 req.open(
   "HEAD", // use HEAD when you only need the headers
-  "yourpage.html",
+  "your-page.html",
 );
 req.onload = getHeaderTime;
 req.send();
@@ -223,8 +223,8 @@ function ifHasChanged(URL, callback) {
 And to test:
 
 ```js
-// Let's test the file "yourpage.html"
-ifHasChanged("yourpage.html", function (modified, visit) {
+// Let's test the file "your-page.html"
+ifHasChanged("your-page.html", function (modified, visit) {
   console.log(
     `The page '${this.filepath}' has been changed on ${new Date(
       nModified,
diff --git a/files/en-us/web/api/xrsessionevent/index.md b/files/en-us/web/api/xrsessionevent/index.md
index b1f80c7f6d3b978..413634db777a2a2 100644
--- a/files/en-us/web/api/xrsessionevent/index.md
+++ b/files/en-us/web/api/xrsessionevent/index.md
@@ -41,8 +41,8 @@ _The following events are represented using the `XRSessionEvent` interface, and
 This example creates a listener that watches for the visibility state of the session to change. It reacts by calling a function `mySessionVisible()` with a Boolean indicating whether or not the session is visible; this function might, for instance, spin up or reconfigure a worker that handles rendering the scene.
 
 ```js
-xrSession.addEventListener("visibilitystate", (e) => {
-  switch (e.session.visibilitystate) {
+xrSession.addEventListener("visibilitychange", (e) => {
+  switch (e.session.visibilityState) {
     case "visible":
     case "visible-blurred":
       mySessionVisible(true);
diff --git a/files/en-us/web/api/xrwebgllayer/framebuffer/index.md b/files/en-us/web/api/xrwebgllayer/framebuffer/index.md
index 1eb1b59c7fa0f60..a97411907633722 100644
--- a/files/en-us/web/api/xrwebgllayer/framebuffer/index.md
+++ b/files/en-us/web/api/xrwebgllayer/framebuffer/index.md
@@ -75,7 +75,7 @@ This example gets the `XRWebGLLayer` for a session and then passes its
 framebuffer into the WebGL context's {{domxref("WebGLRenderingContext.bindFramebuffer", "bindFramebuffer()")}} function.
 
 ```js
-let glLayer = xrSession.renderState.baselayer;
+let glLayer = xrSession.renderState.baseLayer;
 gl.bindFramebuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
 ```
 
diff --git a/files/en-us/web/api/xrwebgllayer/index.md b/files/en-us/web/api/xrwebgllayer/index.md
index 8022f9a5465375c..9d89983527bf6fb 100644
--- a/files/en-us/web/api/xrwebgllayer/index.md
+++ b/files/en-us/web/api/xrwebgllayer/index.md
@@ -67,7 +67,7 @@ let pose = xrFrame.getViewerPose(xrReferenceSpace);
 
 if (pose) {
   const glLayer = xrSession.renderState.baseLayer;
-  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.Framebffer);
+  gl.bindFrameBuffer(gl.FRAMEBUFFER, glLayer.framebuffer);
 
   for (const view of pose.views) {
     const viewport = glLayer.getViewport(view);
diff --git a/files/en-us/web/api/xsltprocessor/index.md b/files/en-us/web/api/xsltprocessor/index.md
index e86d245a9e251bc..d3a7ef6a42a33ff 100644
--- a/files/en-us/web/api/xsltprocessor/index.md
+++ b/files/en-us/web/api/xsltprocessor/index.md
@@ -220,7 +220,7 @@ init();
 
 ### Advanced example
 
-This advanced example sorts several divs based on their content. The example allows sorting the content multiple times, alternating between ascending and descending order. The JavaScript loads the .xsl file only on the first sort and sets the `xslloaded` variable to true once it has finished loading the file. Using the {{domxref("XSLTProcessor.getParameter()")}} method, the code can figure whether to sort in ascending or descending order. It defaults to ascending if the parameter is empty (the first time the sorting happens, as there is no value for it in the XSLT file). The sorting value is set using {{domxref("XSLTProcessor.setParameter()")}}.
+This advanced example sorts several divs based on their content. The example allows sorting the content multiple times, alternating between ascending and descending order. The JavaScript loads the .xsl file only on the first sort and sets the `xslLoaded` variable to true once it has finished loading the file. Using the {{domxref("XSLTProcessor.getParameter()")}} method, the code can figure whether to sort in ascending or descending order. It defaults to ascending if the parameter is empty (the first time the sorting happens, as there is no value for it in the XSLT file). The sorting value is set using {{domxref("XSLTProcessor.setParameter()")}}.
 
 The XSLT file has a parameter called `myOrder` that JavaScript sets to change the sorting method. The `xsl:sort` element's order attribute can access the value of the parameter using `$myOrder`. However, the value needs to be an XPATH expression and not a string, so `{$myOrder}` is used. Using {} evaluates the content as an XPath expression.
 
@@ -247,7 +247,7 @@ Once the transformation is complete, the result is appended to the document, as
 
 ```js
 let xslRef;
-let xslloaded = false;
+let xslLoaded = false;
 const parser = new DOMParser();
 const xsltProcessor = new XSLTProcessor();
 let myDOM;
@@ -255,12 +255,12 @@ let myDOM;
 let xmlRef = document.implementation.createDocument("", "", null);
 
 async function sort() {
-  if (!xslloaded) {
+  if (!xslLoaded) {
     const response = await fetch("example2.xsl");
     const xslText = await response.text();
     xslRef = parser.parseFromString(xslText, "application/xml");
     xsltProcessor.importStylesheet(xslRef);
-    xslloaded = true;
+    xslLoaded = true;
   }
 
   // Create a new XML document in memory

From bc37f8ea0003880b094ffeff20e536bfcd9ac878 Mon Sep 17 00:00:00 2001
From: A1lo 
Date: Mon, 28 Oct 2024 22:10:33 +0800
Subject: [PATCH 05/49] fix typo (#36528)

---
 .../javascript/reference/global_objects/typedarray/of/index.md  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/javascript/reference/global_objects/typedarray/of/index.md b/files/en-us/web/javascript/reference/global_objects/typedarray/of/index.md
index 5018b7138d8b646..c1be363be8c511f 100644
--- a/files/en-us/web/javascript/reference/global_objects/typedarray/of/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/typedarray/of/index.md
@@ -51,7 +51,7 @@ A new {{jsxref("TypedArray")}} instance.
 See {{jsxref("Array.of()")}} for more details. There are some subtle distinctions between {{jsxref("Array.of()")}} and
 `TypedArray.of()`:
 
-- If the `this` value passed to `TypedArray.of()` is not a constructor, `TypedArray.from()` will throw a {{jsxref("TypeError")}}, while `Array.of()` defaults to creating a new {{jsxref("Array")}}.
+- If the `this` value passed to `TypedArray.of()` is not a constructor, `TypedArray.of()` will throw a {{jsxref("TypeError")}}, while `Array.of()` defaults to creating a new {{jsxref("Array")}}.
 - `TypedArray.of()` uses `[[Set]]` while `Array.of()` uses `[[DefineOwnProperty]]`. Hence, when working with {{jsxref("Proxy")}} objects, it calls [`handler.set()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/set) to create new elements rather than [`handler.defineProperty()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/defineProperty).
 
 ## Examples

From a80f7efdfe2d1476245df9d7634adbe8cfca6951 Mon Sep 17 00:00:00 2001
From: wbamberg 
Date: Mon, 28 Oct 2024 07:52:03 -0700
Subject: [PATCH 06/49] CSP guide updates (#36157)

* First commit of new CSP guide

* Add example

* Added clickjacking and upgrade-insecure-requests

* Further clarifications on upgrade-insecure

* Add sections on testing

* Add See also

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

Co-authored-by: Hamish Willee 

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

Co-authored-by: Hamish Willee 

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

Co-authored-by: Hamish Willee 

* Talk more about XSS

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

Co-authored-by: Hamish Willee 

* Warningify unsafe-inline

* Boldify make unguessable nonces

* Explain what directives in the first example are doing

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

Co-authored-by: Hamish Willee 

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

Co-authored-by: Hamish Willee 

* Give example use case for hostname policy

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

Co-authored-by: Hamish Willee 

* Add CSP header name, use http styling

* Use scripts instead oif images

* Talk about when meta tag CSP delivery is a good option

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

Co-authored-by: Hamish Willee 

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

Co-authored-by: Hamish Willee 

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

Co-authored-by: Hamish Willee 

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

Co-authored-by: Hamish Willee 

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

Co-authored-by: Hamish Willee 

* More review comments

* Reorder fetch source expression types

* Clarify that one nonce value is set on all style/script tags

* Clarify 'intend to include'

* Review comment

* Add javascripot: URLs

* Elaborate a little on using hashes for static pages

* Add linebreak

* Correct heading level

* Acknowledge that removing eval() can be hard: Link to trusted types

* Note that report-only policy can't be delivered in a meta element

---------

Co-authored-by: Hamish Willee 
---
 files/en-us/web/http/csp/csp-overview.svg     |   3 +
 .../web/http/csp/csp-source-expressions.svg   |   3 +
 files/en-us/web/http/csp/index.md             | 534 +++++++++++++++---
 3 files changed, 451 insertions(+), 89 deletions(-)
 create mode 100644 files/en-us/web/http/csp/csp-overview.svg
 create mode 100644 files/en-us/web/http/csp/csp-source-expressions.svg

diff --git a/files/en-us/web/http/csp/csp-overview.svg b/files/en-us/web/http/csp/csp-overview.svg
new file mode 100644
index 000000000000000..761c34f708e2c71
--- /dev/null
+++ b/files/en-us/web/http/csp/csp-overview.svg
@@ -0,0 +1,3 @@
+
+
+
Content-Security-Policy: default-src 'self'; img-src 'self' example.com;
default-src 'self'
img-src 'self' example.com

\ No newline at end of file
diff --git a/files/en-us/web/http/csp/csp-source-expressions.svg b/files/en-us/web/http/csp/csp-source-expressions.svg
new file mode 100644
index 000000000000000..482cb5f19847bd8
--- /dev/null
+++ b/files/en-us/web/http/csp/csp-source-expressions.svg
@@ -0,0 +1,3 @@
+
+
+
Content-Security-Policy: default-src 'self'; img-src 'self' example.com;
Content-Security-Policy: default-src 'self'; img-src 'self' example.com;
default-src 'self'
default-src 'self'
img-src 'self' example.com
img-src 'self' example.com
'self'
'self'
example.com
example.com
'self'
'self'
Source expressions
Source expressions
Fetch directives
Fetch directives
\ No newline at end of file
diff --git a/files/en-us/web/http/csp/index.md b/files/en-us/web/http/csp/index.md
index 7d5086943e0afac..fe031703b481c9e 100644
--- a/files/en-us/web/http/csp/index.md
+++ b/files/en-us/web/http/csp/index.md
@@ -2,139 +2,508 @@
 title: Content Security Policy (CSP)
 slug: Web/HTTP/CSP
 page-type: guide
-browser-compat: http.headers.Content-Security-Policy
 ---
 
 {{HTTPSidebar}}
 
-**Content Security Policy** ({{Glossary("CSP")}}) is an added layer of security that helps to detect and mitigate certain types of attacks,
-including Cross-Site Scripting ({{Glossary("Cross-site_scripting", "XSS")}}) and data injection attacks.
-These attacks are used for everything from data theft, to site defacement, to malware distribution.
+**Content Security Policy** (CSP) is a feature that helps to prevent or minimize the risk of certain types of security threats. It consists of a series of instructions from a website to a browser, which instruct the browser to place restrictions on the things that the code comprising the site is allowed to do.
 
-CSP is designed to be fully backward compatible (except CSP version 2 where there are some explicitly-mentioned inconsistencies in backward compatibility; more details [here](https://www.w3.org/TR/CSP2/) section 1.1).
-Browsers that don't support it still work with servers that implement it, and vice versa. Browsers that don't support CSP ignore it, functioning as usual; they will only apply the protections of the standard [same-origin policy](/en-US/docs/Web/Security/Same-origin_policy) without the further restrictions that the CSP would add.
+The primary use case for CSP is to control which resources, in particular JavaScript resources, a document is allowed to load. This is mainly used as a defense against {{glossary("cross-site scripting")}} (XSS) attacks, in which an attacker is able to inject malicious code into the victim's site.
 
-To enable CSP, you need to configure your web server to return the {{HTTPHeader("Content-Security-Policy")}} HTTP header.
-(Sometimes you may see mentions of the `X-Content-Security-Policy` header, but that's an older version and you don't need to specify it anymore.)
+A CSP can have other purposes as well, including defending against {{glossary("clickjacking")}} and helping to ensure that a site's pages will be loaded over HTTPS.
 
-Alternatively, the {{HTMLElement("meta")}} element can be used to configure a policy, for example:
+In this guide we'll start by describing how a CSP is delivered to a browser and what it looks like at a high level.
 
-```html
-
+Then we'll describe how it can be used to [control which resources are loaded](#controlling_resource_loading) to protect against XSS, and then other use cases such as [clickjacking protection](#clickjacking_protection) and [upgrading insecure requests](#upgrading_insecure_requests). Note that there's no dependency between the different use cases: if you want to add clickjacking protection but not XSS mitigation, you can just add the directives for that use case.
+
+Finally we'll describe [strategies for deploying a CSP](#testing_your_policy) and tools that can help to make this process easier.
+
+## CSP overview
+
+A CSP should be delivered to the browser in the {{httpheader("Content-Security-Policy")}} response header. It should be set on all responses to all requests, not just the main document.
+
+You can also specify it using the [`http-equiv`](/en-US/docs/Web/HTML/Element/meta#http-equiv) attribute of your document's {{htmlelement("meta")}} element, and this is a useful option for some use cases, such as a client-side-rendered {{glossary("SPA", "single page app")}} which has only static resources, because you can then avoid relying on any server infrastructure. However, this option does not support all CSP features.
+
+The policy is specified as a series of _directives_, separated by semi-colons. Each directive controls a different aspect of the security policy. Each directive has a name, followed by a space, followed by a value. Different directives can have different syntaxes.
+
+For example, consider the following CSP:
+
+```http
+Content-Security-Policy: default-src 'self'; img-src 'self' example.com
 ```
 
+It sets two directives:
+
+- the `default-src` directive is set to `'self'`
+- the `img-src` directive is set to `'self' example.com`.
+
+![A CSP broken into its directives.](csp-overview.svg)
+
+The first directive, `default-src`, tells the browser to load only resources that are same-origin with the document, unless other more specific directives set a different policy for other resource types. The second, `img-src`, tells the browser to load images that are same-origin or that are served from `example.com`.
+
+In the next section, we'll look at the tools available to control resource loads, which is the main function of a CSP.
+
+## Controlling resource loading
+
+A CSP can be used to control the resources that a document is allowed to load. This is primarily used for protection against cross-site scripting (XSS) attacks.
+
+In this section we'll first see how controlling resource loads can help protect against XSS, then at the tools CSP provides to control what resources are loaded. Finally we'll describe one particular recommended strategy, which is called a "Strict CSP".
+
+### XSS and resource loading
+
+A cross-site scripting (XSS) attack is one in which an attacker is able to execute their code in the context of the target website. This code is then able to do anything that the website's own code could do, including, for example:
+
+- access or modify the content of the site's loaded pages
+- access or modify content in local storage
+- make HTTP requests with the user's credentials, enabling them to impersonate the user or access sensitive data
+
+An XSS attack is possible when a website accepts some input which might have been crafted by an attacker (for example, URL parameters, or a comment on a blog post) and then includes it in the page without _sanitizing_ it: that is, without ensuring that it can't be executed as JavaScript.
+
+Websites should protect themselves against XSS by sanitizing this input before including it in the page. A CSP provides a complementary protection, which can protect the website even if sanitization fails.
+
+If sanitization does fail, there are various forms the injected malicious code can take in the document, including:
+
+- A {{htmlelement("script")}} tag that links to a malicious source:
+
+  ```html
+  
+  ```
+
+- A `
+  ```
+
+- An inline event handler:
+
+  ```html
+  
+  ```
+
+- A `javascript:` URL:
+
+  ```html
+  
+  ```
+
+- A string argument to an unsafe API like [`eval()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval):
+
+  ```js
+  eval("console.log(`You've been hacked!`)");
+  ```
+
+A CSP can provide protection against all of these. With a CSP, you can:
+
+- define the permitted sources for JavaScript files and other resources, effectively blocking loads from `https://evil.com`
+- disable inline script tags
+- allow only script tags which have the correct nonce or hash set
+- disable inline event handlers
+- disable `javascript:` URLs
+- disable dangerous APIs like `eval()`
+
+In the next section we'll go over the tools CSP provides to do these things.
+
 > [!NOTE]
-> Some features, such as sending CSP violation reports, are only available when using the HTTP headers.
+> Setting a CSP is not an alternative to sanitizing input. Websites should sanitize input _and_ set a CSP, providing defense in depth against XSS.
+
+### Fetch directives
+
+Fetch directives are used to specify a particular category of resource that a document is allowed to load — such as JavaScript, CSS stylesheets, images, fonts, and so on.
 
-## Threats
+There are different fetch directives for different types of resource. For example:
 
-### Mitigating cross-site scripting
+- [`script-src`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src) sets allowed sources for JavaScript.
+- [`style-src`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) sets allowed sources for CSS stylesheets.
+- [`img-src`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/img-src) sets allowed sources for images.
 
-A primary goal of CSP is to mitigate and report XSS attacks. XSS attacks exploit the browser's trust in the content received from the server.
-Malicious scripts are executed by the victim's browser because the browser trusts the source of the content, even when it's not coming from where it seems to be coming from.
+One special fetch directive is `default-src`, which sets a fallback policy for all resources whose directives are not explicitly listed.
 
-CSP makes it possible for server administrators to reduce or eliminate the vectors by which XSS can occur by specifying the domains that the browser should consider to be valid sources of executable scripts.
-A CSP compatible browser will then only execute scripts loaded in source files received from those allowed domains, ignoring all other scripts (including inline scripts and event-handling HTML attributes).
+For the complete set of fetch directives, see the [reference documentation](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directives).
 
-As an ultimate form of protection, sites that want to never allow scripts to be
-executed can opt to globally disallow script execution.
+Each fetch directive is specified as either the single keyword `'none'` or one or more _source expressions_, separated by spaces. When more than one source expression is listed: if any of the methods allow the resource, then the resource is allowed.
 
-### Mitigating packet sniffing attacks
+For example, the CSP below sets two fetch directives:
 
-In addition to restricting the domains from which content can be loaded, the server can specify which protocols are allowed to be used;
-for example (and ideally, from a security standpoint), a server can specify that all content must be loaded using HTTPS.
-A complete data transmission security strategy includes not only enforcing HTTPS for data transfer, but also marking all [cookies with the `secure` attribute](/en-US/docs/Web/HTTP/Cookies) and providing automatic redirects from HTTP pages to their HTTPS counterparts.
-Sites may also use the {{HTTPHeader("Strict-Transport-Security")}} HTTP header to ensure that browsers connect to them only over an encrypted channel.
+- `default-src` is given the single source expression `'self'`
+- `img-src` is given two source expressions: `'self'` and `example.com`
 
-## Using CSP
+![CSP diagram showing source expressions](csp-source-expressions.svg)
 
-Configuring Content Security Policy involves adding the {{HTTPHeader("Content-Security-Policy")}} HTTP header to a web page and giving it values to control what resources the user agent is allowed to load for that page.
-For example, a page that uploads and displays images could allow images from anywhere, but restrict a form action to a specific endpoint.
-A properly designed Content Security Policy helps protect a page against a cross-site scripting attack.
-This article explains how to construct such headers properly, and provides examples.
+The effect of this is that:
 
-### Specifying your policy
+- images must be either same-origin with the document, or loaded from `example.com`
+- all other resources must be same-origin with the document.
 
-You can use the {{HTTPHeader("Content-Security-Policy")}} HTTP header to specify your policy, like this:
+In the next few sections we'll describe some of the ways you can use source expressions to control resource loads. Note that although we're describing them separately, these expressions can in general be combined: for example, a single fetch directive may include nonces as well as hostnames.
+
+#### Blocking resources
+
+To block a resource type entirely, use the `'none'` keyword. For example, the following directive blocks all {{htmlelement("object")}} and {{htmlelement("embed")}} resources:
 
 ```http
-Content-Security-Policy: policy
+Content-Security-Policy: object-src 'none'
 ```
 
-The policy is a string containing the policy directives describing your Content Security Policy.
+Note that `'none'` cannot be combined with any other method in a particular directive: in practice, if any other source expressions are given alongside `'none'`, then they are ignored.
+
+#### Nonces
 
-### Writing a policy
+A `nonce` is the recommended approach for restricting the loading of {{htmlelement("script")}} and {{htmlelement("style")}} resources.
 
-A policy is described using a series of policy directives, each of which describes the policy for a certain resource type or policy area.
-Your policy should include a {{CSP("default-src")}} policy directive, which is a fallback for other resource types when they don't have policies of their own (for a complete list, see the description of the {{CSP("default-src")}} directive).
-A policy needs to include a {{CSP("default-src")}} or {{CSP("script-src")}} directive to prevent inline scripts from running, as well as blocking the use of `eval()`.
-A policy needs to include a {{CSP("default-src")}} or {{CSP("style-src")}} directive to restrict inline styles from being applied from a {{HTMLElement("style")}} element or a `style` attribute.
-There are specific directives for a wide variety of types of items, so that each type can have its own policy, including fonts, frames, images, audio and video media, scripts, and workers.
+With a nonce, the server generates a random value for every HTTP response, and includes it in a `script-src` and/or a `style-src` directive:
 
-For a complete list of policy directives, see the reference page for the [Content-Security-Policy header](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy).
+```http
+Content-Security-Policy:
+  script-src 'nonce-416d1177-4d12-4e3b-b7c9-f6c409789fb8'
+```
 
-## Examples: Common use cases
+The server then includes this value as the value of the `nonce` attribute of all the `
+    
+    
Hello world
 
+    `;
+}
+
+app.get("/", (req, res) => {
+  const nonce = crypto.randomUUID();
+  res.setHeader("Content-Security-Policy", `script-src 'nonce-${nonce}'`);
+  res.send(content(nonce));
+});
+```
+
+On every request, the server generates a new nonce, inserts it into the CSP and into the {{htmlelement("script")}} tags in the returned document. Note that the server:
+
+- generates a new nonce for every request
+- can use nonces with both external and inline scripts
+- uses the same nonce for all `
+  
+    
Hello world
 
+    `;
+
+app.get("/", (req, res) => {
+  res.setHeader("Content-Security-Policy", csp);
+  res.send(content);
+});
+```
+
+Note that:
+
+- We have a separate hash for every script in the document.
+- For the external script "main.js", we also include the `integrity` attribute, and give it the same value.
+- Unlike the example using nonces, both the CSP and the content can be static, because the hashes stay the same. This makes hash-based policies more suitable for static pages or websites that rely on client-side rendering.
+
+#### Scheme-based policies
+
+Fetch directives can list a scheme, like `https:`, to allow resources that are served using that scheme. This, for example, allows a policy to require HTTPS for all resource loads:
 
 ```http
-Content-Security-Policy: default-src 'self'
+Content-Security-Policy: default-src https:
 ```
 
-### Example 2
+#### Location-based policies
+
+Fetch directives can control resource loads based on where the resource is located.
 
-A website administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the CSP is set on.)
+The keyword `'self'` allows resources which are same-origin with the document itself:
 
 ```http
-Content-Security-Policy: default-src 'self' example.com *.example.com
+Content-Security-Policy: img-src 'self'
 ```
 
-### Example 3
+You can also specify one or more hostnames, potentially including wildcards, and only resources served from those hosts will be allowed. This might be used, for example, to allow content to be served from a trusted CDN.
+
+```http
+Content-Security-Policy: img-src *.example.org
+```
 
-A website administrator wants to allow users of a web application to include images from any origin in their own content,
-but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code.
+You can specify multiple locations. The following directive allows only images that are same-origin with the current document, or are served from a subdomain of "example.org", or are served from "example.com":
 
 ```http
-Content-Security-Policy: default-src 'self'; img-src *; media-src example.org example.net; script-src userscript.example.com
+Content-Security-Policy: img-src 'self' *.example.org  example.com
 ```
 
-Here, by default, content is only permitted from the document's origin, with the following exceptions:
+#### Inline JavaScript
 
-- Images may load from anywhere (note the "\*" wildcard).
-- Media is only allowed from example.org and example.net (and not from subdomains of those sites).
-- Executable script is only allowed from userscript.example.com.
+If a CSP contains either a `default-src` or a `script-src` directive, then inline JavaScript will not be allowed to execute unless extra measures are taken to enable it. This includes:
 
-### Example 4
+- JavaScript included inside a `
+  ```
+
+- JavaScript in an inline event handler attribute:
+
+  ```html
+  
+  ```
+
+- JavaScript in a `javascript:` URL:
+
+  ```html
+  
+  ```
+
+The `unsafe-inline` keyword can be used to override this restriction. For example, the following directive requires all resources to be same-origin, but allows inline JavaScript:
+
+```http example-bad
+Content-Security-Policy: default-src 'self' 'unsafe-inline'
+```
+
+> [!WARNING]
+> Developers should avoid `'unsafe-inline'`, because it defeats much of the purpose of having a CSP. Inline JavaScript is one of the most common XSS vectors, and one of the most basic goals of a CSP is to prevent its uncontrolled use.
 
-A website administrator for an online banking site wants to ensure that all its content is loaded using TLS, in order to prevent attackers from eavesdropping on requests.
+Inline `
+  
+  
+    
Example page!

+  
+
+```
+
+It includes a script "main.js", which creates and adds another script, "main2.js":
+
+```js
+console.log("hello");
+
+const scriptElement = document.createElement("script");
+scriptElement.src = `main2.js`;
+
+document.head.appendChild(scriptElement);
+```
+
+We serve our document with a CSP like this:
+
+```http
+Content-Security-Policy:
+  script-src 'sha256-gEh1+8U9S1vkEuQSmmUMTZjyNSu5tIoECP4UXIEjMTk='
+```
+
+The "main.js" script will be allowed to load, because its hash matches the value in the CSP. But its attempt to load "main2.js" will fail.
+
+If we add `'strict-dynamic'` to the CSP, then "main.js" will be allowed to load "main2.js":
 
 ```http
-Content-Security-Policy: default-src https://onlinebanking.example.com
+Content-Security-Policy:
+  script-src 'sha256-gEh1+8U9S1vkEuQSmmUMTZjyNSu5tIoECP4UXIEjMTk='
+  strict-dynamic
+```
+
+The `'strict-dynamic'` keyword makes it much easier to create and maintain nonce- or hash-based CSPs, especially when a website uses third-party scripts. It does make your CSP less secure, though, because if the scripts you include create `
+```
+
+## Clickjacking protection
+
+The [`frame-ancestors`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/frame-ancestors) directive can be used to control which documents, if any, are allowed to embed this document in a nested browsing context such as an {{htmlelement("iframe")}}. This is an effective protection against clickjacking attacks, because these attacks depend on embedding the target site in a site controlled by the attacker.
+
+The syntax of `frame-ancestors` is a subset of the fetch directive syntax: you can provide the single keyword value `'none'` or one or more source expressions. However, the only source expressions you can use are schemes, hostnames, or the `'self'` keyword value.
+
+Unless you need your site to be embeddable, you should set `frame-ancestors` to `'none'`:
+
+```http
+Content-Security-Policy: frame-ancestors 'none'
+```
+
+This directive is a more flexible replacement for the {{httpheader("X-Frame-Options")}} header.
+
+## Upgrading insecure requests
+
+Web developers are strongly encouraged to serve all their content over HTTPS. In the process of upgrading a site to HTTPS, a site sometimes serves the main document over HTTPS but serves its resources over HTTP, for example, using markup like this:
+
+```html
+
 ```
 
-The server permits access only to documents being loaded specifically over HTTPS through the single origin onlinebanking.example.com.
+This is called _mixed content_, and the presence of insecure resources greatly weakens the protection afforded by HTTPS. Under the [mixed content algorithm](/en-US/docs/Web/Security/Mixed_content) that browsers implement, if a document is served over HTTPS, insecure resources are categorized into "upgradable content" and "blockable content". Upgradable content is upgraded to HTTPS, and blockable content is blocked, potentially breaking the page.
 
-### Example 5
+The ultimate solution to mixed content is for developers to load all resources over HTTPS. However, even if a site is actually able to serve all content over HTTPS, it can still be very difficult (or even effectively impossible, where archived content is concerned) for a developer to rewrite all the URLs the site uses to load resources.
 
-A website administrator of a web mail site wants to allow HTML in email, as well as images loaded from anywhere, but JavaScript or other potentially dangerous content can only come from the same origin as the mail server.
+The [`upgrade-insecure-requests`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests) directive is intended to solve this problem. This directive doesn't have any value: to set it, just include the directive name:
 
 ```http
-Content-Security-Policy: default-src 'self' *.example.com; img-src *
+Content-Security-Policy: upgrade-insecure-requests
 ```
 
-Note that this example doesn't specify a {{CSP("script-src")}}, so the {{CSP("default-src")}} directive will be used for JavaScript sources as a fallback.
+If this directive is set on a document, then the browser will automatically upgrade to HTTPS any HTTP URLs in the following cases:
+
+- requests to load resources (such as images, scripts, or fonts)
+- navigation requests (such as link targets) which are same-origin with the document
+- navigation requests in nested browsing contexts, such as iframes
+- form submissions
+
+However, top-level navigation requests whose target is a different origin will not be upgraded.
+
+For example, suppose the document at `https://example.org` is served with a CSP containing the `upgrade-insecure-requests` directive, and the document contains markup like this:
+
+```html
+
+
+```
+
+The browser will automatically upgrade both of these requests to HTTPS.
+
+Suppose the document also contains this:
+
+```html
+See some more cats!
+More cats, on another site!
+```
+
+The browser will upgrade the first link to HTTPS, but not the second, as it is navigating to a different origin.
+
+This directive is not a substitute for the {{httpheader("Strict-Transport-Security")}} header (also known as HSTS), because it does not upgrade external links to a site. Sites should include this directive and the `Strict-Transport-Security` header.
 
 ## Testing your policy
 
 To ease deployment, CSP can be deployed in report-only mode.
-The policy is not enforced, but any violations are reported to a provided URI.
-Additionally, a report-only header can be used to test a future revision to a policy without actually deploying it.
+The policy is not enforced, but any violations are sent to the reporting endpoint specified in the policy. Additionally, a report-only header can be used to test a future revision to a policy without actually deploying it.
 
 You can use the {{HTTPHeader("Content-Security-Policy-Report-Only")}} HTTP header to specify your policy, like this:
 
@@ -145,7 +514,9 @@ Content-Security-Policy-Report-Only: policy
 If both a {{HTTPHeader("Content-Security-Policy-Report-Only")}} header and a {{HTTPHeader("Content-Security-Policy")}} header are present in the same response, both policies are honored.
 The policy specified in `Content-Security-Policy` headers is enforced while the `Content-Security-Policy-Report-Only` policy generates reports but is not enforced.
 
-## Violation reporting
+Note that unlike a normal content security policy, a report-only policy cannot be delivered in a `` element.
+
+### Violation reporting
 
 The recommended method for reporting CSP violations is to use the [Reporting API](/en-US/docs/Web/API/Reporting_API), declaring endpoints in {{HTTPHeader("Reporting-Endpoints")}} and specifying one of them as the CSP reporting target using the `Content-Security-Policy` header's {{CSP("report-to")}} directive.
 
@@ -208,24 +579,9 @@ 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}}
-
-### Compatibility notes
-
-A specific incompatibility exists in some versions of the Safari web browser, whereby if a Content Security Policy header is set, but not a Same Origin header,
-the browser will block self-hosted content and off-site content, and incorrectly report that this is due to the Content Security Policy not allowing the content.
-
 ## See also
 
-- {{HTTPHeader("Content-Security-Policy")}} HTTP Header
-- {{HTTPHeader("Content-Security-Policy-Report-Only")}} HTTP Header
-- [Content Security in WebExtensions](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy)
-- [CSP in Web Workers](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#csp_in_workers)
-- [Privacy, permissions, and information security](/en-US/docs/Web/Privacy)
-- [CSP Evaluator](https://github.com/google/csp-evaluator) - Evaluate your Content Security Policy
+- [Mitigate cross-site scripting with a strict Content Security Policy](https://web.dev/strict-csp) on web.dev (2024)
+- [Content Security Policy: A successful mess between hardening and mitigation](https://infocondb.org/con/locomocosec/locomocosec-2019/content-security-policy-a-successful-mess-between-hardening-and-mitigation)
+- [Content Security Policy Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Content_Security_Policy_Cheat_Sheet.html) on owasp.org
+- [CSP Evaluator](https://csp-evaluator.withgoogle.com/)

From 2c762771070a207d410a963166adf32213bc3a45 Mon Sep 17 00:00:00 2001
From: Joshua Chen 
Date: Mon, 28 Oct 2024 11:32:13 -0400
Subject: [PATCH 07/49] Fix typos and pseudo-typos 4 (#36245)

* Fix typos and pseudo-typos 4

* Revert arc h function changes
---
 .../index.md                                  | 18 +++++-----
 .../guide/expressions_and_operators/index.md  | 14 ++++----
 .../web/javascript/guide/functions/index.md   |  8 ++---
 .../guide/loops_and_iteration/index.md        | 24 ++++++-------
 .../web/javascript/guide/modules/index.md     | 10 +++---
 .../regular_expressions/assertions/index.md   |  2 ++
 .../regular_expressions/cheatsheet/index.md   |  1 +
 .../groups_and_backreferences/index.md        |  4 +--
 .../regular_expressions/quantifiers/index.md  |  1 +
 .../guide/working_with_objects/index.md       | 34 +++++++++----------
 .../index.md                                  |  2 +-
 .../web/javascript/memory_management/index.md | 10 +++---
 .../reference/errors/is_not_iterable/index.md |  4 +--
 .../errors/not_a_constructor/index.md         |  4 +--
 .../global_objects/array/some/index.md        |  2 +-
 .../reference/global_objects/bigint/index.md  |  6 ++--
 .../reference/global_objects/error/index.md   |  2 +-
 .../global_objects/error/stack/index.md       |  2 +-
 .../reference/global_objects/eval/index.md    |  4 +--
 .../finalizationregistry/register/index.md    |  2 +-
 .../global_objects/function/apply/index.md    |  4 +--
 .../reference/global_objects/map/index.md     |  4 +--
 .../object/defineproperty/index.md            | 10 +++---
 .../object/getownpropertynames/index.md       |  6 ++--
 .../reference/global_objects/proxy/index.md   | 14 ++++----
 .../global_objects/regexp/test/index.md       |  4 +--
 .../global_objects/string/at/index.md         |  4 +--
 .../global_objects/string/indexof/index.md    |  4 +--
 .../global_objects/string/substr/index.md     |  2 ++
 .../global_objects/string/substring/index.md  |  4 +++
 .../global_objects/symbol/replace/index.md    |  2 ++
 .../destructuring_assignment/index.md         |  2 +-
 .../reference/operators/function/index.md     |  4 +--
 .../reference/operators/in/index.md           | 18 +++++-----
 .../reference/operators/instanceof/index.md   | 18 +++++-----
 .../reference/operators/logical_not/index.md  |  2 +-
 .../operators/optional_chaining/index.md      |  6 ++--
 .../reference/statements/continue/index.md    |  4 +--
 .../reference/statements/try...catch/index.md |  2 +-
 .../javascript/reference/strict_mode/index.md |  2 ++
 40 files changed, 142 insertions(+), 128 deletions(-)

diff --git a/files/en-us/web/javascript/enumerability_and_ownership_of_properties/index.md b/files/en-us/web/javascript/enumerability_and_ownership_of_properties/index.md
index 1928d92a2805f45..737f990dd41708f 100644
--- a/files/en-us/web/javascript/enumerability_and_ownership_of_properties/index.md
+++ b/files/en-us/web/javascript/enumerability_and_ownership_of_properties/index.md
@@ -55,14 +55,14 @@ Note that this is not the most efficient algorithm for all cases, but useful for
 
 ```js
 const SimplePropertyRetriever = {
-  getOwnEnumerables(obj) {
+  getOwnEnumProps(obj) {
     return this._getPropertyNames(obj, true, false, this._enumerable);
     // Or could use for...in filtered with Object.hasOwn or just this: return Object.keys(obj);
   },
-  getOwnNonenumerables(obj) {
+  getOwnNonEnumProps(obj) {
     return this._getPropertyNames(obj, true, false, this._notEnumerable);
   },
-  getOwnEnumerablesAndNonenumerables(obj) {
+  getOwnProps(obj) {
     return this._getPropertyNames(
       obj,
       true,
@@ -71,13 +71,13 @@ const SimplePropertyRetriever = {
     );
     // Or just use: return Object.getOwnPropertyNames(obj);
   },
-  getPrototypeEnumerables(obj) {
+  getPrototypeEnumProps(obj) {
     return this._getPropertyNames(obj, false, true, this._enumerable);
   },
-  getPrototypeNonenumerables(obj) {
+  getPrototypeNonEnumProps(obj) {
     return this._getPropertyNames(obj, false, true, this._notEnumerable);
   },
-  getPrototypeEnumerablesAndNonenumerables(obj) {
+  getPrototypeProps(obj) {
     return this._getPropertyNames(
       obj,
       false,
@@ -85,14 +85,14 @@ const SimplePropertyRetriever = {
       this._enumerableAndNotEnumerable,
     );
   },
-  getOwnAndPrototypeEnumerables(obj) {
+  getOwnAndPrototypeEnumProps(obj) {
     return this._getPropertyNames(obj, true, true, this._enumerable);
     // Or could use unfiltered for...in
   },
-  getOwnAndPrototypeNonenumerables(obj) {
+  getOwnAndPrototypeNonEnumProps(obj) {
     return this._getPropertyNames(obj, true, true, this._notEnumerable);
   },
-  getOwnAndPrototypeEnumerablesAndNonenumerables(obj) {
+  getOwnAndPrototypeEnumAndNonEnumProps(obj) {
     return this._getPropertyNames(
       obj,
       true,
diff --git a/files/en-us/web/javascript/guide/expressions_and_operators/index.md b/files/en-us/web/javascript/guide/expressions_and_operators/index.md
index 2167bd6aad3ff79..d30eaf61df658da 100644
--- a/files/en-us/web/javascript/guide/expressions_and_operators/index.md
+++ b/files/en-us/web/javascript/guide/expressions_and_operators/index.md
@@ -831,8 +831,8 @@ The shorthand assignment operator `+=` can also be used to concatenate strings.
 For example,
 
 ```js
-let mystring = "alpha";
-mystring += "bet"; // evaluates to "alphabet" and assigns this value to mystring.
+let myString = "alpha";
+myString += "bet"; // evaluates to "alphabet" and assigns this value to myString.
 ```
 
 ## Conditional (ternary) operator
@@ -1024,9 +1024,9 @@ const myString = new String("coral");
 "length" in myString; // returns true
 
 // Custom objects
-const mycar = { make: "Honda", model: "Accord", year: 1998 };
-"make" in mycar; // returns true
-"model" in mycar; // returns true
+const myCar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in myCar; // returns true
+"model" in myCar; // returns true
 ```
 
 ### instanceof
@@ -1070,8 +1070,8 @@ this.propertyName;
 Suppose a function called `validate` validates an object's `value` property, given the object and the high and low values:
 
 ```js
-function validate(obj, lowval, hival) {
-  if (obj.value < lowval || obj.value > hival) {
+function validate(obj, lowVal, highVal) {
+  if (obj.value < lowVal || obj.value > highVal) {
     console.log("Invalid Value!");
   }
 }
diff --git a/files/en-us/web/javascript/guide/functions/index.md b/files/en-us/web/javascript/guide/functions/index.md
index 31bc7fc153dfd8b..b7d4cccec97adc2 100644
--- a/files/en-us/web/javascript/guide/functions/index.md
+++ b/files/en-us/web/javascript/guide/functions/index.md
@@ -39,15 +39,15 @@ function myFunc(theObject) {
   theObject.make = "Toyota";
 }
 
-const mycar = {
+const myCar = {
   make: "Honda",
   model: "Accord",
   year: 1998,
 };
 
-console.log(mycar.make); // "Honda"
-myFunc(mycar);
-console.log(mycar.make); // "Toyota"
+console.log(myCar.make); // "Honda"
+myFunc(myCar);
+console.log(myCar.make); // "Toyota"
 ```
 
 When you pass an array as a parameter, if the function changes any of the array's values, that change is visible outside the function, as shown in the following example:
diff --git a/files/en-us/web/javascript/guide/loops_and_iteration/index.md b/files/en-us/web/javascript/guide/loops_and_iteration/index.md
index e561e0db2d7839c..c272dfc5827b5eb 100644
--- a/files/en-us/web/javascript/guide/loops_and_iteration/index.md
+++ b/files/en-us/web/javascript/guide/loops_and_iteration/index.md
@@ -331,30 +331,30 @@ If you comment out the `continue;`, the loop would run till the end and you woul
 
 ### Example 2
 
-A statement labeled `checkiandj` contains a statement labeled
-`checkj`. If `continue` is encountered, the program
-terminates the current iteration of `checkj` and begins the next
-iteration. Each time `continue` is encountered, `checkj`
+A statement labeled `checkIandJ` contains a statement labeled
+`checkJ`. If `continue` is encountered, the program
+terminates the current iteration of `checkJ` and begins the next
+iteration. Each time `continue` is encountered, `checkJ`
 reiterates until its condition returns `false`. When `false` is
-returned, the remainder of the `checkiandj` statement is completed,
-and `checkiandj` reiterates until its condition returns
+returned, the remainder of the `checkIandJ` statement is completed,
+and `checkIandJ` reiterates until its condition returns
 `false`. When `false` is returned, the program continues at the
-statement following `checkiandj`.
+statement following `checkIandJ`.
 
-If `continue` had a label of `checkiandj`, the program
-would continue at the top of the `checkiandj` statement.
+If `continue` had a label of `checkIandJ`, the program
+would continue at the top of the `checkIandJ` statement.
 
 ```js
 let i = 0;
 let j = 10;
-checkiandj: while (i < 4) {
+checkIandJ: while (i < 4) {
   console.log(i);
   i += 1;
-  checkj: while (j > 4) {
+  checkJ: while (j > 4) {
     console.log(j);
     j -= 1;
     if (j % 2 === 0) {
-      continue checkj;
+      continue checkJ;
     }
     console.log(j, "is odd.");
   }
diff --git a/files/en-us/web/javascript/guide/modules/index.md b/files/en-us/web/javascript/guide/modules/index.md
index 151bff173a11201..d287bf0bc1b71b1 100644
--- a/files/en-us/web/javascript/guide/modules/index.md
+++ b/files/en-us/web/javascript/guide/modules/index.md
@@ -312,18 +312,18 @@ The example below demonstrates this.
 ```json
 {
   "imports": {
-    "coolmodule": "/node_modules/coolmodule/index.js"
+    "cool-module": "/node_modules/cool-module/index.js"
   },
   "scopes": {
     "/node_modules/dependency/": {
-      "coolmodule": "/node_modules/some/other/location/coolmodule/index.js"
+      "cool-module": "/node_modules/some/other/location/cool-module/index.js"
     }
   }
 }
 ```
 
-With this mapping, if a script with an URL that contains `/node_modules/dependency/` imports `coolmodule`, the version in `/node_modules/some/other/location/coolmodule/index.js` will be used.
-The map in `imports` is used as a fallback if there is no matching scope in the scoped map, or the matching scopes don't contain a matching specifier. For example, if `coolmodule` is imported from a script with a non-matching scope path, then the module specifier map in `imports` will be used instead, mapping to the version in `/node_modules/coolmodule/index.js`.
+With this mapping, if a script with an URL that contains `/node_modules/dependency/` imports `cool-module`, the version in `/node_modules/some/other/location/cool-module/index.js` will be used.
+The map in `imports` is used as a fallback if there is no matching scope in the scoped map, or the matching scopes don't contain a matching specifier. For example, if `cool-module` is imported from a script with a non-matching scope path, then the module specifier map in `imports` will be used instead, mapping to the version in `/node_modules/cool-module/index.js`.
 
 Note that the path used to select a scope does not affect how the address is resolved.
 The value in the mapped path does not have to match the scopes path, and relative paths are still resolved to the base URL of the script that contains the import map.
@@ -405,7 +405,7 @@ You can only use `import` and `export` statements inside modules, not regular sc
 You should generally define all your modules in separate files. Modules declared inline in HTML can only import other modules, but anything they export will not be accessible by other modules (because they don't have a URL).
 
 > [!NOTE]
-> Modules and their dependencies can be preloaded by specifying them in [``](/en-US/docs/Web/HTML/Element/link) elements with [`rel="modulepreloaded"`](/en-US/docs/Web/HTML/Attributes/rel/modulepreload).
+> Modules and their dependencies can be preloaded by specifying them in [``](/en-US/docs/Web/HTML/Element/link) elements with [`rel="modulepreload"`](/en-US/docs/Web/HTML/Attributes/rel/modulepreload).
 > This can significantly reduce load time when the modules are used.
 
 ## Other differences between modules and classic scripts
diff --git a/files/en-us/web/javascript/guide/regular_expressions/assertions/index.md b/files/en-us/web/javascript/guide/regular_expressions/assertions/index.md
index b60a5a42ff3365e..f0f8df1b1ce6f09 100644
--- a/files/en-us/web/javascript/guide/regular_expressions/assertions/index.md
+++ b/files/en-us/web/javascript/guide/regular_expressions/assertions/index.md
@@ -189,6 +189,8 @@ Assertions include boundaries, which indicate the beginnings and endings of line
 
 ### General boundary-type overview example
 
+
+
 ```js
 // Using Regex boundaries to fix buggy string.
 buggyMultiline = `tey, ihe light-greon apple
diff --git a/files/en-us/web/javascript/guide/regular_expressions/cheatsheet/index.md b/files/en-us/web/javascript/guide/regular_expressions/cheatsheet/index.md
index 719f65cdc35c305..7b9817111a87af3 100644
--- a/files/en-us/web/javascript/guide/regular_expressions/cheatsheet/index.md
+++ b/files/en-us/web/javascript/guide/regular_expressions/cheatsheet/index.md
@@ -707,6 +707,7 @@ This page provides an overall cheat sheet of all the capabilities of `RegExp` sy
         x{n,m}
       
       
+        
         

           Where "n" and "m" are non-negative integers and m >= n,
           matches at least "n" and at most "m" occurrences of the preceding
diff --git a/files/en-us/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md b/files/en-us/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
index 00dfbd3feae0800..56061d32440640c 100644
--- a/files/en-us/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
+++ b/files/en-us/web/javascript/guide/regular_expressions/groups_and_backreferences/index.md
@@ -169,9 +169,9 @@ const personList = `First_Name: John, Last_Name: Doe
 First_Name: Jane, Last_Name: Smith`;
 
 const regexpNames =
-  /First_Name: (?\w+), Last_Name: (?\w+)/g;
+  /First_Name: (?\w+), Last_Name: (?\w+)/g;
 for (const match of personList.matchAll(regexpNames)) {
-  console.log(`Hello ${match.groups.firstname} ${match.groups.lastname}`);
+  console.log(`Hello ${match.groups.firstName} ${match.groups.lastName}`);
 }
 ```
 
diff --git a/files/en-us/web/javascript/guide/regular_expressions/quantifiers/index.md b/files/en-us/web/javascript/guide/regular_expressions/quantifiers/index.md
index d0c9d4182b322df..cecee4357826ffb 100644
--- a/files/en-us/web/javascript/guide/regular_expressions/quantifiers/index.md
+++ b/files/en-us/web/javascript/guide/regular_expressions/quantifiers/index.md
@@ -97,6 +97,7 @@ Quantifiers indicate numbers of characters or expressions to match.
         x{n,m}
       
       
+        
         

           Where "n" and "m" are non-negative integers and m >= n,
           matches at least "n" and at most "m" occurrences of the preceding
diff --git a/files/en-us/web/javascript/guide/working_with_objects/index.md b/files/en-us/web/javascript/guide/working_with_objects/index.md
index 39e8849ca9338f9..f5028f1a2b5df91 100644
--- a/files/en-us/web/javascript/guide/working_with_objects/index.md
+++ b/files/en-us/web/javascript/guide/working_with_objects/index.md
@@ -87,8 +87,8 @@ This statement creates `myCar` and assigns it the specified values for its prope
 You can create any number of `Car` objects by calls to `new`. For example,
 
 ```js
-const kenscar = new Car("Nissan", "300ZX", 1992);
-const vpgscar = new Car("Mazda", "Miata", 1990);
+const randCar = new Car("Nissan", "300ZX", 1992);
+const kenCar = new Car("Mazda", "Miata", 1990);
 ```
 
 An object can have a property that is itself another object. For example, suppose you define an object called `Person` as follows:
@@ -328,14 +328,14 @@ For more information, see [Enumerability and ownership of properties](/en-US/doc
 You can remove a non-inherited property using the [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete) operator. The following code shows how to remove a property.
 
 ```js
-// Creates a new object, myobj, with two properties, a and b.
-const myobj = new Object();
-myobj.a = 5;
-myobj.b = 12;
+// Creates a new object, myObj, with two properties, a and b.
+const myObj = new Object();
+myObj.a = 5;
+myObj.b = 12;
 
-// Removes the a property, leaving myobj with only the b property.
-delete myobj.a;
-console.log("a" in myobj); // false
+// Removes the a property, leaving myObj with only the b property.
+delete myObj.a;
+console.log("a" in myObj); // false
 ```
 
 ## Inheritance
@@ -489,23 +489,23 @@ In JavaScript, objects are a reference type. Two distinct objects are never equa
 ```js
 // Two variables, two distinct objects with the same properties
 const fruit = { name: "apple" };
-const fruitbear = { name: "apple" };
+const anotherFruit = { name: "apple" };
 
-fruit == fruitbear; // return false
-fruit === fruitbear; // return false
+fruit == anotherFruit; // return false
+fruit === anotherFruit; // return false
 ```
 
 ```js
 // Two variables, a single object
 const fruit = { name: "apple" };
-const fruitbear = fruit; // Assign fruit object reference to fruitbear
+const anotherFruit = fruit; // Assign fruit object reference to anotherFruit
 
-// Here fruit and fruitbear are pointing to same object
-fruit == fruitbear; // return true
-fruit === fruitbear; // return true
+// Here fruit and anotherFruit are pointing to same object
+fruit == anotherFruit; // return true
+fruit === anotherFruit; // return true
 
 fruit.name = "grape";
-console.log(fruitbear); // { name: "grape" }; not { name: "apple" }
+console.log(anotherFruit); // { name: "grape" }; not { name: "apple" }
 ```
 
 For more information about comparison operators, see [equality operators](/en-US/docs/Web/JavaScript/Reference/Operators#equality_operators).
diff --git a/files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.md b/files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.md
index 8277402c5bf62e6..092aeaa0f4baca5 100644
--- a/files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.md
+++ b/files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.md
@@ -463,7 +463,7 @@ const o = { a: 1 };
 // Object.prototype has null as its [[Prototype]].
 // o ---> Object.prototype ---> null
 
-const b = ["yo", "whadup", "?"];
+const b = ["yo", "sup", "?"];
 // Arrays inherit from Array.prototype
 // (which has methods indexOf, forEach, etc.)
 // The prototype chain looks like:
diff --git a/files/en-us/web/javascript/memory_management/index.md b/files/en-us/web/javascript/memory_management/index.md
index a06fe41732bbff6..764d5fc474f41db 100644
--- a/files/en-us/web/javascript/memory_management/index.md
+++ b/files/en-us/web/javascript/memory_management/index.md
@@ -26,7 +26,7 @@ In order to not bother the programmer with allocations, JavaScript will automati
 
 ```js
 const n = 123; // allocates memory for a number
-const s = "azerty"; // allocates memory for a string
+const s = "string"; // allocates memory for a string
 
 const o = {
   a: 1,
@@ -35,7 +35,7 @@ const o = {
 
 // (like object) allocates memory for the array and
 // contained values
-const a = [1, null, "abra"];
+const a = [1, null, "str2"];
 
 function f(a) {
   return a + 2;
@@ -64,14 +64,14 @@ const e = document.createElement("div"); // allocates a DOM element
 Some methods allocate new values or objects:
 
 ```js
-const s = "azerty";
+const s = "string";
 const s2 = s.substr(0, 3); // s2 is a new string
 // Since strings are immutable values,
 // JavaScript may decide to not allocate memory,
 // but just store the [0, 3] range.
 
-const a = ["ouais ouais", "nan nan"];
-const a2 = ["generation", "nan nan"];
+const a = ["yeah yeah", "no no"];
+const a2 = ["generation", "no no"];
 const a3 = a.concat(a2);
 // new array with 4 elements being
 // the concatenation of a and a2 elements.
diff --git a/files/en-us/web/javascript/reference/errors/is_not_iterable/index.md b/files/en-us/web/javascript/reference/errors/is_not_iterable/index.md
index 31fc901991aae63..ae6935e00ee9b4a 100644
--- a/files/en-us/web/javascript/reference/errors/is_not_iterable/index.md
+++ b/files/en-us/web/javascript/reference/errors/is_not_iterable/index.md
@@ -58,12 +58,12 @@ const [] = nonIterable1;
 ### Array destructuring a non-iterable
 
 ```js example-bad
-const myobj = { arrayOrObjProp1: {}, arrayOrObjProp2: [42] };
+const myObj = { arrayOrObjProp1: {}, arrayOrObjProp2: [42] };
 
 const {
   arrayOrObjProp1: [value1],
   arrayOrObjProp2: [value2],
-} = myobj; // TypeError: object is not iterable
+} = myObj; // TypeError: object is not iterable
 
 console.log(value1, value2);
 ```
diff --git a/files/en-us/web/javascript/reference/errors/not_a_constructor/index.md b/files/en-us/web/javascript/reference/errors/not_a_constructor/index.md
index a4e00121bed2e67..393b934899ec9d8 100644
--- a/files/en-us/web/javascript/reference/errors/not_a_constructor/index.md
+++ b/files/en-us/web/javascript/reference/errors/not_a_constructor/index.md
@@ -69,10 +69,10 @@ function Car(make, model, year) {
 }
 ```
 
-Now you can create an object called `mycar` as follows:
+Now you can create an object called `myCar` as follows:
 
 ```js
-const mycar = new Car("Eagle", "Talon TSi", 1993);
+const myCar = new Car("Eagle", "Talon TSi", 1993);
 ```
 
 ### In Promises
diff --git a/files/en-us/web/javascript/reference/global_objects/array/some/index.md b/files/en-us/web/javascript/reference/global_objects/array/some/index.md
index e16ec7876eeea21..a1774a6167596b7 100644
--- a/files/en-us/web/javascript/reference/global_objects/array/some/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/array/some/index.md
@@ -92,7 +92,7 @@ function checkAvailability(arr, val) {
   return arr.some((arrVal) => val === arrVal);
 }
 
-checkAvailability(fruits, "kela"); // false
+checkAvailability(fruits, "grapefruit"); // false
 checkAvailability(fruits, "banana"); // true
 ```
 
diff --git a/files/en-us/web/javascript/reference/global_objects/bigint/index.md b/files/en-us/web/javascript/reference/global_objects/bigint/index.md
index 4da82e27974d5e0..726a8345d7bbabd 100644
--- a/files/en-us/web/javascript/reference/global_objects/bigint/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/bigint/index.md
@@ -79,9 +79,9 @@ Special cases:
 const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER); // 9007199254740991n
 const maxPlusOne = previousMaxSafe + 1n; // 9007199254740992n
 const theFuture = previousMaxSafe + 2n; // 9007199254740993n, this works now!
-const multi = previousMaxSafe * 2n; // 18014398509481982n
-const subtr = multi - 10n; // 18014398509481972n
-const mod = multi % 10n; // 2n
+const prod = previousMaxSafe * 2n; // 18014398509481982n
+const diff = prod - 10n; // 18014398509481972n
+const mod = prod % 10n; // 2n
 const bigN = 2n ** 54n; // 18014398509481984n
 bigN * -1n; // -18014398509481984n
 const expected = 4n / 2n; // 2n
diff --git a/files/en-us/web/javascript/reference/global_objects/error/index.md b/files/en-us/web/javascript/reference/global_objects/error/index.md
index b7c0abfed6a9c07..38bf90230205a56 100644
--- a/files/en-us/web/javascript/reference/global_objects/error/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/error/index.md
@@ -48,7 +48,7 @@ Besides the generic `Error` constructor, there are other core error constructors
 - `Error.stackTraceLimit` {{non-standard_inline}}
   - : A non-standard V8 numerical property that limits how many stack frames to include in an error stacktrace.
 - `Error.prepareStackTrace()` {{non-standard_inline}} {{optional_inline}}
-  - : A non-standard V8 function that, if provided by usercode, is called by the V8 JavaScript engine for thrown exceptions, allowing the user to provide custom formatting for stacktraces.
+  - : A non-standard V8 function that, if provided by user code, is called by the V8 JavaScript engine for thrown exceptions, allowing the user to provide custom formatting for stacktraces.
 
 ## Instance properties
 
diff --git a/files/en-us/web/javascript/reference/global_objects/error/stack/index.md b/files/en-us/web/javascript/reference/global_objects/error/stack/index.md
index 337e6f681253277..e73f0e83abd82b4 100644
--- a/files/en-us/web/javascript/reference/global_objects/error/stack/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/error/stack/index.md
@@ -143,7 +143,7 @@ function a() {
   b(3, 4, "\n\n", undefined, {});
 }
 try {
-  a("first call, firstarg");
+  a("first call, first arg");
 } catch (e) {
   document.getElementById("output").textContent = e.stack;
 }
diff --git a/files/en-us/web/javascript/reference/global_objects/eval/index.md b/files/en-us/web/javascript/reference/global_objects/eval/index.md
index e4592f415b5633f..d05bc71853619fb 100644
--- a/files/en-us/web/javascript/reference/global_objects/eval/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/eval/index.md
@@ -76,8 +76,8 @@ eval("x + y");
 eval?.("x + y");
 
 // Indirect call using a variable to store and return eval
-const geval = eval;
-geval("x + y");
+const myEval = eval;
+myEval("x + y");
 
 // Indirect call through member access
 const obj = { eval };
diff --git a/files/en-us/web/javascript/reference/global_objects/finalizationregistry/register/index.md b/files/en-us/web/javascript/reference/global_objects/finalizationregistry/register/index.md
index 5bc260417bb9744..9925cf6afff09bb 100644
--- a/files/en-us/web/javascript/reference/global_objects/finalizationregistry/register/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/finalizationregistry/register/index.md
@@ -34,7 +34,7 @@ None ({{jsxref("undefined")}}).
 - {{jsxref("TypeError")}}
   - : Thrown in one of the following cases:
     - `target` is not an object or a [non-registered symbol](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#shared_symbols_in_the_global_symbol_registry) (object as opposed to primitives; functions are objects as well)
-    - `target` is the same as `heldvalue` (`target === heldValue`)
+    - `target` is the same as `heldValue` (`target === heldValue`)
     - `unregisterToken` is not an object or a [non-registered symbol](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol#shared_symbols_in_the_global_symbol_registry)
 
 ## Description
diff --git a/files/en-us/web/javascript/reference/global_objects/function/apply/index.md b/files/en-us/web/javascript/reference/global_objects/function/apply/index.md
index 7a5de92d4108a8e..dc858e7b8b6287b 100644
--- a/files/en-us/web/javascript/reference/global_objects/function/apply/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/function/apply/index.md
@@ -124,11 +124,11 @@ function minOfArray(arr) {
   const QUANTUM = 32768;
 
   for (let i = 0; i < arr.length; i += QUANTUM) {
-    const submin = Math.min.apply(
+    const subMin = Math.min.apply(
       null,
       arr.slice(i, Math.min(i + QUANTUM, arr.length)),
     );
-    min = Math.min(submin, min);
+    min = Math.min(subMin, min);
   }
 
   return min;
diff --git a/files/en-us/web/javascript/reference/global_objects/map/index.md b/files/en-us/web/javascript/reference/global_objects/map/index.md
index b1e1e4a00bb7f05..8717fd196ccaa8c 100644
--- a/files/en-us/web/javascript/reference/global_objects/map/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/map/index.md
@@ -513,9 +513,9 @@ const second = new Map([
 ]);
 
 // Merge maps with an array. The last repeated key wins.
-const merged = new Map([...first, ...second, [1, "eins"]]);
+const merged = new Map([...first, ...second, [1, "un"]]);
 
-console.log(merged.get(1)); // eins
+console.log(merged.get(1)); // un
 console.log(merged.get(2)); // dos
 console.log(merged.get(3)); // three
 ```
diff --git a/files/en-us/web/javascript/reference/global_objects/object/defineproperty/index.md b/files/en-us/web/javascript/reference/global_objects/object/defineproperty/index.md
index 4bc890f2a0b252a..165b01d42c9780a 100644
--- a/files/en-us/web/javascript/reference/global_objects/object/defineproperty/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/object/defineproperty/index.md
@@ -412,20 +412,20 @@ const pattern = {
     return "I always return this string, whatever you have assigned";
   },
   set() {
-    this.myname = "this is my name string";
+    this.myName = "this is my name string";
   },
 };
 
 function TestDefineSetAndGet() {
-  Object.defineProperty(this, "myproperty", pattern);
+  Object.defineProperty(this, "myProperty", pattern);
 }
 
 const instance = new TestDefineSetAndGet();
-instance.myproperty = "test";
-console.log(instance.myproperty);
+instance.myProperty = "test";
+console.log(instance.myProperty);
 // I always return this string, whatever you have assigned
 
-console.log(instance.myname); // this is my name string
+console.log(instance.myName); // this is my name string
 ```
 
 ### Inheritance of properties
diff --git a/files/en-us/web/javascript/reference/global_objects/object/getownpropertynames/index.md b/files/en-us/web/javascript/reference/global_objects/object/getownpropertynames/index.md
index 517e5cccf9000dc..a8d3db8f9002f2b 100644
--- a/files/en-us/web/javascript/reference/global_objects/object/getownpropertynames/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/object/getownpropertynames/index.md
@@ -103,11 +103,11 @@ This uses the {{jsxref("Array.prototype.filter()")}} function to remove the enum
 
 ```js
 const target = myObject;
-const enumAndNonenum = Object.getOwnPropertyNames(target);
+const enumAndNonEnum = Object.getOwnPropertyNames(target);
 const enumOnly = new Set(Object.keys(target));
-const nonenumOnly = enumAndNonenum.filter((key) => !enumOnly.has(key));
+const nonEnumOnly = enumAndNonEnum.filter((key) => !enumOnly.has(key));
 
-console.log(nonenumOnly);
+console.log(nonEnumOnly);
 ```
 
 ## Specifications
diff --git a/files/en-us/web/javascript/reference/global_objects/proxy/index.md b/files/en-us/web/javascript/reference/global_objects/proxy/index.md
index 4e39028014842be..c6e9c09c6cba084 100644
--- a/files/en-us/web/javascript/reference/global_objects/proxy/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/proxy/index.md
@@ -308,20 +308,20 @@ const view = new Proxy(
     selected: null,
   },
   {
-    set(obj, prop, newval) {
-      const oldval = obj[prop];
+    set(obj, prop, newVal) {
+      const oldVal = obj[prop];
 
       if (prop === "selected") {
-        if (oldval) {
-          oldval.setAttribute("aria-selected", "false");
+        if (oldVal) {
+          oldVal.setAttribute("aria-selected", "false");
         }
-        if (newval) {
-          newval.setAttribute("aria-selected", "true");
+        if (newVal) {
+          newVal.setAttribute("aria-selected", "true");
         }
       }
 
       // The default behavior to store the value
-      obj[prop] = newval;
+      obj[prop] = newVal;
 
       // Indicate success
       return true;
diff --git a/files/en-us/web/javascript/reference/global_objects/regexp/test/index.md b/files/en-us/web/javascript/reference/global_objects/regexp/test/index.md
index 4a4e0e5c7231267..5da19d9ef9363e0 100644
--- a/files/en-us/web/javascript/reference/global_objects/regexp/test/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/regexp/test/index.md
@@ -67,8 +67,8 @@ The following example logs a message which depends on the success of the test:
 
 ```js
 function testInput(re, str) {
-  const midstring = re.test(str) ? "contains" : "does not contain";
-  console.log(`${str} ${midstring} ${re.source}`);
+  const midString = re.test(str) ? "contains" : "does not contain";
+  console.log(`${str} ${midString} ${re.source}`);
 }
 ```
 
diff --git a/files/en-us/web/javascript/reference/global_objects/string/at/index.md b/files/en-us/web/javascript/reference/global_objects/string/at/index.md
index fa707af452698cf..cbe29814c788535 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/at/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/at/index.md
@@ -38,11 +38,11 @@ function returnLast(str) {
   return str.at(-1);
 }
 
-let invoiceRef = "myinvoice01";
+let invoiceRef = "my-invoice01";
 
 console.log(returnLast(invoiceRef)); // '1'
 
-invoiceRef = "myinvoice02";
+invoiceRef = "my-invoice02";
 
 console.log(returnLast(invoiceRef)); // '2'
 ```
diff --git a/files/en-us/web/javascript/reference/global_objects/string/indexof/index.md b/files/en-us/web/javascript/reference/global_objects/string/indexof/index.md
index a16076f3b9e361d..84213db55760b18 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/indexof/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/indexof/index.md
@@ -65,7 +65,7 @@ Strings are zero-indexed: The index of a string's first character is `0`, and th
 
 ```js
 "Blue Whale".indexOf("Blue"); // returns  0
-"Blue Whale".indexOf("Blute"); // returns -1
+"Blue Whale".indexOf("Wale"); // returns -1
 "Blue Whale".indexOf("Whale", 0); // returns  5
 "Blue Whale".indexOf("Whale", 5); // returns  5
 "Blue Whale".indexOf("Whale", 7); // returns -1
@@ -88,7 +88,7 @@ When checking if a specific substring occurs within a string, the correct way to
 
 ```js
 "Blue Whale".indexOf("Blue") !== -1; // true; found 'Blue' in 'Blue Whale'
-"Blue Whale".indexOf("Bloe") !== -1; // false; no 'Bloe' in 'Blue Whale'
+"Blue Whale".indexOf("Wale") !== -1; // false; no 'Wale' in 'Blue Whale'
 ```
 
 ## Examples
diff --git a/files/en-us/web/javascript/reference/global_objects/string/substr/index.md b/files/en-us/web/javascript/reference/global_objects/string/substr/index.md
index e39fc83e0ea7402..3f11a9a5fceca86 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/substr/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/substr/index.md
@@ -50,6 +50,8 @@ Although you are encouraged to avoid using `substr()`, there is no trivial way t
 
 ### Using substr()
 
+
+
 ```js
 const aString = "Mozilla";
 
diff --git a/files/en-us/web/javascript/reference/global_objects/string/substring/index.md b/files/en-us/web/javascript/reference/global_objects/string/substring/index.md
index 40af957c1a4f9d0..bdaa9e8e7ce10e5 100644
--- a/files/en-us/web/javascript/reference/global_objects/string/substring/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/string/substring/index.md
@@ -48,6 +48,8 @@ Any argument value that is {{jsxref("NaN")}} is treated as if it were `0`.
 The following example uses `substring()` to display characters from the
 string `"Mozilla"`:
 
+
+
 ```js
 const anyString = "Mozilla";
 
@@ -71,6 +73,8 @@ The following example uses the `substring()` method and
 particular string. This method may be easier to remember, given that you don't need to
 know the starting and ending indices as you would in the above examples.
 
+
+
 ```js
 const text = "Mozilla";
 
diff --git a/files/en-us/web/javascript/reference/global_objects/symbol/replace/index.md b/files/en-us/web/javascript/reference/global_objects/symbol/replace/index.md
index 141ccd0cbda6688..9193d6e39426aac 100644
--- a/files/en-us/web/javascript/reference/global_objects/symbol/replace/index.md
+++ b/files/en-us/web/javascript/reference/global_objects/symbol/replace/index.md
@@ -23,6 +23,8 @@ The well-known symbol `Symbol.replace`.
 
 ### Using Symbol.replace
 
+
+
 ```js
 class CustomReplacer {
   constructor(value) {
diff --git a/files/en-us/web/javascript/reference/operators/destructuring_assignment/index.md b/files/en-us/web/javascript/reference/operators/destructuring_assignment/index.md
index a12d4958a5494b2..8d7118aad009b3a 100644
--- a/files/en-us/web/javascript/reference/operators/destructuring_assignment/index.md
+++ b/files/en-us/web/javascript/reference/operators/destructuring_assignment/index.md
@@ -310,7 +310,7 @@ function parseProtocol(url) {
   // ["https://developer.mozilla.org/en-US/docs/Web/JavaScript",
   // "https", "developer.mozilla.org", "en-US/docs/Web/JavaScript"]
 
-  const [, protocol, fullhost, fullpath] = parsedURL;
+  const [, protocol, fullHost, fullPath] = parsedURL;
   return protocol;
 }
 
diff --git a/files/en-us/web/javascript/reference/operators/function/index.md b/files/en-us/web/javascript/reference/operators/function/index.md
index 017b63bdfb403d7..6028561416b771e 100644
--- a/files/en-us/web/javascript/reference/operators/function/index.md
+++ b/files/en-us/web/javascript/reference/operators/function/index.md
@@ -74,7 +74,7 @@ If you want to refer to the current function inside the function body, you need
 
 ```js
 const math = {
-  factit: function factorial(n) {
+  factorial: function factorial(n) {
     console.log(n);
     if (n <= 1) {
       return 1;
@@ -83,7 +83,7 @@ const math = {
   },
 };
 
-math.factit(3); //3;2;1;
+math.factorial(3); //3;2;1;
 ```
 
 If a function expression is named, the [`name`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name) property of the function is set to that name, instead of the implicit name inferred from syntax (such as the variable the function is assigned to).
diff --git a/files/en-us/web/javascript/reference/operators/in/index.md b/files/en-us/web/javascript/reference/operators/in/index.md
index daa52846a525e35..c6c92a078d03c2f 100644
--- a/files/en-us/web/javascript/reference/operators/in/index.md
+++ b/files/en-us/web/javascript/reference/operators/in/index.md
@@ -103,9 +103,9 @@ Symbol.iterator in trees; // returns true
 "PI" in Math; // returns true
 
 // Custom objects
-const mycar = { make: "Honda", model: "Accord", year: 1998 };
-"make" in mycar; // returns true
-"model" in mycar; // returns true
+const myCar = { make: "Honda", model: "Accord", year: 1998 };
+"make" in myCar; // returns true
+"model" in myCar; // returns true
 ```
 
 You must specify an object on the right side of the `in` operator. For example, you can specify a string created with the `String` constructor, but you cannot specify a string literal.
@@ -124,9 +124,9 @@ const color2 = "coral";
 If you delete a property with the [`delete`](/en-US/docs/Web/JavaScript/Reference/Operators/delete) operator, the `in` operator returns `false` for that property.
 
 ```js
-const mycar = { make: "Honda", model: "Accord", year: 1998 };
-delete mycar.make;
-"make" in mycar; // returns false
+const myCar = { make: "Honda", model: "Accord", year: 1998 };
+delete myCar.make;
+"make" in myCar; // returns false
 
 const trees = ["redwood", "bay", "cedar", "oak", "maple"];
 delete trees[3];
@@ -136,9 +136,9 @@ delete trees[3];
 If you set a property to {{jsxref("undefined")}} but do not delete it, the `in` operator returns true for that property.
 
 ```js
-const mycar = { make: "Honda", model: "Accord", year: 1998 };
-mycar.make = undefined;
-"make" in mycar; // returns true
+const myCar = { make: "Honda", model: "Accord", year: 1998 };
+myCar.make = undefined;
+"make" in myCar; // returns true
 ```
 
 ```js
diff --git a/files/en-us/web/javascript/reference/operators/instanceof/index.md b/files/en-us/web/javascript/reference/operators/instanceof/index.md
index 625f41c6ee3dbde..90c9a4a6cb7222b 100644
--- a/files/en-us/web/javascript/reference/operators/instanceof/index.md
+++ b/files/en-us/web/javascript/reference/operators/instanceof/index.md
@@ -186,9 +186,9 @@ literalObject instanceof Object; // true, every object literal has Object.protot
 nullObject instanceof Object; // false, prototype is end of prototype chain (null)
 ```
 
-### Demonstrating that mycar is of type Car and type Object
+### Demonstrating that myCar is of type Car and type Object
 
-The following code creates an object type `Car` and an instance of that object type, `mycar`. The `instanceof` operator demonstrates that the `mycar` object is of type `Car` and of type `Object`.
+The following code creates an object type `Car` and an instance of that object type, `myCar`. The `instanceof` operator demonstrates that the `myCar` object is of type `Car` and of type `Object`.
 
 ```js
 function Car(make, model, year) {
@@ -196,9 +196,9 @@ function Car(make, model, year) {
   this.model = model;
   this.year = year;
 }
-const mycar = new Car("Honda", "Accord", 1998);
-const a = mycar instanceof Car; // returns true
-const b = mycar instanceof Object; // returns true
+const myCar = new Car("Honda", "Accord", 1998);
+const a = myCar instanceof Car; // returns true
+const b = myCar instanceof Object; // returns true
 ```
 
 ### Not an instanceof
@@ -206,21 +206,21 @@ const b = mycar instanceof Object; // returns true
 To test if an object is not an `instanceof` a specific constructor, you can do:
 
 ```js
-if (!(mycar instanceof Car)) {
+if (!(myCar instanceof Car)) {
   // Do something, like:
-  // mycar = new Car(mycar)
+  // myCar = new Car(myCar)
 }
 ```
 
 This is really different from:
 
 ```js-nolint example-bad
-if (!mycar instanceof Car) {
+if (!myCar instanceof Car) {
   // unreachable code
 }
 ```
 
-This will always be `false`. (`!mycar` will be evaluated before `instanceof`, so you always try to know if a boolean is an instance of `Car`).
+This will always be `false`. (`!myCar` will be evaluated before `instanceof`, so you always try to know if a boolean is an instance of `Car`).
 
 ### Overriding the behavior of instanceof
 
diff --git a/files/en-us/web/javascript/reference/operators/logical_not/index.md b/files/en-us/web/javascript/reference/operators/logical_not/index.md
index 17310e93b972427..06ea224928aa4c0 100644
--- a/files/en-us/web/javascript/reference/operators/logical_not/index.md
+++ b/files/en-us/web/javascript/reference/operators/logical_not/index.md
@@ -56,7 +56,7 @@ The following code shows examples of the `!` (logical NOT) operator.
 
 It is possible to use a couple of NOT operators in series to explicitly force the
 conversion of any value to the corresponding [boolean primitive](/en-US/docs/Web/JavaScript/Data_structures#boolean_type).
-The conversion is based on the "truthyness" or "falsyness" of the value (see
+The conversion is based on the "truthiness" or "falsiness" of the value (see
 {{Glossary("truthy")}} and {{Glossary("falsy")}}).
 
 The same conversion can be done through the {{jsxref("Boolean/Boolean", "Boolean()")}} function.
diff --git a/files/en-us/web/javascript/reference/operators/optional_chaining/index.md b/files/en-us/web/javascript/reference/operators/optional_chaining/index.md
index 3923d7e03f9c07f..b8442fc1afdde6e 100644
--- a/files/en-us/web/javascript/reference/operators/optional_chaining/index.md
+++ b/files/en-us/web/javascript/reference/operators/optional_chaining/index.md
@@ -192,14 +192,14 @@ Except the `temp` variable isn't created.
 ### Basic example
 
 This example looks for the value of the `name` property for the member
-`bar` in a map when there is no such member. The result is therefore
+`CSS` in a map when there is no such member. The result is therefore
 `undefined`.
 
 ```js
 const myMap = new Map();
-myMap.set("foo", { name: "baz", desc: "inga" });
+myMap.set("JS", { name: "Josh", desc: "I maintain things" });
 
-const nameBar = myMap.get("bar")?.name;
+const nameBar = myMap.get("CSS")?.name;
 ```
 
 ### Dealing with optional callbacks or event handlers
diff --git a/files/en-us/web/javascript/reference/statements/continue/index.md b/files/en-us/web/javascript/reference/statements/continue/index.md
index dfb856fb0f6384a..68d2936a6199d85 100644
--- a/files/en-us/web/javascript/reference/statements/continue/index.md
+++ b/files/en-us/web/javascript/reference/statements/continue/index.md
@@ -85,14 +85,14 @@ Output:
 ```plain
 i: 0
 
-// start checkj
+// start checkJ
 j: 8
 7 is odd.
 j: 7
 j: 6
 5 is odd.
 j: 5
-// end checkj
+// end checkJ
 
 i = 1
 j = 4
diff --git a/files/en-us/web/javascript/reference/statements/try...catch/index.md b/files/en-us/web/javascript/reference/statements/try...catch/index.md
index 7b96153eba13a4b..8177b9de493f019 100644
--- a/files/en-us/web/javascript/reference/statements/try...catch/index.md
+++ b/files/en-us/web/javascript/reference/statements/try...catch/index.md
@@ -168,7 +168,7 @@ You can create "Conditional `catch` blocks" by combining `try...catch` blocks wi
 
 ```js
 try {
-  myroutine(); // may throw three types of exceptions
+  myRoutine(); // may throw three types of exceptions
 } catch (e) {
   if (e instanceof TypeError) {
     // statements to handle TypeError exceptions
diff --git a/files/en-us/web/javascript/reference/strict_mode/index.md b/files/en-us/web/javascript/reference/strict_mode/index.md
index 839cc67e013e310..7dca7b4a634d0cb 100644
--- a/files/en-us/web/javascript/reference/strict_mode/index.md
+++ b/files/en-us/web/javascript/reference/strict_mode/index.md
@@ -110,6 +110,8 @@ Strict mode changes some previously-accepted mistakes into errors. JavaScript wa
 
 Strict mode makes it impossible to accidentally create global variables. In sloppy mode, mistyping a variable in an assignment creates a new property on the global object and continues to "work". Assignments which would accidentally create global variables throw an error in strict mode:
 
+
+
 ```js
 "use strict";
 let mistypeVariable;

From bc7090f5720e37e949d89ca950def4280bfa8518 Mon Sep 17 00:00:00 2001
From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com>
Date: Tue, 29 Oct 2024 01:40:16 +0100
Subject: [PATCH 08/49] fix: auto-cleanup by bot (#36549)

---
 files/en-us/web/api/gpudevice/createtexture/index.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/files/en-us/web/api/gpudevice/createtexture/index.md b/files/en-us/web/api/gpudevice/createtexture/index.md
index b6e812d4f91849b..99594c26658ba2f 100644
--- a/files/en-us/web/api/gpudevice/createtexture/index.md
+++ b/files/en-us/web/api/gpudevice/createtexture/index.md
@@ -84,8 +84,8 @@ createTexture(descriptor)
 
         > [!NOTE]
         >
-        > - The `bgra8unorm-storage` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to specify `STORAGE_BINDING` usage for a `bgra8unorm`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}.
-        > - The `rg11b10ufloat-renderable` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to specify `RENDER_ATTACHMENT` usage for a `rg11b10ufloat`-[`format`](/en-US/docs/Web/API/GPUDevice/createTexture#format) {{domxref("GPUTexture")}}, as well as its blending and multisampling.
+        > - The `bgra8unorm-storage` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to specify `STORAGE_BINDING` usage for a `bgra8unorm`-[`format`](#format) {{domxref("GPUTexture")}}.
+        > - The `rg11b10ufloat-renderable` [feature](/en-US/docs/Web/API/GPUSupportedFeatures) needs to be enabled to specify `RENDER_ATTACHMENT` usage for a `rg11b10ufloat`-[`format`](#format) {{domxref("GPUTexture")}}, as well as its blending and multisampling.
 
     - `viewFormats` {{optional_inline}}
       - : An array of enumerated values specifying other [texture formats](https://gpuweb.github.io/gpuweb/#enumdef-gputextureformat) permitted when calling {{domxref("GPUTexture.createView()")}} on this texture, in addition to the texture format specified in its `format` value.

From 58ffb2cb2a05105f1a5eaa5c659782a85f7a4606 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Tue, 29 Oct 2024 02:33:45 +0100
Subject: [PATCH 09/49] docs: updated links (#36319)

* docs: updated links

according to the resulting page the linked version of the page includes outdated content. That for the URL needed to get updated to the new pages URL.

* Update index.md

* Update index.md

* Update index.md

* Update index.md

* Update index.md

* Update index.md

* Update index.md

* Update index.md

* Update index.md

---------

Co-authored-by: Joshua Chen 
---
 .../aria/attributes/aria-setsize/index.md              |  6 ++++--
 .../web/accessibility/aria/roles/menubar_role/index.md |  4 ++--
 .../web/accessibility/aria/roles/slider_role/index.md  | 10 ++++++----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/files/en-us/web/accessibility/aria/attributes/aria-setsize/index.md b/files/en-us/web/accessibility/aria/attributes/aria-setsize/index.md
index d4228a5c25e31e5..eb9e9cb596f4008 100644
--- a/files/en-us/web/accessibility/aria/attributes/aria-setsize/index.md
+++ b/files/en-us/web/accessibility/aria/attributes/aria-setsize/index.md
@@ -86,5 +86,7 @@ Inherits into roles:
 ## See also
 
 - [`aria-posinset`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-posinset)
-- [Treegrid Email Inbox](https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/treegrid/treegrid-1.html) example
-- [Navigation Treeview Using Declared Properties](https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/treeview/treeview-2/treeview-2b.html) example
+- W3C WAI-ARIA practices:
+  - [Treegrid Email Inbox example](https://www.w3.org/WAI/ARIA/apg/patterns/treegrid/examples/treegrid-1/)
+  - [Navigation Treeview example](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)
+  - [File Directory Treeview Example Using Declared Properties](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-1b/)
diff --git a/files/en-us/web/accessibility/aria/roles/menubar_role/index.md b/files/en-us/web/accessibility/aria/roles/menubar_role/index.md
index 539f46ae9fd54ba..fbb054dad797c01 100644
--- a/files/en-us/web/accessibility/aria/roles/menubar_role/index.md
+++ b/files/en-us/web/accessibility/aria/roles/menubar_role/index.md
@@ -82,8 +82,8 @@ Note: The above interactions assumed the `menubar` is horizontal. If the `menuba
 
 ## Examples
 
-- [W3C WAI-ARIA practices: navigation `menubar` example](https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/menubar/menubar-1/menubar-1.html)
-- [W3C WAI-ARIA practices: editor `menubar` example](https://www.w3.org/TR/2019/WD-wai-aria-practices-1.2-20191218/examples/menubar/menubar-2/menubar-2.html)
+- [W3C WAI-ARIA practices: navigation `menubar` example](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/)
+- [W3C WAI-ARIA practices: editor `menubar` example](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/)
 
 ## Specifications
 
diff --git a/files/en-us/web/accessibility/aria/roles/slider_role/index.md b/files/en-us/web/accessibility/aria/roles/slider_role/index.md
index 5c7ba18b97c77c6..091b00a2acd3891 100644
--- a/files/en-us/web/accessibility/aria/roles/slider_role/index.md
+++ b/files/en-us/web/accessibility/aria/roles/slider_role/index.md
@@ -209,7 +209,9 @@ It is recommended to use a native {{HTMLElement("input")}} of type `range`, [`
Date: Tue, 29 Oct 2024 08:52:17 +0000
Subject: [PATCH 10/49] Fix description of MessageEvent.ports (#36552)

---
 files/en-us/web/api/messageevent/index.md                   | 2 +-
 files/en-us/web/api/messageevent/messageevent/index.md      | 4 +---
 files/en-us/web/api/messageevent/ports/index.md             | 4 +---
 files/en-us/web/api/messageport/message_event/index.md      | 2 +-
 files/en-us/web/api/messageport/messageerror_event/index.md | 2 +-
 5 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/files/en-us/web/api/messageevent/index.md b/files/en-us/web/api/messageevent/index.md
index 31411bfe903246e..531742c2d25109a 100644
--- a/files/en-us/web/api/messageevent/index.md
+++ b/files/en-us/web/api/messageevent/index.md
@@ -41,7 +41,7 @@ _This interface also inherits properties from its parent, {{domxref("Event")}}._
 - {{domxref("MessageEvent.source")}} {{ReadOnlyInline}}
   - : A `MessageEventSource` (which can be a {{glossary("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) representing the message emitter.
 - {{domxref("MessageEvent.ports")}} {{ReadOnlyInline}}
-  - : An array of {{domxref("MessagePort")}} objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
+  - : An array of {{domxref("MessagePort")}} objects containing all {{domxref("MessagePort")}} objects sent with the message, in order.
 
 ## Instance methods
 
diff --git a/files/en-us/web/api/messageevent/messageevent/index.md b/files/en-us/web/api/messageevent/messageevent/index.md
index f3aa325833f3342..37922f6749fcd7e 100644
--- a/files/en-us/web/api/messageevent/messageevent/index.md
+++ b/files/en-us/web/api/messageevent/messageevent/index.md
@@ -38,9 +38,7 @@ new MessageEvent(type, options)
         or a {{domxref("ServiceWorker")}} object) representing the message emitter.
         This defaults to `null` if not set.
     - `ports` {{optional_inline}}
-      - : An array of {{domxref("MessagePort")}} objects representing
-        the ports associated with the channel the message is being sent through where appropriate
-        (E.g. in channel messaging or when sending a message to a shared worker).
+      - : An array of {{domxref("MessagePort")}} objects containing all {{domxref("MessagePort")}} objects sent with the message, in order.
         This defaults to an empty array (`[]`) if not specified.
 
 ### Return value
diff --git a/files/en-us/web/api/messageevent/ports/index.md b/files/en-us/web/api/messageevent/ports/index.md
index aa35b1cc0980da4..3fd5938cc381310 100644
--- a/files/en-us/web/api/messageevent/ports/index.md
+++ b/files/en-us/web/api/messageevent/ports/index.md
@@ -10,9 +10,7 @@ browser-compat: api.MessageEvent.ports
 
 The **`ports`** read-only property of the
 {{domxref("MessageEvent")}} interface is an array of {{domxref("MessagePort")}} objects
-representing the ports associated with the channel the message is being sent through
-(where appropriate, e.g. in channel messaging or when sending a message to a shared
-worker).
+containing all {{domxref("MessagePort")}} objects sent with the message, in order.
 
 ## Value
 
diff --git a/files/en-us/web/api/messageport/message_event/index.md b/files/en-us/web/api/messageport/message_event/index.md
index d966f764171fcf9..3d4e2e262c00359 100644
--- a/files/en-us/web/api/messageport/message_event/index.md
+++ b/files/en-us/web/api/messageport/message_event/index.md
@@ -41,7 +41,7 @@ _This interface also inherits properties from its parent, {{domxref("Event")}}._
 - {{domxref("MessageEvent.source")}} {{ReadOnlyInline}}
   - : A `MessageEventSource` (which can be a {{glossary("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) representing the message emitter.
 - {{domxref("MessageEvent.ports")}} {{ReadOnlyInline}}
-  - : An array of {{domxref("MessagePort")}} objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
+  - : An array containing all {{domxref("MessagePort")}} objects sent with the message, in order.
 
 ## Examples
 
diff --git a/files/en-us/web/api/messageport/messageerror_event/index.md b/files/en-us/web/api/messageport/messageerror_event/index.md
index 3af3e7631516367..176312354c261c4 100644
--- a/files/en-us/web/api/messageport/messageerror_event/index.md
+++ b/files/en-us/web/api/messageport/messageerror_event/index.md
@@ -41,7 +41,7 @@ _This interface also inherits properties from its parent, {{domxref("Event")}}._
 - {{domxref("MessageEvent.source")}} {{ReadOnlyInline}}
   - : A `MessageEventSource` (which can be a {{glossary("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} object) representing the message emitter.
 - {{domxref("MessageEvent.ports")}} {{ReadOnlyInline}}
-  - : An array of {{domxref("MessagePort")}} objects representing the ports associated with the channel the message is being sent through (where appropriate, e.g. in channel messaging or when sending a message to a shared worker).
+  - : An array containing all {{domxref("MessagePort")}} objects sent with the message, in order.
 
 ## Examples
 

From 205bad36fe1d193dcc0aa4972055d48b0b319328 Mon Sep 17 00:00:00 2001
From: MiB-1 <133959537+MiB-1@users.noreply.github.com>
Date: Tue, 29 Oct 2024 14:43:10 +0530
Subject: [PATCH 11/49] chore(api): Update web component example to use event
 listener (#36540)

* Update content according to the example

Updating the content according to the example
https://github.com/mdn/web-components-examples/pull/80

* fix lint

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

---------

Co-authored-by: Joshua Chen 
---
 files/en-us/web/api/element/attachshadow/index.md | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/files/en-us/web/api/element/attachshadow/index.md b/files/en-us/web/api/element/attachshadow/index.md
index 52d04466007646d..57053f04c9def39 100644
--- a/files/en-us/web/api/element/attachshadow/index.md
+++ b/files/en-us/web/api/element/attachshadow/index.md
@@ -160,10 +160,9 @@ class WordCount extends HTMLParagraphElement {
     shadow.appendChild(text);
 
     // Update count when element content changes
-    setInterval(() => {
-      const count = `Words: ${countWords(wcParent)}`;
-      text.textContent = count;
-    }, 200);
+    this.parentNode.addEventListener("input", () => {
+      text.textContent = `Words: ${countWords(wcParent)}`;
+    });
   }
 }
 

From 9a9907307112d53135fbf3863a316c8e7b8c1b55 Mon Sep 17 00:00:00 2001
From: Estelle Weyl 
Date: Tue, 29 Oct 2024 03:10:10 -0700
Subject: [PATCH 12/49] CSS module: css text (#36470)

* CSS module: css text

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

Co-authored-by: Brian Thomas Smith 

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

Co-authored-by: Brian Thomas Smith 

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

---------

Co-authored-by: Brian Thomas Smith 
---
 files/en-us/web/css/css_text/index.md | 50 ++++++++++++++++++++++++---
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/files/en-us/web/css/css_text/index.md b/files/en-us/web/css/css_text/index.md
index d8113de6cb7b123..f716d116897eccb 100644
--- a/files/en-us/web/css/css_text/index.md
+++ b/files/en-us/web/css/css_text/index.md
@@ -3,7 +3,6 @@ title: CSS text
 slug: Web/CSS/CSS_text
 page-type: css-module
 spec-urls:
-  - https://drafts.csswg.org/css-logical/
   - https://drafts.csswg.org/css-text/
   - https://drafts.csswg.org/css-text-4/
 ---
@@ -17,25 +16,68 @@ The **CSS text** module defines how to perform text manipulation, like line brea
 ### Properties
 
 - {{cssxref("hanging-punctuation")}}
+- {{cssxref("hyphenate-character")}}
 - {{cssxref("hyphenate-limit-chars")}}
 - {{cssxref("hyphens")}}
 - {{cssxref("letter-spacing")}}
 - {{cssxref("line-break")}}
-- {{cssxref("overflow-wrap")}}
+- {{cssxref("overflow-wrap")}} (and the `word-wrap` alias)
 - {{cssxref("tab-size")}}
 - {{cssxref("text-align")}}
 - {{cssxref("text-align-last")}}
 - {{cssxref("text-indent")}}
 - {{cssxref("text-justify")}}
-- {{cssxref("text-size-adjust")}}
-- {{cssxref("text-spacing-trim")}}
+- {{cssxref("text-spacing-trim")}} {{Experimental_Inline}}
 - {{cssxref("text-transform")}}
 - {{cssxref("text-wrap")}}
+- {{cssxref("text-wrap-mode")}}
+- {{cssxref("text-wrap-style")}}
 - {{cssxref("white-space")}}
 - {{cssxref("white-space-collapse")}}
 - {{cssxref("word-break")}}
 - {{cssxref("word-spacing")}}
 
+The specification also defines the `hyphenate-limit-last`, `hyphenate-limit-lines`, `hyphenate-limit-zone`, `line-padding`, `text-align-all`, `text-autospace`, `text-group-align`, `text-spacing`, `white-space-trim`, `word-space-transform`, `wrap-after`, `wrap-before`, and `wrap-inside` properties, which are not yet supported by any browser.
+
+### Guides
+
+- [Wrapping and breaking text](/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text)
+
+  - : A guide to the various ways in which overflowing text can be managed in CSS.
+
+## Related concepts
+
+### Properties
+
+- {{cssxref("direction")}}
+- {{cssxref("font-feature-settings")}}
+- {{cssxref("initial-letter")}}
+- {{cssxref("orphans")}}
+- {{cssxref("text-combine-upright")}}
+- {{cssxref("text-orientation")}}
+- {{cssxref("text-overflow")}}
+- {{cssxref("text-size-adjust")}} {{Experimental_Inline}}
+- {{cssxref("unicode-bidi")}}
+- {{cssxref("widows")}}
+- {{cssxref("writing-mode")}}
+
+### Values
+
+- {{cssxref("min-content")}}
+- {{cssxref("max-content")}}
+
+### HTML
+
+- {{htmlelement("pre")}}
+- {{htmlelement("wbr")}}
+
 ## Specifications
 
 {{Specifications}}
+
+## See also
+
+- [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes) module
+- [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module
+- [CSS fonts](/en-US/docs/Web/CSS/CSS_fonts) module
+- [CSS ruby layout](/en-US/docs/Web/CSS/CSS_ruby_layout) module

From 45a41d6ef1458466632bfb8649048340e195fe2f Mon Sep 17 00:00:00 2001
From: Estelle Weyl 
Date: Tue, 29 Oct 2024 03:11:44 -0700
Subject: [PATCH 13/49] Update Learn form validation (#36481)

* Learn form validation

* Apply suggestions from code review

Co-authored-by: Brian Thomas Smith 

---------

Co-authored-by: Brian Thomas Smith 
---
 .../learn/forms/form_validation/index.md      | 186 +++++++-----------
 1 file changed, 73 insertions(+), 113 deletions(-)

diff --git a/files/en-us/learn/forms/form_validation/index.md b/files/en-us/learn/forms/form_validation/index.md
index 8fcc4762571654c..268f9732612e8a1 100644
--- a/files/en-us/learn/forms/form_validation/index.md
+++ b/files/en-us/learn/forms/form_validation/index.md
@@ -6,8 +6,8 @@ page-type: learn-module-chapter
 
 {{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
 
-Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format.
-This is called **client-side form validation**, and helps ensure data submitted matches the requirements set forth in the various form controls.
+It is important to ensure all required form controls are filled out, in the correct format, before submitting user entered form data to the server. This **client-side form validation** helps ensure data entered matches the requirements set forth in the various form controls.
+
 This article leads you through basic concepts and examples of client-side form validation.
 
 
@@ -34,8 +34,10 @@ This article leads you through basic concepts and examples of client-side form v
 Client-side validation is an initial check and an important feature of good user experience; by catching invalid data on the client-side, the user can fix it straight away.
 If it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data.
 
-However, client-side validation _should not be considered_ an exhaustive security measure! Your apps should always perform security checks on any form-submitted data on the _server-side_ **as well** as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server.
-Read [Website security](/en-US/docs/Learn/Server-side/First_steps/Website_security) for an idea of what _could_ happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.
+However, client-side validation _should not be considered_ an exhaustive security measure! Your apps should always perform validation, including security checks, on any form-submitted data on the _server-side_ **as well** as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server.
+
+> [!NOTE]
+> Read [Website security](/en-US/docs/Learn/Server-side/First_steps/Website_security) for an idea of what _could_ happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.
 
 ## What is form validation?
 
@@ -48,7 +50,7 @@ You'll get messages such as:
 - "Your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number." (A very specific data format is required for your data).
 
 This is called **form validation**.
-When you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called **client-side** validation, while validation done on the server is called **server-side** validation.
+When you enter data, the browser (and the web server) will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called **client-side** validation, while validation done on the server is called **server-side** validation.
 In this chapter we are focusing on client-side validation.
 
 If the information is correctly formatted, the application allows the data to be submitted to the server and (usually) saved in a database; if the information isn't correctly formatted, it gives the user an error message explaining what needs to be corrected, and lets them try again.
@@ -67,38 +69,36 @@ There are three main reasons:
 
 There are two different types of client-side validation that you'll encounter on the web:
 
-- **Built-in form validation** uses HTML form validation features, which we've discussed in many places throughout this module.
-  This validation generally doesn't require much JavaScript. Built-in form validation has better performance than JavaScript, but it is not as customizable as JavaScript validation.
-- **JavaScript** validation is coded using JavaScript.
-  This validation is completely customizable, but you need to create it all (or use a library).
+- **HTML form validation**
+  HTML form attributes can define which form controls are required and which format the user-entered data must be in to be valid.
+- **JavaScript form validation**
+  JavaScript is generally included to enhance or customize HTML form validation.
+
+Client side validation can be accomplished with little to no JavaScript. HTML validation is faster than JavaScript, but is less customizable than JavaScript validation. It is generally recommended to begin your forms using robust HTML features, then enhance the user experience with JavaScript as needed.
 
 ## Using built-in form validation
 
-One of the most significant features of [modern form controls](/en-US/docs/Learn/Forms/HTML5_input_types) is the ability to validate most user data without relying on JavaScript.
+One of the most significant features of [form controls](/en-US/docs/Learn/Forms/HTML5_input_types) is the ability to validate most user data without relying on JavaScript.
 This is done by using validation attributes on form elements.
 We've seen many of these earlier in the course, but to recap:
 
 - [`required`](/en-US/docs/Web/HTML/Attributes/required): Specifies whether a form field needs to be filled in before the form can be submitted.
 - [`minlength`](/en-US/docs/Web/HTML/Attributes/minlength) and [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength): Specifies the minimum and maximum length of textual data (strings).
-- [`min`](/en-US/docs/Web/HTML/Attributes/min) and [`max`](/en-US/docs/Web/HTML/Attributes/max): Specifies the minimum and maximum values of numerical input types.
+- [`min`](/en-US/docs/Web/HTML/Attributes/min), [`max`](/en-US/docs/Web/HTML/Attributes/max), and [`step`](/en-US/docs/Web/HTML/Attributes/step): Specifies the minimum and maximum values of numerical input types, and the increment, or step, for values, starting from the minimum.
 - [`type`](/en-US/docs/Web/HTML/Element/input#input_types): Specifies whether the data needs to be a number, an email address, or some other specific preset type.
 - [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern): Specifies a [regular expression](/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that defines a pattern the entered data needs to follow.
 
-If the data entered in a form field follows all of the rules specified by the above attributes, it is considered valid.
-If not, it is considered invalid.
+If the data entered in a form field follows all of the rules specified by the attributes applied to the field, it is considered valid. If not, it is considered invalid.
 
 When an element is valid, the following things are true:
 
-- The element matches the {{cssxref(":valid")}} CSS pseudo-class, which lets you apply a specific style to valid elements.
+- The element matches the {{cssxref(":valid")}} CSS pseudo-class, which lets you apply a specific style to valid elements. The control will also match {{cssxref(":user-invalid")}} if the user has interacted with the control, and may match other UI pseudo-classes, such as {{cssxref(":in-range")}}, depending on the input type and attributes.
 - If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).
 
 When an element is invalid, the following things are true:
 
-- The element matches the {{cssxref(":invalid")}} CSS pseudo-class, and sometimes other UI pseudo-classes (e.g., {{cssxref(":out-of-range")}}) depending on the error, which lets you apply a specific style to invalid elements.
-- If the user tries to send the data, the browser will block the form and display an error message.
-
-> [!NOTE]
-> There are several errors that will prevent the form from being submitted, including a {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} or {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} or {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, or a {{domxref('validityState.customError','customError')}}.
+- The element matches the {{cssxref(":invalid")}} CSS pseudo-class. If the user has interacted with the control, it also matches the {{cssxref(":user-invalid")}} CSS pseudo-class. Other UI pseudo-classes may also match, such as {{cssxref(":out-of-range")}}, depending on the error. These let you apply a specific style to invalid elements.
+- If the user tries to send the data, the browser will block the form submission and display an error message. The error message will differ depending on the type of error. The [Constraint Validation API](#the_constraint_validation_api) is described below.
 
 ## Built-in form validation examples
 
@@ -107,8 +107,7 @@ In this section, we'll test out some of the attributes that we discussed above.
 ### Simple start file
 
 Let's start with a simple example: an input that allows you to choose whether you prefer a banana or a cherry.
-This example involves a simple text {{HTMLElement("input")}} with an associated {{htmlelement("label")}} and a submit {{htmlelement("button")}}.
-Find the source code on GitHub at [fruit-start.html](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html) and a live example below.
+This example involves a basic text {{HTMLElement("input")}} with an associated {{htmlelement("label")}} and a submit {{htmlelement("button")}}.
 
 ```html
 
@@ -130,15 +129,20 @@ input:valid {
 
 {{EmbedLiveSample("Simple_start_file", "100%", 80)}}
 
-To begin, make a copy of `fruit-start.html` in a new directory on your hard drive.
+To begin, make a copy of the [`fruit-start.html` file found on Github](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-start.html) in a new directory on your hard drive.
 
 ### The required attribute
 
-The simplest HTML validation feature is the [`required`](/en-US/docs/Web/HTML/Attributes/required) attribute.
-To make an input mandatory, add this attribute to the element.
-When this attribute is set, the element matches the {{cssxref(':required')}} UI pseudo-class and the form won't submit, displaying an error message on submission when the input is empty.
+A common HTML validation feature is the [`required`](/en-US/docs/Web/HTML/Attributes/required) attribute.
+Add this attribute to an input to make an element mandatory.
+When this attribute is set, the element matches the {{cssxref(':required')}} UI pseudo-class and the form won't submit, displaying an error message on submission, if the input is empty.
 While empty, the input will also be considered invalid, matching the {{cssxref(':invalid')}} UI pseudo-class.
 
+If any radio button in a same-named group has the `required` attribute, one of the radio buttons in that group must be checked for the group to be valid; the checked radio doesn't have to be the one with the attribute set.
+
+> [!NOTE]
+> Only require users to input data you need: For example, is it really necessary to know someone's gender or title?
+
 Add a `required` attribute to your input, as shown below.
 
 ```html
@@ -149,7 +153,9 @@ Add a `required` attribute to your input, as shown below.
 
 ```
 
-Note the CSS that is included in the example file:
+We added "(required)" to the {{htmlelement("label")}} to inform the user that the {{htmlelement("input")}} is required. Indicating to the user when form fields are required is not only good user experience, it is required by WCAG [accessibility](/en-US/docs/Learn/Accessibility) guidelines.
+
+We include CSS styles that are applied based on whether the element is required, valid, and invalid:
 
 ```css
 input:invalid {
@@ -170,18 +176,7 @@ We also added a background gradient when the input is required _and_ invalid. Tr
 
 {{EmbedLiveSample("The_required_attribute", "100%", 80)}}
 
-> [!NOTE]
-> You can find this example live on GitHub as [fruit-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html). See also the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-required.html).
-
-Try submitting the form without a value.
-Note how the invalid input gets focus, a default error message ("Please fill out this field") appears, and the form is prevented from being sent.
-
-The presence of the `required` attribute on any element that supports this attribute means the element matches the {{cssxref(':required')}} pseudo-class whether it has a value or not. If the {{HTMLElement("input")}} has no value, the `input` will match the {{cssxref(':invalid')}} pseudo-class.
-
-> [!NOTE]
-> For good user experience, indicate to the user when form fields are required.
-> It isn't only good user experience, it is required by WCAG [accessibility](/en-US/docs/Learn/Accessibility) guidelines.
-> Also, only require users to input data you actually need: For example, why do you really need to know someone's gender or title?
+Try submitting the form from the [live `required` example](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) without a value. Note how the invalid input gets focus, a default error message ("Please fill out this field") appears, and the form is prevented from being sent. You can also see the [source code on Github](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-required.html).
 
 ### Validating against a regular expression
 
@@ -226,8 +221,7 @@ This gives us the following update — try it out:
 
 {{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}
 
-> [!NOTE]
-> You can find this example live on GitHub as [fruit-pattern.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) (see also the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-pattern.html).)
+You can find this [example live on GitHub](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) along with the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-pattern.html).
 
 In this example, the {{HTMLElement("input")}} element accepts one of four possible values: the strings "banana", "Banana", "cherry", or "Cherry". Regular expressions are case-sensitive, but we've made it support capitalized as well as lower-case versions using an extra "Aa" pattern nested inside square brackets.
 
@@ -235,10 +229,9 @@ At this point, try changing the value inside the [`pattern`](/en-US/docs/Web/HTM
 Try writing some of your own, and see how it goes.
 Make them fruit-related where possible so that your examples make sense!
 
-If a non-empty value of the {{HTMLElement("input")}} doesn't match the regular expression's pattern, the `input` will match the {{cssxref(':invalid')}} pseudo-class.
+If a non-empty value of the {{HTMLElement("input")}} doesn't match the regular expression's pattern, the `input` will match the {{cssxref(':invalid')}} pseudo-class. If empty, and the element is not required, it is not considered invalid.
 
-> [!NOTE]
-> Some {{HTMLElement("input")}} element types don't need a [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute to be validated against a regular expression. Specifying the `email` type, for example, validates the inputs value against a well-formed email address pattern or a pattern matching a comma-separated list of email addresses if it has the [`multiple`](/en-US/docs/Web/HTML/Attributes/multiple) attribute.
+Some {{HTMLElement("input")}} element types don't need a [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute to be validated against a regular expression. For example, specifying the `email` type validates the inputs value against a well-formed email address pattern or a pattern matching a comma-separated list of email addresses if it has the [`multiple`](/en-US/docs/Web/HTML/Attributes/multiple) attribute.
 
 > [!NOTE]
 > The {{HTMLElement("textarea")}} element doesn't support the [`pattern`](/en-US/docs/Web/HTML/Attributes/pattern) attribute.
@@ -248,7 +241,7 @@ If a non-empty value of the {{HTMLElement("input")}} doesn't match the regular e
 You can constrain the character length of all text fields created by {{HTMLElement("input")}} or {{HTMLElement("textarea")}} by using the [`minlength`](/en-US/docs/Web/HTML/Attributes/minlength) and [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength) attributes.
 A field is invalid if it has a value and that value has fewer characters than the [`minlength`](/en-US/docs/Web/HTML/Attributes/minlength) value or more than the [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength) value.
 
-Browsers often don't let the user type a longer value than expected into text fields. A better user experience than just using `maxlength` is to also provide character count feedback in an accessible manner and let them edit their content down to size.
+Browsers often don't let the user type a longer value than expected into text fields. A better user experience than just using `maxlength` is to also provide character count feedback in an accessible manner and let the user edit their content down to size.
 An example of this is the character limit when posting on social media. JavaScript, including [solutions using `maxlength`](https://github.com/mimo84/bootstrap-maxlength), can be used to provide this.
 
 > [!NOTE]
@@ -256,7 +249,7 @@ An example of this is the character limit when posting on social media. JavaScri
 
 ### Constraining the values of your entries
 
-For number fields (i.e. [``](/en-US/docs/Web/HTML/Element/input/number)), the [`min`](/en-US/docs/Web/HTML/Attributes/min) and [`max`](/en-US/docs/Web/HTML/Attributes/max) attributes can be used to provide a range of valid values.
+For numeric fields, including [``](/en-US/docs/Web/HTML/Element/input/number) and the various date input types, the [`min`](/en-US/docs/Web/HTML/Attributes/min) and [`max`](/en-US/docs/Web/HTML/Attributes/max) attributes can be used to provide a range of valid values.
 If the field contains a value outside this range, it will be invalid.
 
 Let's look at another example.
@@ -290,7 +283,7 @@ Now delete the contents of the `` element, and replace it with the followi
 - We've also given the `number` field a `min` of one and a `max` of ten.
   Entered numbers outside this range will show as invalid; users won't be able to use the increment/decrement arrows to move the value outside of this range.
   If the user manually enters a number outside of this range, the data is invalid.
-  The number is not required, so removing the value will still result in a valid value.
+  The number is not required, so removing the value will result in a valid value.
 
 ```css hidden
 input:invalid {
@@ -310,11 +303,9 @@ Here is the example running live:
 
 {{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}
 
-> [!NOTE]
-> You can find this example live on GitHub as [fruit-length.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html). See also the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-length.html).
+Try this [example live on GitHub](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html) and view the [source code](https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/fruit-length.html).
 
-> **Note:** `` (and other types, such as `range` and `date`) can also take a [`step`](/en-US/docs/Web/HTML/Attributes/step) attribute, which specifies what increment the value will go up or down by when the input controls are used (such as the up and down number buttons).
-> In the above example we've not included a `step` attribute, so the value defaults to `1`. This means that floats, like 3.2, will also show as invalid.
+Numeric input types, like `number`, `range` and `date`, can also take the [`step`](/en-US/docs/Web/HTML/Attributes/step) attribute. This attribute specifies what increment the value will go up or down by when the input controls are used (such as the up and down number buttons, or sliding the ranges thumb). The `step` attribute is omitted in our example, so the value defaults to `1`. This means that floats, like 3.2, will also show as invalid.
 
 ### Full example
 
@@ -327,9 +318,6 @@ First, some HTML:
     
       Do you have a driver's license?*
     
-    

     
-    
-    
+    
   

     

     
   
   

 
+### JSON.parse with source
+
+The [`JSON.parse` source text access proposal](https://github.com/tc39/proposal-json-parse-with-source) extends [`JSON.parse`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) behavior to provide features to mitigate issues around loss of precision when converting values such as large floats and date values between JavaScript values and JSON text. ([Firefox bug 1913085](https://bugzil.la/1913085), [Firefox bug 1925334](https://bugzil.la/1925334)).
+
+
+  
+    
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+      
+    
+    
+      
+      
+    
+  
+
Release channelVersion addedEnabled by default?
Nightly132No
Developer Edition132No
Beta132No
Release132No
Preference namejavascript.options.experimental.json_parse_with_source

+
 ## APIs
 
 ### Cookie Store API
diff --git a/files/en-us/mozilla/firefox/releases/132/index.md b/files/en-us/mozilla/firefox/releases/132/index.md
index 3c70128defe2f0e..8cf012f642099e0 100644
--- a/files/en-us/mozilla/firefox/releases/132/index.md
+++ b/files/en-us/mozilla/firefox/releases/132/index.md
@@ -6,15 +6,13 @@ page-type: firefox-release-notes
 
 {{FirefoxSidebar}}
 
-This article provides information about the changes in Firefox 132 that affect developers. Firefox 132 is the current [Beta version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#beta) and ships on [October 29, 2024](https://whattrainisitnow.com/release/?version=132).
+This article provides information about the changes in Firefox 132 that affect developers. Firefox 132 was released on [October 29, 2024](https://whattrainisitnow.com/release/?version=132).
 
 ## Changes for web developers
 
-### Developer Tools
-
 ### HTML
 
-#### Removals
+No notable changes
 
 ### CSS
 
@@ -28,12 +26,6 @@ This article provides information about the changes in Firefox 132 that affect d
 
 - The [`(?ims-ims:...)`](/en-US/docs/Web/JavaScript/Reference/Regular_expressions/Modifier) regular expression modifiers allow you to make changes to only take effect in a specific part of a regex pattern. ([Firefox bug 1913752](https://bugzil.la/1913752) & [Firefox bug 1899813](https://bugzil.la/1899813)).
 
-#### Removals
-
-### SVG
-
-#### Removals
-
 ### HTTP
 
 #### Removals
@@ -41,10 +33,6 @@ This article provides information about the changes in Firefox 132 that affect d
 - HTTP/2 Server Push is deactivated by default with the preference `network.http.http2.allow-push` now set to `false`.
   This feature is no longer supported by any other major browser, and the implementation may be completely removed in a future release. ([Firefox bug 1915848](https://bugzil.la/1915848)).
 
-### Security
-
-#### Removals
-
 ### Privacy
 
 - All [third-party cookies](/en-US/docs/Web/Privacy/Third-party_cookies) are now blocked in [Strict Enhanced Tracking Protection](https://support.mozilla.org/en-US/kb/enhanced-tracking-protection-firefox-desktop#w_strict-enhanced-tracking-protection). ([Firefox bug 1918037](https://bugzil.la/1918037)).
@@ -55,19 +43,11 @@ This article provides information about the changes in Firefox 132 that affect d
 - The {{domxref("Notification.silent")}} property is now supported, which controls whether system notifications should be silent. When `silent: true` is specified in the {{domxref("Notification.Notification", "Notification()")}} constructor, the resulting system notification is issued without accompanying sounds or vibrations, regardless of device settings ([Firefox bug 1809028](https://bugzil.la/1809028)).
 - The `fetchpriority` attribute of the {{htmlelement("link")}}, {{htmlelement("script")}}, and {{htmlelement("img")}} elements, the `fetchPriority` property of the {{domxref("HTMLLinkElement")}}, {{domxref("HTMLScriptElement")}}, and {{domxref("HTMLImageElement")}} interfaces, the [`options.priority`](/en-US/docs/Web/API/RequestInit#priority) parameter passed to the [`Request()` constructor](/en-US/docs/Web/API/Request/Request), and the `fetchpriority` directive in the HTTP {{httpheader("Link")}} header, are now supported. These allow developers to provide a hint about the relative priority for fetching a particular resource compared to other resources of the same type, and can be used alongside other ways of setting the priority, such as preloading. ([Firefox bug 1854077](https://bugzil.la/1854077)).
 
-#### DOM
-
 #### Media, WebRTC, and Web Audio
 
 - The {{domxref('HTMLVideoElement/requestVideoFrameCallback','requestVideoFrameCallback()')}} and {{domxref('HTMLVideoElement/cancelVideoFrameCallback','cancelVideoFrameCallback()')}} methods of the {{domxref('HTMLVideoElement')}} interface are now supported. The `requestVideoFrameCallback()` registers a callback function that runs when a new video frame is sent to the compositor. Developers can use this function to perform operations on each video frame, enabling more efficient painting to a canvas, video analysis, synchronization with external audio sources, and so on. The method returns a callback handle that can be passed to `cancelVideoFrameCallback()` in order to cancel the outstanding callback request. ([Firefox bug 1919367](https://bugzil.la/1919367), [Firefox bug 1800882](https://bugzil.la/1800882)).
 - The {{domxref("MediaStreamTrack.getCapabilities()")}} method is now supported. This returns an object detailing the accepted values or value range for each constrainable property of the associated {{domxref("MediaStreamTrack")}} ([Firefox bug 1179084](https://bugzil.la/1179084)).
 
-#### Removals
-
-### WebAssembly
-
-#### Removals
-
 ### WebDriver conformance (WebDriver BiDi, Marionette)
 
 #### WebDriver BiDi
@@ -78,12 +58,6 @@ This article provides information about the changes in Firefox 132 that affect d
 - Network event timings were previously using the wrong unit and were provided in microseconds. They are now correctly set in milliseconds. ([Firefox bug 1916685](https://bugzil.la/1916685))
 - The `requestTime` from network event timings should now be more accurate and really match the time where the request actually started. ([Firefox bug 1922390](https://bugzil.la/1922390))
 
-## Changes for add-on developers
-
-### Removals
-
-### Other
-
 ## Experimental web features
 
 These features are newly shipped in Firefox 132 but are disabled by default. To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`. You can find more such features on the [Experimental features](/en-US/docs/Mozilla/Firefox/Experimental_features) page.
diff --git a/files/en-us/mozilla/firefox/releases/133/index.md b/files/en-us/mozilla/firefox/releases/133/index.md
index 0ae40f3c612a50a..1c26dfaae69a5f0 100644
--- a/files/en-us/mozilla/firefox/releases/133/index.md
+++ b/files/en-us/mozilla/firefox/releases/133/index.md
@@ -6,7 +6,7 @@ page-type: firefox-release-notes
 
 {{FirefoxSidebar}}
 
-This article provides information about the changes in Firefox 133 that affect developers. Firefox 133 is the current [Nightly version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly) and ships on [November 26, 2024](https://whattrainisitnow.com/release/?version=133).
+This article provides information about the changes in Firefox 133 that affect developers. Firefox 133 is the current [Beta version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#beta) and ships on [November 26, 2024](https://whattrainisitnow.com/release/?version=133).
 
 ## Changes for web developers
 
diff --git a/files/en-us/mozilla/firefox/releases/134/index.md b/files/en-us/mozilla/firefox/releases/134/index.md
new file mode 100644
index 000000000000000..a2e4c0cd5587669
--- /dev/null
+++ b/files/en-us/mozilla/firefox/releases/134/index.md
@@ -0,0 +1,71 @@
+---
+title: Firefox 134 for developers
+slug: Mozilla/Firefox/Releases/134
+page-type: firefox-release-notes
+---
+
+{{FirefoxSidebar}}
+
+This article provides information about the changes in Firefox 134 that affect developers. Firefox 134 is the current [Nightly version of Firefox](https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly) and ships on [January 7, 2025](https://whattrainisitnow.com/release/?version=134).
+
+## Changes for web developers
+
+### Developer Tools
+
+### HTML
+
+#### Removals
+
+### CSS
+
+#### Removals
+
+### JavaScript
+
+#### Removals
+
+### SVG
+
+#### Removals
+
+### HTTP
+
+#### Removals
+
+### Security
+
+#### Removals
+
+### APIs
+
+#### DOM
+
+#### Media, WebRTC, and Web Audio
+
+#### Removals
+
+### WebAssembly
+
+#### Removals
+
+### WebDriver conformance (WebDriver BiDi, Marionette)
+
+#### General
+
+#### WebDriver BiDi
+
+#### Marionette
+
+## Changes for add-on developers
+
+### Removals
+
+### Other
+
+## Experimental web features
+
+These features are newly shipped in Firefox 134 but are disabled by default. To experiment with them, search for the appropriate preference on the `about:config` page and set it to `true`. You can find more such features on the [Experimental features](/en-US/docs/Mozilla/Firefox/Experimental_features) page.
+
+## Older versions
+
+{{Firefox_for_developers}}

From 198d4613e48ec627c860551526131f363f244d36 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith 
Date: Tue, 29 Oct 2024 20:42:54 +0100
Subject: [PATCH 16/49] chore(css): Move CSS examples p1 - backgrounds and
 borders (#36561)

* chore(CSS): Tidy up CSS backgrounds and borders live samples

* feat: Tidy up examples in CSS backgrounds and borders
---
 .../backgrounds_and_borders/index.md          | 295 ++++++++++++++++--
 1 file changed, 270 insertions(+), 25 deletions(-)

diff --git a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
index 37a5fa7bd2e1be1..7e00027af3c686d 100644
--- a/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -36,7 +36,7 @@ In this lesson, we will take a look at some of the creative things you can do wi
 
 ## Styling backgrounds in CSS
 
-The CSS {{cssxref("background")}} property is a shorthand for a number of background longhand properties that we will meet in this lesson. If you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once.
+The CSS {{cssxref("background")}} property is a shorthand for a number of background longhand properties that we will meet in this lesson. If you discover a complex background property in a stylesheet, it might seem a little hard to understand as so many values can be passed in at once:
 
 ```css
 .box {
@@ -47,7 +47,7 @@ The CSS {{cssxref("background")}} property is a shorthand for a number of backgr
         rgb(51 56 57 / 100%) 96%
       )
       center center / 400px 200px no-repeat,
-    url(big-star.png) center no-repeat,
+    url(image.png) center no-repeat,
     rebeccapurple;
 }
 ```
@@ -59,20 +59,71 @@ We'll return to how the shorthand works later in the tutorial, but first let's h
 The {{cssxref("background-color")}} property defines the background color on any element in CSS. The property accepts any valid [``](/en-US/docs/Web/CSS/color_value). A `background-color` extends underneath the content and padding box of the element.
 
 In the example below, we have used various color values to add a background color to the box, a heading, and a {{htmlelement("span")}} element.
+Try this out yourself, using any available [``](/en-US/docs/Web/CSS/color_value) value.
 
-**Play around with these, using any available [``](/en-US/docs/Web/CSS/color_value) value.**
+```html live-sample___color
+

+  
Background Colors

+  
Try changing the background colors.

+

+```
+
+```css live-sample___color
+.box {
+  padding: 0.3em;
+  background-color: #567895;
+}
+
+h2 {
+  background-color: black;
+  color: white;
+}
+span {
+  background-color: rgb(255 255 255 / 50%);
+}
+```
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}
+{{EmbedLiveSample("color")}}
 
 ### Background images
 
-The {{cssxref("background-image")}} property enables the display of an image in the background of an element. In the example below, we have two boxes — one has a background image that is larger than the box ([balloons.jpg](https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg)). The other has a small image of a single star ([star.png](https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png)).
+The {{cssxref("background-image")}} property enables the display of an image in the background of an element. In the example below, we have two boxes — one has a background image that is larger than the box ([balloons.jpg](https://mdn.github.io/shared-assets/images/examples/balloons.jpg)). The other has a small image of a single star ([star.png](https://mdn.github.io/shared-assets/images/examples/star.png)).
 
 This example demonstrates two things about background images. By default, the large image is not scaled down to fit the box, so we only see a small corner of it, whereas the small image is tiled to fill the box.
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}
+```html live-sample___background-image
+

+  

+  

+

+```
 
-**If you specify a background color in addition to a background image then the image displays on top of the color. Try adding a `background-color` property to the example above to see that in action.**
+```css live-sample___background-image
+.wrapper {
+  display: flex;
+}
+
+.box {
+  width: 200px;
+  height: 80px;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  margin: 20px;
+}
+
+.a {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+}
+
+.b {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
+}
+```
+
+{{EmbedLiveSample("background-image")}}
+
+If you specify a background color in addition to a background image then the image displays on top of the color.
+Try adding a `background-color` property to the example above to see that in action.
 
 #### Controlling background-repeat
 
@@ -85,9 +136,30 @@ The {{cssxref("background-repeat")}} property is used to control the tiling beha
 - `space` — repeat as many times as possible, adding space between the images if there is extra space available.
 - `round` — similar to `space`, but stretches the images to fill any extra space
 
-**Try these values out in the example below. We have set the value to `no-repeat` so you will only see one star. Try out the different values — `repeat-x` and `repeat-y` — to see what their effects are.**
+Try these values out in the example below. We have set the value to `no-repeat` so you will only see one star. Try out the different values — `repeat-x` and `repeat-y` — to see what their effects are.
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}
+```html live-sample___repeat
+

+```
+
+```css hidden live-sample___repeat
+.box {
+  width: 200px;
+  height: 80px;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  margin: 20px;
+}
+```
+
+```css live-sample___repeat
+.box {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
+  background-repeat: no-repeat;
+}
+```
+
+{{EmbedLiveSample("repeat")}}
 
 #### Sizing the background image
 
@@ -106,7 +178,29 @@ Try the following.
 - Remove the length units and see what happens when you use `background-size: cover` or `background-size: contain`.
 - If your image is smaller than the box, you can change the value of `background-repeat` to repeat the image.
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}
+```html live-sample___size
+

+```
+
+```css hidden live-sample___size
+.box {
+  width: 500px;
+  height: 100px;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  margin: 10px;
+}
+```
+
+```css live-sample___size
+.box {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/balloons.jpg);
+  background-repeat: no-repeat;
+  background-size: 80px 10em;
+}
+```
+
+{{EmbedLiveSample("size")}}
 
 #### Positioning the background image
 
@@ -121,7 +215,7 @@ You can use keywords such as `top` and `right` (look up the others on the {{cssx
 
 ```css
 .box {
-  background-image: url(star.png);
+  background-image: url(image.png);
   background-repeat: no-repeat;
   background-position: top center;
 }
@@ -131,7 +225,7 @@ And {{cssxref("length", "lengths")}}, and {{cssxref("percentage", "percentages")
 
 ```css
 .box {
-  background-image: url(star.png);
+  background-image: url(image.png);
   background-repeat: no-repeat;
   background-position: 20px 10%;
 }
@@ -141,7 +235,7 @@ You can also mix keyword values with lengths or percentages, in which case the f
 
 ```css
 .box {
-  background-image: url(star.png);
+  background-image: url(image.png);
   background-repeat: no-repeat;
   background-position: 20px top;
 }
@@ -151,27 +245,88 @@ Finally, you can also use a 4-value syntax to indicate a distance from certain e
 
 ```css
 .box {
-  background-image: url(star.png);
+  background-image: url(image.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
 }
 ```
 
-**Use the example below to play around with these values and move the star around inside the box.**
+Use the example below to play around with these values and move the star around inside the box:
+
+```html live-sample___position
+

+```
+
+```css hidden live-sample___position
+.box {
+  width: 500px;
+  height: 80px;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  margin: 20px;
+}
+```
+
+```css live-sample___position
+.box {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png);
+  background-repeat: no-repeat;
+  background-position: 120px 1em;
+}
+```
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}
+{{EmbedLiveSample("position")}}
 
-> **Note:** `background-position` is a shorthand for {{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}, which allow you to set the different axis position values individually.
+> [!NOTE]
+> The shorthand `background-position` is used instead of {{cssxref("background-position-x")}} and {{cssxref("background-position-y")}}, which allow you to set the different axis position values individually.
 
 ### Gradient backgrounds
 
 A gradient — when used for a background — acts just like an image and is also set by using the {{cssxref("background-image")}} property.
 
-You can read more about the different types of gradients and things you can do with them on the MDN page for the [``](/en-US/docs/Web/CSS/gradient) data type. A fun way to play with gradients is to use one of the many CSS Gradient Generators available on the web, such as [CSSGradient.io](https://cssgradient.io/). You can create a gradient and copy and paste the source code that generates it.
+You can read more about the different types of gradients and things you can do with them on the MDN page for the [``](/en-US/docs/Web/CSS/gradient) data type. A fun way to play with gradients is to use one of the many CSS gradient generators available on the web, such as [CSSGradient.io](https://cssgradient.io/). You can create a gradient and copy and paste the source code that generates it.
 
 Try some different gradients in the example below. In the two boxes respectively, we have a linear gradient that is stretched over the whole box, and a radial gradient with a set size, which therefore repeats.
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 700)}}
+```html live-sample___gradients
+

+  

+  

+

+```
+
+```css live-sample___gradients
+.wrapper {
+  display: flex;
+}
+
+.box {
+  width: 400px;
+  height: 80px;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  margin: 20px;
+}
+
+.a {
+  background-image: linear-gradient(
+    105deg,
+    rgb(0 249 255 / 100%) 39%,
+    rgb(51 56 57 / 100%) 96%
+  );
+}
+
+.b {
+  background-image: radial-gradient(
+    circle,
+    rgb(0 249 255 / 100%) 39%,
+    rgb(51 56 57 / 100%) 96%
+  );
+  background-size: 100px 50px;
+}
+```
+
+{{EmbedLiveSample("gradients")}}
 
 ### Multiple background images
 
@@ -195,9 +350,34 @@ background-position:
 
 Each value of the different properties will match up to the values in the same position in the other properties. Above, for example, `image1`'s `background-repeat` value will be `no-repeat`. However, what happens when different properties have different numbers of values? The answer is that the smaller numbers of values will cycle — in the above example there are four background images but only two `background-position` values. The first two position values will be applied to the first two images, then they will cycle back around again — `image3` will be given the first position value, and `image4` will be given the second position value.
 
-**Let's play. The example below includes two background images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.**
+Let's play. The example below includes two background images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}
+```html live-sample___multiple-background-image
+

+  

+

+```
+
+```css live-sample___multiple-background-image
+.wrapper {
+  display: flex;
+}
+
+.box {
+  width: 500px;
+  height: 80px;
+  padding: 0.5em;
+  border: 1px solid #ccc;
+  margin: 20px;
+}
+
+.box {
+  background-image: url(https://mdn.github.io/shared-assets/images/examples/star.png),
+    url(https://mdn.github.io/shared-assets/images/examples/big-star.png);
+}
+```
+
+{{EmbedLiveSample("multiple-background-image")}}
 
 ### Background attachment
 
@@ -222,7 +402,29 @@ There are a few rules that need to be followed when writing background image sho
 
 Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 900)}}
+```html live-sample___background
+

+```
+
+```css live-sample___background
+.box {
+  width: 500px;
+  height: 300px;
+  padding: 0.5em;
+  background:
+    linear-gradient(
+        105deg,
+        rgb(255 255 255 / 20%) 39%,
+        rgb(51 56 57 / 100%) 96%
+      )
+      center center / 400px 200px no-repeat,
+    url(https://mdn.github.io/shared-assets/images/examples/big-star.png) center
+      no-repeat,
+    rebeccapurple;
+}
+```
+
+{{EmbedLiveSample("background", "", "320px")}}
 
 ### Accessibility considerations with backgrounds
 
@@ -260,7 +462,7 @@ The individual properties include the {{cssxref("border-width")}}, {{cssxref("bo
 }
 ```
 
-There are longhand properties for width, style, and color for each of the four sides:
+There are longhand properities for width, style, and color for each of the four sides:
 
 ```css
 .box {
@@ -275,7 +477,32 @@ There are longhand properties for width, style, and color for each of the four s
 
 There are a variety of styles that you can use for borders. In the example below, we have used two different border styles for the box and two different border styles for the heading. Play with the border style, width, and color to see how borders work.
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}
+```html live-sample___borders
+

+  
Borders

+  
Try changing the borders.

+

+```
+
+```css live-sample___borders
+* {
+  padding: 0.2em;
+}
+.box {
+  width: 500px;
+  background-color: #567895;
+  border: 5px solid #0b385f;
+  border-bottom-style: dashed;
+  color: #fff;
+}
+
+h2 {
+  border-top: 2px dotted rebeccapurple;
+  border-bottom: 1em double rgb(24 163 78);
+}
+```
+
+{{EmbedLiveSample("borders", "", "200px")}}
 
 ### Rounded corners
 
@@ -302,7 +529,25 @@ Or to make the top right corner have a horizontal radius of `1em`, and a vertica
 
 We have set all four corners in the example below and then changed the values for the top right corner to make it different. You can play with the values to change the corners. Take a look at the property page for {{cssxref("border-radius")}} to see the available syntax options. The [border-radius generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator) can be used to output rounded corner values for you.
 
-{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}
+```html live-sample___corners
+

+  
Borders

+  
Try changing the borders.

+

+```
+
+```css live-sample___corners
+.box {
+  width: 500px;
+  height: 110px;
+  padding: 0.5em;
+  border: 10px solid rebeccapurple;
+  border-radius: 1em;
+  border-top-right-radius: 10% 30%;
+}
+```
+
+{{EmbedLiveSample("corners")}}
 
 ## Test your skills!
 

From d2421d25d1676cc11b01cc4981061e4d0aa78e95 Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Wed, 30 Oct 2024 04:01:28 +0800
Subject: [PATCH 17/49] Revert #29639 & create page for
 `HTMLInputElement.cancel_event` (#36439)

* Revert ":bug: Add missing `cancel` event to `` (#29639)"

This reverts commit 0900a5665090b4dc3b4936af5a48591521032bfd.

* update & finish docs

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

Co-authored-by: Joshua Chen 

---------

Co-authored-by: Estelle Weyl 
Co-authored-by: Joshua Chen 
---
 files/en-us/_redirects.txt                    |   5 +-
 files/en-us/_wikihistory.json                 |  12 ++
 .../htmldialogelement/cancel_event/index.md   |  95 ++++++++++++
 .../en-us/web/api/htmldialogelement/index.md  |   8 +-
 .../api/htmldialogelement/showmodal/index.md  |   2 +-
 .../web/api/htmlelement/cancel_event/index.md | 138 ------------------
 .../htmlinputelement/cancel_event/index.md    |  82 +++++++++++
 files/en-us/web/api/htmlinputelement/index.md |  12 +-
 files/en-us/web/html/element/dialog/index.md  |   4 +-
 .../web/html/element/input/file/index.md      |   7 +-
 10 files changed, 208 insertions(+), 157 deletions(-)
 create mode 100644 files/en-us/web/api/htmldialogelement/cancel_event/index.md
 delete mode 100644 files/en-us/web/api/htmlelement/cancel_event/index.md
 create mode 100644 files/en-us/web/api/htmlinputelement/cancel_event/index.md

diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
index a5545b4e1cc5251..c560491193b579d 100644
--- a/files/en-us/_redirects.txt
+++ b/files/en-us/_redirects.txt
@@ -8099,7 +8099,7 @@
 /en-US/docs/Web/API/Element/MozMousePixelScroll	/en-US/docs/Web/API/Element/MozMousePixelScroll_event
 /en-US/docs/Web/API/Element/accessKey	/en-US/docs/Web/API/HTMLElement/accessKey
 /en-US/docs/Web/API/Element/attachInternals	/en-US/docs/Web/API/HTMLElement/attachInternals
-/en-US/docs/Web/API/Element/cancel_event	/en-US/docs/Web/API/HTMLElement/cancel_event
+/en-US/docs/Web/API/Element/cancel_event	/en-US/docs/Web/API/HTMLDialogElement/cancel_event
 /en-US/docs/Web/API/Element/contentvisibilityautostatechanged_event	/en-US/docs/Web/API/Element/contentvisibilityautostatechange_event
 /en-US/docs/Web/API/Element/createShadowRoot	/en-US/docs/Web/API/Element/shadowRoot
 /en-US/docs/Web/API/Element/error_event	/en-US/docs/Web/API/HTMLElement/error_event
@@ -8417,7 +8417,6 @@
 /en-US/docs/Web/API/HTMLContentElement.select	/en-US/docs/Web/API/HTMLSlotElement
 /en-US/docs/Web/API/HTMLContentElement/getDistributedNodes	/en-US/docs/Web/API/HTMLSlotElement
 /en-US/docs/Web/API/HTMLContentElement/select	/en-US/docs/Web/API/HTMLSlotElement
-/en-US/docs/Web/API/HTMLDialogElement/cancel_event	/en-US/docs/Web/API/HTMLElement/cancel_event
 /en-US/docs/Web/API/HTMLDialogElement/close()	/en-US/docs/Web/API/HTMLDialogElement/close
 /en-US/docs/Web/API/HTMLDialogElement/returnValue()	/en-US/docs/Web/API/HTMLDialogElement/returnValue
 /en-US/docs/Web/API/HTMLDialogElement/show()	/en-US/docs/Web/API/HTMLDialogElement/show
@@ -11787,7 +11786,7 @@
 /en-US/docs/Web/Events/blur	/en-US/docs/Web/API/Element/blur_event
 /en-US/docs/Web/Events/boundary	/en-US/docs/Web/API/SpeechSynthesisUtterance/boundary_event
 /en-US/docs/Web/Events/bufferedamountlow	/en-US/docs/Web/API/RTCDataChannel/bufferedamountlow_event
-/en-US/docs/Web/Events/cancel	/en-US/docs/Web/API/HTMLElement/cancel_event
+/en-US/docs/Web/Events/cancel	/en-US/docs/Web/API/HTMLDialogElement/cancel_event
 /en-US/docs/Web/Events/canplay	/en-US/docs/Web/API/HTMLMediaElement/canplay_event
 /en-US/docs/Web/Events/canplaythrough	/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event
 /en-US/docs/Web/Events/change	/en-US/docs/Web/API/HTMLElement/change_event
diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
index 62927eab5bedeb1..986702f05e95d74 100644
--- a/files/en-us/_wikihistory.json
+++ b/files/en-us/_wikihistory.json
@@ -37674,6 +37674,18 @@
       "dhodder"
     ]
   },
+  "Web/API/HTMLDialogElement/cancel_event": {
+    "modified": "2020-10-15T21:43:04.572Z",
+    "contributors": [
+      "mfuji09",
+      "fscholz",
+      "mfluehr",
+      "sideshowbarker",
+      "fgwang",
+      "rolfedh",
+      "cvrebert"
+    ]
+  },
   "Web/API/HTMLDialogElement/close": {
     "modified": "2020-10-15T21:52:17.118Z",
     "contributors": ["fscholz", "chrisdavidmills"]
diff --git a/files/en-us/web/api/htmldialogelement/cancel_event/index.md b/files/en-us/web/api/htmldialogelement/cancel_event/index.md
new file mode 100644
index 000000000000000..3eaafdbd2bc84f8
--- /dev/null
+++ b/files/en-us/web/api/htmldialogelement/cancel_event/index.md
@@ -0,0 +1,95 @@
+---
+title: "HTMLDialogElement: cancel event"
+short-title: cancel
+slug: Web/API/HTMLDialogElement/cancel_event
+page-type: web-api-event
+browser-compat: api.HTMLDialogElement.cancel_event
+---
+
+{{APIRef}}
+
+The **`cancel`** event fires on a {{HTMLElement("dialog")}} element when the user instructs the browser that they wish to dismiss the current open dialog. The browser fires this event when the user presses the Esc key.
+
+This event is cancelable but can not bubble.
+
+When a `` is dismissed with the Esc key, both the `cancel` and {{domxref("HTMLDialogElement/close_event", "close")}} events are fired.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener("cancel", (event) => {});
+
+oncancel = (event) => {};
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
+
+## Examples
+
+### Canceling a dialog
+
+#### HTML
+
+```html
+
+  
+
+
+
+
+

+```
+
+```css hidden
+button,
+div {
+  margin: 0.5rem;
+}
+```
+
+#### JavaScript
+
+```js
+const result = document.querySelector(".result");
+
+const dialog = document.querySelector(".example-dialog");
+
+dialog.addEventListener("cancel", (event) => {
+  result.textContent = "dialog was canceled";
+});
+
+const openDialog = document.querySelector(".open-dialog");
+openDialog.addEventListener("click", () => {
+  if (typeof dialog.showModal === "function") {
+    dialog.showModal();
+    result.textContent = "";
+  } else {
+    result.textContent = "The dialog API is not supported by this browser";
+  }
+});
+
+const closeButton = document.querySelector(".close");
+closeButton.addEventListener("click", () => {
+  dialog.close();
+});
+```
+
+#### Result
+
+{{ EmbedLiveSample('Canceling a dialog', '100%', '100px') }}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- HTML {{HTMLElement("dialog")}} element
diff --git a/files/en-us/web/api/htmldialogelement/index.md b/files/en-us/web/api/htmldialogelement/index.md
index 5fd18af5566fcda..cd3e6bdfd236d61 100644
--- a/files/en-us/web/api/htmldialogelement/index.md
+++ b/files/en-us/web/api/htmldialogelement/index.md
@@ -13,7 +13,7 @@ The **`HTMLDialogElement`** interface provides methods to manipulate {{HTMLEleme
 
 ## Instance properties
 
-_Inherits properties from its parent, {{domxref("HTMLElement")}}._
+_Also inherits properties from its parent interface, {{domxref("HTMLElement")}}._
 
 - {{domxref("HTMLDialogElement.open")}}
   - : A boolean value reflecting the [`open`](/en-US/docs/Web/HTML/Element/dialog#open) HTML attribute, indicating whether the dialog is available for interaction.
@@ -22,7 +22,7 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._
 
 ## Instance methods
 
-_Inherits methods from its parent, {{domxref("HTMLElement")}}._
+_Also inherits methods from its parent interface, {{domxref("HTMLElement")}}._
 
 - {{domxref("HTMLDialogElement.close()")}}
   - : Closes the dialog. An optional string may be passed as an argument, updating the `returnValue` of the dialog.
@@ -37,6 +37,8 @@ _Also inherits events from its parent interface, {{DOMxRef("HTMLElement")}}._
 
 Listen to these events using {{DOMxRef("EventTarget.addEventListener", "addEventListener()")}} or by assigning an event listener to the `oneventname` property of this interface.
 
+- {{domxref("HTMLDialogElement/cancel_event", "cancel")}}
+  - : Fired when the user dismisses the current open dialog with the escape key.
 - {{domxref("HTMLDialogElement/close_event", "close")}}
   - : Fired when the dialog is closed, whether with the escape key, the `HTMLDialogElement.close()` method, or via submitting a form within the dialog with [`method="dialog"`](/en-US/docs/Web/HTML/Element/form#method).
 
@@ -44,7 +46,7 @@ Listen to these events using {{DOMxRef("EventTarget.addEventListener", "addEvent
 
 ### Opening a modal dialog
 
-The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLElement/cancel_event", "cancel")}} event.
+The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the {{domxref("HTMLDialogElement.showModal()")}} function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event.
 
 #### HTML
 
diff --git a/files/en-us/web/api/htmldialogelement/showmodal/index.md b/files/en-us/web/api/htmldialogelement/showmodal/index.md
index 2edc8bee8fa6c0e..fa1192568e1edcb 100644
--- a/files/en-us/web/api/htmldialogelement/showmodal/index.md
+++ b/files/en-us/web/api/htmldialogelement/showmodal/index.md
@@ -37,7 +37,7 @@ None ({{jsxref("undefined")}}).
 
 ### Opening a modal dialog
 
-The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the `HTMLDialogElement.showModal()` function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLElement/cancel_event", "cancel")}} event.
+The following example shows a button that, when clicked, opens a modal {{htmlelement("dialog")}} containing a form via the `HTMLDialogElement.showModal()` function. While open, everything other than the modal dialog's contents is inert. From there you can click the _Cancel_ button to close the dialog (via the {{domxref("HTMLDialogElement.close()")}} function), or submit the form via the submit button. Selecting the cancel button closes the dialog, creating a {{domxref("HTMLDialogElement/close_event", "close")}} event, not a {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event.
 
 #### HTML
 
diff --git a/files/en-us/web/api/htmlelement/cancel_event/index.md b/files/en-us/web/api/htmlelement/cancel_event/index.md
deleted file mode 100644
index 407134037bbfdf3..000000000000000
--- a/files/en-us/web/api/htmlelement/cancel_event/index.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: "HTMLElement: cancel event"
-short-title: cancel
-slug: Web/API/HTMLElement/cancel_event
-page-type: web-api-event
-browser-compat: api.HTMLElement.cancel_event
----
-
-{{APIRef}}
-
-The **`cancel`** event is fired by {{HTMLElement("input")}} and {{HTMLElement("dialog")}} elements. The event is fired when the user cancels the currently open dialog by closing it with the Esc key. It is also fired by the [file input](/en-US/docs/Web/HTML/Element/input/file) when the user cancels the file picker dialog via the Esc key or the cancel button and when the user re-selects the same files that were previously selected.
-
-This event does not bubble.
-
-When a `` is dismissed with the Esc key, both the `cancel` and {{domxref("HTMLDialogElement/close_event", "close")}} events are fired.
-
-## Syntax
-
-Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
-
-```js
-addEventListener("cancel", (event) => {});
-
-oncancel = (event) => {};
-```
-
-## Event type
-
-A generic {{domxref("Event")}}.
-
-## Examples
-
-### Canceling a dialog
-
-#### HTML
-
-```html
-
-  
-
-
-
-
-

-```
-
-```css hidden
-button,
-div {
-  margin: 0.5rem;
-}
-```
-
-#### JavaScript
-
-```js
-const result = document.querySelector(".result");
-
-const dialog = document.querySelector(".example-dialog");
-
-dialog.addEventListener("cancel", (event) => {
-  result.textContent = "dialog was canceled";
-});
-
-const openDialog = document.querySelector(".open-dialog");
-openDialog.addEventListener("click", () => {
-  if (typeof dialog.showModal === "function") {
-    dialog.showModal();
-    result.textContent = "";
-  } else {
-    result.textContent = "The dialog API is not supported by this browser";
-  }
-});
-
-const closeButton = document.querySelector(".close");
-closeButton.addEventListener("click", () => {
-  dialog.close();
-});
-```
-
-#### Result
-
-{{ EmbedLiveSample('Canceling a dialog', '100%', '100px') }}
-
-### Canceling an input element
-
-#### HTML
-
-```html
-
-
-
-

-```
-
-```css hidden
-div {
-  margin-bottom: 10px;
-}
-```
-
-#### JavaScript
-
-```js
-const elem = document.getElementById("file");
-
-const result = document.getElementById("result");
-
-elem.addEventListener("cancel", () => {
-  result.textContent = "Canceled.";
-});
-
-elem.addEventListener("change", () => {
-  if (elem.files.length == 1) {
-    result.textContent = "File Selected.";
-  }
-});
-```
-
-#### Result
-
-{{ EmbedLiveSample('Canceling an input element', '100%', '100px') }}
-
-Open the file selector, then close the selection dialog with the escape key or the cancel button. Both of these will cause the cancel event to be fired. Also, try selecting a local file on your machine; then reopen the file selection window and reselect the same file. This too causes the cancel event to be fired.
-
-## Specifications
-
-{{Specifications}}
-
-## Browser compatibility
-
-{{Compat}}
-
-## See also
-
-- HTML {{HTMLElement("input")}} element
-- HTML {{HTMLElement("dialog")}} element
-- {{domxref("HTMLDialogElement/close_event", "close")}}
diff --git a/files/en-us/web/api/htmlinputelement/cancel_event/index.md b/files/en-us/web/api/htmlinputelement/cancel_event/index.md
new file mode 100644
index 000000000000000..1084ed2057151dc
--- /dev/null
+++ b/files/en-us/web/api/htmlinputelement/cancel_event/index.md
@@ -0,0 +1,82 @@
+---
+title: "HTMLInputElement: cancel event"
+short-title: cancel
+slug: Web/API/HTMLInputElement/cancel_event
+page-type: web-api-event
+browser-compat: api.HTMLInputElement.cancel_event
+---
+
+{{APIRef}}
+
+The **`cancel`** event fires on an {{HTMLElement("input")}} element when the user cancels the file picker dialog via the Esc key or the cancel button and when the user re-selects the same files that were previously selected of `type="file"`.
+
+This event is not cancelable but can bubble.
+
+## Syntax
+
+Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
+
+```js
+addEventListener("cancel", (event) => {});
+
+oncancel = (event) => {};
+```
+
+## Event type
+
+A generic {{domxref("Event")}}.
+
+## Examples
+
+### Canceling an input element
+
+#### HTML
+
+```html
+
+
+
+

+```
+
+```css hidden
+div {
+  margin-bottom: 10px;
+}
+```
+
+#### JavaScript
+
+```js
+const elem = document.getElementById("file");
+
+const result = document.getElementById("result");
+
+elem.addEventListener("cancel", () => {
+  result.textContent = "Canceled.";
+});
+
+elem.addEventListener("change", () => {
+  if (elem.files.length == 1) {
+    result.textContent = "File Selected.";
+  }
+});
+```
+
+#### Result
+
+{{ EmbedLiveSample('Canceling an input element', '100%', '100px') }}
+
+Open the file selector, then close the selection dialog with the escape key or the cancel button. Both of these will cause the cancel event to be fired. Also, try selecting a local file on your machine; then reopen the file selection window and reselect the same file. This too causes the cancel event to be fired.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- HTML {{HTMLElement("input")}} element
diff --git a/files/en-us/web/api/htmlinputelement/index.md b/files/en-us/web/api/htmlinputelement/index.md
index b7f9a09ce60db0f..ab16821bcf4fbd7 100644
--- a/files/en-us/web/api/htmlinputelement/index.md
+++ b/files/en-us/web/api/htmlinputelement/index.md
@@ -7,7 +7,7 @@ browser-compat: api.HTMLInputElement
 
 {{APIRef("HTML DOM")}}
 
-The **`HTMLInputElement`** interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.
+The **`HTMLInputElement`** interface provides special properties and methods for manipulating the options, layout, and presentation of {{HTMLElement("input")}} elements.
 
 {{InheritanceDiagram}}
 
@@ -51,11 +51,11 @@ Some properties only apply to input element types that support the corresponding
 
 - {{domxref("HTMLInputElement.popoverTargetAction", "popoverTargetAction")}}
 
-  - : Gets and sets the action to be performed (`"hide"`, `"show"`, or `"toggle"`) on a popover element being controlled by an {{htmlelement("input")}} element of `type="button"`. It reflects the value of the [`popovertargetaction`](/en-US/docs/Web/HTML/Element/input#popovertargetaction) HTML attribute.
+  - : Gets and sets the action to be performed (`"hide"`, `"show"`, or `"toggle"`) on a popover element being controlled by an {{HTMLElement("input")}} element of `type="button"`. It reflects the value of the [`popovertargetaction`](/en-US/docs/Web/HTML/Element/input#popovertargetaction) HTML attribute.
 
 - {{domxref("HTMLInputElement.popoverTargetElement", "popoverTargetElement")}}
 
-  - : Gets and sets the popover element to control via an {{htmlelement("input")}} element of `type="button"`. The JavaScript equivalent of the [`popovertarget`](/en-US/docs/Web/HTML/Element/input#popovertarget) HTML attribute.
+  - : Gets and sets the popover element to control via an {{HTMLElement("input")}} element of `type="button"`. The JavaScript equivalent of the [`popovertarget`](/en-US/docs/Web/HTML/Element/input#popovertarget) HTML attribute.
 
 - {{domxref("HTMLInputElement.step", "step")}}
 
@@ -84,7 +84,7 @@ Some properties only apply to input element types that support the corresponding
 
 - {{domxref("HTMLInputElement.form", "form")}} {{ReadOnlyInline}}
 
-  - : Returns a reference to the parent {{HtmlElement("form")}} element.
+  - : Returns a reference to the parent {{HTMLElement("form")}} element.
 
 - {{domxref("HTMLInputElement.formAction", "formAction")}}
 
@@ -271,6 +271,8 @@ _Also inherits events from its parent interface, {{domxref("HTMLElement")}}._
 
 Listen to these events using {{domxref("EventTarget.addEventListener", "addEventListener()")}} or by assigning an event listener to the `oneventname` property of this interface:
 
+- {{domxref("HTMLInputElement/cancel_event", "cancel")}} event
+  - : Fired when the user cancels the file picker dialog via the Esc key or the cancel button and when the user re-selects the same files that were previously selected.
 - {{domxref("HTMLInputElement/invalid_event", "invalid")}} event
   - : Fired when an element does not satisfy its constraints during constraint validation.
 - {{domxref("HTMLInputElement/search_event", "search")}} event {{Non-standard_Inline}}
@@ -290,4 +292,4 @@ Listen to these events using {{domxref("EventTarget.addEventListener", "addEvent
 
 ## See also
 
-- HTML element implementing this interface: {{ HTMLElement("input") }}
+- HTML element implementing this interface: {{HTMLElement("input")}}
diff --git a/files/en-us/web/html/element/dialog/index.md b/files/en-us/web/html/element/dialog/index.md
index aae15407b9a1f3c..a91e32c3627a820 100644
--- a/files/en-us/web/html/element/dialog/index.md
+++ b/files/en-us/web/html/element/dialog/index.md
@@ -571,8 +571,8 @@ The code renders as follows:
 ## See also
 
 - {{domxref("HTMLDialogElement")}} interface
-- {{domxref("HTMLDialogElement/close_event", "close")}} event
-- {{domxref("HTMLElement/cancel_event", "cancel")}} event
+- {{domxref("HTMLDialogElement/close_event", "close")}} event of the `HTMLDialogElement` interface
+- {{domxref("HTMLDialogElement/cancel_event", "cancel")}} event of the `HTMLDialogElement` interface
 - {{domxref("HTMLDialogElement/open", "open")}} property of the `HTMLDialogElement` interface
 - [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) global attribute for HTML elements
 - {{CSSXref("::backdrop")}} CSS pseudo-element
diff --git a/files/en-us/web/html/element/input/file/index.md b/files/en-us/web/html/element/input/file/index.md
index e684b364b5685bc..81b92dd6dc293e4 100644
--- a/files/en-us/web/html/element/input/file/index.md
+++ b/files/en-us/web/html/element/input/file/index.md
@@ -53,7 +53,7 @@ In addition to the attributes listed above, the following non-standard attribute
 
 The Boolean `webkitdirectory` attribute, if present, indicates that only directories should be available to be selected by the user in the file picker interface. See {{domxref("HTMLInputElement.webkitdirectory")}} for additional details and examples.
 
-Though originally implemented only for WebKit-based browsers, `webkitdirectory` is also usable in Microsoft Edge as well as Firefox 50 and later. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.
+Though originally implemented only for WebKit-based browsers, `webkitdirectory` is also usable in Firefox. However, even though it has relatively broad support, it is still not standard and should not be used unless you have no alternative.
 
 ## Unique file type specifiers
 
@@ -123,9 +123,6 @@ Each `File` object contains the following information:
 - `webkitRelativePath` {{non-standard_inline}}
   - : A string specifying the file's path relative to the base directory selected in a directory picker (that is, a `file` picker in which the [`webkitdirectory`](#webkitdirectory) attribute is set). _This is non-standard and should be used with caution._
 
-> [!NOTE]
-> You can set as well as get the value of `HTMLInputElement.files` in all modern browsers; this was most recently added to Firefox, in version 57 (see [Firefox bug 1384030](https://bugzil.la/1384030)).
-
 ### Limiting accepted file types
 
 Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as {{Glossary("JPEG")}} or {{Glossary("PNG")}}.
@@ -436,7 +433,7 @@ The example looks like this; have a play:
       
         {{domxref("HTMLElement/change_event", "change")}},
         {{domxref("Element/input_event", "input")}} and
-        {{domxref("HTMLElement/cancel_event", "cancel")}}
+        {{domxref("HTMLInputElement/cancel_event", "cancel")}}
       
     
     

From ef93687a7a22fa072a7a0021304926e9018eb48a Mon Sep 17 00:00:00 2001
From: SyntaxErrol 
Date: Tue, 29 Oct 2024 22:02:09 +0200
Subject: [PATCH 18/49] Add notes about map re-use drawbacks (#36529)

* Add notes about map re-use drawbacks

* Trim whitespace

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

* Make accessibility findings a warning

Co-authored-by: Estelle Weyl 

* Trim whitespace

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>
Co-authored-by: Estelle Weyl 
---
 .../learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/files/en-us/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md b/files/en-us/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
index d1750766bcf6a3a..3dfe0223bc2c8db 100644
--- a/files/en-us/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
+++ b/files/en-us/learn/html/howto/add_a_hit_map_on_top_of_an_image/index.md
@@ -35,6 +35,9 @@ When you nest an image inside {{htmlelement('a')}}, the entire image links to on
 
 Formerly, image maps were a popular navigation device, but it's important to thoroughly consider their performance and accessibility ramifications.
 
+> [!WARNING]
+> Multiple images referencing the same image map may lead to unexpected browser behavior, severely degrading usability and accessibility. For example, when a user keyboard navigates an image with a re-used image map in Safari and Chromium-based browsers, latter image instances using that same image map are skipped entirely. In Firefox, all image maps get keyboard focus simultaneously and when the user keyboard navigates past the image, the next focused element is the one after the last image instance, effectively skipping everything between the two images.
+
 [Text links](/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) (perhaps styled with CSS) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more SEO-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services).
 
 ## How to insert an image map, properly

From f11e9200b6f9d5c191051eb7ccbe7ebd44966e43 Mon Sep 17 00:00:00 2001
From: Brian Thomas Smith 
Date: Tue, 29 Oct 2024 21:03:23 +0100
Subject: [PATCH 19/49] chore(css): Move CSS examples p1 - flexbox & box
 alignment (#36560)

chore(CSS): Tidy up CSS flexbox live samples
---
 .../box_alignment_in_flexbox/index.md         | 100 ++++-
 .../index.md                                  | 369 +++++++++++++++++-
 2 files changed, 454 insertions(+), 15 deletions(-)

diff --git a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
index 7e78d912337699e..f624a620217c87d 100644
--- a/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
+++ b/files/en-us/web/css/css_box_alignment/box_alignment_in_flexbox/index.md
@@ -12,7 +12,37 @@ The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) Specification details
 
 In this example, three flex items are aligned on the main axis using {{cssxref("justify-content")}} and on the cross axis using {{cssxref("align-items")}}. The first item overrides the `align-items` values set on the group by setting {{cssxref("align-self")}} to `center`.
 
-{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}
+```html live-sample___flex-align-items
+

+  
One

+  
Two

+  
Three 
has 
extra 
text

+

+```
+
+```css hidden live-sample___flex-align-items
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___flex-align-items
+.box {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box :first-child {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("flex-align-items")}}
 
 ## The axes and flex-direction
 
@@ -47,7 +77,36 @@ There is a specific use case in flexbox where we might think that a `justify-sel
 
 By setting a {{cssxref("margin")}} of `auto` on one item in a set of flex items all aligned to start, we can create a split navigation. This works well with flexbox and the alignment properties. As soon as there is no space available for the auto margin, the item behaves in the same way as all the other flex items and shrinks to try to fit into space.
 
-{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}
+```html live-sample___auto-margins
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+

+```
+
+```css hidden live-sample___auto-margins
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___auto-margins
+.box {
+  display: flex;
+  border: 2px dotted rgb(96 139 168);
+}
+.push {
+  margin-left: auto;
+}
+```
+
+{{EmbedLiveSample("auto-margins")}}
 
 ## The `gap` properties
 
@@ -61,7 +120,42 @@ On the main axis, the `column-gap` property creates fixed size gaps between adja
 
 On the cross axis the `row-gap` property creates spacing between adjacent flex lines, therefore `flex-wrap` must also be set to `wrap` for this to have any effect.
 
-{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/gap.html", '100%', 700)}}
+```html live-sample___gap
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+  
Six

+

+```
+
+```css hidden live-sample___gap
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___gap
+.box {
+  width: 450px;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 10px;
+  column-gap: 2em;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  flex: 1;
+}
+```
+
+{{EmbedLiveSample("gap")}}
 
 ## Reference
 
diff --git a/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md b/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
index 690dfb455ad27d4..e462ae603d42677 100644
--- a/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
+++ b/files/en-us/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md
@@ -8,13 +8,38 @@ page-type: guide
 
 One of the reasons flexbox is so useful is that it enables proper alignment, including providing a quick method of vertically centering elements. In this guide, we will take a thorough look at how the alignment and justification properties work in flexbox.
 
+## Using alignment in flexbox
+
 Flexbox provides several properties to control alignment and spacing, with `align-items` and `justify-content` being fundamental for centering elements. To center an element, we use the {{cssxref("align-items")}} property to align the item on the {{glossary("cross axis")}}, which in this case is the [block axis](/en-US/docs/Glossary/Flow_relative_values) running vertically. We use {{cssxref("justify-content")}} to align the item on the main axis, which in this case is the inline axis running horizontally.
 
 ![The cross axis is the vertical axis and the main axis is the horizontal axis.](align1.png)
 
 Change the size of the container or nested element in the code example below. The nested element always remains centered.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}
+```html live-sample___intro
+

+  

+

+```
+
+```css live-sample___intro
+.box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box div {
+  width: 100px;
+  height: 100px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+{{EmbedLiveSample("intro")}}
 
 ## Properties for controlling alignment in flexbox
 
@@ -54,7 +79,31 @@ We can use other values to control how the items align:
 
 In the example below, the value of `align-items` is `stretch`. Try the other values and see how the items align against each other in the flex container.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}}
+```html live-sample___align-items
+

+  
One

+  
Two

+  
Three 
has 
extra 
text

+

+```
+
+```css live-sample___align-items
+.box {
+  border: 2px dotted rgb(96 139 168);
+  display: flex;
+  align-items: stretch;
+}
+
+.box div {
+  width: 100px;
+  height: 100px;
+  background-color: rgb(96 139 168 / 0.2);
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+}
+```
+
+{{EmbedLiveSample("align-items")}}
 
 ### Aligning one item with `align-self`
 
@@ -62,7 +111,37 @@ The `align-items` property sets the `align-self` property on all of the flex ite
 
 In this next live example, the flex container has `align-items: flex-start`, which means the items are all aligned to the start of the cross axis. Using the `first-child` selector, the first item is set to `align-self: stretch`. Another item with the `selected` class has `align-self: center` set. Change the value of `align-items` or change the values of `align-self` on the individual items to see how this works.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}
+```html live-sample___align-self
+

+  
One

+  
Two

+  
Three

+  
Four

+

+```
+
+```css live-sample___align-self
+.box {
+  border: 2px dotted rgb(96 139 168);
+  display: flex;
+  align-items: flex-start;
+  height: 200px;
+}
+.box div {
+  background-color: rgb(96 139 168 / 0.2);
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  padding: 20px;
+}
+.box > *:first-child {
+  align-self: stretch;
+}
+.box .selected {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("align-self", "", "250px")}}
 
 ### Changing the main axis
 
@@ -76,7 +155,38 @@ Keeping the same writing mode, when the `flex-direction` is changed to `column`,
 
 You can try this out in the example below, which has a flex container with `flex-direction: column` yet otherwise is exactly the same as the previous example.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}}
+```html live-sample___align-self-column
+

+  
One

+  
Two

+  
Three

+  
Four

+

+```
+
+```css live-sample___align-self-column
+.box {
+  border: 2px dotted rgb(96 139 168);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 200px;
+}
+.box div {
+  background-color: rgb(96 139 168 / 0.2);
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  padding: 20px;
+}
+.box > *:first-child {
+  align-self: stretch;
+}
+.box .selected {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("align-self-column", "", "300px")}}
 
 ## Aligning content on the cross axis with the `align-content` property
 
@@ -104,11 +214,90 @@ In the live example below, the flex container has a height of `400 pixels`, whic
 
 Try out the other values to see how the `align-content` property works.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}}
+```html live-sample___align-content
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+  
Six

+  
Seven

+  
Eight

+

+```
+
+```css live-sample___align-content
+.box {
+  width: 450px;
+  border: 2px dotted rgb(96 139 168);
+  display: flex;
+  flex-wrap: wrap;
+  height: 300px;
+  align-content: space-between;
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+  flex: 1 1 100px;
+}
+
+.box div {
+  background-color: rgb(96 139 168 / 0.2);
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  padding: 20px;
+}
+```
+
+{{EmbedLiveSample("align-content", "", "380px")}}
 
 Once again we can switch our `flex-direction` to `column` in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}
+```html live-sample___align-content-column
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+  
Six

+  
Seven

+  
Eight

+

+```
+
+```css live-sample___align-content-column
+.box {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  width: 400px;
+  height: 300px;
+  align-content: space-between;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+  flex: 1 1 100px;
+}
+
+.box div {
+  background-color: rgb(96 139 168 / 0.2);
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  padding: 20px;
+}
+```
+
+{{EmbedLiveSample("align-content-column", "", "380px")}}
 
 ## Aligning content on the main axis
 
@@ -135,11 +324,61 @@ The `baseline` values aren't relevant in this dimension. Otherwise, `justify-con
 
 In the example below, the value of `justify-content` is `space-between`. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}
+```html live-sample___justify-content
+

+  
One

+  
Two

+  
Three

+  
Four

+

+```
+
+```css live-sample___justify-content
+.box {
+  display: flex;
+  justify-content: space-between;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+{{EmbedLiveSample("justify-content")}}
 
 If the main axis is in the block direction because `flex-direction` is set to `column`, then `justify-content` will distribute space between items in that dimension as long as there is space in the flex container to distribute.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}}
+```html live-sample___justify-content-column
+

+  
One

+  
Two

+  
Three

+  
Four

+

+```
+
+```css live-sample___justify-content-column
+.box {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 300px;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+{{EmbedLiveSample("justify-content-column", "", "380px")}}
 
 ### Alignment and writing modes
 
@@ -153,7 +392,32 @@ However if the writing mode is right-to-left as in Arabic, the items will line u
 
 The live example below has the `direction` property set to `rtl` to force a right-to-left flow for our items. You can remove this, or change the values of `justify-content` to see how flexbox behaves when the start of the inline direction is on the right.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}}
+```html live-sample___justify-content-writing-mode
+

+  
One

+  
Two

+  
Three

+  
Four

+

+```
+
+```css live-sample___justify-content-writing-mode
+.box {
+  direction: rtl;
+  display: flex;
+  justify-content: flex-end;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+{{EmbedLiveSample("justify-content-writing-mode")}}
 
 ## Alignment and `flex-direction`
 
@@ -161,7 +425,32 @@ The direction of `start` of the line will also change if you change the `flex-di
 
 In this next example, `flex-direction: row-reverse` and `justify-content: flex-end` define the direction and location of the items within the flex container. In a left to right language, the items line up on the left. Try changing `flex-direction: row-reverse` to `flex-direction: row`. You will see that the items now move to the right-hand side, and the visual order of the items is reversed.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}}
+```html live-sample___justify-content-reverse
+

+  
One

+  
Two

+  
Three

+  
Four

+

+```
+
+```css live-sample___justify-content-reverse
+.box {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+{{EmbedLiveSample("justify-content-reverse")}}
 
 While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. `start` and `flex-start` will be where the beginning of a sentence of text would start.
 
@@ -191,7 +480,34 @@ In this live example, item 4 is separated from the first three items by setting
 
 In this live example, the flex items are arranged in a row with the basic flex values, and the class `push`, set on the fourth item, applies `margin-left: auto` to that item. Try removing the class on the fourth item or adding the class to a different item to see how it works.
 
-{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}}
+```html live-sample___auto-margins
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+

+```
+
+```css live-sample___auto-margins
+.box {
+  display: flex;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+.push {
+  margin-left: auto;
+}
+```
+
+{{EmbedLiveSample("auto-margins")}}
 
 ## Creating gaps between items
 
@@ -200,7 +516,36 @@ To create a gap between flex items, use the {{cssxref("gap")}}, {{cssxref("colum
 The {{cssxref("gap")}} property is a shorthand that sets both `row-gap` and `column-gap`.
 The gap between flex items or between flex line depends on the direction. If the {{cssxref("flex-direction")}} property creates rows, the first value defines the gap between flex lines, and the second value defines the gap between items within each line. With columns (when `flex-direction` is set to `column` or `column-reverse`), the first value defines the gap between flex items, and the second value defines the gaps between flex lines.
 
-{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/gap.html", '100%', 700)}}
+```html live-sample___gap
+

+  
One

+  
Two

+  
Three

+  
Four

+  
Five

+  
Six

+

+```
+
+```css live-sample___gap
+.box {
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 10px;
+  column-gap: 2em;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  flex: 1;
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+{{EmbedLiveSample("gap")}}
 
 ## See also
 

From ee38092c2ec26061808a7fc684464d9f097eb678 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Ogam?= 
Date: Tue, 29 Oct 2024 21:07:18 +0100
Subject: [PATCH 20/49] Add some display values in the display example (#36515)

* Add some display values in the display example

* Add missing values
---
 files/en-us/web/css/display/index.md | 44 +++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 11 deletions(-)

diff --git a/files/en-us/web/css/display/index.md b/files/en-us/web/css/display/index.md
index c72a97b15e3d0cb..309223538abc62c 100644
--- a/files/en-us/web/css/display/index.md
+++ b/files/en-us/web/css/display/index.md
@@ -95,7 +95,7 @@ The keyword values can be grouped into six value categories.
 
       - : The element lays out its contents using flow layout (block-and-inline layout).
 
-        If its outer display type is `inline`, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block container box.
+        If its outer display type is `inline`, and it is participating in a block or inline formatting context, then it generates an inline box. Otherwise it generates a block box.
 
         Depending on the value of other properties (such as {{CSSxRef("position")}}, {{CSSxRef("float")}}, or {{CSSxRef("overflow")}}) and whether it is itself participating in a block or inline formatting context, it either establishes a new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) for its contents or integrates its contents into its parent formatting context.
 
@@ -121,7 +121,7 @@ The keyword values can be grouped into six value categories.
 A single value of `list-item` will cause the element to behave like a list item.
 This can be used together with {{CSSxRef("list-style-type")}} and {{CSSxRef("list-style-position")}}.
 
-`list-item` can also be combined with any {{CSSxRef("<display-outside>")}} keyword and the `flow` or `flow-root` {{CSSxRef("<display-inside>")}} keywords.
+`list-item` can also be combined with any {{CSSxRef("<display-outside>")}} keyword and the `flow` or `flow-root` {{CSSxRef("<display-inside>")}} keyword.
 
 > [!NOTE]
 > In browsers that support the multi-keyword syntax, if no inner value is specified, it will default to `flow`.
@@ -335,7 +335,7 @@ In some browsers, changing the `display` value of a {{HTMLElement("table")}} ele
 
 In this example we have two block-level container elements, each one with three inline children. Below that, we have a select menu that allows you to apply different `display` values to the containers, allowing you to compare and contrast how the different values affect the element's layout, and that of their children.
 
-We've included {{cssxref("padding")}} and {{cssxref("background-color")}} on the containers and their children, so that it is easier to see the effect the display values are having.
+We have included {{cssxref("padding")}} and {{cssxref("background-color")}} on the containers and their children, so that it is easier to see the effect the display values are having.
 
 #### HTML
 
@@ -356,19 +356,33 @@ We've included {{cssxref("padding")}} and {{cssxref("background-color")}} on the
``` @@ -427,12 +441,20 @@ updateDisplay(); Note that some multi-keyword values are added for illustration which have the following equivalents: +- `block` = `block flow` +- `inline` = `inline flow` +- `flow` = `block flow` +- `flow-root` = `block flow-root` +- `table` = `block table` +- `flex` = `block flex` +- `grid` = `block grid` +- `list-item` = `block flow list-item` - `inline-block` = `inline flow-root` +- `inline-table` = `inline table` - `inline-flex` = `inline flex` - `inline-grid` = `inline grid` -- `table` = `block table` -You can find more examples in the pages for each separate display data type under [Grouped values](#grouped_values) +You can find more examples in the pages for each separate display type under [Grouped values](#grouped_values). ## Specifications From 8cf2239ad218f6ddb92066265fedaaeb04c43a9f Mon Sep 17 00:00:00 2001 From: Fizan Muhammed Faisal <145630603+FizanMuhammedFaisal@users.noreply.github.com> Date: Wed, 30 Oct 2024 02:17:42 +0530 Subject: [PATCH 21/49] Fix: Update AudioBuffer parameters to remove deprecated options (#36562) * Update AudioBuffer documentation to remove deprecated parameters * Update AudioBuffer documentation to remove the depricated section --- .../web/api/audiobuffer/audiobuffer/index.md | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/files/en-us/web/api/audiobuffer/audiobuffer/index.md b/files/en-us/web/api/audiobuffer/audiobuffer/index.md index 07c32a3fc0f5514..54cc0a562098f4a 100644 --- a/files/en-us/web/api/audiobuffer/audiobuffer/index.md +++ b/files/en-us/web/api/audiobuffer/audiobuffer/index.md @@ -36,26 +36,6 @@ new AudioBuffer(options) the sample rate of the `context` used in constructing this object. User agents are required to support sample rates from 8,000 Hz to 96,000 Hz (but are allowed to go farther outside this range). - - `channelCount` - - : Represents an integer used to determine how many channels are used when [up-mixing and down-mixing](/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#up-mixing_and_down-mixing) connections to any inputs to the node. - (See {{domxref("AudioNode.channelCount")}} for more information.) Its usage and precise - definition depend on the value of `channelCountMode`. - - `channelCountMode` - - : Represents an enumerated value describing the way channels must be matched between - the node's inputs and outputs. (See {{domxref("AudioNode.channelCountMode")}} for more - information including default values.) - - `channelInterpretation` - - : Represents an enumerated value describing the meaning of the channels. This - interpretation will define how audio [up-mixing and down-mixing](/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#up-mixing_and_down-mixing) will happen. - The possible values are `"speakers"` or `"discrete"`. (See - {{domxref("AudioNode.channelCountMode")}} for more information including default - values.) - -#### Deprecated parameters - -- `context` {{Deprecated_Inline}} - - : A reference to an {{domxref("AudioContext")}}. This parameter was removed from the - spec. ### Exceptions From 8750e1271fe4f3d7b1ef3990dd3d4e1a9f209a09 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Tue, 29 Oct 2024 21:10:57 +0000 Subject: [PATCH 22/49] 36125 add text emphasis position auto (#36331) * added syntax and value * added a explanation of ruby and added an extra example * updated the directions to make the preffered make more sense * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * added comments explaining the text * added extra values to syntax and added supports at rule to example * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * fixed the values list * Update files/en-us/web/css/text-emphasis-position/index.md Co-authored-by: Dipika Bhattacharya * added examples heading * fixed the values section --------- Co-authored-by: Dipika Bhattacharya Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web/css/text-emphasis-position/index.md | 116 +++++++++++++++++- 1 file changed, 112 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/text-emphasis-position/index.md b/files/en-us/web/css/text-emphasis-position/index.md index d7f6dbd9c21701f..9180452ef3f7f09 100644 --- a/files/en-us/web/css/text-emphasis-position/index.md +++ b/files/en-us/web/css/text-emphasis-position/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.text-emphasis-position {{CSSRef}} -The **`text-emphasis-position`** [CSS](/en-US/docs/Web/CSS) property sets where emphasis marks are drawn. Like ruby text, if there isn't enough room for emphasis marks, the line height is increased. +The **`text-emphasis-position`** [CSS](/en-US/docs/Web/CSS) property sets where emphasis marks are drawn. Similar to the text rendered by the [``](/en-US/docs/Web/HTML/Element/ruby) HTML element, if there isn't enough room for emphasis marks, the line height is increased. {{EmbedInteractiveExample("pages/css/text-emphasis-position.html")}} @@ -15,14 +15,19 @@ The **`text-emphasis-position`** [CSS](/en-US/docs/Web/CSS) property sets where ```css /* Initial value */ -text-emphasis-position: over right; +text-emphasis-position: auto; + +/* Keyword values */ +text-emphasis-position: over; +text-emphasis-position: under; -/* Keywords value */ +text-emphasis-position: over right; text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; +text-emphasis-position: right over; text-emphasis-position: right under; text-emphasis-position: left under; @@ -36,6 +41,15 @@ text-emphasis-position: unset; ### Values +The property accepts one or two values: + +- If only one value is provided, it can be `auto`, `over`, or `under`. When only `over` or `under` is used, `right` is assumed as the default position. +- If two values are provided, they must include one of `over` or `under`and one of `right` or `left`. Their order does not matter. + +The values include: + +- `auto` {{Experimental_Inline}} + - : Draws marks over the text in horizontal writing mode and to the right of the text in vertical writing mode. - `over` - : Draws marks over the text in horizontal writing mode. - `under` @@ -118,6 +132,96 @@ The preferred position of emphasis marks depends on the language. In Japanese fo ## Examples +### Adding emphasis mark positions + +Use the drop down menu to change the position of the emphasis marks. This will change the class on the `
` element, which in turn, will update the position of the emphasis marks on the text. + +#### HTML + +```html hidden +

The auto value is not supported in your browser.

+