[pull] main from mdn:main

.vscode/dictionaries/terms-abbreviations.txt

@@ -545,7 +545,6 @@ QPACK
 QTFF
 qtrs
 quantizer
-quarternion
 querysets
 quicklinks
 quickmenu

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

@@ -28,7 +28,7 @@ A [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix).
 
 ### Inverting a triangle
 
-In this example, the SVG contains two identical [paths](/en-US/docs/Web/SVG/Reference/Attribute/d) in the shape of a triangle; they are both drawn to have the same size and position. The view box has a negative y value showing us content from both sides of the y-axis. This enables the flipped triangle to be withing the viewport after it is transformed.
+In this example, the SVG contains two identical [paths](/en-US/docs/Web/SVG/Reference/Attribute/d) in the shape of a triangle; they are both drawn to have the same size and position. The view box has a negative y value showing us content from both sides of the y-axis. This enables the flipped triangle to be within the viewport after it is transformed.
 
 #### HTML
 

files/en-us/web/api/fetchlater_api/fetchlater_quotas/index.md

@@ -48,7 +48,7 @@ By default, subframes of subframes are not allocated a quota and so cannot use `
 
 When quotas are exceeded, a `QuotaExceededError` is thrown when the {{domxref('Window.fetchLater()','fetchLater()')}} method is called to initiate the deferred request.
 
-Permissions Policy checks are not discernable from quota checks. Calling `fetchLater()` will throw a `QuotaExceededError` both if the quota is actually exceeded and if the quota was restricted for that origin via a Permissions Policy.
+Permissions Policy checks are not discernible from quota checks. Calling `fetchLater()` will throw a `QuotaExceededError` both if the quota is actually exceeded and if the quota was restricted for that origin via a Permissions Policy.
 
 Callers of `fetchLater()` should be defensive and catch `QuotaExceededError` errors in almost all cases, especially if they embed third-party JavaScript.
 

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

@@ -26,7 +26,7 @@ This interface is accessible through the {{domxref("Gamepad.pose")}} property.
 - {{domxref("GamepadPose.linearAcceleration")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : Returns the linear acceleration of the {{domxref("Gamepad")}}, in meters per second per second.
 - {{domxref("GamepadPose.orientation")}} {{ReadOnlyInline}} {{Experimental_Inline}}
-  - : Returns the orientation of the {{domxref("Gamepad")}}, as a quarternion value.
+  - : Returns the orientation of the {{domxref("Gamepad")}}, as a quaternion value.
 - {{domxref("GamepadPose.angularVelocity")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : Returns the angular velocity of the {{domxref("Gamepad")}}, in radians per second.
 - {{domxref("GamepadPose.angularAcceleration")}} {{ReadOnlyInline}} {{Experimental_Inline}}

files/en-us/web/api/gamepadpose/orientation/index.md

@@ -10,7 +10,7 @@ browser-compat: api.GamepadPose.orientation
 
 {{APIRef("WebVR API")}}{{SeeCompatTable}}
 
-The **`orientation`** read-only property of the {{domxref("GamepadPose")}} interface returns the orientation of the {{domxref("Gamepad")}}, as a quarternion value.
+The **`orientation`** read-only property of the {{domxref("GamepadPose")}} interface returns the orientation of the {{domxref("Gamepad")}}, as a quaternion value.
 
 The value is a {{jsxref("Float32Array")}}, made up of the following values:
 

files/en-us/web/api/popover_api/using/index.md

@@ -434,6 +434,8 @@ For example, you could use a combination of {{cssxref("anchor()")}} function val
 
 ```css
 .my-popover {
+  margin: 0;
+  inset: auto;
   bottom: calc(anchor(top) + 20px);
   justify-self: anchor-center;
 }
@@ -443,10 +445,14 @@ Or you could use a {{cssxref("position-area")}} property:
 
 ```css
 .my-popover {
+  margin: 0;
+  inset: auto;
   position-area: top;
 }
 ```
 
+When using {{cssxref("position-area")}} or {{cssxref("anchor()")}} to position popovers, be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those, as in the examples above. The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258).
+
 See [Using CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning/Using#positioning_elements_relative_to_their_anchor) for more details on associating anchor and positioned elements, and positioning elements relative to their anchor.
 
 > [!NOTE]

files/en-us/web/api/publickeycredential/getclientcapabilities_static/index.md

@@ -176,9 +176,9 @@ function log(text) {
 The code is similar to the previous example, except that we check a particular returned capability, and we use `try...catch` to catch the case where `getClientCapabilities()` is not supported.
 
 ```js
-checkisUserVerifyingPlatformAuthenticatorAvailable();
+checkIsUserVerifyingPlatformAuthenticatorAvailable();
 
-async function checkisUserVerifyingPlatformAuthenticatorAvailable() {
+async function checkIsUserVerifyingPlatformAuthenticatorAvailable() {
   try {
     const capabilities = await PublicKeyCredential.getClientCapabilities();
 

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

@@ -11,7 +11,7 @@ browser-compat: api.Sanitizer
 
 The **`Sanitizer`** interface of the [HTML Sanitizer API](/en-US/docs/Web/API/HTML_Sanitizer_API) defines a configuration object that specifies what elements, attributes and comments are allowed or should be removed when inserting strings of HTML into an {{domxref("Element")}} or {{domxref("ShadowRoot")}}, or when parsing an HTML string into a {{domxref("Document")}}.
 
-A `Sanitizer` instance is effectively a wrapper around a {{domxref("SanitizerConfig")}}, and can be passed as a configuration alterative in the same [sanitization methods](/en-US/docs/Web/API/HTML_Sanitizer_API#sanitization_methods):
+A `Sanitizer` instance is effectively a wrapper around a {{domxref("SanitizerConfig")}}, and can be passed as a configuration alternative in the same [sanitization methods](/en-US/docs/Web/API/HTML_Sanitizer_API#sanitization_methods):
 
 - {{domxref("Element/setHTML","setHTML()")}} or {{domxref("Element/setHTMLUnsafe","setHTMLUnsafe()")}} on {{domxref("Element")}}.
 - {{domxref("ShadowRoot/setHTML","setHTML()")}} or {{domxref("ShadowRoot/setHTMLUnsafe","setHTMLUnsafe()")}} on {{domxref("ShadowRoot")}}.

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

@@ -26,7 +26,7 @@ This interface is accessible through the {{domxref("VRDisplay.getPose()")}} and
 - {{domxref("VRPose.linearAcceleration")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}
   - : Returns the linear acceleration of the {{domxref("VRDisplay")}} at the current {{domxref("VRFrameData.timestamp")}}, in meters per second per second.
 - {{domxref("VRPose.orientation")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}
-  - : Returns the orientation of the sensor at the current {{domxref("VRFrameData.timestamp")}}, as a quarternion value.
+  - : Returns the orientation of the sensor at the current {{domxref("VRFrameData.timestamp")}}, as a quaternion value.
 - {{domxref("VRPose.angularVelocity")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}
   - : Returns the angular velocity of the {{domxref("VRDisplay")}} at the current {{domxref("VRFrameData.timestamp")}}, in radians per second.
 - {{domxref("VRPose.angularAcceleration")}} {{Deprecated_Inline}} {{ReadOnlyInline}} {{Non-standard_Inline}}

files/en-us/web/api/vrpose/orientation/index.md

@@ -11,7 +11,7 @@ browser-compat: api.VRPose.orientation
 
 {{APIRef("WebVR API")}}{{Deprecated_Header}}{{Non-standard_Header}}
 
-The **`orientation`** read-only property of the {{domxref("VRPose")}} interface returns the orientation of the sensor at the current timestamp, as a quarternion value.
+The **`orientation`** read-only property of the {{domxref("VRPose")}} interface returns the orientation of the sensor at the current timestamp, as a quaternion value.
 
 > [!NOTE]
 > This property was part of the old [WebVR API](https://immersive-web.github.io/webvr/spec/1.1/). It has been superseded by the [WebXR Device API](https://immersive-web.github.io/webxr/).

files/en-us/web/css/@media/shape/index.md

@@ -78,3 +78,4 @@ Currently, no browsers support this feature.
 
 - [Using Media Queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
 - [@media](/en-US/docs/Web/CSS/@media)
+- [CSS round display](/en-US/docs/Web/CSS/CSS_round_display) module

files/en-us/web/css/anchor/index.md

@@ -131,6 +131,19 @@ The below table lists the inset properties, and the `<anchor-side>` parameter va
 | `inset-block-start` and `inset-block-end`   | `start`, `end`, `self-start`, and `self-end`<br>`top` and `bottom` in horizontal writing modes<br>`left` and `right` in vertical writing modes |
 | `inset-inline-start` and `inset-inline-end` | `start`, `end`, `self-start`, and `self-end`<br>`left` and `right` in horizontal writing modes<br>`top` and `bottom` in vertical writing modes |
 
+### Using `anchor()` to position popovers
+
+When using `anchor()` to position [popovers](/en-US/docs/Web/HTML/Reference/Global_attributes/popover), be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those:
+
+```css
+.positionedPopover {
+  margin: 0;
+  inset: auto;
+}
+```
+
+The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258).
+
 ### Using `anchor()` inside `calc()`
 
 When the `anchor()` function refers to a side of the default anchor, you can include a {{cssxref("margin")}} to create spacing between the edges of the anchor and positioned element as needed. Alternatively, you can include the `anchor()` function within a {{cssxref("calc")}} function to add spacing.

files/en-us/web/css/basic-shape/path/index.md

@@ -179,6 +179,6 @@ svg {
 ## See also
 
 - {{cssxref("<shape-outside>")}}
-- [CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes)
-- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
-- [SVG Path Syntax Illustrated Guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/)
+- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module
+- [Overview of CSS shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
+- [The SVG `path` syntax: an illustrated guide](https://css-tricks.com/svg-path-syntax-illustrated-guide/) via CSS-tricks (2021)

files/en-us/web/css/css_round_display/index.md

@@ -0,0 +1,46 @@
+---
+title: CSS round display
+slug: Web/CSS/CSS_round_display
+page-type: css-module
+spec-urls: https://drafts.csswg.org/css-round-display/
+sidebar: cssref
+---
+
+The **CSS round display** module defines CSS extensions to support a round display, such as wrist-watches, to help developers build web pages suitable for those devices.
+
+## Reference
+
+### Properties
+
+The CSS round display module introduces the `border-boundary` and `shape-inside` properties. Currently, no browsers support these features.
+
+### Descriptors
+
+- {{cssxref("@media/shape", "shape")}} ({{cssxref("@media")}} feature)
+
+## Guides
+
+- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
+  - : Introduces media queries, their syntax, and the operators and media features used to construct media query expressions.
+
+- [Overview of CSS Shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes)
+  - : Defines basic shapes and how to debug them with developer tools.
+
+## Related concepts
+
+- {{cssxref("@media")}} at-rule
+- {{cssxref("offset-distance")}} property
+- {{cssxref("offset-path")}} property
+- {{cssxref("offset-position")}} property
+- [`viewport-fit`](/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport#viewport-fit) value for {{htmlelement("meta")}} `content` attribute
+
+## Specifications
+
+{{Specifications}}
+
+## See also
+
+- {{cssxref("basic-shape")}} data-type
+- {{cssxref("shape-outside")}} property
+- [CSS shapes](/en-US/docs/Web/CSS/CSS_shapes) module
+- [CSS media queries](/en-US/docs/Web/CSS/CSS_media_queries) module

files/en-us/web/css/position-area/index.md

@@ -115,6 +115,19 @@ If the positioned element is placed in a single top-center, bottom-center, or ce
 
 If the positioned element is placed in any other single grid square (say with `position-area: top left`) or is set to span two or more grid squares (for example using `position-area: bottom span-all`), it will align with the specified grid area but behave as if it has a {{cssxref("width")}} of `max-content` set on it. It is being sized according to its containing block size, which is the size imposed on it when it was set to `position: fixed`. It will stretch as wide as the text content, although it may also be constrained by the edge of the `<body>`.
 
+### Using `position-area` to position popovers
+
+When using `position-area` to position [popovers](/en-US/docs/Web/HTML/Reference/Global_attributes/popover), be aware that [the default styles for popovers](https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:~:text=%5Bpopover%5D%20%7B) may conflict with the position you're trying to achieve. The usual culprits are the default styles for `margin` and `inset`, so it's advisable to reset those:
+
+```css
+.my-popover {
+  margin: 0;
+  inset: auto;
+}
+```
+
+The CSS working group is [looking at ways to avoid requiring this workaround](https://github.com/w3c/csswg-drafts/issues/10258).
+
 ## Formal definition
 
 {{cssinfo}}