Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use CSS spec for top layer #9093

Merged
merged 2 commits into from
Jun 21, 2023
Merged

Use CSS spec for top layer #9093

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c1cebe8
squash and rebase
josepharhar Jun 13, 2023
90dedc8
remove overlay user-agent stylesheet
josepharhar Jun 20, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 36 additions & 20 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3329,10 +3329,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 @@ -3802,6 +3798,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
Expand Down Expand Up @@ -60353,9 +60355,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>
Expand Down Expand Up @@ -60405,11 +60406,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:
Expand All @@ -60430,8 +60430,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>Set the <span>is modal</span> flag of <var>subject</var> to false.</p></li>

Expand Down Expand Up @@ -76995,9 +76995,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>

Expand Down Expand Up @@ -82511,7 +82511,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>
Expand Down Expand Up @@ -82627,11 +82627,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>
Expand Down Expand Up @@ -102059,6 +102062,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>

Expand Down Expand Up @@ -126886,6 +126892,16 @@ if (s = prompt('What is your name?')) {



<h3>The top layer</h3>

<p>The <span>top layer</span> is defined by CSS, and HTML needs some top layer behavior to apply
to all elements as follows:</p>

<pre><code class="css">*|* {
overlay: none !important
}</code></pre>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is already required by the CSS specification we rely on. We shouldn't be duplicating that.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So should the CSS spec have this user agent style rule in it instead of having it here?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's required in the property definition: https://drafts.csswg.org/css-position-4/#overlay.

We can't duplicate normative requirements. So either that is done differently or we remove this. It makes some sense for it to be in CSS, although user agent style sheet requirements appearing all over the place is not great for implementers. (See also #9093 (comment).)

cc @tabatkins

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I see it here in that spec: https://drafts.csswg.org/css-position-4/#overlay:~:text=overlay%3A%20none%20!important

I removed this user-agent style from the PR




<h2 split-filename="obsolete" id="obsolete">Obsolete features</h2>

Expand Down