From b967ee89fd0a52d6451fb1aabeaf566cb5ffb58d Mon Sep 17 00:00:00 2001 From: Mike Janger Date: Tue, 17 Oct 2023 14:51:31 -0500 Subject: [PATCH 01/68] Fix typo (#29684) --- files/en-us/web/css/layout_cookbook/center_an_element/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/layout_cookbook/center_an_element/index.md b/files/en-us/web/css/layout_cookbook/center_an_element/index.md index c0e2d36debe6daf..10b8fefcf6c27b0 100644 --- a/files/en-us/web/css/layout_cookbook/center_an_element/index.md +++ b/files/en-us/web/css/layout_cookbook/center_an_element/index.md @@ -27,7 +27,7 @@ To place an item into the center of another box horizontally and vertically. ## Using flexbox -To center a box within another box, first turn the containing box into a [flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox#the_flex_container) by settings its {{cssxref("display")}} property to `flex`. Then set {{cssxref("align-items")}} to `center` for vertical centering (on the block axis) and {{cssxref("justify-content")}} to `center` for horizontal centering (on the inline axis). And that's all it takes to center one box inside another! +To center a box within another box, first turn the containing box into a [flex container](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox#the_flex_container) by setting its {{cssxref("display")}} property to `flex`. Then set {{cssxref("align-items")}} to `center` for vertical centering (on the block axis) and {{cssxref("justify-content")}} to `center` for horizontal centering (on the inline axis). And that's all it takes to center one box inside another! ### HTML From 3d482995a4aa4c692a055b74a1e7e4dd65df75ff Mon Sep 17 00:00:00 2001 From: A1lo Date: Wed, 18 Oct 2023 03:55:04 +0800 Subject: [PATCH 02/68] chore: align with the context in `overflow-y` (#29671) --- files/en-us/web/css/overflow-x/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/files/en-us/web/css/overflow-x/index.md b/files/en-us/web/css/overflow-x/index.md index 65c0cb0955056a3..40ee948d1c8e96e 100644 --- a/files/en-us/web/css/overflow-x/index.md +++ b/files/en-us/web/css/overflow-x/index.md @@ -45,7 +45,8 @@ If {{cssxref("overflow-y")}} is `hidden`, `scroll`, or `auto`, and the `overflow - : Overflow content is clipped if necessary to fit horizontally inside the element's padding box. Browsers display scroll bars in the horizontal direction whether or not any content is actually clipped. (This prevents scroll bars from appearing or disappearing when the content changes.) Printers may still print overflowing content. - `auto` - : Overflow content is clipped at the element's padding box, and overflow content can be scrolled into view. Unlike `scroll`, user agents display scroll bars _only if_ the content is overflowing and hide scroll bars by default. If content fits inside the element's padding box, it looks the same as with `visible`, but still establishes a new block-formatting context. Desktop browsers provide scroll bars if content overflows. - > **Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space. + +> **Note:** The keyword value `overlay` is a legacy value alias for `auto`. With `overlay`, the scroll bars are drawn on top of the content instead of taking up space. ## Formal definition From 8336c5b49bca051c66e8327afee6da70dfe49f15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ji=C5=99=C3=AD=20Hofman?= Date: Wed, 18 Oct 2023 02:19:47 +0200 Subject: [PATCH 03/68] Fix typo in example for returnPathDirectories (#29674) --- files/en-us/web/api/file_system_api/index.md | 2 +- files/en-us/web/api/filesystemdirectoryhandle/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/api/file_system_api/index.md b/files/en-us/web/api/file_system_api/index.md index eb106d94c72880a..b5274508a489499 100644 --- a/files/en-us/web/api/file_system_api/index.md +++ b/files/en-us/web/api/file_system_api/index.md @@ -116,7 +116,7 @@ async function returnPathDirectories(directoryHandle) { return; } - // Check if handle exists inside directory our directory handle + // Check if handle exists inside our directory handle const relativePaths = await directoryHandle.resolve(handle); if (relativePaths === null) { diff --git a/files/en-us/web/api/filesystemdirectoryhandle/index.md b/files/en-us/web/api/filesystemdirectoryhandle/index.md index bba7a76fd48485c..aec72b0ed575f7a 100644 --- a/files/en-us/web/api/filesystemdirectoryhandle/index.md +++ b/files/en-us/web/api/filesystemdirectoryhandle/index.md @@ -69,7 +69,7 @@ async function returnPathDirectories(directoryHandle) { return; } - // Check if handle exists inside directory our directory handle + // Check if handle exists inside our directory handle const relativePaths = await directoryHandle.resolve(handle); if (relativePath === null) { From f89df1bb60b0d71d3e41bf5b1c0d8cb4eac45a27 Mon Sep 17 00:00:00 2001 From: skyclouds2001 <95597335+skyclouds2001@users.noreply.github.com> Date: Wed, 18 Oct 2023 08:21:31 +0800 Subject: [PATCH 04/68] Fix exception section of `Element.releasePointerCapture()` (#29683) --- files/en-us/web/api/element/releasepointercapture/index.md | 6 +++--- files/en-us/web/api/element/setpointercapture/index.md | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/api/element/releasepointercapture/index.md b/files/en-us/web/api/element/releasepointercapture/index.md index bf945553b7eed4c..dd0e340bfab0cab 100644 --- a/files/en-us/web/api/element/releasepointercapture/index.md +++ b/files/en-us/web/api/element/releasepointercapture/index.md @@ -34,9 +34,8 @@ None ({{jsxref("undefined")}}). ### Exceptions -| Exception | Explanation | -| ------------------ | ---------------------------------------------------- | -| `InvalidPointerId` | pointerId does not match any of the active pointers. | +- `NotFoundError` {{domxref("DOMException")}} + - : Thrown if `pointerId` does not match any active pointer. ## Examples @@ -100,5 +99,6 @@ slider.onpointerup = stopSliding; ## See also +- {{ domxref("Element.hasPointerCapture","Element.hasPointerCapture()") }} - {{ domxref("Element.setPointerCapture","Element.setPointerCapture()") }} - {{ domxref("Pointer_events","Pointer Events") }} diff --git a/files/en-us/web/api/element/setpointercapture/index.md b/files/en-us/web/api/element/setpointercapture/index.md index 3733038b10e7f94..7b028acf05da5bc 100644 --- a/files/en-us/web/api/element/setpointercapture/index.md +++ b/files/en-us/web/api/element/setpointercapture/index.md @@ -109,5 +109,6 @@ slider.onpointerup = stopSliding; ## See also -- {{domxref("Element.releasePointerCapture")}} +- {{domxref("Element.hasPointerCapture","Element.hasPointerCapture()")}} +- {{domxref("Element.releasePointerCapture","Element.releasePointerCapture()")}} - {{domxref("Pointer_events","Pointer Events")}} From 16129cdfd44c1d71c0c02eee954e1a423f8d9804 Mon Sep 17 00:00:00 2001 From: manjuu-eater <88940383+manjuu-eater@users.noreply.github.com> Date: Wed, 18 Oct 2023 13:08:44 +0900 Subject: [PATCH 05/68] improvement sample code (#29691) --- .../web/javascript/reference/global_objects/set/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/javascript/reference/global_objects/set/index.md b/files/en-us/web/javascript/reference/global_objects/set/index.md index 7be9a3418de9032..c607c14bf1e4aa8 100644 --- a/files/en-us/web/javascript/reference/global_objects/set/index.md +++ b/files/en-us/web/javascript/reference/global_objects/set/index.md @@ -271,11 +271,11 @@ console.log([...mySet]); // Will show you exactly the same Array as myArray ```js // Use to remove duplicate elements from an array -const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5]; +const numbers = [2, 13, 4, 4, 2, 13, 13, 4, 4, 5, 5, 6, 6, 7, 5, 32, 13, 4, 5]; console.log([...new Set(numbers)]); -// [2, 3, 4, 5, 6, 7, 32] +// [2, 13, 4, 5, 6, 7, 32] ``` ### Relation to strings From 2b755cb8956579d1e0b9043acc41e7fc8e91d8d8 Mon Sep 17 00:00:00 2001 From: Mason Lynass <109309370+mason-lynass@users.noreply.github.com> Date: Wed, 18 Oct 2023 00:07:43 -0700 Subject: [PATCH 06/68] Update index.md (#29697) just one spelling thing I noticed while reading docs --- files/en-us/web/html/element/dialog/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/html/element/dialog/index.md b/files/en-us/web/html/element/dialog/index.md index 59117e231a7f62b..ce0cde43a27726d 100644 --- a/files/en-us/web/html/element/dialog/index.md +++ b/files/en-us/web/html/element/dialog/index.md @@ -55,7 +55,7 @@ This dialog is initially open because of the presence of the `open` attribute. D ### Creating a modal dialog -This example demonstrates a modal dialog with a [gradient](/en-US/docs/Web/CSS/gradient) backdrop. The `.showModal()` method opens the modal dialog when the "Show the dialog" button is activated. The dialog can be closed by pressing the Esc key or via the `close()` method when the "Close" button withing the dialog is activated. +This example demonstrates a modal dialog with a [gradient](/en-US/docs/Web/CSS/gradient) backdrop. The `.showModal()` method opens the modal dialog when the "Show the dialog" button is activated. The dialog can be closed by pressing the Esc key or via the `close()` method when the "Close" button within the dialog is activated. When a dialog opens, the browser, by default, gives focus to the first element that can be focused within the dialog. In this example, the [`autofocus`](/en-US/docs/Web/HTML/Global_attributes/autofocus) attribute is applied to the "Close" button, giving it focus when the dialog opens, as this is the element we expect the user will interact with immediately after the dialog opens. From 149f1f0cbca899c4da6a48889120f986650656c8 Mon Sep 17 00:00:00 2001 From: David LJ Date: Wed, 18 Oct 2023 09:11:43 +0200 Subject: [PATCH 07/68] Reword requestAnimationFrame intro phrase (#29695) --- files/en-us/web/api/window/requestanimationframe/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/window/requestanimationframe/index.md b/files/en-us/web/api/window/requestanimationframe/index.md index da4afe175c3dcd3..6e9a166d83e4b1e 100644 --- a/files/en-us/web/api/window/requestanimationframe/index.md +++ b/files/en-us/web/api/window/requestanimationframe/index.md @@ -9,7 +9,7 @@ browser-compat: api.Window.requestAnimationFrame {{APIRef}} The **`window.requestAnimationFrame()`** method tells the -browser that you wish to perform an animation. I requests that the browser call a +browser that you wish to perform an animation. It requests the browser to call a user-supplied callback function prior to the next repaint. The frequency of calls to the callback function will generally match the display From 3ed31efa31a314d57cde35746d05f626e9508d2b Mon Sep 17 00:00:00 2001 From: bvandersloot-mozilla <90582190+bvandersloot-mozilla@users.noreply.github.com> Date: Wed, 18 Oct 2023 04:12:57 -0400 Subject: [PATCH 08/68] Remove inaccurate Firefox errata (#29622) Co-authored-by: Brian Thomas Smith --- files/en-us/web/api/storage_access_api/index.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/files/en-us/web/api/storage_access_api/index.md b/files/en-us/web/api/storage_access_api/index.md index 40a0481f9d09f85..58e4b037061a256 100644 --- a/files/en-us/web/api/storage_access_api/index.md +++ b/files/en-us/web/api/storage_access_api/index.md @@ -86,8 +86,6 @@ Although the API surface is the same, websites using the Storage Access API shou Design properties unique to Firefox are summarized here: - If the embedded origin `tracker.example` has already obtained unpartitioned cookie access on the top-level origin `foo.example`, and the user visits a page from `foo.example` embedding a page from `tracker.example` again in less than 30 days, the embedded origin will have unpartitioned cookie access immediately when loading. -- If an embedded page from `tracker.example` has previously successfully obtained unpartitioned cookie access on top-level origin `foo.example`, all embedded subresources from `tracker.example` on `foo.example` (e.g. scripts, images, stylesheets, etc.) will load with access to their cookies, which means they may send Cookie headers and honor incoming {{httpheader("Set-Cookie")}} headers. -- In Firefox, when the promise returned from `requestStorageAccess()` is resolved, the embedded page will gain access to its entire first-party storage, not just unpartitioned cookies. This includes access to APIs such as [Web Storage](/en-US/docs/Web/API/Web_Storage_API), [IndexedDB](/en-US/docs/Web/API/IndexedDB_API), [DOM Cache](/en-US/docs/Web/API/Cache), and so on. - The storage access grants are phased out after 30 calendar days have passed. Documentation for Firefox's new storage access policy for blocking tracking cookies includes [a detailed description](/en-US/docs/Web/Privacy/Storage_Access_Policy#storage_access_grants) of the scope of storage access grants. From 59897d30821b4b57d1c92d87d5b97e886d18ed7d Mon Sep 17 00:00:00 2001 From: Kian Yang Lee Date: Wed, 18 Oct 2023 20:25:56 +0800 Subject: [PATCH 09/68] Fix invalid CSS value for grid-template-row of repeat(1fr) (#29675) --- files/en-us/learn/css/css_layout/grids/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/learn/css/css_layout/grids/index.md b/files/en-us/learn/css/css_layout/grids/index.md index 76246af141c5da0..9008f6bbd03ff91 100644 --- a/files/en-us/learn/css/css_layout/grids/index.md +++ b/files/en-us/learn/css/css_layout/grids/index.md @@ -752,7 +752,7 @@ body { .container { display: grid; grid-template-columns: repeat(4, 1fr); - grid-template-rows: repeat(1fr); + grid-template-rows: repeat(1, 1fr); gap: 10px; } From 7c1f91ddd9cd584b041d18a916ab850a226824ad Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Wed, 18 Oct 2023 14:32:39 +0100 Subject: [PATCH 10/68] Add docs for Document Picture-In-Picture API (#28557) * Add docs for Document Picture-In-Picture API * Update example code for parity with complete example after changes were made * Making fixes for beaufortfrancis review comments * Update files/en-us/web/api/document_picture-in-picture_api/index.md Co-authored-by: Brian Thomas Smith * Update files/en-us/web/api/document_picture-in-picture_api/using/index.md Co-authored-by: Brian Thomas Smith * Update files/en-us/web/api/document_picture-in-picture_api/index.md Co-authored-by: Brian Thomas Smith * Add note about clamping size of pip window --------- Co-authored-by: Brian Thomas Smith --- .../document_picture-in-picture_api/index.md | 67 ++++++ .../using/index.md | 194 ++++++++++++++++++ .../enter_event/index.md | 64 ++++++ .../web/api/documentpictureinpicture/index.md | 62 ++++++ .../requestwindow/index.md | 77 +++++++ .../documentpictureinpicture/window/index.md | 53 +++++ .../documentpictureinpictureevent/index.md | 68 ++++++ .../documentpictureinpictureevent/index.md | 67 ++++++ .../window/index.md | 55 +++++ .../web/api/picture-in-picture_api/index.md | 5 +- .../window/documentpictureinpicture/index.md | 47 +++++ files/en-us/web/api/window/index.md | 2 + files/jsondata/GroupData.json | 11 + 13 files changed, 771 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/api/document_picture-in-picture_api/index.md create mode 100644 files/en-us/web/api/document_picture-in-picture_api/using/index.md create mode 100644 files/en-us/web/api/documentpictureinpicture/enter_event/index.md create mode 100644 files/en-us/web/api/documentpictureinpicture/index.md create mode 100644 files/en-us/web/api/documentpictureinpicture/requestwindow/index.md create mode 100644 files/en-us/web/api/documentpictureinpicture/window/index.md create mode 100644 files/en-us/web/api/documentpictureinpictureevent/documentpictureinpictureevent/index.md create mode 100644 files/en-us/web/api/documentpictureinpictureevent/index.md create mode 100644 files/en-us/web/api/documentpictureinpictureevent/window/index.md create mode 100644 files/en-us/web/api/window/documentpictureinpicture/index.md diff --git a/files/en-us/web/api/document_picture-in-picture_api/index.md b/files/en-us/web/api/document_picture-in-picture_api/index.md new file mode 100644 index 000000000000000..8a9635c068d0d63 --- /dev/null +++ b/files/en-us/web/api/document_picture-in-picture_api/index.md @@ -0,0 +1,67 @@ +--- +title: Document Picture-in-Picture API +slug: Web/API/Document_Picture-in-Picture_API +page-type: web-api-overview +status: + - experimental +browser-compat: api.Window.documentPictureInPicture +--- + +{{SeeCompatTable}}{{DefaultAPISidebar("Document Picture-in-Picture API")}}{{securecontext_header}} + +The **Document Picture-in-Picture API** makes it possible to open an always-on-top window that can be populated with arbitrary HTML content — for example a video with custom controls or a set of streams showing the participants of a video conference call. It extends the earlier [Picture-in-Picture API for `