Rely on CSS Positioned Layout Module for top layer

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.

Author: josepharhar

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
@@ -60367,9 +60369,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>
@@ -60419,11 +60420,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:
@@ -60444,8 +60444,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>
@@ -77024,9 +77024,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>
 
@@ -82562,7 +82562,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>
@@ -82697,11 +82697,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>
@@ -102444,6 +102447,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>