Skip to content

Remove top layer definitions, now that CSS Position 4 contains them. #223

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

Merged
merged 15 commits into from
May 23, 2023
Merged

Remove top layer definitions, now that CSS Position 4 contains them. #223

Changes from 12 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5613e81
Remove top layer definitions, now that CSS Position 4 contains them. …
tabatkins Apr 13, 2023
de4a2f9
Use the 'in the top layer' definition from Position, to properly hand…
tabatkins Apr 14, 2023
1e2f998
Add a section holding the IDs being removed by this change.
tabatkins Apr 28, 2023
5be1902
Update fullscreen.bs
tabatkins May 4, 2023
81fb780
When fullscreening, remove the element from the top layer before addi…
tabatkins May 16, 2023
b858a8c
Update fullscreen.bs
foolip May 17, 2023
a20f587
Apply suggestions from code review
foolip May 17, 2023
bc648d4
Update fullscreen.bs
foolip May 17, 2023
8b0f13b
Merge branch 'main' into main
foolip May 22, 2023
3669cee
Apply suggestions from code review
foolip May 22, 2023
2795f38
Simplify top layer references using link-defaults
foolip May 22, 2023
0dd19fc
Undo accidental changes from previous commit (based on old branch)
foolip May 22, 2023
0db37b2
Update fullscreen.bs
foolip May 22, 2023
47e9921
Remove from the top layer immediately
foolip May 23, 2023
2ff6c60
Update fullscreen.bs
annevk May 23, 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
110 changes: 17 additions & 93 deletions fullscreen.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ spec:dom
spec:infra
type:dfn; for:set; text:for each
type:dfn; text:string
spec:css-position-4
type:selector; text: ::backdrop
type:dfn; text:top layer
</pre>

<pre class=anchors>
Expand Down Expand Up @@ -68,13 +71,14 @@ is an <a>ordered set</a> of (<a>string</a>, <a>element</a>) <a>tuples</a>. It is

<li><p>Set <var>element</var>'s <a>fullscreen flag</a>.

<li><p><a for="top layer">Add</a> <var>element</var> to <var>element</var>'s <a>node document</a>'s
<a>top layer</a>.
<li><p><a>Request removal from the top layer</a> given <var>element</var>.

<li><a>Add to the top layer</a> given <var>element</var>.
Copy link
Member

Choose a reason for hiding this comment

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

Only the second step is needed here looking at the algorithm for "add".

Copy link
Member

Choose a reason for hiding this comment

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

Without the call to "request removal from the top layer", the assert would be hit, right?

Copy link
Member

@annevk annevk May 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I see. So we preserve the behavior but allow for slightly novel behavior in new APIs. I guess that's okay. If we don't end up using the new behavior though we should simplify this again.

Perhaps it's best to wait for @nt1m and merge this tomorrow. I can ping him.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm not sure what you mean by "allow for slightly novel behavior in new APIs". All APIs would cycle thru the algorithms in this same way, unless they wanted to get into the guts and directly manipulate the top layer list (which they shouldn't).

The only two behaviors that specs should end up landing on for "put something in the top layer when it's already there" are this (cycle it to the end of the list) and "fail", probably throwing an error when they do so.

Copy link
Member

Choose a reason for hiding this comment

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

It does kinda seem like unless they would always remove prior to adding they'd have to perform a contains check. Which would be the somewhat novel behavior, but not entirely novel as the old API technically allowed for that as well.

Copy link
Member

Choose a reason for hiding this comment

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

Right, specs have to either check if the element is already in top layer and treat it as an error, or call "request removal from the top layer" to get the moving behavior. The latter preserves the behavior mentioned in the last note in https://fullscreen.spec.whatwg.org/commit-snapshots/afd56a35f409e5595dd861f41390a1016ebd6aa2/#new-stacking-layer.

</ol>

<p>To <dfn>unfullscreen an <var>element</var></dfn>, unset <var>element</var>'s
<a>fullscreen flag</a> and <a>iframe fullscreen flag</a> (if any), and <a for=set>remove</a> it from
its <a>node document</a>'s <a>top layer</a>.
<a>fullscreen flag</a> and <a>iframe fullscreen flag</a> (if any), and
<a>remove from the top layer immediately</a> given <var>element</var>.

<p>To <dfn>unfullscreen a <var>document</var></dfn>,
<a lt="unfullscreen an element">unfullscreen</a> all <a>elements</a>, within <var>document</var>'s
Expand Down Expand Up @@ -118,7 +122,7 @@ these steps:

<li>
<p>If <var>document</var>'s <a>top layer</a> <a for=set>contains</a> <var>node</var>,
<a for=set>remove</a> <var>node</var> from <var>document</var>'s <a>top layer</a>.
<a>remove from the top layer immediately</a> given <var>node</var>.

<p class=note>Other specifications can add and remove elements from <a>top layer</a>, so
<var>node</var> might not be <var>document</var>'s <a>fullscreen element</a>. For example,
Expand Down Expand Up @@ -585,88 +589,6 @@ or call to {{Document/exitFullscreen()}} whenever the user agent deems it necess

<p>This section is to be interpreted equivalently to the Rendering section of HTML. [[!HTML]]

<p class=XXX>Long term CSS will define the <a>top layer</a> concept and its associated
<a><code>::backdrop</code></a> pseudo-element as part of CSS' stacking context model. Patching CSS
as done here is sketchy as hell.


<h3 id=new-stacking-layer>New stacking layer</h3>

<p>This specification introduces a new stacking layer to the
<a href=https://www.w3.org/TR/CSS2/zindex.html>Elaborate description of Stacking Contexts</a> of CSS
2.1. It is called the <dfn export>top layer</dfn>, comes after step 10 in the painting order, and is
therefore rendered closest to the user within a viewport. Each <a for=/>document</a> has one
associated viewport and therefore also one <a>top layer</a>. [[!CSS]]

<p class=note>The terminology used in this and following subsection attempts to match CSS 2.1
Appendix E.

<p>The <a>top layer</a> is an <a>ordered set</a> of elements, rendered in the order they appear in
the set. The last element in the set is rendered last, and thus appears on top.

<p class=note>The <code>z-index</code> property has no effect in the <a>top layer</a>.

<p>Each element and <a><code>::backdrop</code></a> pseudo-element in a <a>top layer</a> has the
following characteristics:

<ul>
<li><p>It generates a new stacking context.

<li><p>Its parent stacking context is the root stacking context.

<li><p>If it consists of multiple layout boxes, the first box is used.
<!-- https://www.w3.org/Bugs/Public/show_bug.cgi?id=24523 -->

<li>
<p>It is rendered as an atomic unit as if it were a sibling of its <a for=tree>root</a>.

<p class=note><a for=tree>Ancestor</a> elements with overflow, opacity, masks, etc. cannot affect
it.

<li><p>If its <code>position</code> property computes to <code>fixed</code>, its containing block
is the viewport, and the initial containing block otherwise.

<li><p>If it is an element, it and its <a><code>::backdrop</code></a> pseudo-element are not
rendered if its <a>shadow-including inclusive ancestor</a> has the <code>display</code> property
set to <code>none</code>.

<li><p>If its specified <code>display</code> property is <code>contents</code>, it computes to
<code>block</code>.

<li><p>If its specified <code>position</code> property is not <code>absolute</code> or
<code>fixed</code>, it computes to <code>absolute</code>.

<li><p>Its outline, if any, is to be rendered before step 10 in the painting order.

<li><p>Unless overridden by another specification, its static position for <code>left</code>,
<code>right</code>, and <code>top</code> is zero.
</ul>

<p>To <dfn export for="top layer">add</dfn> an <var>element</var> to a <var>top layer</var>,
<a for=set>remove</a> it from <var>top layer</var> and then <a for=set>append</a> it to
<var>top layer</var>.

<p class=note>In other words, <var>element</var> is moved to the end of <var>top layer</var> if it
is already present.


<h3 id=::backdrop-pseudo-element><code>::backdrop</code> pseudo-element</h3>

<p>Each element in a <a>top layer</a> has a
<dfn id=css-pe-backdrop selector><code>::backdrop</code></dfn> pseudo-element. This pseudo-element
is a box rendered immediately below the element (and above the element before the element in the
set, if any), within the same <a>top layer</a>.

<p class=note>The <a><code>::backdrop</code></a> pseudo-element can be used to create a backdrop
that hides the underlying document for an element in a <a>top layer</a> (such as an element that is
displayed fullscreen).

<p>It does not inherit from any element and is not inherited from. No restrictions are made on what
properties apply to this pseudo-element either.

<!-- That this is not in a more normative prose is because CSS should have hooks for this stuff
which make it normative. -->


<h3 id=:fullscreen-pseudo-class><code>:fullscreen</code> pseudo-class</h3>

Expand Down Expand Up @@ -711,11 +633,6 @@ iframe:fullscreen {
padding:0 !important;
}

::backdrop {
position:fixed;
inset:0;
}

*|*:not(:root):fullscreen::backdrop {
background:black;
}
Expand Down Expand Up @@ -760,6 +677,13 @@ delivered with the <a>document</a> through which it is nested.
<p>This prevents e.g. content from third parties to go fullscreen without explicit permission.


<h2 id=old-links class=no-num oldids="new-stacking-layer, top-layer, top-layer-add, ::backdrop-pseudo-element, css-pe-backdrop">
Appendix A: Previously-Hosted Definitions</h2>

This specification previously hosted the definitions of <a selector>::backdrop</a>
and the concept of the document's <a>top layer</a>.



<h2 id=acknowledgments class=no-num>Acknowledgments</h2>

Expand Down Expand Up @@ -791,7 +715,7 @@ Riff Jiang,
Rune Lillesveen,
Sigbjørn Vik,
Simon Pieters,
Tab Atkins,
Tab Atkins-Bittner,
Takayoshi Kochi,
Theresa O'Connor,
triple-underscore,
Expand Down