Rely on CSS Positioned Layout Module for top layer

josepharhar · web-flow · commit 843087136736 · 2023-06-21T09:56:09.000+02:00
This change moves the top layer references from Fullscreen to CSS and uses the new algorithms to add and remove from the top layer. Moving the top layer concept to CSS has been discussed in these issues: * w3c/csswg-drafts#4998 * w3c/csswg-drafts#6939 * w3c/csswg-drafts#7845 * w3c/csswg-drafts#8240 Tests: web-platform-tests/wpt#39828.
diff --git a/source b/source
@@ -3326,10 +3326,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     define how the Fullscreen API interacts with HTML: <ref spec=FULLSCREEN></p>
 
     <ul class="brief">
-     <li><dfn data-x-href="https://fullscreen.spec.whatwg.org/#top-layer">top layer</dfn> (an
-         <span data-x="set">ordered set</span>) and its
-         <dfn data-x="top-layer-add" data-x-href="https://fullscreen.spec.whatwg.org/#top-layer-add">add</dfn>
-         operation</li>
      <li><dfn data-x-href="https://fullscreen.spec.whatwg.org/#dom-element-requestfullscreen"><code data-x="dom-element-requestFullscreen">requestFullscreen()</code></dfn></li>
      <li><dfn data-x-href="https://fullscreen.spec.whatwg.org/#run-the-fullscreen-steps">run the fullscreen steps</dfn></li>
      <li><dfn data-x-href="https://fullscreen.spec.whatwg.org/#fullscreen-flag">fullscreen flag</dfn></li>
@@ -3799,6 +3795,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li><dfn data-x-href="https://drafts.csswg.org/css-position/#absolute-position">absolutely-positioned</dfn></li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-position/#position-property">'position'</dfn> property and its
               <dfn data-x-href="https://drafts.csswg.org/css-position/#valdef-position-static">'static'</dfn> value</li>
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-position-4/#document-top-layer">top layer</dfn>
+              (an <span data-x="set">ordered set</span>)</li>
+      <li><dfn data-x-href="https://drafts.csswg.org/css-position-4/#add-an-element-to-the-top-layer">add an element to the top layer</dfn></li>
+      <li><dfn data-x-href="https://drafts.csswg.org/css-position-4/#request-an-element-to-be-removed-from-the-top-layer">request an element to be removed from the top layer</dfn></li>
+      <li><dfn data-x-href="https://drafts.csswg.org/css-position-4/#remove-an-element-from-the-top-layer-immediately">remove an element from the top layer immediately</dfn></li>
+      <li><dfn data-x-href="https://drafts.csswg.org/css-position-4/#process-top-layer-removals">process top layer removals</dfn></li>
     </ul>
 
     <p>The following features are defined in <cite>CSS Multi-column Layout</cite>. <ref
@@ -60348,9 +60350,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
    </li>
 
    <li><p>If <span>this</span>'s <span>node document</span>'s <span>top layer</span> does not
-   already <span data-x="list contains">contain</span> <span>this</span>, then <span
-   data-x="top-layer-add">add</span> <span>this</span> to <span>this</span>'s <span>node
-   document</span>'s <span>top layer</span>.</p></li>
+   already <span data-x="list contains">contain</span> <span>this</span>, then <span>add an element
+   to the top layer</span> given <span>this</span>.</p></li>
 
    <li><p>Set <span>this</span>'s <span>previously focused element</span> to the
    <span>focused</span> element.</p></li>
@@ -60400,11 +60401,10 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
    <li><p>Set <var>topDocument</var>'s <span>autofocus processed flag</span> to true.</p></li>
   </ol>
 
-  <p>If at any time a <code>dialog</code> element is <span data-x="node is removed from a
-  document">removed from a <code>Document</code></span>, then if that <code>dialog</code> is in that
-  <code>Document</code>'s <span>top layer</span>, it must be <span
-  data-x="list remove">removed</span> from it. Also, set the <code>dialog</code> element's
-  <span>is modal</span> flag to false.
+  <p>The <code>dialog</code> <span>HTML element removing steps</span>, given <var>removedNode</var>
+  and <var>oldParent</var>, are if <var>removedNode</var>'s <span>node document</span>'s <span>top
+  layer</span> <span data-x="list contains">contains</span> <var>removedNode</var>, then
+  <span>remove an element from the top layer immediately</span> given <var>removedNode</var>.</p>
 
   <p>The <dfn method for="HTMLDialogElement"><code
   data-x="dom-dialog-close">close(<var>returnValue</var>)</code></dfn> method steps are:
@@ -60425,8 +60425,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
    <li><p>Remove <var>subject</var>'s <code data-x="attr-dialog-open">open</code>
    attribute.</p></li>
 
-   <li><p>If the <span>is modal</span> flag of <var>subject</var> is true, then <span data-x="list
-   remove">remove</span> it from its <code>Document</code>'s <span>top layer</span>.</p></li>
+   <li><p>If the <span>is modal</span> flag of <var>subject</var> is true, then <span>request an
+   element to be removed from the top layer</span> given <var>subject</var>.</p></li>
 
    <li><p>Let <var>wasModal</var> be the value of <var>subject</var>'s <span>is
    modal</span> flag.</p></li>
@@ -77005,9 +77005,9 @@ interface <dfn interface>VisibilityStateEntry</dfn> : <span>PerformanceEntry</sp
   tree</span> descendants can become <span>inert</span> in a similar fashion.</p>
 
   <p class="note">The <code>dialog</code> element's <code
-  data-x="dom-dialog-showModal">showModal()</code> method causes this mechanism to trigger, by
-  <span data-x="top-layer-add">adding</span> the <code>dialog</code> element to its <span>node
-  document</span>'s <span>top layer</span>.</p>
+  data-x="dom-dialog-showModal">showModal()</code> method causes this mechanism to trigger, by <span
+  data-x="add an element to the top layer">adding</span> the <code>dialog</code> element to its
+  <span>node document</span>'s <span>top layer</span>.</p>
 
   <h4>The <dfn data-x="attr-inert"><code>inert</code></dfn> attribute</h4>
 
@@ -82543,7 +82543,7 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
    <li><p>Let <var>originallyFocusedElement</var> be <var>document</var>'s <span>focused area of the
    document</span>'s <span>DOM anchor</span>.</p></li>
 
-   <li><p>Add <var>element</var> to <var>document</var>'s <span>top layer</span>.</p></li>
+   <li><p><span>Add an element to the top layer</span> given <var>element</var>.</p></li>
 
    <li><p>Set <var>element</var>'s <span>popover visibility state</span> to <span
    data-x="popover-showing-state">showing</span>.</p></li>
@@ -82678,11 +82678,14 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
       data-x="event-beforetoggle">beforetoggle</code> event could have disconnected
       <var>element</var> or changed its <code data-x="attr-popover">popover</code> attribute.</p>
      </li>
+
+     <li><p><span>Request an element to be removed from the top layer</span> given
+     <var>element</var>.</p></li>
     </ol>
    </li>
 
-   <li><p><span data-x="list remove">Remove</span> <var>element</var> from the <span>top
-   layer</span>.</p></li>
+   <li><p>Otherwise, <span>remove an element from the top layer immediately</span> given
+   <var>element</var>.</p></li>
 
    <li><p>Set <var>element</var>'s <span>popover visibility state</span> to <span
    data-x="popover-hidden-state">hidden</span>.</p></li>
@@ -102139,6 +102142,9 @@ import "https://example.com/foo/../module2.mjs";</code></pre>
      <li><p>For each <span>fully active</span> <code>Document</code> in <var>docs</var>, update the
      rendering or user interface of that <code>Document</code> and its <span>node navigable</span>
      to reflect the current state.</p></li>
+
+     <li><p>For each <span>fully active</span> <code>Document</code> <var>doc</var> in
+     <var>docs</var> run <span>process top layer removals</span> given <var>doc</var>.</p></li>
     </ol>
    </li>
 

-Original file line number
+Diff line change
     define how the Fullscreen API interacts with HTML:
 -     top layer (an
 -         ordered set) and its
 -         add
 -         operation
      requestFullscreen()
      run the fullscreen steps
      fullscreen flag
       absolutely-positioned
       The 'position' property and its
               'static' value
 +      The top layer
 +              (an ordered set)
 +      add an element to the top layer
 +      request an element to be removed from the top layer
 +      remove an element from the top layer immediately
 +      process top layer removals
     The following features are defined in CSS Multi-column Layout.
    If this's node document's top layer does not
 -   already contain this, then
 -   data-x="top-layer-add">add this to this's node
 -   document's top layer.
 +   already contain this, then add an element
 +   to the top layer given this.
    Set this's previously focused element to the
    focused element.
    Set topDocument's autofocus processed flag to true.
--  If at any time a dialog element is
+-  document">removed from a Document, then if that dialog is in that
 -  Document's top layer, it must be
 -  data-x="list remove">removed from it. Also, set the dialog element's
 -  is modal flag to false.
 +  The dialog HTML element removing steps, given removedNode
 +  and oldParent, are if removedNode's node document's top
 +  layer contains removedNode, then
 +  remove an element from the top layer immediately given removedNode.
   The
   data-x="dom-dialog-close">close(returnValue) method steps are:
    Remove subject's open
    attribute.
 -   If the is modal flag of subject is true, then  data-x="list
 -   remove">remove it from its Document's top layer>.
 +   If the is modal flag of subject is true, then >request an
 +   element to be removed from the top layer given subject>.
    Let wasModal be the value of subject's is
    modal flag.
   tree descendants can become inert in a similar fashion.
   The dialog element's
 -  data-x="dom-dialog-showModal">showModal() method causes this mechanism to trigger, by
 -  data-x="top-layer-add">adding the dialog element to its node
 -  document's top layer.
 +  data-x="dom-dialog-showModal">showModal() method causes this mechanism to trigger, by
 +  data-x="add an element to the top layer">adding the dialog element to its
 +  node document's top layer.
   The inert attribute
    Let originallyFocusedElement be document's focused area of the
    document's DOM anchor.
 -   Add element to document's top layer>.
 +   Add an element to the top layer given element>.
    Set element's popover visibility state to
    data-x="popover-showing-state">showing.
       data-x="event-beforetoggle">beforetoggle event could have disconnected
       element or changed its popover attribute.
++
 +     Request an element to be removed from the top layer given
 +     element.
 -   Removespan> element from the <span>top
 -   layer>.
 +   Otherwise, <span>remove an element from the top layer immediatelyspan> given
 +   element>.
    Set element's popover visibility state to
    data-x="popover-hidden-state">hidden.
      For each fully active Document in docs, update the
      rendering or user interface of that Document and its node navigable
      to reflect the current state.
++
 +     For each fully active Document doc in
 +     docs run process top layer removals given doc.