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 2 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
118 changes: 17 additions & 101 deletions fullscreen.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ Text Macro: LATESTRD 2023-01
Abstract: The Fullscreen API standard defines an API for elements to display themselves fullscreen.
Translation: ja https://triple-underscore.github.io/fullscreen-ja.html
Markup Shorthands: css no
Ignore MDN Failure: ::backdrop-pseudo-element
</pre>

<pre class=link-defaults>
Expand Down Expand Up @@ -56,21 +57,22 @@ stated otherwise it is unset.

<p>All <a for=/>documents</a> have an associated <dfn export>fullscreen element</dfn>. The
<a>fullscreen element</a> is the topmost <a>element</a> in the <a for=/>document</a>'s
<a>top layer</a> whose <a>fullscreen flag</a> is set, if any, and null otherwise.
[=Document/top layer=] whose <a>fullscreen flag</a> is set, if any, and null otherwise.

<p>All <a for=/>documents</a> have an associated <dfn>list of pending fullscreen events</dfn>, which
is an <a>ordered set</a> of (<a>string</a>, <a>element</a>) <a>tuples</a>. It is initially empty.

<p>To <dfn>fullscreen an <var>element</var></dfn>, set <var>element</var>'s <a>fullscreen flag</a>
and <a for="top layer">add</a> it to its <a>node document</a>'s <a>top layer</a>.
<p>To <dfn>fullscreen an <var>element</var></dfn>, set <var>element</var>'s <a>fullscreen flag</a>.
If <var>element</var> is not currently [=in the top layer=] of its <a>node document</a>,
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 where the important behavioral change (not moving to the top of top layer) is. Once settled, can you add a note here describing the non-obvious consequences if the element is already in top layer? Right now it might be:

Note: If element is already in the top layer, it will not be moved, and may be obscured by other elements later in top layer.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It seems like the behavior we're going for, actually, is that an element can only be in the top layer for one reason at a time, so actually this might need to change a little more to properly reflect that. (And possibly allow it to be moved if it's currently in the top layer for fullscreen reasons, as per your comment.)

Copy link
Member

Choose a reason for hiding this comment

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

We already have safeguards (exceptions notably) for this so we shouldn't change behavior unless necessary. Dialogs can't be fullscreened, Popovers can't be fullscreened (with #204 merged at least). Fullscreen elements also can't be made popovers (check popover validity algorithm prevents it). They can't be made dialogs either since you can't change the tag name.

Copy link
Member

Choose a reason for hiding this comment

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

I think here we should first check if the element is in top layer and if so remove it immediately. That will have the effect of moving it to the top of the stack.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Okay, I've gone ahead and applied this - when fullscreening, we first request removal then add it, so it'll cycle to the end if it was already there.

[=add to the top layer|add it to the top layer=] of its <a>node document</a>.

<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>request removal from the top layer</a> for it from its <a>node document</a>.

<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
<a>top layer</a>, whose <a>fullscreen flag</a> is set.
[=Document/top layer=], whose <a>fullscreen flag</a> is set.

<hr>

Expand All @@ -81,7 +83,7 @@ its <a>node document</a>'s <a>top layer</a>.
<li><p>If <var>document</var>'s <a>fullscreen element</a> is null, terminate these steps.

<li><p><a lt="unfullscreen an element">Unfullscreen elements</a> whose <a>fullscreen flag</a> is
set, within <var>document</var>'s <a>top layer</a>, except for <var>document</var>'s
set, within <var>document</var>'s [=Document/top layer=], except for <var>document</var>'s
<a>fullscreen element</a>.

<li><p><a>Exit fullscreen</a> <var>document</var>.
Expand Down Expand Up @@ -109,10 +111,11 @@ these steps:
<li><p>Otherwise, <a lt="unfullscreen an element">unfullscreen <var>node</var></a>.

<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>.
<p>If <var>document</var>'s [=Document/top layer=] <a for=set>contains</a> <var>node</var>,
<a>remove from the top layer immediately</a> <var>node</var> from <var>document</var>'s
[=Document/top layer=].

<p class=note>Other specifications can add and remove elements from <a>top layer</a>, so
<p class=note>Other specifications can add and remove elements from [=Document/top layer=], so
<var>node</var> might not be <var>document</var>'s <a>fullscreen element</a>. For example,
<var>node</var> could be an open <{dialog}> element.
</ol>
Expand Down Expand Up @@ -400,9 +403,9 @@ getter steps are:
</div>

<p>A <a>document</a> is said to be a <dfn>simple fullscreen document</dfn> if there is exactly one
<a>element</a> in its <a>top layer</a> that has its <a>fullscreen flag</a> set.
<a>element</a> in its [=Document/top layer=] that has its <a>fullscreen flag</a> set.

<p class=note>A <a>document</a> with two <a>elements</a> in its <a>top layer</a> can be a
<p class=note>A <a>document</a> with two <a>elements</a> in its [=Document/top layer=] can be a
<a>simple fullscreen document</a>. For example, in addition to the <a>fullscreen element</a> there
could be an open <{dialog}> element.

Expand Down Expand Up @@ -436,7 +439,7 @@ could be an open <{dialog}> element.

<p class=note>This is the set of documents for which the <a>fullscreen element</a> will be
<a lt="unfullscreen an element">unfullscreened</a>, but the last document in <var>docs</var> might
have more than one <a>element</a> in its <a>top layer</a> with the <a>fullscreen flag</a> set,
have more than one <a>element</a> in its [=Document/top layer=] with the <a>fullscreen flag</a> set,
in which case that document will still remain in fullscreen.
</ol>
</div>
Expand Down Expand Up @@ -570,88 +573,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 @@ -696,11 +617,6 @@ iframe:fullscreen {
padding:0 !important;
}

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

*|*:not(:root):fullscreen::backdrop {
background:black;
}
Expand Down Expand Up @@ -776,7 +692,7 @@ Riff Jiang,
Rune Lillesveen,
Sigbjørn Vik,
Simon Pieters,
Tab Atkins,
Tab Atkins-Bittner,
Takayoshi Kochi,
Theresa O'Connor,
triple-underscore,
Expand Down