Merge branch 'main' into mousePointerCrosslinks

.github/workflows/pr-check-lint_content.yml

@@ -84,6 +84,14 @@ jobs:
 
           files_to_lint="$DIFF_DOCUMENTS"
 
+          echo "crlf line ending check"
+          CRLF_FAILED=true
+          CRLF_LOG=$(git ls-files --eol ${files_to_lint} | grep -E 'w/(mixed|crlf)') || CRLF_FAILED=false
+          echo "CRLF_LOG<<${EOF}" >> $GITHUB_ENV
+          echo "${CRLF_LOG}" >> $GITHUB_ENV
+          echo "${EOF}" >> $GITHUB_ENV
+          echo "CRLF_FAILED=${CRLF_FAILED}" >> $GITHUB_ENV
+
           echo "Running markdownlint --fix"
           MD_LINT_FAILED=false
           MD_LINT_LOG=$(yarn markdownlint-cli2 --fix ${files_to_lint} 2>&1) || MD_LINT_FAILED=true
@@ -114,6 +122,7 @@ jobs:
           fi
 
           # info for troubleshooting
+          echo CRLF_FAILED=${CRLF_FAILED}
           echo MD_LINT_FAILED=${MD_LINT_FAILED}
           echo FM_LINT_FAILED=${FM_LINT_FAILED}
           echo PRETTIER_FAILED=${PRETTIER_FAILED}
@@ -154,17 +163,26 @@ jobs:
             -reporter="github-pr-review"
 
       - name: Fail if any issues pending
-        if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true'
+        if: env.FILES_MODIFIED == 'true' || env.CRLF_FAILED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true'
         env:
+          CRLF_FAILED: ${{ env.CRLF_FAILED }}
           MD_LINT_FAILED: ${{ env.MD_LINT_FAILED }}
           FM_LINT_FAILED: ${{ env.FM_LINT_FAILED }}
           PRETTIER_FAILED: ${{ env.PRETTIER_FAILED }}
+          CRLF_LOG: ${{ env.CRLF_LOG }}
           MD_LINT_LOG: ${{ env.MD_LINT_LOG }}
           FM_LINT_LOG: ${{ env.FM_LINT_LOG }}
           PRETTIER_LOG: ${{ env.PRETTIER_LOG }}
         run: |
           echo -e "\nPlease fix all the linting issues mentioned in the following logs and in the PR review comments."
 
+          if [[ ${CRLF_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 In the following files make sure all the lines end with only Line Feed (LF) character and not with Carriage Return Line Feed (CRLF) characters:"
+            echo "${CRLF_LOG}"
+            echo "For more information refer https://gist.github.com/LunarLambda/3df0840b336a5e314e4ffdac03cbf619 ."
+            echo "You may use https://app.execeratics.com/LFandCRLFonline/?l=en online tool to convert line endings from CRLF to LF."
+          fi
+
           if [[ ${MD_LINT_FAILED} == 'true' ]]; then
             echo -e "\n\n🪵 Logs from markdownlint:"
             echo "${MD_LINT_LOG}"

files/en-us/glossary/style_origin/index.md

@@ -19,4 +19,4 @@ The style origins are used to determine where to stop rolling back (or backtrack
 
 ## See also
 
-- [CSS Cascading and Inheritance: Cascading Origins](https://drafts.csswg.org/css-cascade-4/#cascading-origins)
+- [CSS cascading and inheritance: Cascading Origins](https://drafts.csswg.org/css-cascade-4/#cascading-origins)

files/en-us/web/api/csspseudoelement/type/index.md

@@ -47,4 +47,4 @@ console.log(mySelector === typeOfPseudoElement); // Outputs true
 ## See also
 
 - {{DOMxRef('Element.pseudo()')}}
-- [List of pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements#list_of_pseudo-elements)
+- [List of pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements#alphabetical_index)

files/en-us/web/api/document/createelement/index.md

@@ -8,19 +8,19 @@ browser-compat: api.Document.createElement
 
 {{APIRef("DOM")}}
 
-In an [HTML](/en-US/docs/Web/HTML) document, the **`document.createElement()`** method creates the HTML element specified by _tagName_, or an {{domxref("HTMLUnknownElement")}} if _tagName_ isn't recognized.
+In an [HTML](/en-US/docs/Web/HTML) document, the **`document.createElement()`** method creates the HTML element specified by `localName`, or an {{domxref("HTMLUnknownElement")}} if `localName` isn't recognized.
 
 ## Syntax
 
 ```js-nolint
-createElement(tagName)
-createElement(tagName, options)
+createElement(localName)
+createElement(localName, options)
 ```
 
 ### Parameters
 
-- `tagName`
-  - : A string that specifies the type of element to be created. The {{domxref("Node.nodeName", "nodeName")}} of the created element is initialized with the value of _tagName_. Don't use qualified names (like "html:a") with this method. When called on an HTML document, `createElement()` converts _tagName_ to lower case before creating the element. In Firefox, Opera, and Chrome, `createElement(null)` works like `createElement("null")`.
+- `localName`
+  - : A string that specifies the type of element to be created. Don't use qualified names (like "html:a") with this method. When called on an HTML document, `createElement()` converts `localName` to lower case before creating the element. In Firefox, Opera, and Chrome, `createElement(null)` works like `createElement("null")`.
 - `options` {{optional_inline}}
   - : An object with the following properties:
     - `is`

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

@@ -84,9 +84,7 @@ const callback = (entries, observer) => {
 };
 ```
 
-The list of entries received by the callback includes one entry for each threshold-crossing event — multiple entries can be received at a time, either from multiple targets or from a single target crossing multiple thresholds in a short amount of time. The entries are dispatched using a queue, so they should be ordered by the time they were generated, but you should preferably use {{domxref("IntersectionObserverEntry.time")}} to correctly order them.
-
-Each entry in the list of thresholds is an {{domxref("IntersectionObserverEntry")}} object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, etc. The entry only contains information about that particular instant — if you want information that requires tracking over time, such as the scroll direction and speed, you may need to compute that yourself by memorizing previously received entries.
+The list of entries received by the callback includes one {{domxref("IntersectionObserverEntry")}} object for each threshold-crossing event — multiple entries can be received at a time, either from multiple targets or from a single target crossing multiple thresholds in a short amount of time. The entries are dispatched using a queue, so they should be ordered by the time they were generated, but you should preferably use {{domxref("IntersectionObserverEntry.time")}} to correctly order them. Each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, etc. The entry only contains information about that particular instant — if you want information that requires tracking over time, such as the scroll direction and speed, you may need to compute that yourself by memorizing previously received entries.
 
 Be aware that your callback is executed on the main thread. It should operate as quickly as possible; if anything time-consuming needs to be done, use {{domxref("Window.requestIdleCallback()")}}.
 

files/en-us/web/api/svgfespecularlightingelement/height/index.md

@@ -0,0 +1,39 @@
+---
+title: "SVGFESpecularLightingElement: height property"
+short-title: height
+slug: Web/API/SVGFESpecularLightingElement/height
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.height
+---
+
+{{APIRef("SVG")}}
+
+The **`height`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the vertical size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}.
+
+It reflects the {{SVGAttr("height")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or a [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage) relative to the height of the filter region. The default value is `100%`. The property value is a length in user coordinate system units.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const feSpecularLighting = document.querySelector("feSpecularLighting");
+const verticalSize = feSpecularLighting.height;
+console.log(verticalSize.baseVal.value); // the `height` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGFESpecularLightingElement.width")}}
+- {{domxref("SVGFEDiffuseLightingElement")}}
+- CSS {{cssxref("lighting-color")}} property

files/en-us/web/api/svgfespecularlightingelement/result/index.md

@@ -0,0 +1,42 @@
+---
+title: "SVGFESpecularLightingElement: result property"
+short-title: result
+slug: Web/API/SVGFESpecularLightingElement/result
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.result
+---
+
+{{APIRef("SVG")}}
+
+The **`result`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the assigned name of an SVG filter primitive as a {{domxref("SVGAnimatedString")}}.
+
+It reflects the {{SVGAttr("result")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute value is a {{cssxref("custom-ident")}}. If supplied, then graphics that result from processing this filter primitive can be referenced by an {{SVGAttr("in")}} attribute on a subsequent filter primitive within the same {{SVGElement("filter")}} element.
+
+If no `result` attribute is defined, the filter's `result.baseVal` and `result.animVal` are empty strings, and the output of the `<feSpecularLighting>` filter will only be available for re-use as the implicit input into the next filter primitive if that filter primitive provides no value for its `in` attribute.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}}.
+
+## Example
+
+```js
+const feSpecularLightingElement = document.querySelector("feSpecularLighting");
+const filterName = feSpecularLightingElement.result;
+console.log(filterName.baseVal); // the filter's assigned name
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGFESpecularLightingElement.in1")}}
+- {{cssxref("custom-ident")}} data type
+- {{domxref("SVGFEDiffuseLightingElement")}}
+- CSS {{cssxref("lighting-color")}} property

files/en-us/web/api/svgfespecularlightingelement/width/index.md

@@ -0,0 +1,39 @@
+---
+title: "SVGFESpecularLightingElement: width property"
+short-title: width
+slug: Web/API/SVGFESpecularLightingElement/width
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.width
+---
+
+{{APIRef("SVG")}}
+
+The **`width`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the horizontal size of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}.
+
+It reflects the {{SVGAttr("width")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or a [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage) relative to the width of the filter region. The default value is `100%`. The property value is a length in user coordinate system units.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const feSpecularLighting = document.querySelector("feSpecularLighting");
+const horizontalSize = feSpecularLighting.width;
+console.log(horizontalSize.baseVal.value); // the `width` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGFESpecularLightingElement.height")}}
+- {{domxref("SVGFEDiffuseLightingElement")}}
+- CSS {{cssxref("lighting-color")}} property

files/en-us/web/api/svgfespecularlightingelement/x/index.md

@@ -0,0 +1,39 @@
+---
+title: "SVGFESpecularLightingElement: x property"
+short-title: x
+slug: Web/API/SVGFESpecularLightingElement/x
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.x
+---
+
+{{APIRef("SVG")}}
+
+The **`x`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the horizontal coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}.
+
+It reflects the {{SVGAttr("x")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage). The `<coordinate>` is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the x-axis. If the `x` attribute is a percent value, the property value is relative to the width of the filter region in user coordinate system units. The default value is `0`.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const feSpecularLighting = document.querySelector("feSpecularLighting");
+const leftPosition = feSpecularLighting.x;
+console.log(leftPosition.baseVal.value); // the `x` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGFESpecularLightingElement.y")}}
+- {{domxref("SVGFEDiffuseLightingElement")}}
+- CSS {{cssxref("lighting-color")}} property

files/en-us/web/api/svgfespecularlightingelement/y/index.md

@@ -0,0 +1,39 @@
+---
+title: "SVGFESpecularLightingElement: y property"
+short-title: "y"
+slug: Web/API/SVGFESpecularLightingElement/y
+page-type: web-api-instance-property
+browser-compat: api.SVGFESpecularLightingElement.y
+---
+
+{{APIRef("SVG")}}
+
+The **`y`** read-only property of the {{domxref("SVGFESpecularLightingElement")}} interface describes the vertical coordinate of the position of an SVG filter primitive as a {{domxref("SVGAnimatedLength")}}.
+
+It reflects the {{SVGAttr("y")}} attribute of the {{SVGElement("feSpecularLighting")}} element, which lights a source graphic using the alpha channel as a bump map. The attribute is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length) or [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage). The `<coordinate>` is a length in the user coordinate system that is the given distance from the origin of the filter along the y-axis. If the `y` attribute is a percent value, the property value is a relative to the height of the filter region in user coordinate system units. The default value is `0`.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+```js
+const feSpecularLighting = document.querySelector("feSpecularLighting");
+const topPosition = feSpecularLighting.y;
+console.log(topPosition.baseVal.value); // the `y` value
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGFESpecularLightingElement.x")}}
+- CSS {{cssxref("blend-mode")}} data type
+- CSS {{cssxref("mix-blend-mode")}} property

files/en-us/web/css/@font-palette-values/index.md

@@ -27,7 +27,7 @@ The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined i
 - {{cssxref("@font-palette-values/base-palette", "base-palette")}}
   - : Specifies the name or index of the base-palette, created by the font-maker, to use.
 - {{cssxref("@font-palette-values/font-family", "font-family")}}
-  - : Specifies the name of the font family that this palette can be applied to.
+  - : Specifies the name of the font family that this palette can be applied to. A `font-family` name is required for the `@font-palette-values` rule to be valid.
 - {{cssxref("@font-palette-values/override-colors", "override-colors")}}
   - : Specifies the colors in the base palette to override.
 

files/en-us/web/css/@import/index.md

@@ -160,4 +160,4 @@ This is an example of creating two separate unnamed cascade layers and importing
 
 - {{CSSxRef("@media")}}
 - {{CSSxRef("@supports")}}
-- [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module
+- [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module

files/en-us/web/css/@import/layer_function/index.md

@@ -33,4 +33,4 @@ The `framework.themes.dark` is the layer into which the CSS file would be import
 ## See also
 
 - {{CSSxRef("@import")}}
-- [CSS cascade and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module
+- [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module

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

@@ -7,25 +7,25 @@ browser-compat: css.selectors.target
 
 {{CSSRef}}
 
-The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) represents a unique element (the _target element_) with an [`id`](/en-US/docs/Web/HTML/Global_attributes/id) matching the URL's fragment.
+The **`:target`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the _target element of the document_. When the document is loaded, the target element is derived using the document's [URL fragment identifier](/en-US/docs/Web/URI/Fragment#fragment).
 
 ```css
-/* Selects an element with an ID matching the current URL's fragment */
+/* Selects document's target element */
 :target {
   border: 2px solid black;
 }
 ```
 
-For example, the following URL has a fragment (denoted by the _#_ sign) that points to an element called `section2`:
+For example, the following URL has a fragment identifier (denoted by the _#_ sign) that marks the element with the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of `setup` as the document's target element:
 
 ```url
-http://www.example.com/index.html#section2
+http://www.example.com/help/#setup
 ```
 
 The following element would be selected by a `:target` selector when the current URL is equal to the above:
 
 ```html
-<section id="section2">Example</section>
+<section id="setup">Installation instructions</section>
 ```
 
 ## Syntax
@@ -36,6 +36,12 @@ The following element would be selected by a `:target` selector when the current
 }
 ```
 
+## Description
+
+When an HTML document loads, the browser sets its target element. The element is identified using the URL fragment identifier. Without the URL fragment identifier, the document has no target element. The `:target` pseudo-class allows styling the document's target element. The element could be focused, highlighted, animated, etc.
+
+The target element is set at document load and [`history.back()`](/en-US/docs/Web/API/History/back), [`history.forward()`](/en-US/docs/Web/API/History/forward), and [`history.go()`](/en-US/docs/Web/API/History/forward) method calls. But it is _not_ changed when [`history.pushState()`](/en-US/docs/Web/API/History/pushState) and [`history.replaceState()`](/en-US/docs/Web/API/History/replaceState) methods are called.
+
 > [!NOTE]
 > Due to [a possible bug in the CSS specification](https://discourse.wicg.io/t/target-css-does-not-work-because-shadowroot-does-not-set-a-target-element/2070/), `:target` doesn't work within a [web component](/en-US/docs/Web/API/Web_components) because the [shadow root](/en-US/docs/Web/API/ShadowRoot) doesn't pass the target element down to the shadow tree.
 
@@ -61,12 +67,12 @@ The `:target` pseudo-class can be used to highlight the portion of a page that h
 
 <h3>My Fun Article</h3>
 <p id="p1">
-  You can target <i>this paragraph</i> using a URL fragment. Click on the link
-  above to try out!
+  You can target <i>this paragraph</i> using a URL fragment. Click on the first
+  link above to try out!
 </p>
 <p id="p2">
-  This is <i>another paragraph</i>, also accessible from the links above. Isn't
-  that delightful?
+  This is <i>another paragraph</i>, also accessible from the second link above.
+  Isn't that delightful?
 </p>
 ```