From cfcc5e1f4e80fd7f0a2518185d5a9bf2a6184d86 Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 27 Jan 2025 16:01:23 +0000
Subject: [PATCH 01/21] Bump @mdn/yari from 4.2.1 to 4.2.2 (#37830)

---
 package.json |  2 +-
 yarn.lock    | 38 +++++++++++++++++++-------------------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 84a79a35d7de867..0ffa04523795185 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
   "dependencies": {
     "@apideck/better-ajv-errors": "^0.3.6",
     "@caporal/core": "^2.0.7",
-    "@mdn/yari": "4.2.1",
+    "@mdn/yari": "4.2.2",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
     "async": "^3.2.6",
diff --git a/yarn.lock b/yarn.lock
index 67a73d138655aea..14ae4992eac4c89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -954,10 +954,10 @@
   resolved "https://registry.yarnpkg.com/@mdn/bcd-utils-api/-/bcd-utils-api-0.0.7.tgz#555e80c33df520df068943e6b18ebc07f0e24d19"
   integrity sha512-IHkkypEjlIkBkx4mJ2//Xbzog9M/Lzne1Sl8db2cIHJ/5pe3NCqSLwSchmqzcUN+/WJr/U+V3tNAbWunk2xZcA==
 
-"@mdn/browser-compat-data@^5.6.32":
-  version "5.6.32"
-  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.6.32.tgz#1b19eea918a458d6da77527b82cb935fe1ac8498"
-  integrity sha512-z5ygobHDF+1XrBK5opSziQT6uY76tpEb6JStUpFppnwgwmBslfsSuZDzHTl2SzqYX69Ge3kM//zNO0u8btcdow==
+"@mdn/browser-compat-data@^5.6.33":
+  version "5.6.33"
+  resolved "https://registry.yarnpkg.com/@mdn/browser-compat-data/-/browser-compat-data-5.6.33.tgz#7936c50a4819fccad39ada5aff34418d1c8bbed0"
+  integrity sha512-56GEfTIgrPXAc9EL3MbJmv0QiIxZR/UzpOCzPtCGsW/IYr+3Bj1DbtBXnNMD2vOMqv1UVdCxy7LXxRcU+wxO5A==
 
 "@mdn/rari@^0.1.20":
   version "0.1.20"
@@ -970,10 +970,10 @@
     proxy-from-env "^1.1.0"
     tar "^7.4.3"
 
-"@mdn/yari@4.2.1":
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-4.2.1.tgz#f7ba8b8a35420464fa7fc9e0ff34aa4312fea84d"
-  integrity sha512-4WN4cdYmz1lpZj1KlIK7BlarZfOobh3CxgsSC7mMVsY++0k3spSIhjXd7q/BM171dv3eFnl+FLI9tEUpIII8qg==
+"@mdn/yari@4.2.2":
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/@mdn/yari/-/yari-4.2.2.tgz#21767ba322b214c4ef606e880270e18737c8b32e"
+  integrity sha512-BfPD0cE06mtIYR7Ll73wrfHXDWd6egA47MOOaBs57InDtacmY6VM4bAF0A02ewPW2Y8lRm1B2mAMlz7MRkBseA==
   dependencies:
     "@caporal/core" "^2.0.7"
     "@codemirror/lang-css" "^6.3.1"
@@ -986,7 +986,7 @@
     "@lit/react" "^1.0.7"
     "@lit/task" "^1.0.2"
     "@mdn/bcd-utils-api" "^0.0.7"
-    "@mdn/browser-compat-data" "^5.6.32"
+    "@mdn/browser-compat-data" "^5.6.33"
     "@mdn/rari" "^0.1.20"
     "@mozilla/glean" "5.0.3"
     "@sentry/node" "^8.51.0"
@@ -1037,7 +1037,7 @@
     mdn-data "^2.15.0"
     open "^10.1.0"
     open-editor "^5.1.0"
-    openai "^4.80.0"
+    openai "^4.80.1"
     pg "^8.13.1"
     pgvector "^0.2.0"
     prism-svelte "^0.5.0"
@@ -1064,7 +1064,7 @@
     unist-builder "^4.0.0"
     unist-util-visit "^5.0.0"
     web-features "^2.19.0"
-    web-specs "^3.35.0"
+    web-specs "^3.36.0"
 
 "@mozilla/glean@5.0.3":
   version "5.0.3"
@@ -6840,10 +6840,10 @@ open@^10.1.0:
     is-inside-container "^1.0.0"
     is-wsl "^3.1.0"
 
-openai@^4.80.0:
-  version "4.80.0"
-  resolved "https://registry.yarnpkg.com/openai/-/openai-4.80.0.tgz#693e5be69a21ed31658a5e0cd8132056cd7a6fb8"
-  integrity sha512-5TqdNQgjOMxo3CkCvtjzuSwuznO/o3q5aak0MTy6IjRvPtvVA1wAFGJU3eZT1JHzhs2wFb/xtDG0o6Y/2KGCfw==
+openai@^4.80.1:
+  version "4.80.1"
+  resolved "https://registry.yarnpkg.com/openai/-/openai-4.80.1.tgz#0869ae7d4efbe1794dbec9b648aa329d369cea36"
+  integrity sha512-+6+bbXFwbIE88foZsBEt36bPkgZPdyFN82clAXG61gnHb2gXdZApDyRrcAHqEtpYICywpqaNo57kOm9dtnb7Cw==
   dependencies:
     "@types/node" "^18.11.18"
     "@types/node-fetch" "^2.6.4"
@@ -8916,10 +8916,10 @@ web-namespaces@^2.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-2.0.1.tgz#1010ff7c650eccb2592cebeeaf9a1b253fd40692"
   integrity sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==
 
-web-specs@^3.35.0:
-  version "3.35.0"
-  resolved "https://registry.yarnpkg.com/web-specs/-/web-specs-3.35.0.tgz#27de67081d39d706ec44a03775dbc9166a38e297"
-  integrity sha512-C0Fs9B39exvcWvkf46jBumUoC4Ki4JMkcDh3bebTNKKksmo0j0tJ1V0Indkm4JH+Lc2PD+0ROrV2TMoYYHpjvA==
+web-specs@^3.36.0:
+  version "3.36.0"
+  resolved "https://registry.yarnpkg.com/web-specs/-/web-specs-3.36.0.tgz#13cfe2ee9077755084f4e421cd0db4b03e386b15"
+  integrity sha512-aMv2R+GCDm+pLUkSR4aE2S6NbtSY9N4hdbg/xPQ0tVTN5wa7x6b+kGCbr2ycvjVgN/fKOxGle93+yUOtrYXdCg==
 
 web-streams-polyfill@4.0.0-beta.3:
   version "4.0.0-beta.3"

From 76b213a01fbdea31bd7674810fa626f278a7dfcc Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Mon, 27 Jan 2025 16:17:23 +0000
Subject: [PATCH 02/21] Bump lint-staged from 15.4.2 to 15.4.3 (#37828)

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 0ffa04523795185..af899dae1b23410 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "gray-matter": "^4.0.3",
     "husky": "9.1.7",
     "js-yaml": "^4.1.0",
-    "lint-staged": "15.4.2",
+    "lint-staged": "15.4.3",
     "markdownlint-cli2": "0.17.2",
     "markdownlint-rule-search-replace": "1.2.0",
     "prettier": "3.4.2"
diff --git a/yarn.lock b/yarn.lock
index 14ae4992eac4c89..2f774f7230f8ca7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5612,10 +5612,10 @@ linkify-it@^5.0.0:
   dependencies:
     uc.micro "^2.0.0"
 
-lint-staged@15.4.2:
-  version "15.4.2"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.4.2.tgz#f986bcb6b03822a996c600447c692c69640c7607"
-  integrity sha512-gCqzB/Li281uZJgReNci+oXXqUEdrFAQAzTE/LwoxxiEuP41vozNe4BATS+4ehdqkWn+Z6bGc3EDcBja3npBVw==
+lint-staged@15.4.3:
+  version "15.4.3"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-15.4.3.tgz#e73587cc857f580c99f907abefe9ac8d8d5e74c1"
+  integrity sha512-FoH1vOeouNh1pw+90S+cnuoFwRfUD9ijY2GKy5h7HS3OR7JVir2N2xrsa0+Twc1B7cW72L+88geG5cW4wIhn7g==
   dependencies:
     chalk "^5.4.1"
     commander "^13.1.0"

From b23adcb8016f0b5d7d5287960baf8281268d4ca0 Mon Sep 17 00:00:00 2001
From: Chris Mills <chrisdavidmills@gmail.com>
Date: Mon, 27 Jan 2025 16:54:40 +0000
Subject: [PATCH 03/21] Write new basic forms article for learn (#37776)

* Write new basic forms article for learn

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* improve consistency, fix typos

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* Update files/en-us/learn_web_development/core/structuring_content/html_forms/index.md

Co-authored-by: Brian Smith <brian@smith.berlin>

* tweak to validation description

---------

Co-authored-by: Brian Smith <brian@smith.berlin>
---
 .../structuring_content/html_forms/index.md   | 444 +++++++++++++++++-
 1 file changed, 420 insertions(+), 24 deletions(-)

diff --git a/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md b/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md
index fe43fda5e577403..fb5a234b15b1478 100644
--- a/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/html_forms/index.md
@@ -8,10 +8,9 @@ page-type: tutorial-chapter
 
 {{PreviousMenuNext("Learn_web_development/Core/Structuring_content/Planet_data_table", "Learn_web_development/Core/Structuring_content/Debugging_HTML", "Learn_web_development/Core/Structuring_content")}}
 
-> [!NOTE]
-> The content in this article is currently incomplete, sorry about that! We are working hard to improve the MDN Learn Web Development section, and we will have places marked as incomplete ("TODO") finished soon.
+HTML forms and buttons are powerful tools for interacting with a website's users. Most commonly, they provide users with controls to manipulate a user interface (UI) or input data when required.
 
-HTML forms and buttons are powerful tools for interacting with users — most commonly they are used for collecting data from users or allowing them to control a user interface. In this article we provide an introduction to the basics of forms and buttons.
+In this article, we provide an introduction to the basics of forms and buttons. There is a lot more to know — a lot of input types and form features are not mentioned — but this article will give you a solid foundation for most cases. You can learn the advanced or specialized uses on a need-to-know basis as part of the constant learning you'll do throughout your career.
 
 <table>
   <tbody>
@@ -34,54 +33,451 @@ HTML forms and buttons are powerful tools for interacting with users — most co
       <td>
         <ul>
           <li>An appreciation that forms and buttons are the main tools for users to interact with a website, along with links.</li>
-          <li>The common types of <code>&lt;button&gt;</code>: <code>button</code>, <code>submit</code>, and <code>reset</code>.</li>
-          <li>Common <code>&lt;input&gt;</code> types: <code>text</code>, <code>number</code>, <code>file</code>, <code>checkbox</code>, <code>radio</code>, <code>password</code>, and <code>search</code>.</li>
+          <li>Different button types.</li>
+          <li>Common <code>&lt;input&gt;</code> types.</li>
           <li>Common attributes such as <code>name</code> and <code>value</code>.</li>
-          <li>Making forms accessible — Correct semantics, the <code>&lt;label&gt;</code> element, and the <code>for</code> attribute.</li>
-          <li>Other control types: <code>&lt;textarea&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;option&gt;</code>.</li>
-          <li>Client-side validation basics — <code>required</code>, <code>min</code>, <code>max</code>, <code>minlength</code>, <code>maxlength</code>, and <code>pattern</code>.</li>
           <li>The <code>&lt;form&gt;</code> element, and the basics of form submission.</li>
+          <li>Making forms accessible with labels and correct semantics.</li>
+          <li>Other control types: <code>&lt;textarea&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;option&gt;</code>.</li>
+          <li>Client-side validation basics.</li>
         </ul>
       </td>
     </tr>
   </tbody>
 </table>
 
-> [!NOTE]
-> There are a lot of input types and form features not explicitly mentioned here; the purpose is to get a good general introduction to buttons and form elements, and learn the most common cases. The advanced/specialized cases can be studied on a need-to-know basis, as part of a web developer's constant learning throughout their career.
+## Interacting with users
+
+So far in the course, you have seen a couple of ways in which users can interact with the web:
+
+- [Links](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links) can be used to navigate to different sections of content, either on the same page or a different page.
+- [`<video>` and `<audio>`](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio) elements generally feature controls such as play/pause, fast forward, rewind, etc., which allow users to consume media content as they wish.
+
+However, these features tend to facilitate one-way interactions, with users passively consuming content. This is fine, but the web is a two-way experience. Website users set preferences for how they want to experience content and services. They order taxis and request call backs. They provide feedback and make complaints. They buy products and get them delivered to their homes.
+
+To provide this two-way experience, you need to use buttons and forms.
+
+Buttons are usually created using HTML {{htmlelement("button")}} elements (they are also sometimes created using {{htmlelement("input")}} elements with their `type` attributes set to a value like `button` or `submit`). These push buttons are general purpose — you can wire them up to trigger any functionality you want, limited only by your imagination and coding skills.
+
+Forms are created using elements such as {{htmlelement("form")}}, {{htmlelement("label")}}, {{htmlelement("input")}}, and {{htmlelement("select")}}. Form elements can be used to create more complex controls than simple buttons allow — for example a drop-down menu containing multiple options that allow you choose between different themes for a user interface element.
+
+However, crucially, they can also be used to create forms for users to fill in when they need to submit information to a website server. Think about ecommerce sites — when you want to search for a product to buy, you use a form to enter search terms. When you want to pay for some items and finalize delivery, you use a form to enter your postal address, and another form to enter your credit card details.
+
+We'll be concentrating mainly on this — more traditional — use of form elements in this article. Note that buttons are also commonly used inside forms, to submit the entered data to the server.
+
+With this important theory out of the way, let's move on to explore the code and see how buttons and forms are implemented.
 
 ## Buttons
 
-TODO
+As hinted at above, buttons have a couple of main uses on the web. First of all, they are used to trigger functionality, which is useful when creating UI controls. The simplest button is implemented using the following code:
+
+```html live-sample___basic-button
+<button>Press me</button>
+```
+
+This is rendered as follows:
+
+{{EmbedLiveSample("basic-button", "100%", "60")}}
+
+The text appearing in-between the `<button></button>` tags is rendered inside the button, and it is given some basic styling by the browser so it will look and behave like a button by default. So far, so good. However, there is an issue here — our lonesome button won't do anything useful on its own. To make it do something useful, you'll need to put it inside a form (which we'll cover later on), or add some JavaScript.
+
+For example, if you applied the following JavaScript to the above button:
+
+```html hidden live-sample___basic-button-with-js
+<button>Press me</button>
+```
+
+```js live-sample___basic-button-with-js
+const btn = document.querySelector("button");
+btn.addEventListener("click", () => {
+  btn.textContent = "YOU CLICKED ME!! ❤️";
+  setTimeout(() => {
+    btn.textContent = "Press me";
+  }, 1000);
+});
+```
+
+It would give you the following output — try clicking it:
+
+{{EmbedLiveSample("basic-button-with-js", "100%", "60")}}
+
+You are not expected to understand how the JavaScript works for now. You'll learn more about it later on in the course.
+
+In the next section, you'll see a demonstration of the second main use of buttons — submitting forms.
+
+## The anatomy of a form
+
+A basic form contains three things:
+
+- A {{htmlelement("form")}} element, which wraps all of the other form content. Any form controls inside the `<form></form>` tags are part of the same form, and their data is included when the form is submitted.
+- One or more pairs each consisting of a {{htmlelement("label")}} element and a form control element (usually an {{htmlelement("input")}} element, but there are other types as well, for example {{htmlelement("select")}}):
+  - The form control element allows the user to choose or enter some data, which will be sent to the server when the form is submitted.
+  - The `<label>` element provides an identifying label associated with the form control describing the data that should be entered into it.
+- A {{htmlelement("button")}} element, used to submit the form.
+
+Let's look at a basic example that includes the above three items. This form could be used to ask for a user's name and email, to sign them up for a newsletter (don't worry — it isn't connected to any server, so currently won't do anything).
+
+```html live-sample___form-anatomy
+<form action="./submit_page" method="get">
+  <h2>Subscribe to our newsletter</h2>
+  <p>
+    <label for="name">Name (required):</label>
+    <input type="text" name="name" id="name" required />
+  </p>
+  <p>
+    <label for="email">Email (required):</label>
+    <input type="email" name="email" id="email" required />
+  </p>
+  <p>
+    <button>Sign me up!</button>
+  </p>
+</form>
+```
+
+This is rendered as follows:
+
+{{EmbedLiveSample("form-anatomy", "100%", "200")}}
+
+Because of the way MDN works, you can enter text into the input fields, but you won't see the form submit properly when you press the button. To follow along with the next sections, copy the HTML code above into a new HTML file using your [code editor](/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors) and open it in a new browser tab.
+
+### The `<form>` element
+
+As we said earlier, the {{htmlelement("form")}} element acts as the outer wrapper for the form, grouping together all the form controls inside it. When the `<button>` is pressed, all the data represented by the form controls will be submitted to the server. The `<form>` element can take many attributes, but the two most important ones, which we've included here, are as follows:
+
+- `action`: Contains a path to the page that we want to send the submitted form data to, to be processed. Later on, after you submit the form, you'll see `/submit_page` included in the URL. You'll also get a {{HTTPStatus("404")}} error response because the page doesn't actually exist, but that's fine for now.
+- `method`: Specifies the data transmission [method](/en-US/docs/Web/HTTP/Methods) you want to use for sending the form data to the server. Don't worry about this too much for now; the `get` value causes the data to be sent as parameters attached to the end of the URL.
+
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> Go to the example in the separate tab, try entering a name of "Bob" and an email address of "bob@bob.com".
+>
+> The above two attributes cause the form data to be submitted in a URL along the following lines:
+>
+> `/some/url/submit_page?name=Bob&email=bob%40bob.com`
+
+#### Structuring forms
+
+You can include any HTML elements you like inside a `<form>` element to structure the form elements themselves and provide containers to target with CSS for styling, etc.
+
+In our example, we've included a [heading element](/en-US/docs/Web/HTML/Element/Heading_Elements) (`<h2>`) to describe the purpose of the form.
+
+We've also put each input/label pair and the submit button inside a separate {{htmlelement("p")}}, so that each will appear on a separate line. These elements are all inline by default, meaning that if we didn't do this, they would all sit on the same line.
+
+This is a common pattern for form structuring. Some people use `<p>` elements to separate out their form elements, some use {{htmlelement("div")}}, {{htmlelement("section")}}, or even {{htmlelement("li")}} elements. It doesn't matter a great deal, as long as the elements used make semantic sense. For example, it makes sense to divide form element groups up into separate paragraphs or sections of content, or even items in a list. It would make less sense to represent them as [blockquotes](/en-US/docs/Web/HTML/Element/blockquote), [asides](/en-US/docs/Web/HTML/Element/aside), or [addresses](/en-US/docs/Web/HTML/Element/address).
+
+There is a specialized element for grouping form elements together called {{htmlelement("fieldset")}}. This is useful in certain circumstances, such as in complex forms, and when grouping together multiple checkboxes and radio buttons. We'll look at a couple of `<fieldset>` examples later on.
+
+### `<input>` elements
+
+The {{htmlelement("input")}} elements represent the different data items entered into the form. Let's study one of the examples from our basic form:
+
+```html
+<input type="text" name="name" id="name" required />
+```
+
+The attributes are as follows:
+
+- `type`: Specifies the type of form control to create. There are many different types of form controls, from simple text fields of different types to radio buttons, checkboxes, and more. Type `text` renders a basic text field that can accept any value.
+- `name`: Specifies a name for the data item. When the form is submitted, the data is sent in name/value pairs. In each case, the name is equal to this `name` attribute value, and the value is equal to the text entered in the text field.
+- `id`: Specifies an ID that can be used to identify the element. In this case, it is used to associate the form control with its `<label>`.
+- `required`: Specifies that a value has to be entered into the form element before the form can be submitted. This should only be set on inputs that you require, not on optional fields.
+
+You should be aware that some input types usually don't get their values from text entered into a field. For example, [`<input type="color">`](/en-US/docs/Web/HTML/Element/input/color) renders a color picker widget that you choose a color from, whereas [`<input type="radio">`](/en-US/docs/Web/HTML/Element/input/radio) renders a radio button control that can be selected, or not.
+
+In the case of radio buttons, you generally need to provide the value that would be submitted if it is selected inside a specific `value` attribute. Note that you _can_ specify a `value` attribute on input types like `text` and `color` — the effect is that the value is pre-filled into the form field when it is first rendered.
+
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> 1. Again, go to the example you loaded in a separate tab, and try submitting the form with no value entered in either field. You'll see an error message pop up next to the "Name" field saying something like "Please fill in this field" (it will vary across different browsers). This is the `required` attribute — and the browser's default client-side form validation — in action.
+> 2. Now try submitting the form with a valid name entered in the first field, but a value that is not a valid email address in the second field (something like "aaaa" will do). This time you'll see an error message pop up next to the "Email" field saying something like "Please enter an email address".
+> 3. For this exercise, you'll need to edit the form code. You can do this by opening the local example you created in your text editor, editing it there, and saving it. Try editing the form to include `value="Bob"` on the first input. When you reload the code, you'll see that the first field has a value of "Bob" entered into it by default.
+
+#### Specialized text field inputs
+
+The second exercise above raises an interesting point. The second input field specifically expects an email address, and validates entered values as such. If you look at the form code again, you'll see why — the second `<input>` has a `type` of `email`. There are several specialized text field input types designed to handle specific types of data — [`<input type="number">`](/en-US/docs/Web/HTML/Element/input/number), [`<input type="password">`](/en-US/docs/Web/HTML/Element/input/password), [`<input type="tel">`](/en-US/docs/Web/HTML/Element/input/tel), etc.
+
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> Follow some of the links above to find out what these input types are used for. Have a look around our [`<input>`](/en-US/docs/Web/HTML/Element/input) reference and see if you can find any more specialized text field input types.
+
+### `<label>` elements
+
+As we said above, {{htmlelement("label")}} elements provide identifying labels associated with form controls that describe the data that should be entered into them. You can put whatever text content you like in `<label>` elements, but they should accurately describe what data the associated form control expects. The association is created by giving the form control an `id` attribute, then giving the `<label>` element a `for` attribute with the same value as the control's `id`.
+
+For example:
+
+```html
+<label for="name">Name (required):</label>
+<input type="text" name="name" id="name" required />
+```
+
+`<label>` elements are important for several reasons, most notably that:
+
+- When visually impaired users use a screen reader to help them read and interact with web page content, the screen reader will read out the associated label text when each control is encountered. This makes it easier for the users to understand what content should be entered into each control.
+- They enable you to focus the form elements by clicking on their label text as well as the controls. This is especially useful for mobile phone users, where it can be difficult to accurately select a form element with your finger on a touch screen. Making the **hit area** larger is useful in such circumstances.
+
+#### Explicit and implicit form labels
+
+The form label style you saw above is called an **explicit form label** — the association between control and label is explicitly made via the `id` and `for` attributes. You can also implement an **implicit form label** by nesting the control inside the label, like this:
 
-## Common input types
+```html
+<label>
+  Name (required):
+  <input type="text" name="name" required />
+</label>
+```
 
-TODO
+The nesting makes an implicit association between control and label, and you no longer need the `id` and `for` attributes.
 
-## Accessible forms
+Either approach is OK, but we'd recommend using the explicit labeling approach. This is because the explicit association is usually easier to identify and understand, especially as your HTML code gets more complex. In addition, screen readers (and other assistive technologies) don't always handle implicit labels correctly.
 
-- Going back to the argument for semantic HTML (see also 2.2 Good document structure), you should understand why it is important to use the right element for the right job. For example, use a `<button>` to submit your form, and not a `<div>` programmed to behave like a `<button>`.
-- Understand the features programmed into `<button>`s and form elements by the browser by default, and how important they are. Examples include keyboard accessibility, focus outlines, and semantic meaning for AT to identify the elements and communicate their meaning.
+You can read more about form labeling best practices in [HTML Inputs and Labels: A Love Story](https://css-tricks.com/html-inputs-and-labels-a-love-story/), csstricks.com (2021).
+
+### The `<button>` element
+
+When a {{htmlelement("button")}} element is included inside a `<form>` element, its default behavior is that it will submit the form, provided there is no invalid data present causing submission to be blocked by client-side form validation. You've already seen this behavior when playing with our basic form example above.
+
+There are other button behaviors that can be specified via the `<button>` element's `type` attribute:
+
+- `<button type="submit">` explicitly declares that a button should behave like a submit button. You don't ever really need to declare this, unless for some reason you are including other buttons inside your `<form>`, and you want to make it clear which one the submit button is. This will be very rare.
+- `<button type="reset">` creates a _reset button_ — this immediately deletes all data out of the form, resetting it to its initial state. **Don't use reset buttons** — they used to be popular in the early days of the web, but they are usually more annoying than they are helpful. Most people have experienced filling out a long form only to click the reset button by accident instead of the submit button, meaning they have to start again.
+- `<button type="button">` creates a button with the same behavior as buttons specified outside of `<form>` elements. As we saw earlier, they do absolutely nothing by default, and JavaScript is needed to give them functionality.
+
+> [!NOTE]
+> You can also create the above button types using an `<input>` element with the same `type` values specified — [`<input type="submit">`](/en-US/docs/Web/HTML/Element/input/submit), [`<input type="reset">`](/en-US/docs/Web/HTML/Element/input/reset), and [`<input type="button">`](/en-US/docs/Web/HTML/Element/input/button). However, these have many disadvantages compared to their `<button>` counterparts. You should use `<button>` instead.
+
+## An aside on accessibility
+
+We've already talked about the importance of form labels for accessibility, but we also wanted to include some commentary on the general importance of using the correct semantic elements to create forms (for example, use a `<button>` to submit your form, and not a `<div>` programmed to behave like a `<button>`.) It is perfectly possible to use a combination of CSS and JavaScript to make pretty much any HTML element look and behave like a form element. Developers usually do this for design reasons — some form controls are hard to style.
+
+However, when you do this, you are making life harder for yourself and your users. The browser provides several `<button>` and form control features by default, with no JavaScript or other extra code required, to make forms more usable for all users.
+
+For example:
+
+- Semantic elements are understood by assistive technology such as screen readers, which communicate their meaning to users who cannot see them.
+- Form controls and buttons are keyboard-accessible by default. In the previous example, try moving forward and backward between the form elements using <kbd>Tab</kbd> and <kbd>Shift</kbd> + <kbd>Tab</kbd> (called "tabbing").
+- Notice also how tabbing between the form elements causes the focused element to be highlighted using a blue outline (called the **focus outline**). This is an important feature for keyboard users to know where they currently are in the form.
+
+If you don't use the correct semantic elements to implement your forms, you'll have re-implement all of this functionality, otherwise your form elements will not behave as users expect, and therefore seem broken. It all adds up.
 
 ## Other control types
 
-TODO
+There are many other control types you can use to collect data in a form. Let's look at a slightly more complex example, and then we'll explore and explain it.
+
+> [!NOTE]
+> In this example, we are assuming the user is already registered and signed in, hence not needing to collect details such as name and email.
+
+```html live-sample___form-other-controls
+<form action="./payment_page" method="get">
+  <h2>Register for the meetup</h2>
+  <p>
+    <fieldset>
+      <legend>Choose hotel room type (required):</legend>
+      <div>
+        <input type="radio" id="hotelChoice1" name="hotel" value="economy" checked />
+        <label for="hotelChoice1">Economy (+$0)</label>
+
+        <input type="radio" id="hotelChoice2" name="hotel" value="superior" />
+        <label for="hotelChoice2">Superior (+$50)</label>
 
-## Client-side form validation
+        <input type="radio" id="hotelChoice3" name="hotel" value="penthouse" disabled />
+        <label for="hotelChoice3">Penthouse (+$150)</label>
+      </div>
+    </fieldset>
+  </p>
+  <p>
+    <fieldset>
+      <legend>Choose classes to attend:</legend>
+      <div>
+        <input type="checkbox" id="yoga" name="yoga" />
+        <label for="yoga">Yoga (+$10)</label>
 
-Client-side form validation is really a usability enhancement, to be used alongside server-side form validation. It is not a substitute for it.
+        <input type="checkbox" id="coffee" name="coffee" />
+        <label for="coffee">Coffee roasting (+$20)</label>
+
+        <input type="checkbox" id="balloon" name="balloon" />
+        <label for="balloon">Balloon animal art (+$5)</label>
+      </div>
+    </fieldset>
+  </p>
+  <p>
+    <label for="transport">How are you getting here:</label>
+    <select name="transport" id="transport">
+      <option value="">--Please choose an option--</option>
+      <option value="plane">Plane</option>
+      <option value="bike">Bike</option>
+      <option value="walk">Walk</option>
+      <option value="bus">Bus</option>
+      <option value="train">Train</option>
+      <option value="jetpack">Jetpack</option>
+    </select>
+  </p>
+  <p>
+    <label for="comments">Any other comments:</label>
+    <textarea id="comments" name="comments" rows="5" cols="33"></textarea>
+  </p>
+  <p>
+    <button>Continue to payment</button>
+  </p>
+</form>
+```
+
+This is rendered as follows:
+
+{{EmbedLiveSample("form-other-controls", "100%", "500")}}
+
+We'd recommend that you open this example in a separate browser tab as you work through the next few sections, in which we look at each control type in turn. To achieve this, copy the code into an HTML file using your code editor, and open it in a browser tab.
+
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> Before moving on, play with the different form controls, select some values, and try submitting the form.
+
+### Radio buttons
+
+The "Choose hotel room type" buttons are implemented using [`<input type="radio">`](/en-US/docs/Web/HTML/Element/input/radio) controls. These render as a set of push button controls where only one of the set can be selected at any one time — you can't select more than one at once. They are named after the buttons found on old-fashioned radios, where you press one button and the previously-selected one pops out again.
+
+Our example code look looks like this:
+
+```html-nolint
+<fieldset>
+  <legend>Choose hotel room type (required):</legend>
+  <div>
+    <input type="radio" id="hotelChoice1" name="hotel" value="economy" checked />
+    <label for="hotelChoice1">Economy (+$0)</label>
+
+    <input type="radio" id="hotelChoice2" name="hotel" value="superior" />
+    <label for="hotelChoice2">Superior (+$50)</label>
+
+    <input type="radio" id="hotelChoice3" name="hotel" value="penthouse" disabled />
+    <label for="hotelChoice3">Penthouse (+$150)</label>
+  </div>
+</fieldset>
+```
+
+`radio` input types mostly work the same as `text` input types, but with a few differences:
+
+- The `name` attributes for each set of radio buttons have to contain the same value, to associate them together as one set. If they contain different values, they will effectively be separate sets, with different values on submission.
+- You have to include a `value` attribute containing the value to submit for each radio button. The submitted value will be a name/value pair, but the name will always be the same, for example `hotel=economy` or `hotel=superior`.
+- The `<label>` for each radio button should describe that particular value choice, rather than the overall value you are selecting. The preferred way to provide a description of the overall value choice is to wrap them in a {{htmlelement("fieldset")}}, which takes a {{htmlelement("legend")}} element as a child that contains the description.
+
+> [!NOTE]
+> Besides structuring and labeling forms, fieldsets have other uses, such as [disabling](#disabling_form_controls) an entire set of controls as a single unit.
 
-## The `<form>` element
+It's also worth noting that we've applied the `checked` attribute to the first radio button — this causes it be selected when the page first loads. This is how we justify marking the hotel room type value as "required" — one option will always be selected, and you can't deselect a radio button without selecting another one.
 
-TODO
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> Try removing the `checked` attribute from the first radio button, save, then reload, to see the effect it has. Put it back before you move on.
 
-## Test your skills!
+#### Disabling form controls
 
-TODO
+In the radio button example, you'll notice that the third radio button has the `disabled` attribute set on it. This causes the rendered control to be grayed out and unselectable. This is useful in many situations where an option is normally available, just not right now. For example, a product might be out of stock, or as in our example's case, penthouse suites are all booked up!
+
+You can set the `disabled` attribute on any form control, including `<button>` elements. `<fieldset>` elements can also accept the `disabled` attribute — this causes every form control inside the fieldset to be disabled.
+
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> Try setting the `disabled` attribute on the two `<fieldset>` elements, save, then reload, to see the effect it has. Remove them again before moving on.
+
+### Checkboxes
+
+Our "classes to attend" selectors are implemented using [`<input type="checkbox">`](/en-US/docs/Web/HTML/Element/input/checkbox) controls. these render as a set of on/off state checkboxes. Unlike radio buttons, you can select more than one at once.
+
+```html-nolint
+<fieldset>
+  <legend>Choose classes to attend:</legend>
+  <div>
+    <input type="checkbox" id="yoga" name="yoga" />
+    <label for="yoga">Yoga (+$10)</label>
+
+    <input type="checkbox" id="coffee" name="coffee" />
+    <label for="coffee">Coffee roasting (+$20)</label>
+
+    <input type="checkbox" id="balloon" name="balloon" />
+    <label for="balloon">Balloon animal art (+$5)</label>
+  </div>
+</fieldset>
+```
+
+As you can see from the code snippets, radio buttons and checkboxes are implemented in a very similar way (they can also take `checked` attributes to render them pre-selected when the page loads). They also behave in a fairly similar fashion, except that radio buttons allow you to choose zero or one items out of many, and checkboxes allow you to choose zero or more items out of many.
+
+The main difference (apart from the `type` value!) is that each checkbox has a different `name` value, and they generally aren't given `value` attributes. Behavior-wise, this means they represent different data values, whereas a radio button set only represents one. On submission, each value is submitted with a value of `on` if the checkbox was checked — `yoga=on`, `balloon=on`, etc.
+
+> [!NOTE]
+> It is possible to change the value submitted for a checkbox by giving it a `value` attribute, for example: `<input type="checkbox" id="yoga" name="yoga" value="yes" />` would result in `yoga=yes` being submitted if checked. However, there is not much point doing this. A checkbox is either submitted with a single value if checked, or it isn't submitted at all. It doesn't really matter what value is sent to the server.
+
+### Drop-down menus
+
+Drop-down menus, for example the "How are you getting here" selection control in our example, are implemented not with an `<input>` type, but with the {{htmlelement("select")}} and {{htmlelement("option")}} elements:
+
+```html-nolint
+<label for="transport">How are you getting here:</label>
+<select name="transport" id="transport">
+  <option value="">--Please choose an option--</option>
+  <option value="plane">Plane</option>
+  <option value="bike">Bike</option>
+  <option value="walk">Walk</option>
+  <option value="bus">Bus</option>
+  <option value="train">Train</option>
+  <option value="jetpack">Jetpack</option>
+</select>
+```
+
+The `<select>` element wraps all the different value choices. It is where you set the `id` attribute that associates the control with its label, and the `name` attribute that sets the name of the data item to be submitted.
+
+Each possible value for the data item is represented by an `<option>` element, nested inside the `<select>` element. Each `<option>` element can take a `value` attribute, which specifies the value to be submitted if that option is chosen from the drop-down list. If you don't specify a `value`, the text inside the `<option></option>` tags is used as the value.
+
+> [!NOTE]
+> If you want to have a specific option selected on page load, you can add a `selected` attribute to the relevant `<option>` element.
+
+### Multi-line text input fields
+
+Multi-line text input fields are created using {{htmlelement("textarea")}} elements:
+
+```html-nolint
+<label for="comments">Any other comments:</label>
+<textarea id="comments" name="comments" rows="5" cols="33"></textarea>
+```
+
+They behave in the same way as `<input type="text">` elements, except that they allow multiple lines of text to be entered. The `rows` attribute specifies the number of rows tall the text area will be by default, while the `cols` attribute specifies the number of columns wide the text area will be by default. If they are not specified, the values used are `cols="20"` and `rows="2"`.
+
+> [!CALLOUT]
+>
+> **Try it out**
+>
+> Most browsers render text areas with a drag handle in one corner, which can be used to resize it. Try using this to resize the text area in our demo.
+
+## Form validation
+
+Earlier on, we looked at some of the basic client-side form validation provided by the browser. The `required` attribute is used to specify that a field must be filled out before the form can be submitted; it also checks the correct value type is entered for specific value types like email addresses, URLs, numbers, etc. Validation is important for two main reasons:
+
+- Making sure that data is submitted in the correct format so that it doesn't cause errors in your application.
+- Making sure data does not cause security problems. Bad people know how to submit data formatted specifically so that, on insecure applications, it can execute commands to delete databases or take control of a system.
+
+Form validation is a huge topic that is beyond scope for this article, so we will leave it here for now. Just bear in mind that there are two types of form validation:
+
+- Client-side validation, which happens in the browser, implemented using a combination of form validation attributes (like `required`) and JavaScript. Client-side validation is useful for giving users instant hints when they have entered the wrong data, but is not so effective at stopping malicious data from getting through. It is too easy to turn off JavaScript or alter client-side code so that the validation no longer works.
+- Server-side validation, which happens on the server, implemented using whatever language the server is using. Badly-formed messages can be sent to a server by accident or on purpose. Conventional wisdom is to make sure that your server doesn't trust anything a client is sending to avoid bugs or security issues caused by malformed messages. Server-side validation is great for stopping malicious messages, as it's harder to tamper with the code running on the server. Server-side validation is not so good at giving users hints about incorrect data because the data has to go to the server to get validated, then the result has to be sent back to the client before the user can be notified.
+
+In short, don't decide between using either client-side or server-side validation - you will need both. You need client-side validation to give users feedback on their input and server-side validation to make sure messages are in a format your server can safely handle. If you want to start learning more about validation, a good place to start is [Client-side form validation](/en-US/docs/Learn_web_development/Extensions/Forms/Form_validation).
 
 ## Summary
 
-That's all for now. We have covered images and captions in detail. In the next article, we'll move it up a gear, looking at how to use HTML to embed video and audio content into web pages.
+That's all for now. There's a lot more to know about forms, but for now, we've given you enough of an understanding to move forward in your studies.
+
+Next up, we will have a look at how to debug problems in your HTML code.
 
 ## See also
 

From 36795aa260fb585b39082bdd658cabc913dc52d8 Mon Sep 17 00:00:00 2001
From: younisayoub <143106292+younisdev@users.noreply.github.com>
Date: Mon, 27 Jan 2025 19:51:31 +0200
Subject: [PATCH 04/21] Update SQL Injection Web security documentation to the
 best practices. (#37806)

---
 .../first_steps/website_security/index.md     | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/files/en-us/learn_web_development/extensions/server-side/first_steps/website_security/index.md b/files/en-us/learn_web_development/extensions/server-side/first_steps/website_security/index.md
index ddaa52a24d94287..57ec07c59cf4082 100644
--- a/files/en-us/learn_web_development/extensions/server-side/first_steps/website_security/index.md
+++ b/files/en-us/learn_web_development/extensions/server-side/first_steps/website_security/index.md
@@ -69,7 +69,7 @@ SQL injection types include Error-based SQL injection, SQL injection based on bo
 
 This vulnerability is present if user input that is passed to an underlying SQL statement can change the meaning of the statement. For example, the following code is intended to list all users with a particular name (`userName`) that has been supplied from an HTML form:
 
-```sql
+```python
 statement = "SELECT * FROM users WHERE name = '" + userName + "';"
 ```
 
@@ -81,21 +81,19 @@ SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WH
 
 The modified statement creates a valid SQL statement that deletes the `users` table and selects all data from the `userinfo` table (which reveals the information of every user). This works because the first part of the injected text (`a';`) completes the original statement.
 
-To avoid this sort of attack, you must ensure that any user data that is passed to an SQL query cannot change the nature of the query. One way to do this is to [escape](https://en.wikipedia.org/wiki/Escape_character) all the characters in the user input that have a special meaning in SQL.
-
-> [!NOTE]
-> The SQL statement treats the **'** character as the beginning and end of a string literal. By putting a backslash in front of this character (**\\'**), we escape the symbol, and tell SQL to instead treat it as a character (just a part of the string).
-
-In the following statement, we escape the **'** character. The SQL will now interpret the name as the whole string in bold (which is a very odd name indeed, but not harmful).
+To avoid such attacks, the best practice is to use parameterized queries (prepared statements). This approach ensures that the user input is treated as a string of data rather than executable SQL, so that the user cannot abuse special SQL syntax characters to generate unintended SQL statements. The following is an example:
 
 ```sql
-SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+SELECT * FROM users WHERE name = ? AND password = ?;
 ```
 
-Web frameworks will often take care of the character escaping for you. Django, for example, ensures that any user-data passed to querysets (model queries) is escaped.
+When executing the above query, for example, in Python, we pass the `name` and `password` as parameters, as shown below.
 
-> [!NOTE]
-> This section draws heavily on the information in [Wikipedia here](https://en.wikipedia.org/wiki/SQL_injection).
+```python
+cursor.execute("SELECT * FROM users WHERE name = ? AND password = ?", (name, password))
+```
+
+Libraries often provide well-abstracted APIs that handle SQL injection protection for the developer, such as Django's models. You can avoid SQL injection by using encapsulated APIs rather than directly writing raw SQL.
 
 ### Cross-Site Request Forgery (CSRF)
 

From eafbe3866d23e4427347893d4f4bb47f4489b42e Mon Sep 17 00:00:00 2001
From: Himanshu <himanshu.garg@gmail.com>
Date: Tue, 28 Jan 2025 00:30:03 +0530
Subject: [PATCH 05/21] Adds Clarification for kerning vs spacing/tracking.
 Fixes #35579 (#37712)

* Adds Clarification for kerning vs spacing/tracking. Fixes #35579

* Update files/en-us/web/css/font-kerning/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
---
 files/en-us/web/css/font-kerning/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/font-kerning/index.md b/files/en-us/web/css/font-kerning/index.md
index c73aa26b9b3cae7..e5d8314c20c7c16 100644
--- a/files/en-us/web/css/font-kerning/index.md
+++ b/files/en-us/web/css/font-kerning/index.md
@@ -11,7 +11,7 @@ The **`font-kerning`** [CSS](/en-US/docs/Web/CSS) property sets the use of the k
 
 {{EmbedInteractiveExample("pages/css/font-kerning.html")}}
 
-_Kerning_ defines how letters are spaced. In _well-kerned_ fonts, this feature makes character spacing more uniform and pleasant to read than it would otherwise be.
+_Kerning_ affects how letters are spaced. In _well-kerned_ fonts, this feature makes character spacing more uniform and pleasant to read by reducing white space between certain character combinations.
 
 In the image below, for instance, the examples on the left do not use kerning, while the ones on the right do:
 

From a3a1dd3b7b81f1c4bbdfe1bdccc28dac2cac550d Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Tue, 28 Jan 2025 03:01:36 +0800
Subject: [PATCH 06/21] Update CSSOM view module (#37713)

* Update CSSOM view module

* Apply suggestions from code review

* Update files/en-us/web/css/cssom_view/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

* Update files/en-us/web/css/cssom_view/index.md

* Update files/en-us/web/css/cssom_view/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/en-us/web/api/css_object_model/index.md |  1 +
 files/en-us/web/css/cssom_view/index.md       | 47 ++++++++++++++++---
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/files/en-us/web/api/css_object_model/index.md b/files/en-us/web/api/css_object_model/index.md
index a316d998a6d9a1c..9f45f94c415c88d 100644
--- a/files/en-us/web/api/css_object_model/index.md
+++ b/files/en-us/web/api/css_object_model/index.md
@@ -52,6 +52,7 @@ The values of CSS are represented untyped, that is using {{JSxRef("String")}} ob
 - {{DOMxRef("StyleSheet")}}
 - {{DOMxRef("StyleSheetList")}}
 - {{DOMxRef("TransitionEvent")}}
+- {{DOMxRef("VisualViewport")}}
 
 Several other interfaces are also extended by the CSSOM-related specifications: {{DOMxRef("Document")}}, {{DOMxRef("Window")}}, {{DOMxRef("Element")}}, {{DOMxRef("HTMLElement")}}, {{DOMxRef("HTMLImageElement")}}, {{DOMxRef("Range")}}, {{DOMxRef("MouseEvent")}}, and {{DOMxRef("SVGElement")}}.
 
diff --git a/files/en-us/web/css/cssom_view/index.md b/files/en-us/web/css/cssom_view/index.md
index 84662fbdef10565..91d9dd240bb3275 100644
--- a/files/en-us/web/css/cssom_view/index.md
+++ b/files/en-us/web/css/cssom_view/index.md
@@ -2,18 +2,51 @@
 title: CSSOM view
 slug: Web/CSS/CSSOM_view
 page-type: css-module
-browser-compat: css.properties.scroll-behavior
+spec-urls: https://drafts.csswg.org/cssom-view/
 ---
 
 {{CSSRef}}
 
-The **CSSOM view** module lets you manipulate the visual view of a document, in particular its scrolling behavior.
+The **CSSOM view** module lets you manipulate the visual view of a document, including getting the position of element layout boxes, obtaining the width or height of the viewport through script, and also scrolling an element.
 
 ## Reference
 
-### Properties
+### Events
 
-- {{cssxref("scroll-behavior")}}
+- {{domxref("Window")}} events:
+  - {{domxref("Window/resize_event", "resize")}}
+- {{domxref("VisualViewport")}} events:
+  - {{domxref("VisualViewport/resize_event", "resize")}}
+  - {{domxref("VisualViewport/scroll_event", "scroll")}}
+  - {{domxref("VisualViewport/scrollend_event", "scrollend")}}
+- {{domxref("Document")}} events
+  - {{domxref("Document/scroll_event", "scroll")}}
+  - {{domxref("Document/scrollend_event", "scrollend")}}
+- {{domxref("Element")}} events
+  - {{domxref("Element/scroll_event", "scroll")}}
+  - {{domxref("Element/scrollend_event", "scrollend")}}
+- {{domxref("MediaQueryList")}} events
+  - {{domxref("MediaQueryList/change_event", "change")}}
+
+### Interfaces
+
+- {{domxref("MediaQueryList")}}
+- {{domxref("MediaQueryListEvent")}}
+- {{domxref("Screen")}}
+- {{domxref("CaretPosition")}}
+- {{domxref("VisualViewport")}}
+
+The following interfaces are not defined by this module but add some extensions.
+
+- {{domxref("Window")}}
+- {{domxref("Document")}}
+- {{domxref("Element")}}
+- {{domxref("HTMLElement")}}
+- {{domxref("HTMLImageElement")}}
+- {{domxref("Range")}}
+- {{domxref("MouseEvent")}}
+- {{domxref("Text")}}
+- {{domxref("CSSPseudoElement")}}
 
 ## Guides
 
@@ -22,12 +55,12 @@ The **CSSOM view** module lets you manipulate the visual view of a document, in
 
 ## Related concepts
 
-- {{glossary("cssom")}} glossary term
+- {{glossary("CSSOM")}} glossary term
 
 ## Specifications
 
 {{Specifications}}
 
-## Browser compatibility
+## See also
 
-{{Compat}}
+- [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) as Web API

From bd6d98893c48e00bfcbdafd60c684bf30e0fa406 Mon Sep 17 00:00:00 2001
From: 720 <71604450+T34-active@users.noreply.github.com>
Date: Tue, 28 Jan 2025 03:39:37 +0800
Subject: [PATCH 07/21] fix typo (#37815)

fix format
---
 files/en-us/web/svg/svg_as_an_image/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/svg/svg_as_an_image/index.md b/files/en-us/web/svg/svg_as_an_image/index.md
index 878383a770aa436..8202e10a15f72a6 100644
--- a/files/en-us/web/svg/svg_as_an_image/index.md
+++ b/files/en-us/web/svg/svg_as_an_image/index.md
@@ -17,7 +17,7 @@ SVG images can be used as an image format, in a number of contexts. Browsers sup
 - SVG {{SVGElement("feImage")}} element
 - Canvas [`drawImage`](/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#drawing_images) function
 
-### Restrictions
+## Restrictions
 
 For security purposes, Gecko places some restrictions on SVG content when it's being used as an image:
 

From 64721e1a89b6297d3e25b88180c2ae49089d472c Mon Sep 17 00:00:00 2001
From: Hamish Willee <hamishwillee@gmail.com>
Date: Tue, 28 Jan 2025 09:05:09 +1100
Subject: [PATCH 08/21] FF135 Relnote:
 PublicKeyCredential.getClientCapabilities() supported (#37819)

* FF135 Relnote: PublicKeyCredential.getClientCapabilities() supported

* Make the alternative clear
---
 files/en-us/mozilla/firefox/releases/135/index.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/files/en-us/mozilla/firefox/releases/135/index.md b/files/en-us/mozilla/firefox/releases/135/index.md
index 279cf708730dc07..6048c2c53ded648 100644
--- a/files/en-us/mozilla/firefox/releases/135/index.md
+++ b/files/en-us/mozilla/firefox/releases/135/index.md
@@ -38,6 +38,9 @@ This article provides information about the changes in Firefox 135 that affect d
 
 ### APIs
 
+- The {{domxref("PublicKeyCredential.getClientCapabilities_static", "PublicKeyCredential.getClientCapabilities()")}} static method is supported, allowing a web app to check if a browser enables particular [WebAuthn](/en-US/docs/Web/API/Web_Authentication_API) capabilities and [extensions](/en-US/docs/Web/API/Web_Authentication_API/WebAuthn_extensions) without having to resort to user agent sniffing.
+  ([Firefox bug 1884466](https://bugzil.la/1884466)).
+
 #### DOM
 
 #### Media, WebRTC, and Web Audio

From 5b755904cd31e7329ee32ace99486a2fea0fe6a1 Mon Sep 17 00:00:00 2001
From: Hamish Willee <hamishwillee@gmail.com>
Date: Tue, 28 Jan 2025 09:12:16 +1100
Subject: [PATCH 09/21] FF135 Certificate Transparency (#37812)

* FF135 Certificate Transparency

* Update files/en-us/mozilla/firefox/releases/135/index.md

* Update files/en-us/mozilla/firefox/releases/135/index.md

* Update files/en-us/mozilla/firefox/releases/135/index.md
---
 files/en-us/mozilla/firefox/releases/135/index.md |  4 ++++
 .../security/certificate_transparency/index.md    | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/files/en-us/mozilla/firefox/releases/135/index.md b/files/en-us/mozilla/firefox/releases/135/index.md
index 6048c2c53ded648..ac1d948b68ef09c 100644
--- a/files/en-us/mozilla/firefox/releases/135/index.md
+++ b/files/en-us/mozilla/firefox/releases/135/index.md
@@ -34,6 +34,10 @@ This article provides information about the changes in Firefox 135 that affect d
 
 ### Security
 
+- [Certificate Transparency](/en-US/docs/Web/Security/Certificate_Transparency) is a standard for ensuring that certificates are publicly disclosed before web browsers will trust them. Firefox now supports this feature on desktop versions (but not Android).
+  This only affects servers that use certificates issued by a certificate authority in Mozilla's Root CA Program.
+  ([Firefox bug 1938242](https://bugzil.la/1938242)).
+
 #### Removals
 
 ### APIs
diff --git a/files/en-us/web/security/certificate_transparency/index.md b/files/en-us/web/security/certificate_transparency/index.md
index 779ba584ad8e8b8..a6fea69505573d3 100644
--- a/files/en-us/web/security/certificate_transparency/index.md
+++ b/files/en-us/web/security/certificate_transparency/index.md
@@ -6,7 +6,7 @@ page-type: guide
 
 {{QuickLinksWithSubpages("/en-US/docs/Web/Security")}}
 
-**Certificate Transparency** is an open framework designed to protect against and monitor for certificate mis-issuances. It's defined in [RFC 9162](https://www.rfc-editor.org/rfc/rfc9162). With certificate transparency, newly-issued certificates are 'logged' to publicly-run, often independent _CT logs_ — which maintain an append-only, cryptographically-assured record of issued TLS certificates.
+**Certificate Transparency** is an open framework designed to protect against and monitor for certificate mis-issuances. With certificate transparency, newly-issued certificates are 'logged' to publicly-run, often independent _CT logs_ — which maintain an append-only, cryptographically-assured record of issued TLS certificates.
 
 In this way, certificate authorities (CAs) can be subject to much greater public scrutiny and oversight. Potentially malicious certificates, such as those that violate the CA/B Forum _Baseline Requirements_, can be detected and revoked much more quickly. Browser vendors and root store maintainers are also empowered to make more informed decisions regarding problematic CAs that they may decide to distrust.
 
@@ -39,4 +39,15 @@ Chrome had previously required CT inclusion for _Extended Validation_ (EV) and S
 
 Apple [requires](https://support.apple.com/en-gb/103214) a varying number of SCTs in order for Safari and other servers to trust server certificates.
 
-Firefox desktop from version 135 requires CT log inclusion for all certificates issued by certificate authorities in Mozilla's Root CA Program. Firefox for Android does not currently require CT log inclusion.
+Firefox desktop from version 135 requires CT log inclusion for all certificates issued by certificate authorities in Mozilla's Root CA Program.
+Firefox for Android does not currently require CT log inclusion.
+
+## Specifications
+
+Browser implementations are based on the obsoleted specification {{rfc("6962","Certificate Transparency")}} (January 2025).
+The current specification is {{rfc("9162","Certificate Transparency Version 2.0")}}.
+
+## See also
+
+- [Apple's Certificate Transparency log program](https://support.apple.com/en-us/103703)
+- [Chrome's Certificate Transparency Log Policy](https://googlechrome.github.io/CertificateTransparency/log_policy.html)

From 8f10db5cabb50ee778f781f96adadc8cff98761a Mon Sep 17 00:00:00 2001
From: Raunak Seksaria <143739997+RaunakSeksaria@users.noreply.github.com>
Date: Tue, 28 Jan 2025 04:05:35 +0530
Subject: [PATCH 10/21] Streamline explanation for closures (#37826)

* Explanation for a code snippet involving IIFE, but not mentioning or referencing it

* Used a shorter URL based on relative paths

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Reorganize sections

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
---
 .../api/eventtarget/addeventlistener/index.md |   2 +-
 .../en-us/web/javascript/event_loop/index.md  |   2 +-
 .../web/javascript/guide/functions/index.md   | 277 +++++++-----------
 files/en-us/web/javascript/guide/index.md     |   3 +-
 .../reference/errors/not_defined/index.md     |   2 +-
 5 files changed, 115 insertions(+), 171 deletions(-)

diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md
index f1342dc124838aa..a653aed657b27cc 100644
--- a/files/en-us/web/api/eventtarget/addeventlistener/index.md
+++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md
@@ -296,7 +296,7 @@ myButton.addEventListener("click", () => {
 console.log(someString); // Expected Value: 'Data' (will never output 'Data Again')
 ```
 
-Read [the function guide](/en-US/docs/Web/JavaScript/Guide/Functions#function_scope) for more information about function scopes.
+Read [the function guide](/en-US/docs/Web/JavaScript/Guide/Functions#function_scopes_and_closures) for more information about function scopes.
 
 ### Memory issues
 
diff --git a/files/en-us/web/javascript/event_loop/index.md b/files/en-us/web/javascript/event_loop/index.md
index 4949007ba0f9f19..6e287515e3dea49 100644
--- a/files/en-us/web/javascript/event_loop/index.md
+++ b/files/en-us/web/javascript/event_loop/index.md
@@ -41,7 +41,7 @@ Order of operations:
 3. When `foo` returns, the top frame element is popped out of the stack (leaving only `bar`'s call frame).
 4. When `bar` returns, the stack is empty.
 
-Note that the arguments and local variables may continue to exist, as they are stored outside the stack — so they can be accessed by any [nested functions](/en-US/docs/Web/JavaScript/Guide/Functions#nested_functions_and_closures) long after their outer function has returned.
+Note that the arguments and local variables may continue to exist, as they are stored outside the stack — so they can be accessed by any [nested functions](/en-US/docs/Web/JavaScript/Guide/Functions#function_scopes_and_closures) long after their outer function has returned.
 
 ### Heap
 
diff --git a/files/en-us/web/javascript/guide/functions/index.md b/files/en-us/web/javascript/guide/functions/index.md
index 7c71bae4304d3f6..073b697ccc067c8 100644
--- a/files/en-us/web/javascript/guide/functions/index.md
+++ b/files/en-us/web/javascript/guide/functions/index.md
@@ -64,6 +64,19 @@ myFunc(arr);
 console.log(arr[0]); // 30
 ```
 
+Function declarations and expressions can be nested, which forms a _scope chain_. For example:
+
+```js
+function addSquares(a, b) {
+  function square(x) {
+    return x * x;
+  }
+  return square(a) + square(b);
+}
+```
+
+See [function scopes and closures](#function_scopes_and_closures) for more information.
+
 ### Function expressions
 
 While the function declaration above is syntactically a statement, functions can also be created by a [function expression](/en-US/docs/Web/JavaScript/Reference/Operators/function).
@@ -88,7 +101,7 @@ const factorial = function fac(n) {
 console.log(factorial(3)); // 6
 ```
 
-Function expressions are convenient when passing a function as an argument to another function. The following example shows a `map` function that should receive a function as first argument and an array as second argument:
+Function expressions are convenient when passing a function as an argument to another function. The following example defines a `map` function that should receive a function as first argument and an array as second argument. Then, it is called with a function defined by a function expression:
 
 ```js
 function map(f, a) {
@@ -98,25 +111,12 @@ function map(f, a) {
   }
   return result;
 }
-```
-
-In the following code, the function receives a function defined by a function expression and executes it for every element of the array received as a second argument:
-
-```js
-function map(f, a) {
-  const result = new Array(a.length);
-  for (let i = 0; i < a.length; i++) {
-    result[i] = f(a[i]);
-  }
-  return result;
-}
-
-const cube = function (x) {
-  return x * x * x;
-};
 
 const numbers = [0, 1, 2, 5, 10];
-console.log(map(cube, numbers)); // [0, 1, 8, 125, 1000]
+const cubedNumbers = map(function (x) {
+  return x * x * x;
+}, numbers);
+console.log(cubedNumbers); // [0, 1, 8, 125, 1000]
 ```
 
 In JavaScript, a function can be defined based on a condition. For example, the following function definition defines `myFunc` only if `num` equals `0`:
@@ -208,51 +208,9 @@ const square = function (n) {
 };
 ```
 
-## Function scope
-
-Variables defined inside a function cannot be accessed from anywhere outside the function, because the variable is defined only in the scope of the function. However, a function can access all variables and functions defined inside the scope in which it is defined.
-
-In other words, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function, and any other variables to which the parent function has access.
-
-```js
-// The following variables are defined in the global scope
-const num1 = 20;
-const num2 = 3;
-const name = "Chamakh";
-
-// This function is defined in the global scope
-function multiply() {
-  return num1 * num2;
-}
-
-console.log(multiply()); // 60
-
-// A nested function example
-function getScore() {
-  const num1 = 2;
-  const num2 = 3;
-
-  function add() {
-    return `${name} scored ${num1 + num2}`;
-  }
-
-  return add();
-}
-
-console.log(getScore()); // "Chamakh scored 5"
-```
-
-## Scope and the function stack
-
 ### Recursion
 
-A function can refer to and call itself. There are three ways for a function to refer to itself:
-
-1. The function's name
-2. [`arguments.callee`](/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee)
-3. An in-scope variable that refers to the function
-
-For example, consider the following function definition:
+A function can refer to and call itself. It can be referred to either by the function expression or declaration's name, or via any in-scope variable that refers to the function object. For example, consider the following function definition:
 
 ```js
 const foo = function bar() {
@@ -260,11 +218,7 @@ const foo = function bar() {
 };
 ```
 
-Within the function body, the following are all equivalent:
-
-1. `bar()`
-2. `arguments.callee()`
-3. `foo()`
+Within the function body, you can refer to the function itself either as `bar` or `foo`, and call itself using `bar()` or `foo()`.
 
 A function that calls itself is called a _recursive function_. In some ways, recursion is analogous to a loop. Both execute the same code multiple times, and both require a condition (to avoid an infinite loop, or rather, infinite recursion in this case).
 
@@ -335,115 +289,72 @@ foo(3);
 // end: 3
 ```
 
-### Nested functions and closures
-
-You may nest a function within another function. The nested (inner) function is private to its containing (outer) function.
-
-It also forms a _closure_. A closure is an expression (most commonly, a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).
-
-Since a nested function is a closure, this means that a nested function can "inherit" the arguments and variables of its containing function. In other words, the inner function contains the scope of the outer function.
-
-To summarize:
-
-- The inner function can be accessed only from statements in the outer function.
-- The inner function forms a closure: the inner function can use the arguments and variables of the outer function, while the outer function cannot use the arguments and variables of the inner function.
-
-The following example shows nested functions:
-
-```js
-function addSquares(a, b) {
-  function square(x) {
-    return x * x;
-  }
-  return square(a) + square(b);
-}
-
-console.log(addSquares(2, 3)); // 13
-console.log(addSquares(3, 4)); // 25
-console.log(addSquares(4, 5)); // 41
-```
+### Immediately Invoked Function Expressions (IIFE)
 
-Since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function:
+An [Immediately Invoked Function Expression (IIFE)](/en-US/docs/Glossary/IIFE) is a code pattern that directly calls a function defined as an expression. It looks like this:
 
 ```js
-function outside(x) {
-  function inside(y) {
-    return x + y;
-  }
-  return inside;
-}
+(function () {
+  // Do something
+})();
 
-const fnInside = outside(3); // Think of it like: give me a function that adds 3 to whatever you give it
-console.log(fnInside(5)); // 8
-console.log(outside(3)(5)); // 8
+const value = (function () {
+  // Do something
+  return someValue;
+})();
 ```
 
-### Preservation of variables
+Instead of saving the function in a variable, the function is immediately invoked. This is almost equivalent to just writing the function body, but there are a few unique benefits:
 
-Notice how `x` is preserved when `inside` is returned. A closure must preserve the arguments and variables in all scopes it references. Since each call provides potentially different arguments, a new closure is created for each call to `outside`. The memory can be freed only when the returned `inside` is no longer accessible.
+- It creates an extra [scope](#function_scopes_and_closures) of variables, which helps to confine variables to the place where they are useful.
+- It is now an _expression_ instead of a sequence of _statements_. This allows you to write complex computation logic when initializing variables.
 
-This is not different from storing references in other objects, but is often less obvious because one does not set the references directly and cannot inspect them.
+For more information, see the [IIFE](/en-US/docs/Glossary/IIFE) glossary entry.
 
-### Multiply-nested functions
+## Function scopes and closures
 
-Functions can be multiply-nested. For example:
-
-- A function (`A`) contains a function (`B`), which itself contains a function (`C`).
-- Both functions `B` and `C` form closures here. So, `B` can access `A`, and `C` can access `B`.
-- In addition, since `C` can access `B` which can access `A`, `C` can also access `A`.
-
-Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called _scope chaining_. (The reason it is called "chaining" is explained later.)
-
-Consider the following example:
+Functions form a [scope](/en-US/docs/Glossary/Scope) for variables—this means variables defined inside a function cannot be accessed from anywhere outside the function. The function scope inherits from all the upper scopes. For example, a function defined in the global scope can access all variables defined in the global scope. A function defined inside another function can also access all variables defined in its parent function, and any other variables to which the parent function has access. On the other hand, the parent function (and any other parent scope) does _not_ have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables in the inner function.
 
 ```js
-function A(x) {
-  function B(y) {
-    function C(z) {
-      console.log(x + y + z);
-    }
-    C(3);
-  }
-  B(2);
-}
-A(1); // Logs 6 (which is 1 + 2 + 3)
-```
-
-In this example, `C` accesses `B`'s `y` and `A`'s `x`.
-
-This can be done because:
-
-1. `B` forms a closure including `A` (i.e., `B` can access `A`'s arguments and variables).
-2. `C` forms a closure including `B`.
-3. Because `C`'s closure includes `B` and `B`'s closure includes `A`, then `C`'s closure also includes `A`. This means `C` can access _both_ `B` _and_ `A`'s arguments and variables. In other words, `C` _chains_ the scopes of `B` and `A`, _in that order_.
+// The following variables are defined in the global scope
+const num1 = 20;
+const num2 = 3;
+const name = "Chamakh";
 
-The reverse, however, is not true. `A` cannot access `C`, because `A` cannot access any argument or variable of `B`, which `C` is a variable of. Thus, `C` remains private to only `B`.
+// This function is defined in the global scope
+function multiply() {
+  return num1 * num2;
+}
 
-### Name conflicts
+console.log(multiply()); // 60
 
-When two arguments or variables in the scopes of a closure have the same name, there is a _name conflict_. More nested scopes take precedence. So, the innermost scope takes the highest precedence, while the outermost scope takes the lowest. This is the scope chain. The first on the chain is the innermost scope, and the last is the outermost scope. Consider the following:
+// A nested function example
+function getScore() {
+  const num1 = 2;
+  const num2 = 3;
 
-```js
-function outside() {
-  const x = 5;
-  function inside(x) {
-    return x * 2;
+  function add() {
+    return `${name} scored ${num1 + num2}`;
   }
-  return inside;
+
+  return add();
 }
 
-console.log(outside()(10)); // 20 (instead of 10)
+console.log(getScore()); // "Chamakh scored 5"
 ```
 
-The name conflict happens at the statement `return x * 2` and is between `inside`'s parameter `x` and `outside`'s variable `x`. The scope chain here is `inside` => `outside` => global object. Therefore, `inside`'s `x` takes precedences over `outside`'s `x`, and `20` (`inside`'s `x`) is returned instead of `10` (`outside`'s `x`).
+### Closures
 
-## Closures
+We also refer to the function body as a _closure_. A closure is any piece of source code (most commonly, a function) that refers to some variables, and the closure "remembers" these variables even when the scope in which these variables were declared has exited.
 
-Closures are one of the most powerful features of JavaScript. JavaScript allows for the nesting of functions and grants the inner function full access to all the variables and functions defined inside the outer function (and all other variables and functions that the outer function has access to).
+Closures are usually illustrated with [nested functions](#nested_functions) to show that they remember variables beyond the lifetime of its parent scope; but in fact, nested functions are unnecessary. Technically speaking, all functions in JavaScript form closures—some just don't capture anything, and closures don't even have to be functions. The key ingredients for a _useful_ closure are the following:
 
-However, the outer function does _not_ have access to the variables and functions defined inside the inner function. This provides a sort of encapsulation for the variables of the inner function.
+- A parent scope that defines some variables or functions. It should have a clear lifetime, which means it should finish execution at some point. Any scope that's not the global scope satisfies this requirement; this includes blocks, functions, modules, and more.
+- An inner scope defined within the parent scope, which refers to some variables or functions defined in the parent scope.
+- The inner scope manages to survive beyond the lifetime of the parent scope. For example, it is saved to a variable that's defined outside the parent scope, or it's returned from the parent scope (if the parent scope is a function).
+- Then, when you call the function outside of the parent scope, you can still access the variables or functions that were defined in the parent scope, even though the parent scope has finished execution.
 
-Also, since the inner function has access to the scope of the outer function, the variables and functions defined in the outer function will live longer than the duration of the outer function execution, if the inner function manages to survive beyond the life of the outer function. A closure is created when the inner function is somehow made available to any scope outside the outer function.
+The following is a typical example of a closure:
 
 ```js
 // The outer function defines a variable called "name"
@@ -516,22 +427,56 @@ const getCode = (function () {
 console.log(getCode()); // "0]Eal(eh&2"
 ```
 
-> [!NOTE]
-> There are a number of pitfalls to watch out for when using closures!
->
-> If an enclosed function defines a variable with the same name as a variable in the outer scope, then there is no way to refer to the variable in the outer scope again. (The inner scope variable "overrides" the outer one, until the program exits the inner scope. It can be thought of as a [name conflict](#name_conflicts).)
->
-> ```js example-bad
-> const createPet = function (name) {
->   // The outer function defines a variable called "name".
->   return {
->     setName(name) {
->       // The enclosed function also defines a variable called "name".
->       name = name; // How do we access the "name" defined by the outer function?
->     },
->   };
-> };
-> ```
+In the code above, we use the [IIFE](immediately_invoked_function_expressions_iife) pattern. Within this IIFE scope, two values exist: a variable `apiCode` and an unnamed function that gets returned and gets assigned to the variable `getCode`. `apiCode` is in the scope of the returned unnamed function but not in the scope of any other part of the program, so there is no way for reading the value of `apiCode` apart from via the `getCode` function.
+
+### Multiply-nested functions
+
+Functions can be multiply-nested. For example:
+
+- A function (`A`) contains a function (`B`), which itself contains a function (`C`).
+- Both functions `B` and `C` form closures here. So, `B` can access `A`, and `C` can access `B`.
+- In addition, since `C` can access `B` which can access `A`, `C` can also access `A`.
+
+Thus, the closures can contain multiple scopes; they recursively contain the scope of the functions containing it. This is called _scope chaining_. Consider the following example:
+
+```js
+function A(x) {
+  function B(y) {
+    function C(z) {
+      console.log(x + y + z);
+    }
+    C(3);
+  }
+  B(2);
+}
+A(1); // Logs 6 (which is 1 + 2 + 3)
+```
+
+In this example, `C` accesses `B`'s `y` and `A`'s `x`. This can be done because:
+
+1. `B` forms a closure including `A` (i.e., `B` can access `A`'s arguments and variables).
+2. `C` forms a closure including `B`.
+3. Because `C`'s closure includes `B` and `B`'s closure includes `A`, then `C`'s closure also includes `A`. This means `C` can access _both_ `B` _and_ `A`'s arguments and variables. In other words, `C` _chains_ the scopes of `B` and `A`, _in that order_.
+
+The reverse, however, is not true. `A` cannot access `C`, because `A` cannot access any argument or variable of `B`, which `C` is a variable of. Thus, `C` remains private to only `B`.
+
+### Name conflicts
+
+When two arguments or variables in the scopes of a closure have the same name, there is a _name conflict_. More nested scopes take precedence. So, the innermost scope takes the highest precedence, while the outermost scope takes the lowest. This is the scope chain. The first on the chain is the innermost scope, and the last is the outermost scope. Consider the following:
+
+```js
+function outside() {
+  const x = 5;
+  function inside(x) {
+    return x * 2;
+  }
+  return inside;
+}
+
+console.log(outside()(10)); // 20 (instead of 10)
+```
+
+The name conflict happens at the statement `return x * 2` and is between `inside`'s parameter `x` and `outside`'s variable `x`. The scope chain here is `inside` => `outside` => global object. Therefore, `inside`'s `x` takes precedences over `outside`'s `x`, and `20` (`inside`'s `x`) is returned instead of `10` (`outside`'s `x`).
 
 ## Using the arguments object
 
diff --git a/files/en-us/web/javascript/guide/index.md b/files/en-us/web/javascript/guide/index.md
index 42bb63e60f2f8f8..ebdc56dd31e6a4e 100644
--- a/files/en-us/web/javascript/guide/index.md
+++ b/files/en-us/web/javascript/guide/index.md
@@ -59,8 +59,7 @@ Overview: [Functions](/en-US/docs/Web/JavaScript/Guide/Functions)
 
 - [Defining functions](/en-US/docs/Web/JavaScript/Guide/Functions#defining_functions)
 - [Calling functions](/en-US/docs/Web/JavaScript/Guide/Functions#calling_functions)
-- [Function scope](/en-US/docs/Web/JavaScript/Guide/Functions#function_scope)
-- [Closures](/en-US/docs/Web/JavaScript/Guide/Functions#closures)
+- [Function scopes and closures](/en-US/docs/Web/JavaScript/Guide/Functions#function_scopes_and_closures)
 - [Arguments](/en-US/docs/Web/JavaScript/Guide/Functions#using_the_arguments_object) & [parameters](/en-US/docs/Web/JavaScript/Guide/Functions#function_parameters)
 - [Arrow functions](/en-US/docs/Web/JavaScript/Guide/Functions#arrow_functions)
 
diff --git a/files/en-us/web/javascript/reference/errors/not_defined/index.md b/files/en-us/web/javascript/reference/errors/not_defined/index.md
index ac3fc9efc46d7e1..b85b7c36852a5d6 100644
--- a/files/en-us/web/javascript/reference/errors/not_defined/index.md
+++ b/files/en-us/web/javascript/reference/errors/not_defined/index.md
@@ -83,4 +83,4 @@ console.log(numbers()); // 5
 
 - [Scope](/en-US/docs/Glossary/Scope)
 - [Declaring variables in the JavaScript Guide](/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#declaring_variables)
-- [Function scope in the JavaScript Guide](/en-US/docs/Web/JavaScript/Guide/Functions#function_scope)
+- [Function scope in the JavaScript Guide](/en-US/docs/Web/JavaScript/Guide/Functions#function_scopes_and_closures)

From d74e45a592f785d22d8771f37861f795386b03a4 Mon Sep 17 00:00:00 2001
From: Aaron Selya <selya@google.com>
Date: Mon, 27 Jan 2025 20:32:58 -0500
Subject: [PATCH 11/21] Update getPermission() to handle
 "top-level-storage-access" correctly (#37831)

Querying for `top-level-storage-access` [requires](https://developer.mozilla.org/en-US/docs/Web/API/Document/requestStorageAccessFor) the caller to pass a `requestedOrigin` value in addition to a `name`. This updates the implementation of the `getPermission()` to pass the `origin` of the window to the `query` call so that the required parameters are passed to the `permissions.query` call.
---
 files/en-us/web/api/permissions/query/index.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/api/permissions/query/index.md b/files/en-us/web/api/permissions/query/index.md
index 6d69283df41a74a..97b001b3fda44be 100644
--- a/files/en-us/web/api/permissions/query/index.md
+++ b/files/en-us/web/api/permissions/query/index.md
@@ -141,7 +141,15 @@ async function processPermissions() {
 // Query a single permission in a try...catch block and return result
 async function getPermission(permission) {
   try {
-    const result = await navigator.permissions.query({ name: permission });
+    let result;
+    if (permission === "top-level-storage-access") {
+      result = await navigator.permissions.query({
+        name: permission,
+        requestedOrigin: window.location.origin,
+      });
+    } else {
+      result = await navigator.permissions.query({ name: permission });
+    }
     return `${permission}: ${result.state}`;
   } catch (error) {
     return `${permission} (not supported)`;

From 0aeb03c4e421447373bf0a6ad48a1d4b60a79596 Mon Sep 17 00:00:00 2001
From: Nathan Knowler <nathan@knowler.dev>
Date: Mon, 27 Jan 2025 20:33:59 -0600
Subject: [PATCH 12/21] Include `beforetoggle` as an event type for
 `ToggleEvent` (#37835)

---
 files/en-us/web/api/toggleevent/toggleevent/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/api/toggleevent/toggleevent/index.md b/files/en-us/web/api/toggleevent/toggleevent/index.md
index 9f0cbd9f67be532..c1c4ebb9f5299a4 100644
--- a/files/en-us/web/api/toggleevent/toggleevent/index.md
+++ b/files/en-us/web/api/toggleevent/toggleevent/index.md
@@ -19,7 +19,7 @@ new ToggleEvent(type, init)
 ### Parameters
 
 - `type`
-  - : A string representing the type of event. In the case of `ToggleEvent` this is always `toggle`.
+  - : A string representing the type of event. In the case of `ToggleEvent` this is always `beforetoggle` or `toggle`.
 - `init`
   - : An object containing the following properties:
     - `newState`

From 22999c49d139934e0c1123f13e59f2ef70980385 Mon Sep 17 00:00:00 2001
From: Mathew Hodson <mathew.hodson@gmail.com>
Date: Mon, 27 Jan 2025 23:20:11 -0500
Subject: [PATCH 13/21] Add default Accept header value for Firefox 132
 (#37836)

* Add default Accept header value for Firefox 132

This was changed in https://bugzilla.mozilla.org/show_bug.cgi?id=1917177

* Update index.md - add safari and chrome values too

* Update files/en-us/web/http/content_negotiation/list_of_default_accept_values/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../list_of_default_accept_values/index.md    | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/files/en-us/web/http/content_negotiation/list_of_default_accept_values/index.md b/files/en-us/web/http/content_negotiation/list_of_default_accept_values/index.md
index 3697a003753902f..a764209ff34e011 100644
--- a/files/en-us/web/http/content_negotiation/list_of_default_accept_values/index.md
+++ b/files/en-us/web/http/content_negotiation/list_of_default_accept_values/index.md
@@ -14,18 +14,21 @@ These are the values sent when the context doesn't give better information.
 Note that all browsers add the `*/*` MIME Type to cover all cases.
 This is typically used for requests initiated via the address bar of a browser, or via an HTML {{HTMLElement("a")}} element.
 
-| User Agent                 | Value                                                                                                                               |
-| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
-| Firefox 128 and later [1]  | `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/png,image/svg+xml,*/*;q=0.8`                     |
-| Firefox 92 to 127 [1]      | `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8`                                             |
-| Firefox 72 to 91 [2]       | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8`                                                        |
-| Firefox 66 to 71 [2]       | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                   |
-| Firefox 65 [2]             | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8`                                                        |
-| Firefox 64 and earlier [2] | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                   |
-| Safari, Chrome             | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8`                                             |
-| Safari 5 [3]               | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                   |
-| Edge                       | `text/html, application/xhtml+xml, image/jxr, */*`                                                                                  |
-| Opera                      | `text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1` |
+| User Agent                 | Value                                                                                                                                     |
+| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| Firefox 132 and later [1]  | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                         |
+| Firefox 128 to 131         | `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/png,image/svg+xml,*/*;q=0.8`                           |
+| Firefox 92 to 127          | `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8`                                                   |
+| Firefox 72 to 91 [2]       | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8`                                                              |
+| Firefox 66 to 71 [2]       | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                         |
+| Firefox 65 [2]             | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8`                                                              |
+| Firefox 64 and earlier [2] | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                         |
+| Safari 13.1 to 18.1+ [4]   | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                         |
+| Chrome 131+ [4]            | `text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7` |
+| Safari, Chrome [4]         | `text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8`                                                   |
+| Safari 5 [3]               | `text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8`                                                                         |
+| Edge                       | `text/html, application/xhtml+xml, image/jxr, */*`                                                                                        |
+| Opera                      | `text/html, application/xml;q=0.9, application/xhtml+xml, image/png, image/webp, image/jpeg, image/gif, image/x-xbitmap, */*;q=0.1`       |
 
 \[1] The value can be set to an arbitrary string using the `network.http.accept` preference (`about:config`).
 
@@ -33,6 +36,8 @@ This is typically used for requests initiated via the address bar of a browser,
 
 \[3] This is an improvement over earlier `Accept` headers as it no longer ranks `image/png` above `text/html`.
 
+\[4] Rechecked and added values for Safari 13.1 to 18.1 and Chrome 131. Values may have changed before specified versions.
+
 ## Values for an image
 
 When requesting an image, like through an HTML {{HTMLElement("img")}} element, user-agent often sets a specific list of media types to be welcomed.

From da9455baa888af94b55f453a56b15b5bb8af53e0 Mon Sep 17 00:00:00 2001
From: Rageking8 <106309953+Rageking8@users.noreply.github.com>
Date: Tue, 28 Jan 2025 14:44:05 +0800
Subject: [PATCH 14/21] Fix example in SVG scale attribute page (#37615)

* Fix example in SVG scale attribute page

* Apply linter suggestion

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/en-us/web/svg/attribute/scale/index.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/files/en-us/web/svg/attribute/scale/index.md b/files/en-us/web/svg/attribute/scale/index.md
index e597b11ff97a23f..df5b963a15587c2 100644
--- a/files/en-us/web/svg/attribute/scale/index.md
+++ b/files/en-us/web/svg/attribute/scale/index.md
@@ -42,9 +42,13 @@ svg {
     <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" />
   </filter>
 
-  <circle cx="100" cy="100" r="80" style="filter: url(#displacementFilter);""/>
-  <circle cx="100" cy="100" r="80" style="filter: url(#displacementFilter2);
-  transform: translateX(240px);""/>
+  <circle cx="100" cy="100" r="80" style="filter: url(#displacementFilter);" />
+  <circle
+    cx="100"
+    cy="100"
+    r="80"
+    style="filter: url(#displacementFilter2);
+  transform: translateX(240px);" />
 </svg>
 ```
 

From 5c9a8d58490aa2a1934009023a38e6113f5e1a5b Mon Sep 17 00:00:00 2001
From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com>
Date: Tue, 28 Jan 2025 16:12:09 +0800
Subject: [PATCH 15/21] Remove links of legacy self-link properties (#37839)

---
 files/en-us/web/css/css_box_alignment/index.md | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/files/en-us/web/css/css_box_alignment/index.md b/files/en-us/web/css/css_box_alignment/index.md
index 2a46db4025c4119..92903b465e5ea0a 100644
--- a/files/en-us/web/css/css_box_alignment/index.md
+++ b/files/en-us/web/css/css_box_alignment/index.md
@@ -75,9 +75,6 @@ The alignment of text and inline-level content is defined in [CSS text module](/
 
 - {{cssxref("alignment-baseline")}}
 - {{cssxref("dominant-baseline")}}
-- {{cssxref("grid-column-gap")}}
-- {{cssxref("grid-gap")}}
-- {{cssxref("grid-row-gap")}}
 - {{cssxref("scroll-snap-align")}}
 - SVG {{SVGAttr("dominant-baseline")}} attribute
 - {{Glossary("Cross axis")}}

From 782d88782968782657abad748e20770229c6aab6 Mon Sep 17 00:00:00 2001
From: Youssef <shihaabyoussef1447@gmail.com>
Date: Tue, 28 Jan 2025 08:29:15 +0000
Subject: [PATCH 16/21] Make task requirement consistent with the solution
 (#37752)

It is a simple change,
I in the `Task 2` it is required that the border should have `1px`,
And the solution has `2px`, also the image provided look a lot more like a `2px`.
---
 .../styling_basics/basic_selectors/selectors_tasks/index.md     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/learn_web_development/core/styling_basics/basic_selectors/selectors_tasks/index.md b/files/en-us/learn_web_development/core/styling_basics/basic_selectors/selectors_tasks/index.md
index 52d8d40c239fb82..b8394a86be8664e 100644
--- a/files/en-us/learn_web_development/core/styling_basics/basic_selectors/selectors_tasks/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/basic_selectors/selectors_tasks/index.md
@@ -80,7 +80,7 @@ span {
 In this task, we want you to make the following changes to the look of the content in this example, without changing the HTML:
 
 - Give the element with an id of `special` a yellow background.
-- Give the element with a class of `alert` a 1px grey border.
+- Give the element with a class of `alert` a 2px grey border.
 - If the element with a class of `alert` also has a class of `stop`, make the background red.
 - If the element with a class of `alert` also has a class of `go`, make the background green.
 

From d896fbe477552229cada68c8b9532ddfa63c5b0e Mon Sep 17 00:00:00 2001
From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com>
Date: Tue, 28 Jan 2025 14:02:18 +0530
Subject: [PATCH 17/21] New Page: SVGFETileElement prop (#37438)

---
 .../web/api/svgfetileelement/in1/index.md     | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 files/en-us/web/api/svgfetileelement/in1/index.md

diff --git a/files/en-us/web/api/svgfetileelement/in1/index.md b/files/en-us/web/api/svgfetileelement/in1/index.md
new file mode 100644
index 000000000000000..cbbc197d7ab1bff
--- /dev/null
+++ b/files/en-us/web/api/svgfetileelement/in1/index.md
@@ -0,0 +1,59 @@
+---
+title: "SVGFETileElement: in1 property"
+short-title: in1
+slug: Web/API/SVGFETileElement/in1
+page-type: web-api-instance-property
+browser-compat: api.SVGFETileElement.in1
+---
+
+{{APIRef("SVG")}}
+
+The **`in1`** read-only property of the {{domxref("SVGFETileElement")}} interface reflects the {{SVGAttr("in")}} attribute of the given {{SVGElement("feTile")}} element.
+
+## Value
+
+An {{domxref("SVGAnimatedString")}} object.
+
+## Examples
+
+### Accessing the `in` Property of `feTile` Element
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter id="tileFilter">
+      <!-- Tiles the SourceGraphic -->
+      <feTile in="SourceGraphic" />
+    </filter>
+  </defs>
+  <rect
+    x="20"
+    y="20"
+    width="100"
+    height="100"
+    style="fill:hotpink;"
+    filter="url(#tileFilter)" />
+</svg>
+```
+
+We can access the `in` attribute of the `feTile` element.
+
+```js
+// Select the feTile element
+const tileElement = document.querySelector("feTile");
+
+// Access the in1 property
+console.log(tileElement.in1.baseVal); // Output: "SourceGraphic"
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGAnimatedString")}}

From 790d45bc5a147380bf7ae78e4e229038e5ce8b98 Mon Sep 17 00:00:00 2001
From: Yash Raj Bharti <43868318+yashrajbharti@users.noreply.github.com>
Date: Tue, 28 Jan 2025 14:05:49 +0530
Subject: [PATCH 18/21] MDN Feature Pages for SVGEllipseElement (#37306)

---
 .../web/api/svgellipseelement/cx/index.md     | 52 +++++++++++++++++++
 .../web/api/svgellipseelement/cy/index.md     | 52 +++++++++++++++++++
 .../web/api/svgellipseelement/rx/index.md     | 52 +++++++++++++++++++
 .../web/api/svgellipseelement/ry/index.md     | 52 +++++++++++++++++++
 4 files changed, 208 insertions(+)
 create mode 100644 files/en-us/web/api/svgellipseelement/cx/index.md
 create mode 100644 files/en-us/web/api/svgellipseelement/cy/index.md
 create mode 100644 files/en-us/web/api/svgellipseelement/rx/index.md
 create mode 100644 files/en-us/web/api/svgellipseelement/ry/index.md

diff --git a/files/en-us/web/api/svgellipseelement/cx/index.md b/files/en-us/web/api/svgellipseelement/cx/index.md
new file mode 100644
index 000000000000000..20990a68ad1f1f6
--- /dev/null
+++ b/files/en-us/web/api/svgellipseelement/cx/index.md
@@ -0,0 +1,52 @@
+---
+title: "SVGEllipseElement: cx property"
+short-title: cx
+slug: Web/API/SVGEllipseElement/cx
+page-type: web-api-instance-property
+browser-compat: api.SVGEllipseElement.cx
+---
+
+{{APIRef("SVG")}}
+
+The **`cx`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the x-axis coordinate of the center of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("cx")}} attribute on the {{SVGElement("ellipse")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the x-coordinate of the ellipse's center in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50" cy="75" rx="30" ry="20" fill="blue" />
+  <ellipse cx="25%" cy="50%" rx="10%" ry="5%" fill="red" />
+</svg>
+```
+
+We can access the computed values of the `cx` attributes:
+
+```js
+const ellipses = document.querySelectorAll("ellipse");
+const cxPos0 = ellipses[0].cx;
+const cxPos1 = ellipses[1].cx;
+
+console.dir(cxPos0.baseVal.value); // output: 50
+console.dir(cxPos1.baseVal.value); // output: 50 (25% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGEllipseElement.cy")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}
diff --git a/files/en-us/web/api/svgellipseelement/cy/index.md b/files/en-us/web/api/svgellipseelement/cy/index.md
new file mode 100644
index 000000000000000..4cbb8feae44829f
--- /dev/null
+++ b/files/en-us/web/api/svgellipseelement/cy/index.md
@@ -0,0 +1,52 @@
+---
+title: "SVGEllipseElement: cy property"
+short-title: cy
+slug: Web/API/SVGEllipseElement/cy
+page-type: web-api-instance-property
+browser-compat: api.SVGEllipseElement.cy
+---
+
+{{APIRef("SVG")}}
+
+The **`cy`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the y-axis coordinate of the center of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("cy")}} attribute on the {{SVGElement("ellipse")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the y-coordinate of the ellipse's center in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50" cy="75" rx="30" ry="20" fill="blue" />
+  <ellipse cx="25%" cy="50%" rx="10%" ry="5%" fill="red" />
+</svg>
+```
+
+We can access the computed values of the `cy` attributes:
+
+```js
+const ellipses = document.querySelectorAll("ellipse");
+const cyPos0 = ellipses[0].cy;
+const cyPos1 = ellipses[1].cy;
+
+console.dir(cyPos0.baseVal.value); // output: 75
+console.dir(cyPos1.baseVal.value); // output: 100 (50% of the viewBox height, 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGEllipseElement.cx")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}
diff --git a/files/en-us/web/api/svgellipseelement/rx/index.md b/files/en-us/web/api/svgellipseelement/rx/index.md
new file mode 100644
index 000000000000000..4e3a3cdf3b6747a
--- /dev/null
+++ b/files/en-us/web/api/svgellipseelement/rx/index.md
@@ -0,0 +1,52 @@
+---
+title: "SVGEllipseElement: rx property"
+short-title: rx
+slug: Web/API/SVGEllipseElement/rx
+page-type: web-api-instance-property
+browser-compat: api.SVGEllipseElement.rx
+---
+
+{{APIRef("SVG")}}
+
+The **`rx`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the x-axis radius of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("rx")}} attribute on the {{SVGElement("ellipse")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the radius of the ellipse along the x-axis in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50" cy="75" rx="30" ry="20" fill="blue" />
+  <ellipse cx="25%" cy="50%" rx="10%" ry="5%" fill="red" />
+</svg>
+```
+
+We can access the computed values of the `rx` attributes:
+
+```js
+const ellipses = document.querySelectorAll("ellipse");
+const rxPos0 = ellipses[0].rx;
+const rxPos1 = ellipses[1].rx;
+
+console.dir(rxPos0.baseVal.value); // output: 30
+console.dir(rxPos1.baseVal.value); // output: 20 (10% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGEllipseElement.ry")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}
diff --git a/files/en-us/web/api/svgellipseelement/ry/index.md b/files/en-us/web/api/svgellipseelement/ry/index.md
new file mode 100644
index 000000000000000..a6e24e692594615
--- /dev/null
+++ b/files/en-us/web/api/svgellipseelement/ry/index.md
@@ -0,0 +1,52 @@
+---
+title: "SVGEllipseElement: ry property"
+short-title: ry
+slug: Web/API/SVGEllipseElement/ry
+page-type: web-api-instance-property
+browser-compat: api.SVGEllipseElement.ry
+---
+
+{{APIRef("SVG")}}
+
+The **`ry`** read-only property of the {{domxref("SVGEllipseElement")}} interface describes the y-axis radius of the ellipse as an {{domxref("SVGAnimatedLength")}}. It reflects the computed value of the {{SVGAttr("ry")}} attribute on the {{SVGElement("ellipse")}} element.
+
+The attribute value is a [`<length>`](/en-US/docs/Web/SVG/Content_type#length), [`<percentage>`](/en-US/docs/Web/SVG/Content_type#percentage), or [`<number>`](/en-US/docs/Web/SVG/Content_type#number). The numeric value of the {{domxref("SVGAnimatedLength.baseVal")}} is the radius of the ellipse along the y-axis in the user coordinate system.
+
+## Value
+
+An {{domxref("SVGAnimatedLength")}}.
+
+## Example
+
+Given the following SVG:
+
+```html
+<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="50" cy="75" rx="30" ry="20" fill="blue" />
+  <ellipse cx="25%" cy="50%" rx="10%" ry="5%" fill="red" />
+</svg>
+```
+
+We can access the computed values of the `ry` attributes:
+
+```js
+const ellipses = document.querySelectorAll("ellipse");
+const ryPos0 = ellipses[0].ry;
+const ryPos1 = ellipses[1].ry;
+
+console.dir(ryPos0.baseVal.value); // output: 20
+console.dir(ryPos1.baseVal.value); // output: 10 (5% of 200)
+```
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGEllipseElement.rx")}}
+- {{domxref("SVGAnimatedLength.baseVal")}}

From e70e952bb730a4e83de034fbf41f83340d752952 Mon Sep 17 00:00:00 2001
From: Brian Smith <brian@smith.berlin>
Date: Tue, 28 Jan 2025 09:56:00 +0100
Subject: [PATCH 19/21] chore(ci): Labeler needs updating after Learn move
 (#37294)

* chore(ci): Update labeler following learn move, make matching coarser

* chore(ci): Update labeler following learn move, make matching coarser

* chore(ci): Update labeler following learn move, make matching coarser

* chore: restore deleted directory configs as comment

* chore: Remove learn from codeowners
---
 .github/CODEOWNERS              | 31 +++++------
 .github/issue-regex-labeler.yml | 44 ++++++++-------
 .github/labeler.yml             | 98 +++++++++++++++------------------
 3 files changed, 80 insertions(+), 93 deletions(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index ddba5d483f4201d..431d60ec7df6c98 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -8,41 +8,36 @@
 # Default content owners
 /files/en-us/ @mdn/yari-content-mdn
 
+# MDN Firefox release notes
+/files/en-us/mozilla/ @mdn/core-yari-content
+
+# Mozilla Add-ons
+/files/en-us/mozilla/add-ons/ @mdn/yari-content-mozilla-add-ons
+
 # Accessibility
 /files/en-us/web/accessibility/ @mdn/yari-content-accessibility
-/files/en-us/learn/accessibility/ @mdn/yari-content-accessibility
+
+# Web API
+/files/en-us/web/api/ @mdn/yari-content-web-api
 
 # CSS
 /files/en-us/web/css/ @mdn/yari-content-css
-/files/en-us/learn/css/ @mdn/yari-content-css
 
 # HTML
 /files/en-us/web/html/ @mdn/yari-content-html
-/files/en-us/learn/html/ @mdn/yari-content-html
-
-# JavaScript
-/files/en-us/web/javascript/ @mdn/yari-content-javascript
-/files/en-us/learn/javascript/ @mdn/yari-content-javascript
 
 # HTTP
 /files/en-us/web/http/ @mdn/yari-content-http
-/files/en-us/learn/server-side/ @mdn/yari-content-http
 
-# Web API
-/files/en-us/web/api/ @mdn/yari-content-web-api
-
-# Mozilla Add-ons
-/files/en-us/mozilla/add-ons/ @mdn/yari-content-mozilla-add-ons
+# JavaScript
+/files/en-us/web/javascript/ @mdn/yari-content-javascript
 
 # MathML
 /files/en-us/web/mathml/ @mdn/content-mathml
 
-# MDN Firefox Release Notes
-/files/en-us/mozilla/firefox @mdn/core-yari-content
-
-# New templates and sidebars
+# Templates and sidebars (rari)
 /files/jsondata/L10n-Template.json @mdn/core-dev
-/files/sidebars @mdn/core-dev
+/files/sidebars/ @mdn/core-dev
 
 # ============================= CONTROL FILES ============================= #
 # The CODEOWNERS file must end with these matches: Any pull request changing
diff --git a/.github/issue-regex-labeler.yml b/.github/issue-regex-labeler.yml
index 35d31ebd9ac8088..36e75d768899d27 100644
--- a/.github/issue-regex-labeler.yml
+++ b/.github/issue-regex-labeler.yml
@@ -19,27 +19,29 @@ Content:HTTP:
 Content:JS:
   - '\/docs\/Web\/JavaScript'
 Content:Learn:
-  - '\/docs\/Learn\/(Common|Front|Getting|Learning|Performance)'
-Content:Learn:Accessibility:
-  - '\/docs\/Learn\/Accessibility'
-Content:Learn:Client-side:
-  - '\/docs\/Learn\/Tools_and_testing\/(Client-side|Understanding_client-side)'
-Content:Learn:Cross-Browser-Testing:
-  - '\/docs\/Learn\/Tools_and_testing\/Cross_browser_testing'
-Content:Learn:CSS:
-  - '\/docs\/Learn\/CSS'
-Content:Learn:Django:
-  - '\/docs\/Learn\/Server-side\/Django'
-Content:Learn:Express:
-  - '\/docs\/Learn\/Server-side\/Express_Nodejs'
-Content:Learn:Forms:
-  - '\/docs\/Learn\/Forms'
-Content:Learn:GitHub:
-  - '\/docs\/Learn\/Tools_and_testing\/GitHub'
-Content:Learn:HTML:
-  - '\/docs\/Learn\/HTML'
-Content:Learn:JavaScript:
-  - '\/docs\/Learn\/JavaScript'
+  - '\/docs\/Learn_web_development\/'
+# Mapping for old directories, see https://github.com/mdn/content/pull/36967
+#
+# Content:Learn:Accessibility:
+#   - '\/docs\/Learn\/Accessibility'
+# Content:Learn:Client-side:
+#   - '\/docs\/Learn\/Tools_and_testing\/(Client-side|Understanding_client-side)'
+# Content:Learn:Cross-Browser-Testing:
+#   - '\/docs\/Learn\/Tools_and_testing\/Cross_browser_testing'
+# Content:Learn:CSS:
+#   - '\/docs\/Learn\/CSS'
+# Content:Learn:Django:
+#   - '\/docs\/Learn\/Server-side\/Django'
+# Content:Learn:Express:
+#   - '\/docs\/Learn\/Server-side\/Express_Nodejs'
+# Content:Learn:Forms:
+#   - '\/docs\/Learn\/Forms'
+# Content:Learn:GitHub:
+#   - '\/docs\/Learn\/Tools_and_testing\/GitHub'
+# Content:Learn:HTML:
+#   - '\/docs\/Learn\/HTML'
+# Content:Learn:JavaScript:
+#   - '\/docs\/Learn\/JavaScript'
 Content:Manifest:
   - '\/docs\/Web\/Manifest'
 Content:MathML:
diff --git a/.github/labeler.yml b/.github/labeler.yml
index 87dfcef8f6e546e..c0359b97d8dc085 100644
--- a/.github/labeler.yml
+++ b/.github/labeler.yml
@@ -57,62 +57,53 @@ Content:JS:
 Content:Learn:
   - changed-files:
       - all-globs-to-any-file:
-          - files/en-us/learn/**
-          - "!files/en-us/learn/accessibility/**"
-          - "!files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/**"
-          - "!files/en-us/learn/tools_and_testing/understanding_client-side_tools/**"
-          - "!files/en-us/learn/tools_and_testing/cross_browser_testing/**"
-          - "!files/en-us/learn/css/**"
-          - "!files/en-us/learn/server-side/django/**"
-          - "!files/en-us/learn/server-side/express_nodejs/**"
-          - "!files/en-us/learn/forms/**"
-          - "!files/en-us/learn/tools_and_testing/github/**"
-          - "!files/en-us/learn/html/**"
-          - "!files/en-us/learn/javascript/**"
+          - files/en-us/learn_web_development/**
   - changed-files:
       - any-glob-to-any-file:
           - files/en-us/web/tutorials/**
-Content:Learn:Accessibility:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/accessibility/**
-Content:Learn:Client-side:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/**
-          - files/en-us/learn/tools_and_testing/understanding_client-side_tools/**
-Content:Learn:Cross-Browser-Testing:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/tools_and_testing/cross_browser_testing/**
-Content:Learn:CSS:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/css/**
-Content:Learn:Django:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/server-side/django/**
-Content:Learn:Express:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/server-side/express_nodejs/**
-Content:Learn:Forms:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/forms/**
-Content:Learn:GitHub:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/tools_and_testing/github/**
-Content:Learn:HTML:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/html/**
-Content:Learn:JavaScript:
-  - changed-files:
-      - any-glob-to-any-file:
-          - files/en-us/learn/javascript/**
+# Mapping for old directories, see https://github.com/mdn/content/pull/36967
+#
+# Content:Learn:Accessibility:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/accessibility/**
+# Content:Learn:Client-side:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/**
+#           - files/en-us/learn/tools_and_testing/understanding_client-side_tools/**
+# Content:Learn:Cross-Browser-Testing:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/tools_and_testing/cross_browser_testing/**
+# Content:Learn:CSS:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/css/**
+# Content:Learn:Django:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/server-side/django/**
+# Content:Learn:Express:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/server-side/express_nodejs/**
+# Content:Learn:Forms:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/forms/**
+# Content:Learn:GitHub:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/tools_and_testing/github/**
+# Content:Learn:HTML:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/html/**
+# Content:Learn:JavaScript:
+#   - changed-files:
+#       - any-glob-to-any-file:
+#           - files/en-us/learn/javascript/**
 Content:Manifest:
   - changed-files:
       - any-glob-to-any-file:
@@ -170,7 +161,6 @@ Content:Other:
   - changed-files:
       - any-glob-to-any-file:
           - files/en-us/related/**
-          - files/en-us/web/demos/**
           - files/en-us/web/exslt/**
           - files/en-us/web/opensearch/**
           - files/en-us/web/privacy/**

From 1c4e5da2952e28729ab4d2f2fee2bb8ee027e39a Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Tue, 28 Jan 2025 11:21:16 +0100
Subject: [PATCH 20/21] fix(scripts): replace `printf` with
 `process.stderr.write` (#37841)

* fix(scripts): replace `printf` with `console.warn()`

`printf` is not available on Windows.

* fix(scripts): write info messages to stderr
---
 package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index af899dae1b23410..7f7f1de72481e9f 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
   },
   "type": "module",
   "scripts": {
-    "info:deprecated": "printf '\\n🗑️  This command is deprecated, and will be removed soon.\\n\\n'",
-    "info:rari": "printf '\\n🐥 This command is now using rari: https://github.com/mdn/rari\\n🐞 Please report any issues here:  https://github.com/mdn/rari/issues/new?template=bug.yml\\n\\n'",
+    "info:deprecated": "node -e \"process.stderr.write('\\n🗑️  This command is deprecated, and will be removed soon.\\n\\n')\"",
+    "info:rari": "node -e \"process.stderr.write('\\n🐥 This command is now using rari: https://github.com/mdn/rari\\n🐞 Please report any issues here:  https://github.com/mdn/rari/issues/new?template=bug.yml\\n\\n')\"",
     "postinstall": "node scripts/update-history.js",
     "build": "yarn -s info:rari && env-cmd --silent cross-env CONTENT_ROOT=files BUILD_OUT_ROOT=build rari-build",
     "build:legacy": "yarn -s info:deprecated && env-cmd --silent cross-env CONTENT_ROOT=files BUILD_OUT_ROOT=build yari-build",

From b8cc989f110379578985d09c9ba02b4dcb0d9a10 Mon Sep 17 00:00:00 2001
From: Claas Augner <495429+caugner@users.noreply.github.com>
Date: Tue, 28 Jan 2025 13:59:42 +0100
Subject: [PATCH 21/21] fix(redirects): remove locale param + validate with
 legacy (#37844)

---
 .lintstagedrc.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.lintstagedrc.js b/.lintstagedrc.js
index 838a8de976078ac..2beaa84d3643b9e 100644
--- a/.lintstagedrc.js
+++ b/.lintstagedrc.js
@@ -1,7 +1,7 @@
 export default {
   "files/en-us/_redirects.txt": (filenames) => [
-    `yarn content fix-redirects en-US`,
-    `yarn content validate-redirects en-us --strict`,
+    `yarn content fix-redirects`,
+    `yarn content:legacy validate-redirects en-us --strict`,
   ],
   "!*.md": (filenames) => [
     `prettier --ignore-unknown --write ${filenames.join(" ")}`,