[pull] main from mdn:main

.github/workflows/auto-cleanup-bot.yml

@@ -44,7 +44,7 @@ jobs:
 
       - name: Create PR with only fixable issues
         if: success()
-        uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11
+        uses: peter-evans/create-pull-request@98357b18bf14b5342f975ff684046ec3b2a07725 # v8.0.0
         with:
           commit-message: "chore: auto-fix Markdownlint, Prettier, and front-matter issues"
           branch: markdownlint-auto-cleanup
@@ -61,7 +61,7 @@ jobs:
 
       - name: Create PR with notice on unfixed issues
         if: failure()
-        uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11
+        uses: peter-evans/create-pull-request@98357b18bf14b5342f975ff684046ec3b2a07725 # v8.0.0
         with:
           commit-message: "chore: auto-fix Markdownlint, Prettier, and front-matter issues"
           branch: markdownlint-auto-cleanup

.github/workflows/interfacedata-updater.yml

@@ -41,7 +41,7 @@ jobs:
         run: node scripts/update-interface-data.js ../webref/
 
       - name: Create pull request
-        uses: peter-evans/create-pull-request@22a9089034f40e5a961c8808d113e2c98fb63676 # v7.0.11
+        uses: peter-evans/create-pull-request@98357b18bf14b5342f975ff684046ec3b2a07725 # v8.0.0
         with:
           path: mdn-content
           token: ${{ secrets.AUTOMERGE_TOKEN }}

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

@@ -39,7 +39,7 @@ jobs:
       STATUS_TARGET: ${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}
     steps:
       - name: Download artifact
-        uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6.0.0
+        uses: actions/download-artifact@37930b1c2abaa49bbe596cd826c3c89aef350131 # v7.0.0
         with:
           pattern: build
           path: build

.github/workflows/pr-test.yml

@@ -157,7 +157,7 @@ jobs:
         if: steps.check.outputs.HAS_MD_FILES == 'true'
         run: du -sh $BUILD_OUT_ROOT
 
-      - uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+      - uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         if: steps.check.outputs.HAS_MD_FILES == 'true'
         with:
           name: build

files/en-us/web/css/guides/backgrounds_and_borders/using_multiple_backgrounds/index.md

@@ -42,6 +42,31 @@
 
 As you can see here, the Firefox logo (listed first within {{ cssxref("background-image") }}) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'. Each subsequent sub-property ({{ cssxref("background-repeat") }} and {{ cssxref("background-position") }}) applies to the corresponding backgrounds. So the first listed value for {{ cssxref("background-repeat") }} applies to the first (frontmost) background, and so forth.
 
+## Value repetition for multiple backgrounds
+
+When using multiple backgrounds, if a background-related property is given fewer comma-separated values than the number of background layers, the user agent repeats the list of values until there are enough values for all layers.
+
+For example:
+
+```css
+.element {
+  background-image: url(a.png), url(b.png), url(c.png);
+  background-position: left top;
+}
+```
+
+
+This is equivalent to:
+
+```css
+.element {
+  background-position:
+    left top,
+    left top,
+    left top;
+}
+```
+
 ## See also
 
 - [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module

files/en-us/web/css/reference/properties/background/index.md

@@ -6,7 +6,7 @@ browser-compat: css.properties.background
 sidebar: cssref
 ---
 
-The **`background`** [shorthand](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the `background` shorthand property value declaration are set to their default values.
+The **`background`** [shorthand](/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property sets all background style properties at once, such as color, image, origin, size, and repeat method.
 
 {{InteractiveExample("CSS Demo: background")}}
 
@@ -84,21 +84,6 @@ background: revert-layer;
 background: unset;
 ```
 
-The `background` property is specified as one or more background layers, separated by commas.
-
-The syntax of each layer is as follows:
-
-- Each layer may include zero or one occurrences of any of the following values:
-  - `<attachment>`
-  - `<bg-image>`
-  - `<bg-position>`
-  - `<bg-size>`
-  - `<repeat-style>`
-
-- The `<bg-size>` value may only be included immediately after `<bg-position>`, separated with the '/' character, like this: `center/80%`.
-- The `<visual-box>` value may be included zero, one, or two times. If included once, it sets both {{cssxref("background-origin")}} and {{cssxref("background-clip")}}. If it is included twice, the first occurrence sets {{cssxref("background-origin")}}, and the second sets {{cssxref("background-clip")}}.
-- The `<'background-color'>` value may only be included in the last layer specified.
-
 ### Values
 
 - `<attachment>`
@@ -110,20 +95,61 @@ The syntax of each layer is as follows:
 - `<bg-image>`
   - : See {{Cssxref("background-image")}}. Default: `none`.
 - `<bg-position>`
-  - : See {{cssxref("background-position")}}. Default: 0% 0%.
+  - : See {{cssxref("background-position")}}. Default: `0% 0%`.
 - `<repeat-style>`
   - : See {{cssxref("background-repeat")}}. Default: `repeat`.
 - `<bg-size>`
   - : See {{cssxref("background-size")}}. Default: `auto`.
 
-The following three lines of CSS are equivalent:
+## Description
+
+The `background` shorthand property enables you to declare all CSS background properties in a single declaration. The background lies underneath the content of an element. When you have multiple, comma-separated background values, each is a background layer that is painted on top of the previous layers.
+
+The `background` property is specified as one or more background layers, separated by commas. Each layer may include zero, one, or two `<visual-box>` components and zero or one `<attachment>`, `<bg-image>`, `<bg-position>`, `<bg-size>`, and `<repeat-style>` components. If two `<bg-position>`, `<bg-size>`, or `<repeat-style>` components are specified, the first value is the horizontal value and the second value is the vertical value. If only a single value is set, that value is applied to both dimensions.
+
+The `<'background-color'>` component may only be included in the last background layer specified.
+
+Component properties not set in the `background` shorthand property value declaration are set to their default values.
+
+### Component property order
+
+Because some of the component properties share value types, the order of those component properties within the shorthand is important.
+
+The `<bg-size>` value may only be included immediately after `<bg-position>`, separated with the `/` character. For example: `10px 10px / 80% 80%` means the background image is `80%` as tall and as wide as the element, and will be positioned `10px` from the top and `10px` from the left of the element's top-left corner. Within the `<bg-position>`, if both values are lengths, or one is a length and the other is `center`, the first value refers to the horizontal position and the second value refers to the vertical position.
+
+Each background layer can include zero, one, or two [`<visual-box>`](/en-US/docs/Web/CSS/Reference/Values/box-edge#visual-box) values. If only one value is included, it sets both {{cssxref("background-origin")}} and {{cssxref("background-clip")}}. If two values are present, the first occurrence specifies the `background-origin` and the second specifies the `background-clip` value. If no `<visual-box>` values are present, the `background-origin` defaults to `border-box` and the `background-clip` defaults to `padding-box`.
+
+While there is no order requirement for the other background properties, the following order is recommended for consistency and legibility; remember that none of the values are required:
+
+`<bg-image> <bg-position> / <bg-size> <repeat-style> <attachment> <bg-clip> <bg-origin> <'background-color'>`
+
+The following `background` explicitly sets all the default values in this order:
+
+```css
+background: none 0% 0% / auto auto repeat scroll border-box padding-box
+  transparent;
+```
+
+The following three lines of CSS are equivalent to the above, even if the order differs:
 
 ```css
 background: none;
 background: transparent;
 background: repeat scroll 0% 0% / auto padding-box border-box none transparent;
 ```
 
+### Image painting order
+
+If multiple comma-separated backgrounds are included, they create multiple background layers on top of one another. The first background in the list creates the top layer. If the top layer contains no transparent areas, this is the only layer that will be visible.
+
+The last layer is the bottom layer. The background color is always included in this layer.
+
+### Body background applied to the entire document
+
+If the document {{htmlelement("html")}} `:root` element's computed `background-image` value is `none` and its `background-color` is `transparent`, the browser will transfer the `background` styles set on the {{htmlelement("body")}} element onto the `:root` and treat the `<body>` as if `background: initial` were set. In other words, the `<html>` element gets all the `background` styles set on the `<body>` element, and the `<body>` element's background properties are set to their initial values.
+
+Because of this behavior, the specification authors recommend setting your document's background styles in your `body` style block rather than your `html` style block. However, it's important to note that using containment disables this behavior. When the {{cssxref("contain")}} property is set to anything other than `none` on either the `<html>` or `<body>` element, the `background` property and any longhand components do not propagate from the `<body>` element to the root `<html>` element.
+
 ## Formal definition
 
 {{cssinfo}}

files/en-us/web/html/reference/attributes/index.md

@@ -1432,6 +1432,26 @@ To be clear, the values `"true"` and `"false"` are not allowed on boolean attrib
 > [!WARNING]
 > The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies.
 
+> [!WARNING]
+> While not visible by calling the `Function.prototype.toString()` method on the handler, event handler attributes will implicitly wrap code inside of 2 `with` statements, and may produce unexpected results. For example:
+>
+> ```html
+> <div onclick="console.log(new URL(location))">Bad Example</div>
+> ```
+>
+> Essentially becomes:
+>
+> ```js example-bad
+> function onclick(event) {
+>   with (this.ownerDocument) {
+>     with (this) {
+>       console.log(new URL(location)); // 'URL' now resolves to document.URL instead of window.URL
+>       // TypeError: URL is not a constructor
+>     }
+>   }
+> }
+> ```
+
 In addition to the attributes listed in the table above, global [event handlers](/en-US/docs/Web/API/Document_Object_Model/Events#using_onevent_properties) — such as [`onclick`](/en-US/docs/Web/API/Element/click_event) — can also be specified as [content attributes](#content_versus_idl_attributes) on all elements.
 
 All event handler attributes accept a string. The string will be used to synthesize a [JavaScript function](/en-US/docs/Web/JavaScript/Reference/Functions) like `function name(/*args*/) {body}`, where `name` is the attribute's name, and `body` is the attribute's value. The handler receives the same parameters as its JavaScript event handler counterpart — most handlers receive only one `event` parameter, while `onerror` receives five: `event`, `source`, `lineno`, `colno`, `error`. This means you can, in general, use the `event` variable within the attribute.

package.json

@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@apideck/better-ajv-errors": "^0.3.6",
-    "@mdn/fred": "1.9.7",
+    "@mdn/fred": "2.0.0",
     "@octokit/rest": "^22.0.1",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -62,7 +62,7 @@
     "cspell": "9.4.0",
     "cspell-group-by-file-reporter": "^1.0.1",
     "file-type": "^21.3.0",
-    "fs-extra": "^11.3.2",
+    "fs-extra": "^11.3.3",
     "imagemin": "^9.0.1",
     "imagemin-gifsicle": "^7.0.0",
     "imagemin-mozjpeg": "^10.0.0",
@@ -72,7 +72,7 @@
     "lefthook": "^2.0.13",
     "markdownlint-cli2": "0.20.0",
     "markdownlint-rule-search-replace": "1.2.0",
-    "node-html-parser": "^7.0.1",
+    "node-html-parser": "^7.0.2",
     "parse-diff": "^0.11.1",
     "prettier": "3.7.4",
     "tempy": "^3.1.0",