[css-position-4] Pull definition of ::backdrop, and additional rendering details, from Fullscreen.

Author: tabatkins

css-position-4/Overview.bs

@@ -89,15 +89,19 @@ with its top left corner at the canvas origin.
 		 and |canvas|.
 
 	2. For each element |el| in |doc|'s [=Document/top layer=]:
-		1. [=Paint a stacking context=] given |el| and |canvas|,
+		1. [=Paint a stacking context=]
+			given |el|'s ''::backdrop'' pseudo-element
+			and |canvas|.
+
+		2. [=Paint a stacking context=] given |el| and |canvas|,
 			treating |el| as a [=stacking context=],
 			with the [=initial containing block=]
 			as its [=containing block=].
 </div>
 
 <div algorithm>
 	To <dfn export>paint a stacking context</dfn>
-	given an [=element=] or [=box=] |root|,
+	given an [=element=], [=pseudo-element=], or [=box=] |root|,
 	and an infinite canvas |canvas|:
 
 	1. If |root| is an [=element=],
@@ -332,9 +336,9 @@ as if they were siblings of the root element.
 [=Document/Top layer=] elements are rendered in the order they appear in the [=Document/top layer=];
 the last element in the [=Document/top layer=] is rendered on top of everything else.
 
-{{Document}}s also have a <dfn export>pending top layer removals</dfn> [=ordered set=],
-containing elements that are pending removal.
-(See the algorithms, below, for details on how this is used.)
+An element is <dfn export>in the top layer</dfn>
+if it's present in its document's [=Document/top layer=],
+and its computed 'overlay' value is ''overlay/auto''.
 
 Note: This special rendering behavior ensures
 that elements in the [=Document/top layer=] cannot be clipped by anything in the document,
@@ -353,12 +357,107 @@ Note: The [=Document/top layer=] interacts with the 'overlay' property
 in a somewhat unusual way.
 See 'overlay' for details.
 
+{{Document}}s also have a <dfn export>pending top layer removals</dfn> [=ordered set=],
+containing elements that are pending removal.
+(See the algorithms, below, for details on how this is used.)
+
 The [=Document/top layer=]
 (and the [=pending top layer removals=])
 should not be interacted with directly
 by specification algorithms.
+(Individual features using the [=Document/top layer=]
+might have ownership over various things in the top layer,
+like a popover inside of a popover,
+that need to be reordered or moved as a group.)
 Instead, specifications should use the following algorithms.
 
+Top Layer Styling {#top-styling}
+-----------------
+
+If an element is [=in the top layer=],
+it generates a
+
+Every element [=in the top layer=],
+as well as its corresponding ''::backdrop'' pseudo-element,
+are rendered with the following qualities:
+
+* It generates a new [=stacking context=].
+
+* Its parent stacking context is the root stacking context.
+
+* If it consists of multiple layout boxes, the first box is used.
+
+	Issue: Not sure what this means.
+	Maybe it's talking about fragmentation?
+
+* It is rendered as an atomic unit as if it were a sibling of the document's root.
+
+	Note: Ancestor elements with 'overflow', 'opacity', 'mask', etc. cannot affect it.
+
+* If its 'position' property computes to ''position/fixed'',
+	its containing block is the viewport;
+	otherwise, it's the initial containing block.
+
+* If it is an element,
+	it and its ''::backdrop'' pseudo-element are not rendered
+	if its [=shadow-including inclusive ancestor=] has the ''display: none''.
+
+* If its specified 'display' property is ''display/contents'',
+	it computes to ''display/block''.
+
+* If its specified 'position' property
+	is not ''position/absolute'' or ''position/fixed'',
+	it computes to ''position/absolute''.
+
+* Unless overridden by another specification,
+	its static position for left, right, and top is zero.
+
+
+The ''::backdrop'' Pseudo-Element {#backdrop}
+---------------------------------
+
+Each element [=in the top layer=] has a <dfn selector>::backdrop</dfn> pseudo-element,
+for which it is the [=originating element=].
+
+When its computed 'content' value is not ''content/none'',
+''::backdrop'' pseudo-elements generate boxes
+as if they were siblings of the root element.
+They're automatically rendered as a separate item in the [=Document/top layer=],
+below their [=originating element=].
+(See "[=paint a document=]" for details.)
+
+Note: The ''::backdrop'' pseudo-element
+can be used to create a backdrop
+that hides the underlying document for an element in a top layer
+(such as an element that is displayed fullscreen).
+
+The ''::backdrop'' pseudo-element is a [=tree-abiding pseudo-element=].
+It accepts all properties.
+It inherits from its [=originating element=].
+
+User agents should contain the following rules in a UA-level style sheet:
+
+<pre highlight=css>
+::backdrop {
+	position: fixed;
+	inset: 0;
+}
+</pre>
+
+Other specifications can additional properties
+to the default ''::backdrop'' rendering.
+
+Note: For example, a fullscreen element
+(see [[FULLSCREEN]])
+styles its ''::backdrop'' as opaque black by default.
+
+See [[#top-styling]] for additional details
+on how ''::backdrop'' elements are rendered.
+
+
+Top Layer Manipulation {#top-manip}
+----------------------
+
 <div algorithm>
 	To <dfn export lt="add an element to the top layer | add to the top layer">add an element to the top layer</dfn>,
 	given a {{Document}} |doc|
@@ -410,7 +509,8 @@ Instead, specifications should use the following algorithms.
 	Note: This algorithm is only intended to be used in special cases
 	where removing something from the top layer immediately
 	(bypassing things like an 'overlay' transition)
-	is necessary.
+	is necessary,
+	such as a modal dialog that is removed from the document.
 	Most of the time, [=requesting removal from the top layer=] is more appropriate.
 </div>