Merge remote-tracking branch 'upstream/main' into performance

files/en-us/_redirects.txt

@@ -8000,7 +8000,7 @@
 /en-US/docs/Web/API/Document/onselectionchange	/en-US/docs/Web/API/Document/selectionchange_event
 /en-US/docs/Web/API/Document/onsubmit	/en-US/docs/Web/API/HTMLFormElement/submit_event
 /en-US/docs/Web/API/Document/onvisibilitychange	/en-US/docs/Web/API/Document/visibilitychange_event
-/en-US/docs/Web/API/Document/origin	/en-US/docs/Web/API/origin
+/en-US/docs/Web/API/Document/origin	/en-US/docs/Web/API/Window/origin
 /en-US/docs/Web/API/Document/pointercancel_event	/en-US/docs/Web/API/Element/pointercancel_event
 /en-US/docs/Web/API/Document/pointerdown_event	/en-US/docs/Web/API/Element/pointerdown_event
 /en-US/docs/Web/API/Document/pointerenter_event	/en-US/docs/Web/API/Element/pointerenter_event
@@ -10261,7 +10261,7 @@
 /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch	/en-US/docs/Web/API/fetch
 /en-US/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB	/en-US/docs/Web/API/Window/indexedDB
 /en-US/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext	/en-US/docs/Web/API/Window/isSecureContext
-/en-US/docs/Web/API/WindowOrWorkerGlobalScope/origin	/en-US/docs/Web/API/origin
+/en-US/docs/Web/API/WindowOrWorkerGlobalScope/origin	/en-US/docs/Web/API/Window/origin
 /en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask	/en-US/docs/Web/API/queueMicrotask
 /en-US/docs/Web/API/WindowOrWorkerGlobalScope/rejectionhandled_event	/en-US/docs/Web/API/Window/rejectionhandled_event
 /en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval	/en-US/docs/Web/API/setInterval
@@ -10516,7 +10516,7 @@
 /en-US/docs/Web/API/document.onoffline	/en-US/docs/Web/API/Window/offline_event
 /en-US/docs/Web/API/document.ononline	/en-US/docs/Web/API/Window/online_event
 /en-US/docs/Web/API/document.open	/en-US/docs/Web/API/Document/open
-/en-US/docs/Web/API/document.origin	/en-US/docs/Web/API/origin
+/en-US/docs/Web/API/document.origin	/en-US/docs/Web/API/Window/origin
 /en-US/docs/Web/API/document.plugins	/en-US/docs/Web/API/Document/plugins
 /en-US/docs/Web/API/document.pointerLockElement	/en-US/docs/Web/API/Document/pointerLockElement
 /en-US/docs/Web/API/document.preferredStyleSheetSet	/en-US/docs/Web/API/Document/preferredStyleSheetSet
@@ -10704,6 +10704,7 @@
 /en-US/docs/Web/API/notification_1/vibrate	/en-US/docs/Web/API/Notification/vibrate
 /en-US/docs/Web/API/onMSVideoOptimalLayoutChanged	/en-US/docs/Web/API/HTMLVideoElement
 /en-US/docs/Web/API/onMSVideoOptimalLayoutChanged_	/en-US/docs/Web/API/HTMLVideoElement
+/en-US/docs/Web/API/origin	/en-US/docs/Web/API/Window/origin
 /en-US/docs/Web/API/performance_property	/en-US/docs/Web/API/Window/performance
 /en-US/docs/Web/API/range.cloneContents	/en-US/docs/Web/API/range/cloneContents
 /en-US/docs/Web/API/range.cloneRange	/en-US/docs/Web/API/range/cloneRange

files/en-us/_wikihistory.json

@@ -67831,6 +67831,17 @@
       "louisremi"
     ]
   },
+  "Web/API/Window/origin": {
+    "modified": "2020-10-15T21:51:30.388Z",
+    "contributors": [
+      "mfuji09",
+      "fscholz",
+      "Sheppy",
+      "Bzbarsky",
+      "chrisdavidmills",
+      "ziyunfei"
+    ]
+  },
   "Web/API/Window/outerHeight": {
     "modified": "2020-10-15T21:10:01.529Z",
     "contributors": [
@@ -71587,17 +71598,6 @@
       "kscarfone"
     ]
   },
-  "Web/API/origin": {
-    "modified": "2020-10-15T21:51:30.388Z",
-    "contributors": [
-      "mfuji09",
-      "fscholz",
-      "Sheppy",
-      "Bzbarsky",
-      "chrisdavidmills",
-      "ziyunfei"
-    ]
-  },
   "Web/API/queueMicrotask": {
     "modified": "2020-10-15T22:21:06.789Z",
     "contributors": [

files/en-us/learn/css/building_blocks/backgrounds_and_borders/index.md

@@ -94,7 +94,7 @@ The _balloons.jpg_ image used in the initial background images example, is a lar
 
 You can also use keywords:
 
-- `cover` — the browser will make the image just large enough so that it completely covers the box area while still retaining its aspect ratio. In this case, part of the image is likely to end up outside the box.
+- `cover` — the browser will make the image just large enough so that it completely covers the box area while still retaining its {{glossary("aspect ratio")}}. In this case, part of the image is likely to end up outside the box.
 - `contain` — the browser will make the image the right size to fit inside the box. In this case, you may end up with gaps on either side or on the top and bottom of the image, if the aspect ratio of the image is different from that of the box.
 
 In the example below, the _balloons.jpg_ image has length units set to size it inside the box. You can see this has distorted the image.

files/en-us/learn/css/building_blocks/images_media_form_elements/index.md

@@ -41,15 +41,15 @@ In this lesson we will take a look at how certain special elements are treated i
 
 Images and video are described as **[replaced elements](/en-US/docs/Web/CSS/Replaced_element)**. This means that CSS cannot affect the internal layout of these elements — only their position on the page amongst other elements. As we will see however, there are various things that CSS can do with an image.
 
-Certain replaced elements, such as images and video, are also described as having an **aspect ratio**. This means that it has a size in both the horizontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default.
+Certain replaced elements, such as images and video, are also described as having an **{{glossary("aspect ratio")}}**. This means that it has a size in both the horizontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default.
 
 ## Sizing images
 
 As you already know from following these lessons, everything in CSS generates a box. If you place an image inside a box that is smaller or larger than the intrinsic dimensions of the image file in either direction, it will either appear smaller than the box, or overflow the box. You need to make a decision about what happens with the overflow.
 
 In the example below we have two boxes, both 200 pixels in size:
 
-- One contains an image which is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it.
+- One contains an image that is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it.
 - The other is larger than 200 pixels and overflows the box.
 
 {{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}

files/en-us/learn/css/building_blocks/writing_modes_tasks/index.md

@@ -30,7 +30,7 @@ Try updating the live code below to recreate the finished example:
 
 ## Task 2
 
-In this task, we want you to use logical properties to replace `width` and `height` in order to maintain the aspect ratio of the box as it is turned vertically.
+In this task, we want you to use logical properties to replace `width` and `height` in order to maintain the {{glossary("aspect ratio")}} of the box as it is turned vertically.
 
 Your final result should look like the image below:
 

files/en-us/learn/css/css_layout/responsive_design/index.md

@@ -166,7 +166,7 @@ This scales media to ensure they never overflow their containers. Using a single
 
 Responsive Images, using the {{htmlelement("picture")}} element and the {{htmlelement("img")}} `srcset` and `sizes` attributes enables serving images targeted to the user's viewport and the device's resolution. For example, you can include a square image for mobile, but show the same scene as a landscape image on desktop.
 
-The `<picture>` element enables providing multiple sizes along with "hints" (metadata that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. Using `<picture>` along with `max-width` removes the need for sizing images with media queries. It enables targeting images with different aspect ratios to different viewport sizes.
+The `<picture>` element enables providing multiple sizes along with "hints" (metadata that describes the screen size and resolution the image is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using. Using `<picture>` along with `max-width` removes the need for sizing images with media queries. It enables targeting images with different {{glossary("aspect ratio", "aspect ratios")}} to different viewport sizes.
 
 You can also _art direct_ images used at different sizes, thus providing a different crop or completely different image to different screen sizes.
 

files/en-us/learn/css/howto/fill_a_box_with_an_image/index.md

@@ -10,7 +10,7 @@ In this guide you can learn a technique for causing an HTML image to completely
 
 ## Using object-fit
 
-When you add an image to a page using the HTML {{htmlelement("img")}} element, the image will maintain the size and aspect ratio of the image file, or that of any HTML [`width`](/en-US/docs/Web/HTML/Global_attributes#width) or [`height`](/en-US/docs/Web/HTML/Global_attributes#height) attributes. Sometimes you would like the image to completely fill the box that you have placed it in. In that case you first need to decide what happens if the image is the wrong aspect ratio for the container.
+When you add an image to a page using the HTML {{htmlelement("img")}} element, the image will maintain the size and {{glossary("aspect ratio")}} of the image file, or that of any HTML [`width`](/en-US/docs/Web/HTML/Global_attributes#width) or [`height`](/en-US/docs/Web/HTML/Global_attributes#height) attributes. Sometimes you would like the image to completely fill the box that you have placed it in. In that case you first need to decide what happens if the image is the wrong aspect ratio for the container.
 
 1. The image should completely fill the box, retaining aspect ratio, and cropping any excess on the side that is too big to fit.
 2. The image should fit inside the box, with the background showing through as bars on the too-small side.

files/en-us/learn/css/howto/index.md

@@ -13,7 +13,7 @@ This page rounds up questions and answers, and other material on the MDN site th
 - [How do I add a drop-shadow to an element?](/en-US/docs/Learn/CSS/Howto/Add_a_shadow)
   - : Shadows can be added to boxes with the {{cssxref("box-shadow")}} property. This tutorial explains how it works and shows an example.
 - [How do I fill a box with an image without distorting the image?](/en-US/docs/Learn/CSS/Howto/Fill_a_box_with_an_image)
-  - : The {{cssxref("object-fit")}} property provides different ways to fit an image into a box which has a different aspect ratio, and you can find out how to use them in this tutorial.
+  - : The {{cssxref("object-fit")}} property provides different ways to fit an image into a box which has a different {{glossary("aspect ratio")}}, and you can find out how to use them in this tutorial.
 - [Which methods can be used to style boxes?](/en-US/docs/Learn/CSS/Howto/Create_fancy_boxes)
   - : A rundown of the different properties that might be useful when styling boxes using CSS.
 - [How can I make elements semi-transparent?](/en-US/docs/Learn/CSS/Howto/Make_box_transparent)

files/en-us/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md

@@ -93,7 +93,7 @@ In this section we'll go through the different ways in which you can add SVG vec
 
 ### The quick way: `img` element
 
-To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a `height` or a `width` attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML).
+To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a `height` or a `width` attribute (or both if your SVG has no inherent {{glossary("aspect ratio")}}). If you have not already done so, please read [Images in HTML](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML).
 
 ```html
 <img

files/en-us/learn/html/multimedia_and_embedding/images_in_html/index.md

@@ -174,7 +174,7 @@ For an excellent article on the history of this feature, see [Setting height and
 
 > **Note:** Although, as we have said, it is good practice to specify the _actual_ size of your images using HTML attributes, you should not use them to _resize_ images.
 >
-> If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct [aspect ratio](https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29). You should use an image editor to put your image at the correct size before putting it on your webpage.
+> If you set the image size too big, you'll end up with images that look grainy, fuzzy, or too small, and wasting bandwidth downloading an image that is not fitting the user's needs. The image may also end up looking distorted, if you don't maintain the correct {{glossary("aspect ratio")}}. You should use an image editor to put your image at the correct size before putting it on your webpage.
 >
 > If you do need to alter an image's size, you should use [CSS](/en-US/docs/Learn/CSS) instead.
 

files/en-us/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md

@@ -18,7 +18,7 @@ In this task, we want you to embed a simple image of some Blueberries into the p
 
 - Add the path to the image to an appropriate attribute to embed it on the page. The image is called `blueberries.jpg`, and it is in a folder inside the current folder called `images`.
 - Add some alternative text to an appropriate attribute to describe the image, for people that cannot see it.
-- Give the `<img>` element an appropriate `width` and `height` so that it displays at the correct aspect ratio, and enough space is left on the page to display it. The image's intrinsic size is 615 x 419 pixels.
+- Give the `<img>` element an appropriate `width` and `height` so that it displays at the correct {{glossary("aspect ratio")}}, and enough space is left on the page to display it. The image's {{glossary("intrinsic size")}} is 615 x 419 pixels.
 
 Try updating the live code below to recreate the finished example:
 

files/en-us/learn/javascript/building_blocks/conditionals/index.md

@@ -678,25 +678,14 @@ If you make a mistake, you can always reset the example with the "Reset" button.
 
 ```html hidden
 <h2>Live output</h2>
-<div class="output" style="height: 300px;">
-  <label for="theme">Select theme: </label>
-  <select id="theme">
-    <option value="white">White</option>
-    <option value="black">Black</option>
-    <option value="purple">Purple</option>
-    <option value="yellow">Yellow</option>
-    <option value="psychedelic">Psychedelic</option>
-  </select>
-
-  <h1>This is my website</h1>
-</div>
+<iframe id="output" width="100%" height="350px"></iframe>
 
 <h2>Editable code</h2>
 <p class="a11y-label">
   Press Esc to move focus away from the code area (Tab inserts a tab character).
 </p>
 
-<textarea id="code" class="playable-code" style="height: 450px;width: 95%">
+<textarea id="code" class="playable-code" style="height: 400px;width: 95%">
 const select = document.querySelector('select');
 const html = document.querySelector('.output');
 
@@ -741,36 +730,14 @@ body {
 ```
 
 ```js hidden
-const textarea = document.getElementById("code");
 const reset = document.getElementById("reset");
 const solution = document.getElementById("solution");
-let code = textarea.value;
-let userEntry = textarea.value;
-
-function updateCode() {
-  eval(textarea.value);
-}
-
-reset.addEventListener("click", function () {
-  textarea.value = code;
-  userEntry = textarea.value;
-  solutionEntry = jsSolution;
-  solution.value = "Show solution";
-  updateCode();
-});
-
-solution.addEventListener("click", function () {
-  if (solution.value === "Show solution") {
-    textarea.value = solutionEntry;
-    solution.value = "Hide solution";
-  } else {
-    textarea.value = userEntry;
-    solution.value = "Show solution";
-  }
-  updateCode();
-});
+const outputIFrame = document.querySelector("#output");
+const textarea = document.getElementById("code");
+const initialCode = textarea.value;
+let userCode = textarea.value;
 
-const jsSolution = `const select = document.querySelector('select');
+const solutionCode = `const select = document.querySelector('select');
 const html = document.querySelector('.output');
 
 select.addEventListener('change', () => {
@@ -800,15 +767,65 @@ function update(bgColor, textColor) {
   html.style.color = textColor;
 }`;
 
-let solutionEntry = jsSolution;
+function outputDocument(code) {
+  const outputBody = `
+<div class="output" style="height: 300px;">
+  <label for="theme">Select theme: </label>
+  <select id="theme">
+    <option value="white">White</option>
+    <option value="black">Black</option>
+    <option value="purple">Purple</option>
+    <option value="yellow">Yellow</option>
+    <option value="psychedelic">Psychedelic</option>
+  </select>
+
+  <h1>This is my website</h1>
+</div>`;
+
+  return `
+<!doctype html>
+<html>
+  <head>
+  </head>
+  <body>
+    ${outputBody}
+    <script>${code}</script>
+  </body>
+</html>`;
+}
+
+function update() {
+  output.setAttribute("srcdoc", outputDocument(textarea.value));
+}
+
+update();
+
+textarea.addEventListener("input", update);
 
-textarea.addEventListener("input", updateCode);
-window.addEventListener("load", updateCode);
+reset.addEventListener("click", () => {
+  textarea.value = initialCode;
+  userEntry = textarea.value;
+  solution.value = "Show solution";
+  update();
+});
+
+solution.addEventListener("click", () => {
+  if (solution.value === "Show solution") {
+    // remember the state of the user's code
+    // so we can restore it
+    userCode = textarea.value;
+    textarea.value = solutionCode;
+    solution.value = "Hide solution";
+  } else {
+    textarea.value = userCode;
+    solution.value = "Show solution";
+  }
+  update();
+});
 
 // stop tab key tabbing out of textarea and
 // make it write a tab at the caret position instead
-
-textarea.onkeydown = function (e) {
+textarea.onkeydown = (e) => {
   if (e.keyCode === 9) {
     e.preventDefault();
     insertAtCaret("\t");
@@ -835,20 +852,6 @@ function insertAtCaret(text) {
   textarea.focus();
   textarea.scrollTop = scrollPos;
 }
-
-// Update the saved userCode every time the user updates the text area code
-
-textarea.onkeyup = function () {
-  // We only want to save the state when the user code is being shown,
-  // not the solution, so that solution is not saved over the user code
-  if (solution.value === "Show solution") {
-    userEntry = textarea.value;
-  } else {
-    solutionEntry = textarea.value;
-  }
-
-  updateCode();
-};
 ```
 
 {{ EmbedLiveSample('Active_learning_More_color_choices', '100%', 950) }}

files/en-us/learn/javascript/client-side_web_apis/drawing_graphics/index.md

@@ -731,7 +731,7 @@ Let's look at a simple example of how to create something with a WebGL library.
    The [`PerspectiveCamera()`](https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera) constructor takes four arguments:
 
    - The field of view: How wide the area in front of the camera is that should be visible onscreen, in degrees.
-   - The aspect ratio: Usually, this is the ratio of the scene's width divided by the scene's height. Using another value will distort the scene (which might be what you want, but usually isn't).
+   - The {{glossary("aspect ratio")}}: Usually, this is the ratio of the scene's width divided by the scene's height. Using another value will distort the scene (which might be what you want, but usually isn't).
    - The near plane: How close to the camera objects can be before we stop rendering them to the screen. Think about how when you move your fingertip closer and closer to the space between your eyes, eventually you can't see it anymore.
    - The far plane: How far away things are from the camera before they are no longer rendered.