Merge branch 'main' into continue-collapse

Author: andreubotella

css-anchor-position-1/Overview.bs

@@ -197,8 +197,8 @@ for a given positioned element.
 	which sets the implicit anchor element.
 
 [=Implicit anchor elements=] can be referenced
-with the ''implicit'' keyword,
-rather than referring to some 'anchor-name' value.
+with the ''position-anchor/auto'' keyword in 'position-anchor',
+or by omitting the anchor reference in [=anchor functions=].
 
 [=Pseudo-elements=]
 have the same [=implicit anchor element=]
@@ -324,7 +324,7 @@ given an <dfn>anchor specifier</dfn>,
 which is either a <<dashed-ident>>
 (and a [=tree-scoped reference=])
 that should match an 'anchor-name' value elsewhere on the page,
-or the keyword ''implicit'',
+or the keyword ''position-anchor/auto'',
 or nothing (a missing specifier).
 
 Note: The general rule captured by these conditions
@@ -351,7 +351,7 @@ in anchor positioning.
 		for |query el|
 		given the |query el|'s [=default anchor specifier=].
 
-	2. If |anchor spec| is ''implicit'':
+	2. If |anchor spec| is ''position-anchor/auto'':
 		1. If the Popover API defines an [=implicit anchor element=] for |query el|
 			which is an [=acceptable anchor element=] for |query el|,
 			return that element.
@@ -481,7 +481,7 @@ is the element's <dfn>default anchor element</dfn>.
 
 Its values are identical to the <<anchor-element>> term
 in ''anchor()'' and ''anchor-size()'',
-except that the ''position-anchor/auto'' value
+except that the <dfn value for=position-anchor>auto</dfn> value
 is equivalent to omitting the <<anchor-element>> in ''anchor()''
 (referring to the [=implicit anchor element=], if one exists).
 
@@ -827,7 +827,7 @@ The ''anchor()'' function has three arguments:
 			This name is a [=tree-scoped reference=].
 
 		: omitted
-		:: Selects the [=implicit anchor element=]
+		:: Selects the [=default anchor element=]
 			defined for the element,
 			if possible.
 	</dl>
@@ -916,19 +916,19 @@ as if by an additional ''translate()'' transform.
 
 <div class=example>
 	For example,
-	in ''.bar { top: anchor(--foo top); }'',
+	in ''.bar { inset-block-start: anchor(--foo block-start); }'',
 	the ''anchor()'' will resolve to the length
-	that'll line up the <code>.bar</code> element's top edge
-	with the ''--foo'' anchor's top edge.
+	that'll line up the <code>.bar</code> element's block-start edge
+	with the ''--foo'' anchor's block-start edge.
 
 	On the other hand,
-	in ''.bar { bottom: anchor(--foo top); }'',
+	in ''.bar { inset-block-end: anchor(--foo block-start); }'',
 	it will instead resolve to the length
-	that'll line up the <code>.bar</code> element's <em>bottom</em> edge
-	with the ''--foo'' anchor's top edge.
+	that'll line up the <code>.bar</code> element's <em>block-end</em> edge
+	with the ''--foo'' anchor's block-start edge.
 
-	Since 'top' and 'bottom' values specify insets from different edges
-	(the top and bottom of the element's [=containing block=],
+	Since 'inset-block-start' and 'inset-block-end' values specify insets from different edges
+	(the block-start and block-end of the element's [=containing block=],
 	respectively),
 	the same ''anchor()'' will usually resolve to different lengths in each.
 </div>
@@ -1716,8 +1716,7 @@ the [=position options list=] will be tried.
 	.list {
 		position: fixed;
 		position-anchor: --foo;
-		top: anchor(bottom);
-		left: anchor(left);
+		position-area: block-end span-inline-end;
 		align-self: start;
 		position-try-fallbacks: --bottom-scrollable, flip-block, --top-scrollable;
 		position-try-order: most-height;
@@ -1726,18 +1725,15 @@ the [=position options list=] will be tried.
 		align-self: stretch;
 	}
 	@position-try --top-scrollable {
-		top: 0;
-		bottom: anchor(top);
+		position-area: block-start span-inline-end;
 		align-self: stretch;
 	}
 	</pre>
 
 	The ''flip-block'' auto-generated option and the ''--top-scrollable'' option
 	will always find the same available height,
-	since both of them stretch vertically from ''top: 0''
-	(the top edge of the viewport)
-	to ''bottom: anchor(top)''
-	(the top of the anchor),
+	since both of them stretch vertically from the top edge of the containing block
+	to the top of the anchor,
 	so they'll retain their specified order.
 	This causes the element to first try to align against the anchor
 	at its natural height

css-backgrounds-3/Overview.bs

@@ -131,7 +131,7 @@ Backgrounds</h2>
 Layering Multiple Background Images</h3>
 
 	The background of a box can have multiple
-	<dfn lt="background image layer" local-lt="layer">background image layers</dfn>.
+	<dfn export lt="background image layer" local-lt="layer">background image layers</dfn>.
 	The number of layers is determined by
 	the number of comma-separated values in the 'background-image' property.
 	Note that a value of ''background-image/none'' still creates a layer.
@@ -268,7 +268,7 @@ Base Color: the 'background-color' property</h3>
 		color-behind-images.htm
 	</wpt>
 
-	This property sets the <dfn id="background-color-layer">background color</dfn> of a box.
+	This property sets the <dfn export id="background-color-layer">background color</dfn> of a box.
 	This color is drawn behind any background images.
 
 	<div class="example">
@@ -326,7 +326,7 @@ Image Sources: the 'background-image' property</h3>
 		parsing/background-image-valid.html
 	</wpt>
 
-	This property specifies the <dfn lt="background image" local-lt="image" id="background-images">background image(s)</dfn> of an element.
+	This property specifies the <dfn export lt="background image" local-lt="image" id="background-images">background image(s)</dfn> of an element.
 	Images are drawn with the first specified one on top (closest to the user)
 	and each subsequent image behind the previous one.
 	The property's value is given as a comma-separated list
@@ -500,11 +500,10 @@ Tiling Images: the 'background-repeat' property</h3>
 		<dt><dfn>round</dfn>
 		<dd>
 			The [=image=] is repeated as often as will fit within the
-			<span class=index>background positioning area.</span> If it doesn't
+			[=background positioning area=]. If it doesn't
 			fit a whole number of times, it is rescaled so that it does.
-			See the formula under 'background-size'. If the <span
-			class=index>background
-			painting area</span> is larger than the background positioning area, then
+			See the formula under 'background-size'.
+			If the [=background painting area=] is larger than the background positioning area, then
 			the pattern repeats to fill the background painting area.
 
 		<dt><dfn>no-repeat</dfn>
@@ -712,7 +711,7 @@ Affixing Images: the 'background-attachment' property</h3>
 	Initial: 0% 0%
 	Applies to: all elements
 	Inherited: no
-	Percentages: refer to size of <span class=index>background positioning area</span>
+	Percentages: refer to size of [=background positioning area=]
 	    <em>minus</em> size of background image; see text
 	Computed value: list,
 	    each item a pair of offsets (horizontal and vertical) from the top left origin
@@ -970,7 +969,7 @@ Painting Area: the 'background-clip' property</h3>
 		parsing/background-clip-valid.html
 	</wpt>
 
-	Determines the <dfn>background painting area</dfn>,
+	Determines the <dfn export>background painting area</dfn>,
 	which determines the area within which the background is painted.
 	Values have the following meanings:
 
@@ -1052,7 +1051,7 @@ Positioning Area: the 'background-origin' property</h3>
 	</wpt>
 
 
-	This property determines the <dfn>background positioning area</dfn>:
+	This property determines the <dfn export>background positioning area</dfn>:
 	the area within which any background images are positioned.
 	For elements rendered as multiple [=box fragments=]
 	(e.g., inline boxes on several lines, boxes on several pages),
@@ -2771,7 +2770,7 @@ Image Source: the 'border-image-source' property</h3>
 	If the value is ''border-image-source/none'' or if the image cannot be displayed
 	(or the property doesn't apply), the border styles will be used;
 	otherwise the element's 'border-style' borders are not drawn
-	and this <dfn id="border-image-dfn">border image</dfn> is drawn
+	and this <dfn export id="border-image-dfn">border image</dfn> is drawn
 	as described in the sections below.
 
 <h3 id="border-image-slice" oldids="the-border-image-slice">
@@ -2906,13 +2905,13 @@ Drawing Areas: the 'border-image-width' property</h3>
 		parsing/border-image-width-valid.html
 	</wpt>
 
-	The [=border image=] is drawn inside an area called the <dfn>border image area</dfn>.
+	The [=border image=] is drawn inside an area called the <dfn export>border image area</dfn>.
 	This is an area whose boundaries by default correspond to the [=border box=],
 	see 'border-image-outset'.
 
 	The four values of 'border-image-width' specify offsets
 	that are used to divide the [=border image area=] into nine
-	<dfn lt="border image region" local-lt="region">regions</dfn>.
+	<dfn export lt="border image region" local-lt="region">regions</dfn>.
 	The offsets represent inward distances from
 	the top, right, bottom, and left sides of the area, respectively.
 

css-backgrounds-4/Overview.bs

@@ -205,49 +205,48 @@ Tiling Images Shorthand: the 'background-repeat' property</h3>
 <h3 id="the-background-position">
 Background Positioning: the 'background-position' shorthand property</h3>
 
-	<pre class="propdef shorthand">
-		Name: background-position
-		Value: <<bg-position>>#
+	<pre class="propdef">
+	Name: background-position
+	Value: <<bg-position>>#
+	Initial: 0% 0%
+	Applies to: all elements
+	Inherited: no
+	Percentages: refer to size of <span class=index>background positioning area</span>
+	    <em>minus</em> size of background image; see text
+	Computed value: a list,
+	    each item a pair of offsets (horizontal and vertical) from the top left origin,
+	    each offset given as a computed <<length-percentage>> value
+	Animation type: repeatable list
 	</pre>
 
-	See [[CSS3BG]] for definition.
-
-	<p>Where
-	<pre class=prod><dfn>&lt;bg-position&gt;</dfn> = [
-	  [ left | center | right | top | bottom | start | end | <<length-percentage>> ]
-	|
-	  [ left | center | right | x-start | x-end | <<length-percentage>> ]
-	  [ top | center | bottom | y-start | y-end | <<length-percentage>> ]
-	|
-	  [ center | [ left | right | x-start | x-end ] <<length-percentage>>? ] &amp;&amp;
-	  [ center | [ top | bottom | y-start | y-end ] <<length-percentage>>? ]
-	|
-	  [ center | [ start | end ] <<length-percentage>>? ]
-	  [ center | [ start | end ] <<length-percentage>>? ]	]</pre>
-
-	Values have the following meanings:
-	<dl>
-		<dt>One value
-		<dd>
-			If only one value is given,
-			and that value is ''background-position/start'' or ''background-position/end'',
-			then the keyword is duplicated;
-			otherwise the second keyword defaults to ''background-position/center''.
-			The resulting value is treated as a two-component value.
+	If [=background images=] have been specified,
+	this property specifies their initial position
+	(after any <a href="#background-size">resizing</a>)
+	within their corresponding [=background positioning area=].
 
-		<dt>More than one value
-		<dd>
-			If the value contains a ''background-position/start'' or ''background-position/end'' keyword,
-			then the shorthand sets
-			'background-position-inline' and 'background-position-block' to the specified values.
-			Otherwise
-			the shorthand sets
-			'background-position-x' and 'background-position-y' to the specified values.
-
-			Issue: Specify the value assignment in more detail. Should expand just like Level 3.
-	</dl>
+	This property is a [=shorthand property=] that sets
+	'background-position-x', 'background-position-y', 'background-position-block', and 'background-position-inine'
+	in a single declaration.
+
+	Its value is given as a comma-separated list
+	of <dfn><<bg-position>></dfn> values, which are interpreted as <<position>> values
+	with the resized [=background image=] as the [=alignment subject=]
+	and the [=background positioning area=] as the [=alignment container=].
+
+	<pre class=prod>
+		<<bg-position>> =  <<position>> | <<position-three>>
+		<dfn><<position-three>></dfn> = [
+		  [ left | center | right ] && [ [ top | bottom ] <<length-percentage>> ]
+		|
+		  [ [ left | right ] <<length-percentage>> ] && [ top | center | bottom ]
+		]
+	</pre>
+
+	The omitted <<length-percentage>> in the 'background-position'-specific
+	<<position-three>> syntax variant
+	defaults to ''0%''.
 
-	Issue: Specify what happens to set of properties that are not set. Maybe they're just not set?
+	Issue(9690): Specify how the [=longhand properties=] are set.
 
 <h4 id="background-position-longhands">
 Background Positioning Longhands: the 'background-position-x', 'background-position-y', 'background-position-inline', and 'background-position-block' properties</h4>

css-cascade-6/Overview.bs

@@ -20,8 +20,10 @@ Informative Classes: ex
 </pre>
 
 <pre class=link-defaults>
-spec:dom; type:dfn; text:shadow tree
-spec:dom; type:dfn; for:tree; text:root
+spec:dom; type:dfn;
+	text:shadow tree
+	for:tree; text:root
+	text:shadow root; for:/
 spec:css-color-4; type:property; text:color
 spec:css-values-3; type: value; text:ex
 spec:css-conditional-3; type:at-rule; text:@media
@@ -303,7 +305,9 @@ Effects of ''@scope''</h4>
 		are [=scoped style rules=].
 
 	* The '':scope'' selector is defined to match
-		the ''@scope'' rule’s [=scoping root=].
+		the ''@scope'' rule’s [=scoping root=],
+		including the [=featureless=] [=shadow host=]
+		when that host is the [=scoping root=].
 		The ''&'' selector is defined to represent
 		the selector representing the [=scoping root=]
 		(the <<scope-start>> selector),
@@ -619,6 +623,8 @@ Scope Nesting</h4>
 	only the innermost ''@scope'' matters
 	for determining [=scope proximity=] of [[#scope-scope|nested @scope rules]].
 
+Issue(10795): Should the scope proximity calculation be impacted by nesting scopes?
+
 	<div class=example>
 		When nesting ''@scope'' rules inside other ''@scope'' rules,
 		or inside other selectors,
@@ -719,21 +725,27 @@ Changes</h2>
 
 This appendix is <em>informative</em>.
 
-<h3 id="changes-2022-08">
+<h3 id="changes-since-2023-03">
 Changes since the 21 March 2023 Working Draft</h3>
 
 	Significant changes since the
 	<a href="https://www.w3.org/TR/2023/WD-css-cascade-6-20230321/">21 March 2023 Working Draft</a> include:
 
+	* The '':scope'' selector can match the [=featureless=] [=shadow host=] when
+		that host is the [=scoping root=] element.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/9025">Issue 9025</a>)
+
 	* ''<<scope-start>>'' and ''<<scope-end>>'' selectors are unforgiving.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/10042">Issue 10042</a>)
 
 	* A ''@scope'' rule without ''<<scope-start>>'' scopes to the
-		[==shadow host==] instead of the [==shadow root==].
+		[=shadow host=] instead of the [=shadow root=].
 		(<a href="https://github.com/w3c/csswg-drafts/issues/9178">Issue 9178</a>)
 
 	* Clarified that [=scope proximity=] is a single measurement of the steps
-		between a single [=scoping root=] and [=scoped style rule=] [=subject=].
+		between a single [=scoping root=] and [=scoped style rule=] [=subject=]
+		(<a href="https://github.com/w3c/csswg-drafts/issues/10795">Issue 10795</a>
+		has been opened to discuss this futher).
 
 	* Removed strong scope proximity.
 		(<a href="https://github.com/w3c/csswg-drafts/issues/6790">Issue 6790</a>)