From ae5a7ec85788c5b03e5b426b772d41940b295724 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Mon, 25 Mar 2024 22:46:07 -0700 Subject: [PATCH 01/14] Allow top layer elements to be nested within popovers This allows top layer elements, including the dialog element, to be nested inside of an open popover, by not closing the popover when the new top layer element is opened. Without this patch, opening a modal dialog inside of a popover will make the page inert and make the dialog invisible. Fixes #9998. See also https://github.com/whatwg/fullscreen/pull/237. --- source | 87 ++++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 63 insertions(+), 24 deletions(-) diff --git a/source b/source index 711e1a3ea51..589b0f62182 100644 --- a/source +++ b/source @@ -61305,8 +61305,14 @@ interface HTMLDialogElement : HTMLElement {

  • Set this's previously focused element to the focused element.

    • -

  • Run hide all popovers given this's node - document.

    • +

  • Let hideUntil be the result of running topmost popover ancestor + given this, null, and false.

    • + +

  • If hideUntil is null, then set hideUntil to this's + node document.

    • + +

  • Run hide all popovers until given + hideUntil, false, and true.

  • Run the dialog focusing steps given this.

    • @@ -61368,8 +61374,14 @@ interface HTMLDialogElement : HTMLElement {

  • Set this's previously focused element to the focused element.

    • -

  • Run hide all popovers given this's node - document.

    • +

  • Let hideUntil be the result of running topmost popover ancestor + given this, null, and false.

    • + +

  • If hideUntil is null, then set hideUntil to this's + node document.

    • + +

  • Run hide all popovers until given + hideUntil, false, and true.

  • Run the dialog focusing steps given this.

    • @@ -84844,7 +84856,7 @@ dictionary DragEventInit : MouseEventInit { data-x="attr-popover">popover attribute.

  • Let ancestor be the result of running the topmost popover - ancestor algorithm given element and invoker.

    • + ancestor algorithm given element, invoker, and true.

  • If ancestor is null, then set ancestor to document.

    • @@ -85117,7 +85129,7 @@ dictionary DragEventInit : MouseEventInit { data-x="popover-showing-state">showing; otherwise false.

    -

    To hide all popovers until, given an To hide all popovers until, given an HTML element or Document endpoint, a boolean focusPreviousElement, and a boolean fireEvents:

    @@ -85209,21 +85221,17 @@ dictionary DragEventInit : MouseEventInit { happens. For example, during light-dismiss of a popover, this algorithm ensures that we close only the popovers that aren't related to the node clicked by the user.

    -

    To hide all popovers, given a Document document, run - hide all popovers until given document, - false, and false.

    - -

    To find the topmost popover ancestor, given a Node - newPopover, and an HTML element or null - invoker, perform the following steps. They return an HTML element or null.

    +

    To find the topmost popover ancestor, given a Node + newPopoverOrTopLayerElement, an HTML element or + null invoker, and a boolean isPopover, perform the following steps. They + return an HTML element or null.

    The topmost popover ancestor algorithm will return the topmost (latest in the - showing auto popover list) ancestor popover for the provided popover. Popovers can - be related to each other in several ways, creating a tree of popovers. There are two paths - through which one popover (call it the "child" popover) can have a topmost ancestor popover (call - it the "parent" popover):

    + showing auto popover list) ancestor popover for the provided popover or top layer + element. Popovers can be related to each other in several ways, creating a tree of popovers. + There are two paths through which one popover (call it the "child" popover) can have a topmost + ancestor popover (call it the "parent" popover):

    1. The popovers are nested within each other in the node tree. In this case, the descendant @@ -85241,14 +85249,45 @@ dictionary DragEventInit : MouseEventInit { containing an invoking element that points back to the containing popover), and it allows for the construction of a well-formed tree from the (possibly cyclic) graph of connections. Only auto popovers are considered.

      + +

      If the provided element is a top layer element such as a dialog which is not + showing as a popover, then topmost popover ancestor will only look in the node tree + to find the first popover.

      +
    1. +

      If isPopover is true:

      + +
        +

      1. Assert: newPopoverOrTopLayerElement is an HTML element.

        2. + +

      2. Assert: newPopoverOrTopLayerElement's popover attribute is not in the no popover state or the manual state.

        3. + +

      3. Assert: newPopoverOrTopLayerElement's popover visibility + state is not in the popover showing + state.

        4. +
      +
      2. + +
    2. +

      Otherwise:

      + +
        +

      1. Assert: invoker is null.

        2. +
      +
      3. +

    3. Let popoverPositions be an empty ordered map.

    4. Let index be 0.

      5. -

    5. Let document be newPopover's node document.

      6. +

    6. Let document be newPopoverOrTopLayerElement's node + document.

    7. For each popover of document's showing auto popover @@ -85262,8 +85301,8 @@ dictionary DragEventInit : MouseEventInit {

    -

  • Set popoverPositions[newPopover] to - index.

    • +

  • If isPopover is true, then set + popoverPositions[newPopoverOrTopLayerElement] to index.

  • Increment index by 1.

    • @@ -85291,12 +85330,12 @@ dictionary DragEventInit : MouseEventInit { -

  • Run checkAncestor given newPopover's parent node within the - flat tree.

    • +

  • Run checkAncestor given newPopoverOrTopLayerElement's parent node + within the flat tree.

  • Run checkAncestor given invoker.

    • -

  • return topmostPopoverAncestor.

    • +

  • Return topmostPopoverAncestor.

    • To find the nearest inclusive open popover given a Node From 7ad555e3c633f9767bb7669ed1a51440a096424d Mon Sep 17 00:00:00 2001 From: Anne van Kesteren Date: Mon, 25 Mar 2024 15:37:32 +0100 Subject: [PATCH 02/14] Editorial: order of comparisons For consistency: - greater than or equal to - less than or equal to --- source | 37 ++++++++++++++++++------------------- 1 file changed, 18 insertions(+), 19 deletions(-) diff --git a/source b/source index 589b0f62182..54b80ae9d9b 100644 --- a/source +++ b/source @@ -22733,9 +22733,8 @@ this specification: the <abbr>WHATWG</abbr> and the but maps more cleanly to structured code, please let me know. --> -

  • Start mode: If index is equal to or greater than the number of - child nodes in current parent, then jump to the step labeled end - mode.

    +

  • Start mode: If index is greater than or equal to the number of child + nodes in current parent, then jump to the step labeled end mode.

  • If the indexth node in current parent is an rt or rp element, jump to the step labeled annotation @@ -22757,9 +22756,9 @@ this specification: the <abbr>WHATWG</abbr> and the

  • Increment index by one.

    • -

  • Base mode post-increment: If index is equal to or greater than - the number of child nodes in current parent, then jump to the step labeled - end mode.

    • +

  • Base mode post-increment: If index is greater than or equal to the + number of child nodes in current parent, then jump to the step labeled end + mode.

  • Jump back to the step labeled base mode.

    • @@ -37443,7 +37442,7 @@ interface MediaError {

    The user agent must determine the duration of the media resource before playing any part of the media data and before setting readyState to a value equal to or greater than readyState to a value greater than or equal to HAVE_METADATA, even if doing so requires fetching multiple parts of the resource.

    @@ -41163,11 +41162,11 @@ dictionary TrackEventInit : EventInit { Playback is ready to start after having been paused or delayed due to lack of media data. - readyState is newly equal to or greater than + readyState is newly greater than or equal to HAVE_FUTURE_DATA and paused is false, or paused is newly false and readyState is equal to or greater than readyState is greater than or equal to HAVE_FUTURE_DATA. Even if this event fires, the element might still not be potentially playing, e.g. if the element is paused for user interaction or paused for in-band content. @@ -41181,7 +41180,7 @@ dictionary TrackEventInit : EventInit { Playback has stopped because the next frame is not available, but the user agent expects that frame to become available in due course. - readyState is equal to or less than readyState is less than or equal to HAVE_CURRENT_DATA, and paused is false. Either seeking is true, or the current playback position @@ -51412,7 +51411,7 @@ ldh-str = < as defined in value - attribute must be equal to or less than the element's maximum allowed value + attribute must be less than or equal to the element's maximum allowed value length.

    @@ -85617,8 +85623,9 @@ dictionary DragEventInit : MouseEventInit {

  • If node has a form owner and node is a submit button, then return null.

    • -

  • Let popoverElement be node's popovertarget-associated element.

    • +

  • Let popoverElement be the result of running node's get the popovertarget-associated + element.

  • If popoverElement is null, then return null.

    • From c1b467ac2ee064a43ae3da124c62ba6f3dd06635 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Wed, 27 Mar 2024 02:28:13 +0000 Subject: [PATCH 04/14] Disable PageSwapEvent's activation on cross-origin redirects Closes #10196. --- source | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/source b/source index 9001b9ff119..2cd2e7514c7 100644 --- a/source +++ b/source @@ -102159,9 +102159,20 @@ location.href = '#foo';

  • Let activation be null.

  • -

    If targetEntry's document's origin is same origin with - displayedDocument's origin, then: +

    If all of the following are true:

    + +
      +

    • targetEntry's document's origin is same origin with + displayedDocument's origin; + and

      • + +

    • targetEntry's document's + was created via cross-origin redirects is false, or targetEntry's + document's latest entry is not null,

      • +
    + +

    then:

    1. @@ -102203,6 +102214,11 @@ location.href = '#foo';
    + +

    This means that a cross-origin redirect during a navigation would result in a + null activation in the old document's + PageSwapEvent, unless the new document is being restored from bfcache.

  • Fire an event named From 1f0ac4b8ff38cb1a90bf732e3d7bc52cf152db91 Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Wed, 27 Mar 2024 02:30:40 +0000 Subject: [PATCH 05/14] Upstream Long Animation Frames monkey-patches Long Animation Frames (https://w3c.github.io/long-animation-frames/) expects a few calls from HTML and other specs, for reporting when tasks, rendering or JS entry points take place. This moves those calls from the Long Animation Frames spec to HTML. --- source | 71 +++++++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 65 insertions(+), 6 deletions(-) diff --git a/source b/source index 2cd2e7514c7..eca9f85cdb9 100644 --- a/source +++ b/source @@ -2762,6 +2762,24 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute +

    Long Animation Frames
    + +
    +

    The following terms are defined in Long Animation Frames: LONGANIMATIONFRAMES

    + +
      +
    • record task start time
      • +
    • record task end time
      • +
    • record rendering time
      • +
    • record classic script creation time
      • +
    • record classic script execution start time
      • +
    • record module script execution start time
      • +
    • Record pause duration
      • +
    • record timing info for timer handler
      • +
    • record timing info for microtask checkpoint
      • +
    +
    +
    Long Tasks
    @@ -3385,6 +3403,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute current time, the shared monotonic clock, the unsafe moment, + the duration from, the coarsen time algorithm, and the DOMHighResTimeStamp @@ -106349,8 +106368,8 @@ document.querySelector("button").addEventListener("click", bound);

  • Let script be the result of creating a classic script given sourceText, settingsObject, response's URL, options, and - mutedErrors.

    • + data-x="concept-response-url">URL, options, + mutedErrors, and url.

  • Run onComplete given script.
    • @@ -107030,7 +107049,8 @@ document.querySelector("button").addEventListener("click", bound);

    To create a classic script, given a string source, an environment settings object settings, a URL baseURL, a script fetch options - options, and an optional boolean mutedErrors (default false):

    + options, an optional boolean mutedErrors (default false), and an optional + URL-or-null sourceURLForWindowScripts (default null):

    1. @@ -107063,6 +107083,9 @@ document.querySelector("button").addEventListener("click", bound);

    2. Set script's parse error and error to rethrow to null.

      3. +

    3. Record classic script creation time given script and + sourceURLForWindowScripts.

      4. +

    4. Let result be ParseScript(source, settings's realm, @@ -107344,6 +107367,8 @@ document.querySelector("button").addEventListener("click", bound);

    5. Check if we can run script with settings. If this returns "do not run" then return NormalCompletion(empty).

      6. +

    6. Record classic script execution start time given script.

      7. +

    7. Prepare to run script given settings.

    8. Let evaluationStatus be null.

      9. @@ -107426,6 +107451,8 @@ document.querySelector("button").addEventListener("click", bound);

    9. Check if we can run script with settings. If this returns "do not run", then return a promise resolved with with undefined.

      10. +

    10. Record module script execution start time given script.

      11. +

    11. Prepare to run script given settings.

    12. Let evaluationPromise be null.

      13. @@ -109675,6 +109702,10 @@ import "https://example.com/foo/../module2.mjs"; taskQueue, and remove it from taskQueue.

      +

    13. If oldestTask's document is not + null, then record task start time given taskStartTime and + oldestTask's document.

      14. +

    14. Set the event loop's currently running task to oldestTask.

      15. @@ -109687,7 +109718,8 @@ import "https://example.com/foo/../module2.mjs";
    -

  • Let now be the unsafe shared current time. HRT

    • +

  • Let taskEndTime be the unsafe shared current time. + HRT

  • If oldestTask is not null, then:

    @@ -109717,9 +109749,13 @@ import "https://example.com/foo/../module2.mjs";
    • -

  • Report long tasks, passing in taskStartTime, now (the - end time of the task), top-level browsing contexts, and +

  • Report long tasks, passing in taskStartTime, + taskEndTime, top-level browsing contexts, and oldestTask.

    • + +

  • If oldestTask's document is not + null, then record task end time given taskEndTime and + oldestTask's document.

    • @@ -110004,6 +110040,9 @@ import "https://example.com/foo/../module2.mjs"; given frameTimestamp and doc's relevant global object as the timestamp.

    +

  • Let unsafeLayoutStartTime be the unsafe shared current + time.

    +

  • For each doc of docs:

    @@ -110102,6 +110141,9 @@ import "https://example.com/foo/../module2.mjs"; time given now and doc's relevant global object as the timestamp. INTERSECTIONOBSERVER

    • +

  • For each doc of docs, record rendering time for + doc given unsafeStyleAndLayoutStartTime.

    • +

  • For each doc of docs, mark paint timing for doc.

    • @@ -110187,6 +110229,8 @@ import "https://example.com/foo/../module2.mjs";

  • Set the event loop's performing a microtask checkpoint to false.

    • + +

  • Record timing info for microtask checkpoint.

    • @@ -110395,6 +110439,11 @@ import "https://example.com/foo/../module2.mjs"; goal is met. This means running the following steps:

      +

    1. Let global be the current global object.

      2. + +

    2. Let timeBeforePause be the current high resolution time given + global.

      3. +

    3. If necessary, update the rendering or user interface of any Document or navigable to reflect the current state.

      4. @@ -110404,6 +110453,10 @@ import "https://example.com/foo/../module2.mjs"; data-x="concept-task">task must block. User agents should remain responsive to user input while paused, however, albeit in a reduced capacity since the event loop will not be doing anything.

      + +

    4. Record pause duration given the duration from + timeBeforePause to the current high resolution time given + global.

    @@ -112712,6 +112765,9 @@ partial interface ShadowRoot {

  • If id does not exist in global's map of active timers, then abort these steps.

    • +

  • Record timing info for timer handler given handler, global's + relevant settings object, and repeat.

    • +

  • If handler is a Function, then invoke handler given arguments with the callback this @@ -142233,6 +142289,9 @@ INSERT INTERFACES HERE

    [LONGTASKS]
    Long Tasks, D. Denicola, I. Grigorik, S. Panicker. W3C.
    +
    [LONGANIMATIONFRAMES]
    +
    Long Animation Frames, N. Rosenthal. W3C.
    +
    [MAILTO]
    (Non-normative) The 'mailto' URI scheme, M. Duerst, L. Masinter, J. Zawinski. IETF.
    From aa0f4e89a9c34273ba2a4b70169cc50b247cb8da Mon Sep 17 00:00:00 2001 From: Noam Rosenthal Date: Mon, 1 Apr 2024 04:39:36 +0000 Subject: [PATCH 06/14] Preload: only allow certain values for as="" Closes #8332. --- source | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/source b/source index eca9f85cdb9..0de2e1efe08 100644 --- a/source +++ b/source @@ -15721,8 +15721,8 @@ interface HTMLLinkElement : HTMLElement {

  • Assert: options's href is not the empty string.

    • -

  • If options's destination is not - a destination, then return null.

    • +

  • If options's destination is + null, then return null.

  • Let url be the result of encoding-parsing a URL given @@ -15861,8 +15861,9 @@ interface HTMLLinkElement : HTMLElement {

    destination
    -
    the result of translating the - state of el's as attribute
    +
    the result of translating the state of el's as attribute.
    crossorigin
    the state of el's crossorigin @@ -16037,7 +16038,7 @@ interface HTMLLinkElement : HTMLElement {

  • If attribs["as"] exists, then set options's destination to the result of translating attribs["translating attribs["as"].

  • If attribs["crossorigin"] credentials mode is request's credentials mode.

    +

    To translate a preload destination given a string destination:

    + +
      +

    1. If destination is not "fetch", "font", + "image", "script", "style", + or "track", then return null.

      2. + +

    2. Return the result of translating + destination.

      3. +
    +

    To preload given a link processing options options and an optional processResponse, which is an algorithm accepting a Date: Tue, 2 Apr 2024 08:40:20 +0000 Subject: [PATCH 07/14] Call the view transition page visibility change steps This allows the CSS view-transitions spec to react to page visibility changes. Specifically, skip the active transition once a page is hidden. See https://github.com/w3c/csswg-drafts/issues/9543. --- source | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/source b/source index 0de2e1efe08..714eafd263e 100644 --- a/source +++ b/source @@ -4043,6 +4043,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute

  • rendering suppression for view transitions
  • activate view transition
  • ViewTransition
    • +
  • view transition page visibility change steps
  • resolving inbound cross-document view-transition
  • setting up a cross-document view-transition
  • can navigation trigger a cross-document view-transition? @@ -78328,6 +78329,9 @@ END:VCARD

  • Run the screen orientation change steps with document. SCREENORIENTATION

    • +

  • Run the view transition page visibility change steps with + document.

    • +

  • Run any page visibility change steps which may be defined in other specifications, with visibility state and document.

    From 70f12d7ce90575b98d9cb43d4bbb8427ec02701c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= Date: Tue, 2 Apr 2024 18:42:42 +0200 Subject: [PATCH 08/14] Style marquee using overflow: hidden This matches Chromium and WebKit. Tests will be worked on in https://bugzilla.mozilla.org/show_bug.cgi?id=306344. --- source | 1 + 1 file changed, 1 insertion(+) diff --git a/source b/source index 714eafd263e..c141fd95721 100644 --- a/source +++ b/source @@ -134347,6 +134347,7 @@ details[open] > summary:first-of-type { marquee { display: inline-block; text-align: initial; + overflow: hidden !important; }

    The marquee element, while turned on, is From f55b0b6605e2062a6dff020ad47df4601bcfda79 Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Wed, 3 Apr 2024 15:05:58 +0100 Subject: [PATCH 09/14] Editorial: export Element's innerText getter and setter steps These will be used by Trusted Types (and eventually HTML once upstreamed) as part of shadowing this attribute to HTMLScriptElement. --- source | 36 +++++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 15 deletions(-) diff --git a/source b/source index c141fd95721..65bae634d54 100644 --- a/source +++ b/source @@ -14310,14 +14310,13 @@ interface DOMStringMap {

    -

    The innerText and - outerText getter steps - are:

    +

    The get the text steps, given an HTMLElement + element, are:

    1. -

      If this is not being rendered or if the user agent is a non-CSS - user agent, then return this's descendant text content.

      +

      If element is not being rendered or if the user agent is a non-CSS + user agent, then return element's descendant text content.

      This step can produce surprising results, as when the innerText getter is invoked on an element not being @@ -14329,13 +14328,12 @@ interface DOMStringMap {

    2. Let results be a new empty list.

    3. -

      For each child node node of this:

      +

      For each child node node of element:

        -

      1. Let current be the list resulting in running the - rendered text collection steps with node. Each item in - results will either be a string or a positive integer (a required - line break count).

        +

      2. Let current be the list resulting in running the rendered + text collection steps with node. Each item in results will either + be a string or a positive integer (a required line break count).

        Intuitively, a required line break count item means that a certain number of line breaks appear at that point, but they can be collapsed with the line breaks @@ -14360,6 +14358,10 @@ interface DOMStringMap {

      3. Return the concatenation of the string items in results.

      +

      The innerText and + outerText getter steps + are to return the result of running get the text steps with this.

      +

      The rendered text collection steps, given a node node, are as follows:

      @@ -14446,16 +14448,20 @@ interface DOMStringMap {
      -

      The innerText setter steps are:

      +

      The set the inner text steps, given an HTMLElement + element, and a string value are:

        -

      1. Let fragment be the rendered text fragment for the given value - given this's node document.

        2. +

      2. Let fragment be the rendered text fragment for value + given element's node document.

        3. -

      3. Replace all with fragment within - this.

        4. +

      4. Replace all with fragment + within element.

      +

      The innerText setter steps are to run set the inner + text steps.

      +

      The outerText setter steps are:

        From 6c20fe5c7a150899844a4ff13fdde1441663a828 Mon Sep 17 00:00:00 2001 From: Mason Freed Date: Thu, 4 Apr 2024 03:02:49 -0700 Subject: [PATCH 10/14] Add getHTML() and serializable shadow roots Corresponding DOM PR: https://github.com/whatwg/dom/pull/1256. Closes #8867. Co-authored-by: Domenic Denicola --- source | 192 ++++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 155 insertions(+), 37 deletions(-) diff --git a/source b/source index 65bae634d54..be1889c2b00 100644 --- a/source +++ b/source @@ -3155,7 +3155,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      1. node document concept
      2. document type concept
      3. host concept
        4. -
      4. The shadow root concept, and its delegates focus, available to element internals, and clonable.
        5. +
      5. The shadow root concept, and its delegates focus, available to element internals, clonable, and serializable.
      6. The shadow host concept
      7. HTMLCollection interface, its length attribute, and its @@ -17083,9 +17083,9 @@ people expect to have work and what is necessary.

        For meta elements with an http-equiv attribute in the Encoding declaration state, the content attribute must have a value - that is an ASCII case-insensitive match for a string that consists of: the literal - string "text/html;", optionally followed by any number of ASCII - whitespace, followed by the literal string "charset=utf-8".

        + that is an ASCII case-insensitive match for a string that consists of: + "text/html;", optionally followed by any number of ASCII + whitespace, followed by "charset=utf-8".

        A document must not contain both a meta element with an http-equiv attribute in the shadowrootmode

    • shadowrootdelegatesfocus
    shadowrootclonable
    +
    shadowrootserializable
    Accessibility considerations:
    For authors.
    @@ -63410,6 +63411,7 @@ interface HTMLTemplateElement : HTMLElement { [CEReactions] attribute DOMString shadowRootMode; [CEReactions] attribute boolean shadowRootDelegatesFocus; [CEReactions] attribute boolean shadowRootClonable; + [CEReactions] attribute boolean shadowRootSerializable; };
    Uses HTMLTemplateElement.
    @@ -63454,6 +63456,10 @@ interface HTMLTemplateElement : HTMLElement { data-x="attr-template-shadowrootclonable">shadowrootclonable content attribute is a boolean attribute.

    +

    The shadowrootserializable content + attribute is a boolean attribute.

    +

    The template contents of a template element are not children of the element itself.

    @@ -63599,6 +63605,10 @@ interface HTMLTemplateElement : HTMLElement { attribute must reflect the shadowrootclonable content attribute.

    +

    The shadowRootSerializable + IDL attribute must reflect the shadowrootserializable content attribute.

    +

    The cloning steps for a template @@ -67763,7 +67773,7 @@ try { and the last two digits representing the blue component, the digits being ASCII lower hex digits. Otherwise, the color value has alpha less than 1.0, and the string is the color value in the CSS rgba() - functional-notation format: the literal string "rgba" (U+0072 U+0067 U+0062 + functional-notation format: "rgba" (U+0072 U+0067 U+0062 U+0061) followed by a U+0028 LEFT PARENTHESIS, a base-ten integer in the range 0-255 representing the red component (using ASCII digits in the shortest form possible), a literal U+002C COMMA and U+0020 SPACE, an integer for the green component, a comma and a space, an integer @@ -81221,9 +81231,8 @@ body { display:none } attribute, and therefore might not reflect the actual spellchecking state.

    On setting, if the new value is true, then the element's spellcheck content attribute must be set to the literal string - "true", otherwise it must be set to the literal string "false". + data-x="attr-spellcheck">spellcheck content attribute must be set to + "true", otherwise it must be set to "false".

    @@ -112372,10 +112381,22 @@ document.body.appendChild(frame)
    • - -

    DOM parsing

    +

    DOM parsing and serialization APIs

    + + 
    partial interface Element {
+  [CEReactions] undefined setHTMLUnsafe(HTMLString html);
+  DOMString getHTML(optional GetHTMLOptions options = {});
+};
+
+partial interface ShadowRoot {
+  [CEReactions] undefined setHTMLUnsafe(HTMLString html);
+  DOMString getHTML(optional GetHTMLOptions options = {});
+};
+
+dictionary GetHTMLOptions {
+  boolean serializableShadowRoots = false;
+  sequence<ShadowRoot> shadowRoots = [];
+};

    The DOMParser interface

    @@ -112567,14 +112588,6 @@ enum DOMParserSupportedType {

    These methods perform no sanitization to remove potentially-dangerous elements and attributes like script or event handler content attributes.

    - 
    partial interface Element {
-  [CEReactions] undefined setHTMLUnsafe(HTMLString html);
-};
-
-partial interface ShadowRoot {
-  [CEReactions] undefined setHTMLUnsafe(HTMLString html);
-};
    -

    Element's ShadowRoot {

    +

    HTML serialization methods

    + +
    +
    html = element.getHTML({ serializableShadowRoots, shadowRoots })
    +
    +

    Returns the result of serializing element to HTML. Shadow roots within element are serialized according to the provided options:

    + +
      +

    • If serializableShadowRoots is true, then all open shadow roots marked as serializable are serialized.

      • + +

    • If the shadowRoots array is provided, then all shadow roots specified in the array are serialized, regardless of whether or not they are marked as serializable.

      • +
    + +

    If neither option is provided, then no shadow roots are serialized.

    +
    + +
    html = shadowRoot.getHTML({ serializableShadowRoots, shadowRoots })
    +
    +

    Returns the result of serializing shadowRoot to HTML, using its shadow host as the context element. Shadow roots within shadowRoot are serialized according to the provided options, as above.

    +
    +
    + +
    + +

    Element's getHTML(options) method steps + are to return the result of HTML fragment serialization algorithm with + this, options["serializableShadowRoots"], + and options["shadowRoots"].

    + +

    ShadowRoot's getHTML(options) method steps + are to return the result of HTML fragment serialization algorithm with + this, options["serializableShadowRoots"], + and options["shadowRoots"].

    + +

    Timers

    @@ -127381,6 +127433,10 @@ document.body.appendChild(text); data-x="attr-template-shadowrootclonable">shadowrootclonable     attribute; otherwise false.

    +

  • Let serializable be true if template start tag has a shadowrootserializable attribute; + otherwise false.

    • +

  • Let delegatesFocus be true if template start tag has a shadowrootdelegatesfocus attribute; otherwise false.

    • @@ -127395,9 +127451,10 @@ document.body.appendChild(text);

    1. Attach a shadow root with declarative shadow host element, mode, clonable, - delegatesFocus, and "named". If an exception is thrown, - then catch it, report the exception, insert an element at the adjusted - insertion location with template, and return.

      2. + serializable, delegatesFocus, and "named". + If an exception is thrown, then catch it, report the exception, + insert an element at the adjusted insertion location with + template, and return.

    2. Let shadow be declarative shadow host element's shadow root.

      3. @@ -131158,7 +131215,8 @@ document.body.appendChild(text);

      The following steps form the HTML fragment serialization algorithm. The algorithm takes as input a DOM Element, Document, or DocumentFragment referred to as - the node, and returns a string.

      + the node, a boolean serializableShadowRoots, and a + sequence<ShadowRoot> shadowRoots, and returns a string.

      This algorithm serializes the children of the node being serialized, not the node itself.

      @@ -131172,9 +131230,60 @@ document.body.appendChild(text);

    3. If the node is a template element, then let the node instead be the template element's template contents (a DocumentFragment node).

      4. +
    4. +

      If current node is a shadow host, then:

      + +
        +

      1. Let shadow be current node's + shadow root.

        2. + +
      2. +

        If one of the following is true:

        + +
          +

        • serializableShadowRoots is true, shadow's + serializable is true, and shadow's + mode is "open"; + or

          • + +

        • shadowRoots contains shadow,

          • +
        + +

        then:

        + +
          +

        1. Append "<template shadowrootmode="".

          2. + +

        2. If shadow's mode + is "open", then append "open". + Otherwise, append "closed".

          3. + +

        3. Append """.

          4. + +

        4. If shadow's delegates focus is set, then append + " shadowrootdelegatesfocus=""".

          5. + +

        5. If shadow's serializable is set, then append + " shadowrootserializable=""".

          6. + +

        6. If shadow's clonable is set, then append + " shadowrootclonable=""".

          7. + +

        7. Append ">".

          8. + +

        8. Append the value of running the HTML fragment serialization algorithm with + shadow, serializableShadowRoots, and shadowRoots (thus recursing + into this algorithm for that element).

          9. + +

        9. Append "</template>".

          10. +
        +
        3. +
      +
      5. +

    5. For each child node of the node, in tree order, run the - following steps: + following steps:

      1. Let current node be the child node being processed.

        2. @@ -131267,11 +131376,11 @@ document.body.appendChild(text);

        If current node serializes as void, then continue on to the next child node at this point.

        -

        Append the value of running the HTML fragment serialization algorithm on the - current node element (thus recursing into this algorithm for that - element), followed by a U+003C LESS-THAN SIGN character (<), a U+002F SOLIDUS character - (/), tagname again, and finally a U+003E GREATER-THAN SIGN character - (>).

        +

        Append the value of running the HTML fragment serialization algorithm with + current node, serializableShadowRoots, and shadowRoots (thus + recursing into this algorithm for that node), followed by a U+003C LESS-THAN SIGN character (<), a + U+002F SOLIDUS character (/), tagname again, and finally a U+003E GREATER-THAN SIGN + character (>).

        @@ -131293,7 +131402,7 @@ document.body.appendChild(text);
        If current node is a Comment
        -

        Append the literal string "<!--" (U+003C LESS-THAN SIGN, U+0021 +

        Append "<!--" (U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS), followed by the value of current node's data, followed by the literal string "-->" (U+002D HYPHEN-MINUS, U+002D HYPHEN-MINUS, @@ -131304,7 +131413,7 @@ document.body.appendChild(text);

        If current node is a ProcessingInstruction
        -

        Append the literal string "<?" (U+003C LESS-THAN SIGN, U+003F +

        Append "<?" (U+003C LESS-THAN SIGN, U+003F QUESTION MARK), followed by the value of current node's target IDL attribute, followed by a single U+0020 SPACE character, followed by the value of current node's data, @@ -131315,13 +131424,13 @@ document.body.appendChild(text);

        If current node is a DocumentType
        -

        Append the literal string "<!DOCTYPE" (U+003C LESS-THAN SIGN, U+0021 +

        Append "<!DOCTYPE" (U+003C LESS-THAN SIGN, U+0021 EXCLAMATION MARK, U+0044 LATIN CAPITAL LETTER D, U+004F LATIN CAPITAL LETTER O, U+0043 LATIN CAPITAL LETTER C, U+0054 LATIN CAPITAL LETTER T, U+0059 LATIN CAPITAL LETTER Y, U+0050 LATIN CAPITAL LETTER P, U+0045 LATIN CAPITAL LETTER E), followed by a space (U+0020 SPACE), followed by the value of current node's name, followed by the literal string ">" (U+003E GREATER-THAN SIGN).

        + data-x="concept-doctype-name">name, followed by ">" + (U+003E GREATER-THAN SIGN).

        @@ -131342,7 +131451,7 @@ document.body.appendChild(text);

        For instance, if a textarea element to which a Comment node has been appended is serialized and the output is then reparsed, the comment will end up being displayed in the text control. Similarly, if, as a result of DOM manipulation, an element - contains a comment that contains the literal string "-->", then when + contains a comment that contains "-->", then when the result of serializing the element is parsed, the comment will be truncated at that point and the rest of the comment will be interpreted as markup. More examples would be making a script element contain a Text node with the text string "External { script-supporting; colgroup* empty - globals + globals; + shadowrootmode; + shadowrootdelegatesfocus; + shadowrootclonable; + shadowrootserializable HTMLTemplateElement @@ -140293,6 +140406,11 @@ interface External { template Sets clonable on a declarative shadow root Boolean attribute + + shadowrootserializable + template + Sets serializable on a declarative shadow root + Boolean attribute shape area From 75ef8cb8d5d783ee3c893b21f6d9897c28cd9831 Mon Sep 17 00:00:00 2001 From: Alaska Date: Thu, 4 Apr 2024 12:17:25 +0200 Subject: [PATCH 11/14] Make buttons respect display: none/contents in button layout Fixes #10238. This matches what is already implemented in browsers. --- source | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source b/source index be1889c2b00..5c3bf7824d7 100644 --- a/source +++ b/source @@ -134102,7 +134102,7 @@ input[type=image i][align=bottom i], object[align=bottom i] {

        • If the computed value of 'display' is 'inline-grid', 'grid', - 'inline-flex', or 'flex', then behave as the computed value.

          • + 'inline-flex', 'flex', 'none', or 'contents', then behave as the computed value.

        • Otherwise, if the computed value of 'display' is a value such that the outer display type is 'inline', then behave as 'inline-block'.

          • @@ -143742,6 +143742,7 @@ INSERT INTERFACES HERE Simon Sapin, Yu Han, Simon Spiegel, + Simon Wülker, skeww, Smylers, Srirama Chandra Sekhar Mogali, From 999fb6ac820b2f25dcda7a814765df6836de666c Mon Sep 17 00:00:00 2001 From: zcorpan Date: Thu, 4 Apr 2024 13:40:26 +0200 Subject: [PATCH 12/14] Remove duplicate requirement for 'overflow' for marquee The duplication was introduced by #10243. --- source | 3 --- 1 file changed, 3 deletions(-) diff --git a/source b/source index 5c3bf7824d7..555edf65686 100644 --- a/source +++ b/source @@ -134604,9 +134604,6 @@ marquee { element maps to the dimension properties 'margin-left' and 'margin-right' on the element.

          -

          The 'overflow' property on the marquee element is expected to be - ignored; overflow is expected to always be hidden.

          - From 4b1310c2b8858c27c833becacf6a0aeb50451fd6 Mon Sep 17 00:00:00 2001 From: Tab Atkins Jr Date: Sun, 7 Apr 2024 21:47:38 -0700 Subject: [PATCH 13/14] Meta: make all the SVGs darkmode-aware Also tag them as such, so that they don't get a white background after https://github.com/whatwg/whatwg.org/pull/439 is merged. --- images/asyncdefer.svg | 8 +++ images/custom-element-reactions.svg | 27 +++++--- images/ircfog-modules.svg | 14 ++++- images/outline.svg | 20 ++++-- images/parsing-model-overview.svg | 96 +++++++++++++++++++---------- images/sample-datalist.svg | 20 ++++-- images/sample-email-1.svg | 30 ++++++--- images/sample-email-2.svg | 30 ++++++--- images/sample-url.svg | 32 +++++++--- source | 22 +++---- 10 files changed, 214 insertions(+), 85 deletions(-) diff --git a/images/asyncdefer.svg b/images/asyncdefer.svg index 456fe78b4dd..91cc21e1bf6 100644 --- a/images/asyncdefer.svg +++ b/images/asyncdefer.svg @@ -1,5 +1,13 @@ @@ -16,7 +27,6 @@ Table of contents First section - + - diff --git a/images/parsing-model-overview.svg b/images/parsing-model-overview.svg index 0c965d231d2..bb782a589fd 100644 --- a/images/parsing-model-overview.svg +++ b/images/parsing-model-overview.svg @@ -3,75 +3,107 @@ - - - - - + + + + + + + + - - + + - + Network - - + + - + Byte Stream Decoder - - + + - + Input Stream Preprocessor - - + + - + Tokenizer - - + + - + Tree Construction - - + + - - + + - + DOM - + - + Script Execution - - + + document.write() diff --git a/images/sample-datalist.svg b/images/sample-datalist.svg index 175a8b6b8cc..8aacace9a69 100644 --- a/images/sample-datalist.svg +++ b/images/sample-datalist.svg @@ -1,22 +1,34 @@ - - + + - ▼ + ▼ function diff --git a/images/sample-email-1.svg b/images/sample-email-1.svg index bf1d558452f..61d2d8cc7a0 100644 --- a/images/sample-email-1.svg +++ b/images/sample-email-1.svg @@ -1,20 +1,36 @@ - - + + - + spec.w| - ▼ + ▼ https://html.spec.whatwg.org/ @@ -37,6 +53,6 @@ DOM - - + + diff --git a/source b/source index 555edf65686..9fd69ba8158 100644 --- a/source +++ b/source @@ -51,7 +51,7 @@ WHATWG +

          HTML

          Living Standard — Last Updated [DATE: 01 Jan 1901]

          @@ -19238,9 +19238,7 @@ interface HTMLHeadingElement : HTMLElement {

          A rendered view of the outline might look like:

          -

          Top-level section with the - heading "HTML: Living Standard" and two - subsections; "Table of contents" and "First section".

          +

          Top-level section with the heading "HTML: Living Standard" and two subsections; "Table of contents" and "First section".

          @@ -27037,7 +27035,7 @@ document.body.appendChild(wbr);

          Assume that the module graph for the application is as follows:

          - The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs. + The module graph is rooted at app.mjs, which depends on irc.mjs and fog-machine.mjs. In turn, irc.mjs depends on helpers.mjs.

          Here we see the application developer has used modulepreload to declare all of the modules in their module graph, @@ -48585,7 +48583,7 @@ interface HTMLInputElement : HTMLElement { data-x="">https://streams.spec.whatwg.org/ in the recent past, then the rendering might look like this:

          -

          A text box with an icon on the left followed by the text "spec.w" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scrollbar to the right of the drop down box, indicating further values are available.

          +

          A text box with an icon on the left followed by the text "spec.w" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scrollbar to the right of the drop down box, indicating further values are available.

          The first four URLs in this sample consist of the four URLs in the author-specified list that match the text the user has entered, sorted in some implementation-defined manner @@ -51659,7 +51657,7 @@ ldh-str = < as defined in

          +

          The page could also link in the user's contacts database from the site:

          @@ -51680,7 +51678,7 @@ ldh-str = < as defined in           -

          +

          @@ -52096,7 +52094,7 @@ You cannot submit this form when the field is incorrect. data-x="concept-option-label">label and value would be shown:

          -

          A text box with a drop down button on the right hand side; with, below, a drop down box containing a list of the six values the left and the six labels on the right.

          +

          A text box with a drop down button on the right hand side; with, below, a drop down box containing a list of the six values the left and the six labels on the right.

          Then, typing "arrow" or "=>" would filter the list to the entries with labels "arrow function" and "async arrow function". Typing "generator" or @@ -61862,7 +61860,7 @@ interface HTMLScriptElement : HTMLElement {

          This is all summarized in the following schematic diagram:

          -

          With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type="module"> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type="module" async> is similar to <script async> with the extra dependency fetching.

          +

          With <script>, parsing is interrupted by fetching and execution. With <script defer>, fetching is parallel to parsing and execution takes place after all parsing has finished. And with <script async>, fetching is parallel to parsing but once it finishes parsing is interrupted to execute the script. The story for <script type="module"> is similar to <script defer>, but the dependencies will be fetched as well, and the story for <script type="module" async> is similar to <script async> with the extra dependency fetching.

          The exact processing details for these attributes are, for mostly historical reasons, somewhat non-trivial, involving a number of aspects of HTML. The implementation @@ -72782,7 +72780,7 @@ customElements.define("x-foo", class extends HTMLElement {

          This is all summarized in the following schematic diagram:

          -

          A custom element reactions stack consists of a stack of element queues. Zooming in on a particular queue, we see that it contains a number of elements (in our example, <x-a>, then <x-b>, then <x-c>). Any particular element in the queue then has a custom element reaction queue. Zooming in on the custom element reaction queue, we see that it contains a variety of queued-up reactions (in our example, upgrade, then attribute changed, then another attribute changed, then connected).

          +

          A custom element reactions stack consists of a stack of element queues. Zooming in on a particular queue, we see that it contains a number of elements (in our example, <x-a>, then <x-b>, then <x-c>). Any particular element in the queue then has a custom element reaction queue. Zooming in on the custom element reaction queue, we see that it contains a variety of queued-up reactions (in our example, upgrade, then attribute changed, then another attribute changed, then connected).

          To enqueue an element on the appropriate element queue, given an element element, run the following steps:

          @@ -121804,7 +121802,7 @@ dictionary StorageEventInit : EventInit {

          Overview of the parsing model

          -

          +

          The input to the HTML parsing process consists of a stream of code points, which is passed through a tokenization stage followed by a tree From ebbb1c0d8d96290d201b5cf2f18642de088ba363 Mon Sep 17 00:00:00 2001 From: sideshowbarker Date: Mon, 8 Apr 2024 13:50:08 +0900 Subject: [PATCH 14/14] Warn that the XML syntax is not recommended Closes #10237. --- source | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/source b/source index 9fd69ba8158..0960c0fb30e 100644 --- a/source +++ b/source @@ -131812,6 +131812,13 @@ console.assert(container.firstChild instanceof SuperP); text/html resources are discussed in the section above entitled "The HTML syntax".

          + +

          Writing documents in the XML syntax