@@ -16,6 +16,9 @@ spec:dom
1616spec:infra
1717 type:dfn; for:set; text:for each
1818 type:dfn; text:string
19+ spec:css-position-4
20+ type:selector; text: ::backdrop
21+ type:dfn; text:top layer
1922</pre>
2023
2124<pre class=anchors>
@@ -68,13 +71,14 @@ is an <a>ordered set</a> of (<a>string</a>, <a>element</a>) <a>tuples</a>. It is
6871
6972 <li><p> Set <var> element</var> 's <a>fullscreen flag</a> .
7073
71- <li><p> <a for="top layer">Add</a> <var> element</var> to <var> element</var> 's <a>node document</a>' s
72- <a>top layer</a> .
74+ <li><p> <a>Remove from the top layer immediately</a> given <var> element</var> .
75+
76+ <li> <a>Add to the top layer</a> given <var> element</var> .
7377</ol>
7478
7579<p> To <dfn>unfullscreen an <var>element</var></dfn> , unset <var> element</var> 's
76- <a>fullscreen flag</a> and <a>iframe fullscreen flag</a> (if any), and <a for=set>remove</a> it from
77- its <a>node document </a> 's <a>top layer</a > .
80+ <a>fullscreen flag</a> and <a>iframe fullscreen flag</a> (if any), and
81+ <a>remove from the top layer immediately </a> given <var> element </var > .
7882
7983<p> To <dfn>unfullscreen a <var>document</var></dfn> ,
8084<a lt="unfullscreen an element">unfullscreen</a> all <a>elements</a> , within <var> document</var> 's
@@ -118,7 +122,7 @@ these steps:
118122
119123 <li>
120124 <p> If <var> document</var> 's <a>top layer</a> <a for=set>contains</a> <var> node</var> ,
121- <a for=set >remove</a> <var> node</var> from <var> document </var> 's <a>top layer</a > .
125+ <a>remove from the top layer immediately </a> given <var> node</var> .
122126
123127 <p class=note> Other specifications can add and remove elements from <a>top layer</a> , so
124128 <var> node</var> might not be <var> document</var> 's <a>fullscreen element</a> . For example,
@@ -585,88 +589,6 @@ or call to {{Document/exitFullscreen()}} whenever the user agent deems it necess
585589
586590<p> This section is to be interpreted equivalently to the Rendering section of HTML. [[!HTML]]
587591
588- <p class=XXX> Long term CSS will define the <a>top layer</a> concept and its associated
589- <a><code>::backdrop</code></a> pseudo-element as part of CSS' stacking context model. Patching CSS
590- as done here is sketchy as hell.
591-
592-
593- <h3 id=new-stacking-layer>New stacking layer</h3>
594-
595- <p> This specification introduces a new stacking layer to the
596- <a href=https://www.w3.org/TR/CSS2/zindex.html>Elaborate description of Stacking Contexts</a> of CSS
597- 2.1. It is called the <dfn export>top layer</dfn> , comes after step 10 in the painting order, and is
598- therefore rendered closest to the user within a viewport. Each <a for=/>document</a> has one
599- associated viewport and therefore also one <a>top layer</a> . [[!CSS]]
600-
601- <p class=note> The terminology used in this and following subsection attempts to match CSS 2.1
602- Appendix E.
603-
604- <p> The <a>top layer</a> is an <a>ordered set</a> of elements, rendered in the order they appear in
605- the set. The last element in the set is rendered last, and thus appears on top.
606-
607- <p class=note> The <code> z-index</code> property has no effect in the <a>top layer</a> .
608-
609- <p> Each element and <a><code>::backdrop</code></a> pseudo-element in a <a>top layer</a> has the
610- following characteristics:
611-
612- <ul>
613- <li><p> It generates a new stacking context.
614-
615- <li><p> Its parent stacking context is the root stacking context.
616-
617- <li><p> If it consists of multiple layout boxes, the first box is used.
618- <!-- https://www.w3.org/Bugs/Public/show_bug.cgi?id=24523 -->
619-
620- <li>
621- <p> It is rendered as an atomic unit as if it were a sibling of its <a for=tree>root</a> .
622-
623- <p class=note> <a for=tree>Ancestor</a> elements with overflow, opacity, masks, etc. cannot affect
624- it.
625-
626- <li><p> If its <code> position</code> property computes to <code> fixed</code> , its containing block
627- is the viewport, and the initial containing block otherwise.
628-
629- <li><p> If it is an element, it and its <a><code>::backdrop</code></a> pseudo-element are not
630- rendered if its <a>shadow-including inclusive ancestor</a> has the <code> display</code> property
631- set to <code> none</code> .
632-
633- <li><p> If its specified <code> display</code> property is <code> contents</code> , it computes to
634- <code> block</code> .
635-
636- <li><p> If its specified <code> position</code> property is not <code> absolute</code> or
637- <code> fixed</code> , it computes to <code> absolute</code> .
638-
639- <li><p> Its outline, if any, is to be rendered before step 10 in the painting order.
640-
641- <li><p> Unless overridden by another specification, its static position for <code> left</code> ,
642- <code> right</code> , and <code> top</code> is zero.
643- </ul>
644-
645- <p> To <dfn export for="top layer">add</dfn> an <var> element</var> to a <var> top layer</var> ,
646- <a for=set>remove</a> it from <var> top layer</var> and then <a for=set>append</a> it to
647- <var> top layer</var> .
648-
649- <p class=note> In other words, <var> element</var> is moved to the end of <var> top layer</var> if it
650- is already present.
651-
652-
653- <h3 id=::backdrop-pseudo-element><code>::backdrop</code> pseudo-element</h3>
654-
655- <p> Each element in a <a>top layer</a> has a
656- <dfn id=css-pe-backdrop selector><code>::backdrop</code></dfn> pseudo-element. This pseudo-element
657- is a box rendered immediately below the element (and above the element before the element in the
658- set, if any), within the same <a>top layer</a> .
659-
660- <p class=note> The <a><code>::backdrop</code></a> pseudo-element can be used to create a backdrop
661- that hides the underlying document for an element in a <a>top layer</a> (such as an element that is
662- displayed fullscreen).
663-
664- <p> It does not inherit from any element and is not inherited from. No restrictions are made on what
665- properties apply to this pseudo-element either.
666-
667- <!-- That this is not in a more normative prose is because CSS should have hooks for this stuff
668- which make it normative. -->
669-
670592
671593<h3 id=:fullscreen-pseudo-class><code>:fullscreen</code> pseudo-class</h3>
672594
@@ -711,11 +633,6 @@ iframe:fullscreen {
711633 padding:0 !important;
712634}
713635
714- ::backdrop {
715- position:fixed;
716- inset:0;
717- }
718-
719636*|*:not(:root):fullscreen::backdrop {
720637 background:black;
721638}
@@ -743,6 +660,7 @@ allow="fullscreen *"></code>, as described in
743660</div>
744661
745662
663+
746664<h2 id=security-and-privacy-considerations>Security and Privacy Considerations</h2>
747665
748666<p> User agents should ensure, e.g. by means of an overlay, that the end user is aware something is
@@ -761,6 +679,13 @@ delivered with the <a>document</a> through which it is nested.
761679
762680
763681
682+ <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>
683+
684+ This specification previously hosted the definitions of <a selector>::backdrop</a>
685+ and the concept of the document's <a>top layer</a> .
686+
687+
688+
764689<h2 id=acknowledgments class=no-num>Acknowledgments</h2>
765690
766691<p> Many thanks to Robert O'Callahan for designing the initial model and being awesome.
@@ -791,7 +716,7 @@ Riff Jiang,
791716Rune Lillesveen,
792717Sigbjørn Vik,
793718Simon Pieters,
794- Tab Atkins,
719+ Tab Atkins-Bittner ,
795720Takayoshi Kochi,
796721Theresa O'Connor,
797722triple-underscore,
0 commit comments