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

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

Merged
merged 15 commits into from
May 23, 2023
Merged

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

Changes from all 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
111 changes: 18 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
foolip marked this conversation as resolved.
Show resolved Hide resolved
</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>Remove from the top layer immediately</a> given <var>element</var>.

<li><a>Add to the top layer</a> given <var>element</var>.
</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 @@ -743,6 +660,7 @@ allow="fullscreen *"&gt;</code>, as described in
</div>



<h2 id=security-and-privacy-considerations>Security and Privacy Considerations</h2>

<p>User agents should ensure, e.g. by means of an overlay, that the end user is aware something is
Expand All @@ -761,6 +679,13 @@ delivered with the <a>document</a> through which it is nested.



<h2 id=old-links class=no-num oldids="new-stacking-layer, top-layer, top-layer-add, ::backdrop-pseudo-element, css-pe-backdrop">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>

<p>Many thanks to Robert O'Callahan for designing the initial model and being awesome.
Expand Down Expand Up @@ -791,7 +716,7 @@ Riff Jiang,
Rune Lillesveen,
Sigbjørn Vik,
Simon Pieters,
Tab Atkins,
Tab Atkins-Bittner,
Takayoshi Kochi,
Theresa O'Connor,
triple-underscore,
Expand Down