Skip to content

Commit

Permalink
Use CSS spec for top layer
Browse files Browse the repository at this point in the history 
The top layer has been added to the CSS spec, and this patch moves the
top layer references from the fullscreen spec to the CSS spec and uses
new algorithms to add and remove from the top layer defined in the CSS
spec.

Moving the top layer to the CSS spec has been discussed in these issues:
w3c/csswg-drafts#4998
w3c/csswg-drafts#6939
w3c/csswg-drafts#7845
w3c/csswg-drafts#8240
  • Loading branch information
@josepharhar
josepharhar committed Mar 30, 2023
1 parent 578def6 commit 5bfac64
Showing 1 changed file with 24 additions and 16 deletions.
40 changes: 24 additions & 16 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3289,10 +3289,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>
Expand Down Expand Up @@ -3760,6 +3756,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://w3c.github.io/csswg-drafts/css-position-4/#document-top-layer">top layer</dfn>
(an <span data-x="set">ordered set</span>)</li>
<li><dfn data-x-href="https://w3c.github.io/csswg-drafts/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://w3c.github.io/csswg-drafts/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://w3c.github.io/csswg-drafts/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://w3c.github.io/csswg-drafts/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
Expand Down Expand Up @@ -60082,9 +60084,9 @@ 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>'s <span>node document</span> and
<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>
Expand Down Expand Up @@ -60137,9 +60139,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<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.
<code>Document</code>'s <span>top layer</span>, <span>remove an element from the top layer
immediately</span> given the <code>Document</code> and the <code>dialog</code>.</p>

<p>The <dfn method for="HTMLDialogElement"><code
data-x="dom-dialog-close">close(<var>returnValue</var>)</code></dfn> method steps are:
Expand All @@ -60165,8 +60166,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>If <var>result</var> is not null, then set the <code
data-x="dom-dialog-returnValue">returnValue</code> attribute to <var>result</var>.</p></li>

<li><p>If <var>subject</var> is in its <code>Document</code>'s <span>top layer</span>, then <span
data-x="list remove">remove</span> it.</p></li>
<li><p><span>Request an element to be removed from the top layer</span> given
<var>subject</var>'s <span>node document</span> and <var>subject</var>.</p></li>

<li>
<p>If <var>subject</var>'s <span>previously focused element</span> is not null, then:<p>
Expand Down Expand Up @@ -76644,9 +76645,9 @@ END:VCARD</pre>
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>

Expand Down Expand Up @@ -82149,7 +82150,8 @@ 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>document</var> and
<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>
Expand Down Expand Up @@ -82265,9 +82267,15 @@ 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>document</var> and <var>element</var>.</p></li>
</ol>
</li>

<li><p>Otherwise, <span>remove an element from the top layer immediately</span> given
<var>document</var> and <var>element</var>.</p></li>

<li><p><span data-x="list remove">Remove</span> <var>element</var> from the <span>top
layer</span>.</p></li>

Expand Down

0 comments on commit 5bfac64

Please sign in to comment.