Merge branch 'main' into cssmod-box-alignment

.github/workflows/pr-review-companion.yml

@@ -7,7 +7,7 @@ name: PR review companion
 
 on:
   workflow_run:
-    workflows: ["PR Test"]
+    workflows: ["PR Test", "PR Test - new CI"]
     types:
       - completed
 

.github/workflows/pr-test-new-ci.yml

@@ -0,0 +1,141 @@
+# This file tests more or less everything related to a pull request. All
+# in one big job. At the end, if all the testing passes, it proceeds
+# to upload all the files that were built to our Dev environment.
+# This way, if the tests passed, you'll be able to review the built
+# pages on a public URL.
+
+name: PR Test - new CI
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  tests:
+    if: github.repository == 'mdn/content' && startsWith(github.event.pull_request.title, '[new-ci]')
+    runs-on: ubuntu-latest
+    # Set the permissions to `read-all`, preventing the workflow from
+    # any accidental write access to the repository.
+    permissions: read-all
+    env:
+      BASE_SHA: ${{ github.event.pull_request.base.sha }}
+      HEAD_SHA: ${{ github.event.pull_request.head.sha }}
+      # This is the directory where the built files will be placed.
+      # It's also hardcoded in the `yarn build` command in package.json.
+      # If you change it here, you must also make the same change in
+      # package.json.
+      BUILD_OUT_ROOT: build
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Get changed files
+        run: |
+          # Use the GitHub API to get the list of changed files
+          # documentation: https://docs.github.com/rest/commits/commits#compare-two-commits
+          DIFF_DOCUMENTS=$(gh api repos/{owner}/{repo}/compare/${BASE_SHA}...${HEAD_SHA} \
+            --jq '.files | .[] | select(.status|IN("added", "modified", "renamed", "copied", "changed")) | .filename')
+
+          # filter out files that are not markdown files
+          GIT_DIFF_CONTENT=$(echo "${DIFF_DOCUMENTS}" | egrep -i "^files/.*\.(md)$" | xargs)
+          echo "GIT_DIFF_CONTENT=${GIT_DIFF_CONTENT}" >> $GITHUB_ENV
+
+          # filter out files that are not attachments
+          GIT_DIFF_FILES=$(echo "${DIFF_DOCUMENTS}" | egrep -i "^files/.*\.(png|jpeg|jpg|gif|svg|webp)$" | xargs)
+          echo "GIT_DIFF_FILES=${GIT_DIFF_FILES}" >> $GITHUB_ENV
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Setup Node.js environment
+        if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }}
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install all yarn packages
+        if: ${{ env.GIT_DIFF_CONTENT }} || ${{ env.GIT_DIFF_FILES }}
+        run: yarn --frozen-lockfile
+        env:
+          # https://github.com/microsoft/vscode-ripgrep#github-api-limit-note
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build changed content
+        id: build-content
+        if: ${{ env.GIT_DIFF_CONTENT }}
+        env:
+          CONTENT_ROOT: ${{ github.workspace }}/files
+
+          # This is so that if there's a single 'unsafe_html' flaw, it
+          # completely fails the build.
+          # But all other flaws should be 'warn', so that we can include
+          # information about the flaws when we analyze the built PR.
+          BUILD_FLAW_LEVELS: "unsafe_html: error, *:warn"
+
+          # Because we build these pages in a way that you get a toolbar,
+          # so the flaws can be displayed, but we don't want any of the
+          # other toolbar features like "Fix fixable flaws" or "Quick-edit"
+          # we set this to disable that stuff.
+          REACT_APP_CRUD_MODE_READONLY: true
+
+          BUILD_LIVE_SAMPLES_BASE_URL: https://live.mdnyalp.dev
+          BUILD_LEGACY_LIVE_SAMPLES_BASE_URL: https://live-samples.mdn.allizom.net
+
+          # In these builds, we never care for or need the ability to sign in.
+          # This environment variable will disable that functionality entirely.
+          REACT_APP_DISABLE_AUTH: true
+
+          # TODO: This should be implicit when `CI=true`
+          BUILD_NO_PROGRESSBAR: true
+
+          # Playground
+          REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev
+
+          # rari
+          LIVE_SAMPLES_BASE_URL: https://live.mdnyalp.dev
+          INTERACTIVE_EXAMPLES_BASE_URL: https://interactive-examples.mdn.allizom.net
+
+        run: |
+          # The reason this script isn't in `package.json` is because
+          # 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 $ARGS
+          yarn yari-render-html
+
+          echo "Disk usage size of the build"
+          du -sh $BUILD_OUT_ROOT
+
+          # Save the PR number into the build
+          echo ${{ github.event.number }} > ${BUILD_OUT_ROOT}/NR
+
+          # Download the raw diff blob and store that inside the build
+          # directory.
+          # The purpose of this is for the PR Review Companion to later
+          # be able to use this raw diff file for the benefit of analyzing.
+          wget https://github.com/${{ github.repository }}/compare/${BASE_SHA}...${HEAD_SHA}.diff -O ${BUILD_OUT_ROOT}/DIFF
+
+      - name: Merge static assets with built documents
+        if: ${{ env.GIT_DIFF_CONTENT }}
+        run: |
+          # Exclude the .map files, as they're used for debugging JS and CSS.
+          rsync -a --exclude "*.map" node_modules/@mdn/yari/client/build/ $BUILD_OUT_ROOT
+          # Show the final disk usage size of the build.
+          du -sh $BUILD_OUT_ROOT
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ env.GIT_DIFF_CONTENT }}
+        with:
+          name: build
+          path: ${{ env.BUILD_OUT_ROOT }}
+
+      - name: Check changed files
+        if: ${{ env.GIT_DIFF_FILES }}
+        run: |
+          echo $GIT_DIFF_FILES
+
+          export CONTENT_ROOT=$(pwd)/files
+          yarn filecheck $GIT_DIFF_FILES

.github/workflows/pr-test.yml

@@ -13,7 +13,7 @@ on:
 
 jobs:
   tests:
-    if: github.repository == 'mdn/content'
+    if: github.repository == 'mdn/content' && !startsWith(github.event.pull_request.title, '[new-ci]')
     runs-on: ubuntu-latest
     # Set the permissions to `read-all`, preventing the workflow from
     # any accidental write access to the repository.

files/en-us/web/api/htmlimageelement/alt/index.md

@@ -128,17 +128,17 @@ In other words, it should be the same text you would use in a textual button to
 For example, in the snippet of HTML below, a toolbar which uses icon images as link labels provides `alt` attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used.
 
 ```html
-<li class="toolbar" aria-role="toolbar">
-  <a href="songs.html" aria-role="button">
+<li class="toolbar" role="toolbar">
+  <a href="songs.html" role="button">
     <img src="songicon.svg" alt="Songs" />
   </a>
-  <a href="albums.html" aria-role="button">
+  <a href="albums.html" role="button">
     <img src="albumicon.svg" alt="Albums"
   /></a>
-  <a href="artists.html" aria-role="button">
+  <a href="artists.html" role="button">
     <img src="artisticon.svg" alt="Artists" />
   </a>
-  <a href="playlists.html" aria-role="button">
+  <a href="playlists.html" role="button">
     <img src="playlisticon.svg" alt="Playlists" />
   </a>
 </li>

files/en-us/web/api/htmlmediaelement/played/index.md

@@ -0,0 +1,45 @@
+---
+title: "HTMLMediaElement: played property"
+short-title: played
+slug: Web/API/HTMLMediaElement/played
+page-type: web-api-instance-property
+browser-compat: api.HTMLMediaElement.played
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`played`** read-only property of the {{domxref("HTMLMediaElement")}} interface indicates the time ranges the resource, an {{htmlelement("audio")}} or {{htmlelement("video")}} media file, has played. It returns a new {{domxref("TimeRanges")}} object that contains the ranges of the media source that the browser has played, if any, at the time the attribute is evaluated.
+
+## Value
+
+A {{domxref("TimeRanges")}} object; representing the time ranges that have been played.
+
+## Examples
+
+```js
+const media = document.querySelector("audio");
+const playedTimeRanges = media.played;
+let timePlayed = 0;
+// calculate the total time the media has played
+for (let i = 0; i < playedTimeRanges.length; i++) {
+  timePlayed += playedTimeRanges.end(i) - playedTimeRanges.start(i);
+}
+console.log(`The media played for a total of ${timePlayed} seconds.`);
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLMediaElement.seeked_event", "seeked")}} event
+- {{domxref("HTMLMediaElement.progress_event", "progress")}} event
+- {{domxref("HTMLMediaElement.seekable")}}
+- {{domxref("HTMLMediaElement.buffered")}}
+- {{domxref("HTMLVideoElement")}}
+- {{domxref("HTMLAudioElement")}}

files/en-us/web/api/htmlmediaelement/seeking/index.md

@@ -0,0 +1,37 @@
+---
+title: "HTMLMediaElement: seeking property"
+short-title: seeking
+slug: Web/API/HTMLMediaElement/seeking
+page-type: web-api-instance-property
+browser-compat: api.HTMLMediaElement.seeking
+---
+
+{{APIRef("HTML DOM")}}
+
+The **`seeking`** read-only property of the {{domxref("HTMLMediaElement")}} interface is a Boolean indicating whether the resource, the {{htmlelement("audio")}} or {{htmlelement("video")}}, is in the process of seeking to a new position.
+
+## Value
+
+A boolean value.
+
+## Examples
+
+```js
+const el = document.querySelector("video");
+console.log(el.seeking); // true or false
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("HTMLMediaElement.seeking_event", "seeking")}} event
+- {{domxref("HTMLMediaElement.seeked_event", "seeked")}} event
+- {{domxref("HTMLVideoElement")}}
+- {{domxref("HTMLAudioElement")}}

files/en-us/web/api/location/hash/index.md

@@ -18,12 +18,11 @@ A string.
 
 ## Examples
 
-```html
-<a id="myAnchor" href="/en-US/docs/Location.href#examples">Examples</a>
-<script>
-  const anchor = document.getElementById("myAnchor");
-  console.log(anchor.hash); // '#examples'
-</script>
+Assuming the user has navigated to `https://example.org#examples`, the following code will log `#examples`:
+
+```js
+const result = location.hash;
+console.log(result);
 ```
 
 ## Specifications

files/en-us/web/api/popstateevent/hasuavisualtransition/index.md

@@ -3,12 +3,10 @@ title: "PopStateEvent: hasUAVisualTransition property"
 short-title: hasUAVisualTransition
 slug: Web/API/PopStateEvent/hasUAVisualTransition
 page-type: web-api-instance-property
-status:
-  - experimental
 browser-compat: api.PopStateEvent.hasUAVisualTransition
 ---
 
-{{APIRef("History API")}}{{SeeCompatTable}}
+{{APIRef("History API")}}
 
 The **`hasUAVisualTransition`** read-only property of the {{domxref("PopStateEvent")}} interface returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise.
 

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

@@ -28,7 +28,7 @@ _This interface also inherits the properties of its parent, {{domxref("Event")}}
 
 - {{domxref("PopStateEvent.state")}} {{ReadOnlyInline}}
   - : Returns a copy of the information that was provided to `pushState()` or `replaceState()`.
-- {{domxref("PopStateEvent.hasUAVisualTransition", "hasUAVisualTransition")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+- {{domxref("PopStateEvent.hasUAVisualTransition", "hasUAVisualTransition")}} {{ReadOnlyInline}}
   - : Returns `true` if the user agent performed a visual transition for this navigation before dispatching this event, or `false` otherwise.
 
 ## Instance methods

files/en-us/web/api/svgangle/converttospecifiedunits/index.md

@@ -0,0 +1,71 @@
+---
+title: "SVGAngle: convertToSpecifiedUnits() method"
+short-title: convertToSpecifiedUnits()
+slug: Web/API/SVGAngle/convertToSpecifiedUnits
+page-type: web-api-instance-method
+browser-compat: api.SVGAngle.convertToSpecifiedUnits
+---
+
+{{APIRef("SVG")}}
+
+The `convertToSpecifiedUnits()` method of the {{domxref("SVGAngle")}} interface allows you to convert the angle's value to the specified unit type.
+
+This function will:
+
+- Set the {{domxref("SVGAngle.unitType", "unitType")}} property to the given unit type
+- Update the {{domxref("SVGAngle.valueInSpecifiedUnits", "valueInSpecifiedUnits")}} and {{domxref("SVGAngle.valueAsString", "valueAsString")}} properties so the angle value is represented in the given unit type
+
+## Syntax
+
+```js-nolint
+svgAngle.convertToSpecifiedUnits(unitType)
+```
+
+### Parameters
+
+- `unitType`
+  - : A constant representing the unit type to which the angle's value should be converted. This must be one of the constant values defined for the {{domxref("SVGAngle.unitType", "unitType")}} property, with the exception of `SVG_ANGLETYPE_UNKNOWN`.
+    - `SVGAngle.SVG_ANGLETYPE_DEG`: convert to degrees
+    - `SVGAngle.SVG_ANGLETYPE_RAD`: convert to radians
+    - `SVGAngle.SVG_ANGLETYPE_GRAD`: convert to gradians
+    - `SVGAngle.SVG_ANGLETYPE_UNSPECIFIED`: convert to a unitless number, interpreted as degrees
+
+### Return value
+
+None ({{jsxref('undefined')}}).
+
+## Examples
+
+### Converting an angle to degrees
+
+```js
+// Get an SVGAngle object
+const svg = document.querySelector("svg");
+const angle = svg.createSVGAngle();
+
+// Set the angle's value in radians (Math.PI / 2)
+angle.newValueSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_RAD, Math.PI / 2);
+
+// Retrieve the angle's value as a string
+console.log(angle.valueAsString); // Output: 1.5708rad
+console.log(angle.unitType); // Output: 3 (SVG_ANGLETYPE_RAD)
+
+// Convert the angle's value to degrees
+angle.convertToSpecifiedUnits(SVGAngle.SVG_ANGLETYPE_DEG);
+
+// Retrieve the angle's value as a string
+console.log(angle.valueAsString); // Output: 90deg
+console.log(angle.unitType); // Output: 2 (SVG_ANGLETYPE_DEG)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedAngle")}}