Merge branch 'main' into feat/SVGFEDropShadowElement

.github/workflows/pr-test.yml

@@ -101,7 +101,6 @@ jobs:
           # you don't need that script as a writer. It's only used in CI
           # and it can't use the default CONTENT_ROOT that gets set in
           # package.json.
-          echo Y|yarn rari update
           ARGS=$(echo $GIT_DIFF_CONTENT | sed -E -e "s#(^| )files#\1-f $PWD/files#g")
           yarn rari build --no-basic --json-issues --data-issues $ARGS
           yarn yari-render-html

files/en-us/_redirects.txt

@@ -491,7 +491,7 @@
 /en-US/docs/CSS/Getting_Started	/en-US/docs/Learn_web_development/Core/Styling_basics
 /en-US/docs/CSS/Getting_Started/Boxes	/en-US/docs/Learn_web_development/Core/Styling_basics
 /en-US/docs/CSS/Getting_Started/Cascading_and_inheritance	/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts
-/en-US/docs/CSS/Getting_Started/Challenge_solutions	/en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions
+/en-US/docs/CSS/Getting_Started/Challenge_solutions	/en-US/docs/Learn_web_development/Core/Challenges
 /en-US/docs/CSS/Getting_Started/Content	/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Generated_content
 /en-US/docs/CSS/Getting_Started/How_CSS_works	/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS
 /en-US/docs/CSS/Getting_Started/JavaScript	/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting
@@ -12444,12 +12444,14 @@
 /en-US/docs/Web/Guide/Audio_and_video_manipulation	/en-US/docs/Web/Media/Audio_and_video_manipulation
 /en-US/docs/Web/Guide/CSS/Block_formatting_context	/en-US/docs/Web/CSS/CSS_display/Block_formatting_context
 /en-US/docs/Web/Guide/CSS/CSS_Image_Sprites	/en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS
+/en-US/docs/Web/Guide/CSS/CSS_Layout	/en-US/docs/Web/CSS/Guides
 /en-US/docs/Web/Guide/CSS/Consistent_list_indentation	/en-US/docs/Web/CSS/CSS_lists/Consistent_list_indentation
 /en-US/docs/Web/Guide/CSS/Counters	/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters
 /en-US/docs/Web/Guide/CSS/Flexible_boxes	/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
 /en-US/docs/Web/Guide/CSS/Getting_started	/en-US/docs/Learn_web_development/Core/Styling_basics
 /en-US/docs/Web/Guide/CSS/Getting_started/Boxes	/en-US/docs/Learn_web_development/Core/Styling_basics
 /en-US/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance	/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts
+/en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions	/en-US/docs/Learn_web_development/Core/Challenges
 /en-US/docs/Web/Guide/CSS/Getting_started/Content	/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/Generated_content
 /en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works	/en-US/docs/Learn_web_development/Core/Styling_basics/What_is_CSS
 /en-US/docs/Web/Guide/CSS/Getting_started/JavaScript	/en-US/docs/Learn_web_development/Core/Scripting/DOM_scripting

files/en-us/_wikihistory.json

@@ -6214,6 +6214,18 @@
     "modified": "2020-07-16T22:27:36.041Z",
     "contributors": ["MelchiorIm3Tal", "chrisdavidmills", "rachelandrew"]
   },
+  "Learn_web_development/Core/Challenges": {
+    "modified": "2019-08-29T20:48:33.765Z",
+    "contributors": [
+      "Sebastianz",
+      "strael1",
+      "teoli",
+      "Jeremie",
+      "Sheppy",
+      "illourr",
+      "jswisher"
+    ]
+  },
   "Learn_web_development/Core/Frameworks_libraries": {
     "modified": "2020-09-25T22:34:22.129Z",
     "contributors": ["chrisdavidmills", "CodeDotJS"]
@@ -91086,18 +91098,6 @@
       "ethertank"
     ]
   },
-  "Web/Guide/CSS/Getting_started/Challenge_solutions": {
-    "modified": "2019-08-29T20:48:33.765Z",
-    "contributors": [
-      "Sebastianz",
-      "strael1",
-      "teoli",
-      "Jeremie",
-      "Sheppy",
-      "illourr",
-      "jswisher"
-    ]
-  },
   "Web/Guide/Parsing_and_serializing_XML": {
     "modified": "2020-09-09T05:19:22.895Z",
     "contributors": [

files/en-us/web/guide/css/getting_started/challenge_solutions/index.md → files/en-us/learn_web_development/core/challenges/index.md

@@ -1,6 +1,6 @@
 ---
 title: Challenge solutions
-slug: Web/Guide/CSS/Getting_started/Challenge_solutions
+slug: Learn_web_development/Core/Challenges
 page-type: guide
 ---
 

files/en-us/learn_web_development/core/scripting/dom_scripting/index.md

@@ -188,7 +188,7 @@ When you want to remove a node based only on a reference to itself, which is fai
 linkPara.remove();
 ```
 
-This method is not supported in older browsers. They have no method to tell a node to remove itself, so you'd have to do the following.
+This method is not supported in older browsers. They have no method to tell a node to remove itself, so you'd have to do the following:
 
 ```js
 linkPara.parentNode.removeChild(linkPara);

files/en-us/learn_web_development/core/styling_basics/backgrounds_and_borders/index.md

@@ -174,7 +174,7 @@ You can also use keywords:
 
 In the example below, the _balloons.jpg_ image has length units set to size it inside the box. You can see this has distorted the image.
 
-Try the following.
+Try the following:
 
 - Change the length units used to modify the size of the background.
 - Remove the length units and see what happens when you use `background-size: cover` or `background-size: contain`.

files/en-us/learn_web_development/extensions/server-side/django/models/index.md

@@ -257,7 +257,7 @@ We can get all records for a model as a `QuerySet`, using `objects.all()`. The `
 all_books = Book.objects.all()
 ```
 
-Django's `filter()` method allows us to filter the returned `QuerySet` to match a specified **text** or **numeric** field against particular criteria. For example, to filter for books that contain "wild" in the title and then count them, we could do the following.
+Django's `filter()` method allows us to filter the returned `QuerySet` to match a specified **text** or **numeric** field against particular criteria. For example, to filter for books that contain "wild" in the title and then count them, we could do the following:
 
 ```python
 wild_books = Book.objects.filter(title__contains='wild')

files/en-us/mozilla/firefox/releases/136/index.md

@@ -58,6 +58,8 @@ This article provides information about the changes in Firefox 136 that affect d
 
 ## Changes for add-on developers
 
+- {{WebExtAPIRef("menus.update")}} and {{WebExtAPIRef("menus.remove")}} and the aliases {{WebExtAPIRef("contextMenus.update")}} and {{WebExtAPIRef("contextMenus.remove")}} now reject with an error when the menu item doesn't exist. Previously, the error was ignored and the promise fulfilled. ([Firefox bug 1688743](https://bugzil.la/1688743)).
+
 ### Removals
 
 ### Other

files/en-us/related/imsc/styling/index.md

@@ -8,7 +8,7 @@ IMSC offers many options for styling documents, and most of the IMSC styling pro
 
 ## Inline styling
 
-The simplest way of styling content elements like `<p>` or `<span>` is by specifying one or more style attributes, such as `tts:color`, on them. For instance, the following
+The simplest way of styling content elements like `<p>` or `<span>` is by specifying one or more style attributes, such as `tts:color`, on them. For instance, the following:
 
 ```xml
 <p tts:textAlign="center"

files/en-us/web/api/rtcdatachannel/binarytype/index.md

@@ -15,7 +15,7 @@ on the {{domxref("RTCDataChannel")}}. Values allowed by the
 {{domxref("WebSocket.binaryType")}} property are also permitted here:
 `blob` if {{domxref("Blob")}} objects are being used or
 `arraybuffer` if {{jsxref("ArrayBuffer")}} objects are being used. The
-default is `blob`.
+default is `arraybuffer`.
 
 When a binary message is received on the data channel, the resulting
 {{DOMxRef("RTCDataChannel.message_event", "message")}} event's {{domxref("MessageEvent.data")}} property is an object of

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

@@ -25,7 +25,7 @@ _Also inherits properties from {{DOMxRef("EventTarget")}}._
     Values are the same as allowed on the {{DOMxRef("WebSocket.binaryType")}} property:
     `blob` if {{DOMxRef("Blob")}} objects are being used,
     or `arraybuffer` if {{jsxref("ArrayBuffer")}} objects are being used.
-    The default is `blob`.
+    The default is `arraybuffer`.
 - {{DOMxRef("RTCDataChannel.bufferedAmount", "bufferedAmount")}} {{ReadOnlyInline}}
   - : Returns the number of bytes of data
     currently queued to be sent over the data channel.

files/en-us/web/api/shadowroot/elementfrompoint/index.md

@@ -0,0 +1,68 @@
+---
+title: "ShadowRoot: elementFromPoint() method"
+short-title: elementFromPoint()
+slug: Web/API/ShadowRoot/elementFromPoint
+page-type: web-api-instance-method
+browser-compat: api.ShadowRoot.elementFromPoint
+---
+
+{{APIRef("DOM")}}{{Non-standard_Header}}
+
+The **`elementFromPoint()`** method, available on the {{domxref("ShadowRoot")}} object, returns the element at the topmost shadow root layer at the specified coordinates relative to the viewport (the shadow root highest in the display z-order, that is able to receive pointer events). Shadow root elements that have {{cssxref("pointer-events")}} set to `none` are ignored.
+
+If the specified point is outside the bounds of the shadow root, the result is `undefined`.
+
+## Syntax
+
+```js-nolint
+elementFromPoint(x, y)
+```
+
+### Parameters
+
+- `x`
+  - : The horizontal coordinate of a point, relative to the left edge of the current {{Glossary("viewport")}}.
+- `y`
+  - : The vertical coordinate of a point, relative to the top edge of the current viewport.
+
+### Return value
+
+An {{domxref("Element")}}; the topmost shadow root element located at the specified coordinates, if any.
+
+## Examples
+
+In this example, assuming the existence of a {{htmlelement("template")}} in the HTML, we define a `<my-custom-element>`. If the appended custom element abuts the top-left corner of the viewport, or any portion of it overlaps that corner, the element that is the topmost layer at that point in the custom element will have a thin, dashed red border.
+
+```js
+customElements.define(
+  "my-custom-element",
+  class extends HTMLElement {
+    constructor() {
+      super();
+      const templateContent = document.getElementById(
+        "my-custom-element-template",
+      ).content;
+      const sRoot = this.attachShadow({ mode: "open" });
+      sRoot.appendChild(templateContent.cloneNode(true));
+
+      // get the topmost element in the top left corner of the viewport
+      const srElement = this.shadowRoot.elementFromPoint(0, 0);
+      // apply a border to that element
+      srElement.style.border = "1px dashed red";
+    }
+  },
+);
+```
+
+## Specifications
+
+Not part of any standard.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("ShadowRoot.elementsFromPoint()")}}
+- {{domxref("Document.elementFromPoint()")}}

files/en-us/web/api/shadowroot/elementsfrompoint/index.md

@@ -0,0 +1,64 @@
+---
+title: "ShadowRoot: elementsFromPoint() method"
+short-title: elementsFromPoint()
+slug: Web/API/ShadowRoot/elementsFromPoint
+page-type: web-api-instance-method
+browser-compat: api.ShadowRoot.elementsFromPoint
+---
+
+{{APIRef("DOM")}}{{Non-standard_Header}}
+
+The **`elementsFromPoint()`** method of the {{domxref("ShadowRoot")}} interface returns an array of all the shadow root elements at the specified coordinates (relative to the viewport). The elements are ordered from the topmost element (highest in the display z-order), to the bottommost element.
+
+It operates in a similar way to the {{domxref("ShadowRoot.elementFromPoint")}} method. Some browsers return only the shadow root elements present at that location. Other browsers include elements outside of the [shadow DOM](/en-US/docs/Web/API/Web_components/Using_shadow_DOM), from the shadow DOM element in the topmost layer to the document root node, such as the {{htmlelement("html")}} or {{SVGElement("svg")}} root element. In these browsers, it operates similar to the {{domxref("Document.elementsFromPoint")}} method, but with the ability to cross the [shadow boundary](/en-US/docs/Glossary/Shadow_tree).
+
+## Syntax
+
+```js-nolint
+elementsFromPoint(x, y)
+```
+
+### Parameters
+
+- `x`
+  - : The horizontal coordinate of a point, relative to the left edge of the current {{Glossary("viewport")}}.
+- `y`
+  - : The vertical coordinate of a point, relative to the top edge of the current viewport.
+
+### Return value
+
+An array of {{domxref('Element')}} objects.
+
+## Examples
+
+```js
+const customElem = document.querySelector("my-custom-element");
+const shadow = customElem.shadowRoot;
+const elements = shadow.elementsFromPoint(20, 20);
+const msg = elements.map((el) => el.localName).join(" < ");
+if (msg) {
+  console.log(msg);
+} else {
+  console.log("The custom element had no descendants at x: 20, y: 20.");
+}
+```
+
+If `<my-custom-element>` is near the top left corner of the viewport, and contains a single `<div>`, the above may return either of the following, depending on the browser implementation:
+
+```plain
+div
+div < my-custom-element < body < html
+```
+
+## Specifications
+
+Not part of any standard.
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{DOMxRef("ShadowRoot.elementFromPoint()")}}
+- {{DOMxRef("Document.elementsFromPoint()")}}

files/en-us/web/api/svgfeconvolvematrixelement/bias/index.md

@@ -0,0 +1,60 @@
+---
+title: "SVGFEConvolveMatrixElement: bias property"
+short-title: bias
+slug: Web/API/SVGFEConvolveMatrixElement/bias
+page-type: web-api-instance-property
+browser-compat: api.SVGFEConvolveMatrixElement.bias
+---
+
+{{APIRef("SVG")}}
+
+The **`bias`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("bias")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Access the `bias` property
+
+The `bias` property is used to adjust the brightness of the output.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="convolveFilterWithBias">
+      <feConvolveMatrix
+        in="SourceGraphic"
+        order="3"
+        kernelMatrix="0 -1 0 -1 5 -1 0 -1 0"
+        bias="0.25" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightblue;"
+    filter="url(#convolveFilterWithBias)" />
+</svg>
+```
+
+```js
+const convolveMatrix = document.querySelector("feConvolveMatrix");
+
+console.log(convolveMatrix.bias.baseVal); // Output: 0.25
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}

files/en-us/web/api/svgfeconvolvematrixelement/divisor/index.md

@@ -0,0 +1,60 @@
+---
+title: "SVGFEConvolveMatrixElement: divisor property"
+short-title: divisor
+slug: Web/API/SVGFEConvolveMatrixElement/divisor
+page-type: web-api-instance-property
+browser-compat: api.SVGFEConvolveMatrixElement.divisor
+---
+
+{{APIRef("SVG")}}
+
+The **`divisor`** read-only property of the {{domxref("SVGFEConvolveMatrixElement")}} interface reflects the {{SVGAttr("divisor")}} attribute of the given {{SVGElement("feConvolveMatrix")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedNumber")}} object.
+
+## Examples
+
+### Access the `divisor` property
+
+A convolution filter is applied to a rectangle, and the `divisor` is used to control the brightness.
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="convolveFilterWithDivisor">
+      <feConvolveMatrix
+        in="SourceGraphic"
+        order="3"
+        kernelMatrix="0 -1 0 -1 4 -1 0 -1 0"
+        divisor="1" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:lightgreen;"
+    filter="url(#convolveFilterWithDivisor)" />
+</svg>
+```
+
+```js
+const convolveMatrix = document.querySelector("feConvolveMatrix");
+
+console.log(convolveMatrix.divisor.baseVal); // Output: 1
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedNumber")}}