From 40b49087ea0f1e16f4d39f12279cb2857c004be0 Mon Sep 17 00:00:00 2001 From: Chris Lilley Date: Sat, 11 Oct 2025 17:25:05 -0400 Subject: [PATCH 01/14] [css-flexbox-1][editorial] Final missing WPT added --- css-flexbox-1/Overview.bs | 74 ++++++++++++++++++++++++++++++++++++++- 1 file changed, 73 insertions(+), 1 deletion(-) diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs index 735dc2448bd..eba8be9ffa2 100644 --- a/css-flexbox-1/Overview.bs +++ b/css-flexbox-1/Overview.bs @@ -702,6 +702,15 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values interactive/flexbox_interactive_order-transitions.html nested-flex-image-loading-invalidates-intrinsic-sizes.html percentage-margins-001.html + stretch-after-sibling-size-change.html + stretched-child-in-nested-flexbox-001.html + stretched-child-in-nested-flexbox-002.html + stretched-child-in-nested-flexbox-003.html + stretched-child-shrink-on-relayout.html + stretch-flex-item-checkbox-input.html + stretch-flex-item-radio-input.html + stretching-orthogonal-flows.html + table-with-percent-intrinsic-width.html
inline-flex @@ -775,6 +784,7 @@ Flex Containers: the ''flex'' and ''inline-flex'' 'display' values padding-overflow-crash.html padding-overflow.html text-overflow-on-flexbox-001.html + synthesize-vrl-baseline.html Flex containers are not block containers, @@ -861,6 +871,7 @@ Flex Items hittest-anonymous-box.html percentage-descendant-of-anonymous-flex-item.html percentage-size-subitems-001.html + whitespace-in-flexitem-001.html
@@ -1461,6 +1472,8 @@ Grid doesn't have similarly meaningful shrinkability, so it doesn't need to care getcomputedstyle/flexbox_computedstyle_min-auto-size.html getcomputedstyle/flexbox_computedstyle_min-height-auto.html getcomputedstyle/flexbox_computedstyle_min-width-auto.html + select-element-zero-height-001.html + select-element-zero-height-002.html Note: The [=content-based minimum size=] is a type of [=intrinsic size contribution=], @@ -2257,6 +2270,8 @@ The 'flex' Shorthand parsing/flex-grow-computed.html parsing/flex-grow-invalid.html parsing/flex-grow-valid.html + table-item-flex-percentage-min-width.html + table-item-flex-percentage-width.html
@@ -2329,6 +2344,8 @@ The 'flex' Shorthand parsing/flex-shrink-computed.html parsing/flex-shrink-invalid.html parsing/flex-shrink-valid.html + table-item-flex-percentage-min-width.html + table-item-flex-percentage-width.html Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. @@ -2389,6 +2406,7 @@ The 'flex' Shorthand parsing/flex-basis-computed.html parsing/flex-basis-invalid.html parsing/flex-basis-valid.html + table-as-item-percent-width-cell-001.html <<'flex-basis'>> accepts the same values as the 'width' and 'height' properties @@ -2914,7 +2932,8 @@ Axis Alignment: the 'justify-content' property justify-content_space-between-001.html justify-content_space-between-002.html scrollbars-auto.html - + scrollbars.html + scrollbars-no-margin.html The 'justify-content' property aligns flex items along the main axis of the current line of the flex container. @@ -3092,6 +3111,13 @@ Cross-axis Alignment: the 'align-items' and 'align-self' properties position-relative-percentage-top-002.html position-relative-percentage-top-003.html relayout-align-items.html + stretch-input-in-column.html + stretch-requires-computed-auto-size.html + table-as-item-stretch-cross-size-2.html + table-as-item-stretch-cross-size-3.html + table-as-item-stretch-cross-size-4.html + table-as-item-stretch-cross-size-5.html + table-as-item-stretch-cross-size.html 
@@ -3600,6 +3626,16 @@ Flex Layout Algorithm
 		percentage-max-height-004.html
 		percentage-max-height-005.html
 		percent-height-flex-items-cross-sizes-with-mutations.html
+		table-as-item-auto-min-width.html
+		table-as-item-change-cell.html
+		table-as-item-fixed-min-width-2.html
+		table-as-item-fixed-min-width-3.html
+		table-as-item-fixed-min-width.html
+		table-as-item-narrow-content-2.html
+		table-as-item-narrow-content.html
+		table-as-item-specified-height.html
+		table-as-item-specified-width.html
+		table-as-item-specified-width-vertical.html
 	
 
 

@@ -3661,6 +3697,15 @@ Line Length Determination

 				item-with-table-with-infinite-max-intrinsic-width.html
 				multiline-min-max.html
 				orthogonal-writing-modes-and-intrinsic-sizing.html
+				svg-root-as-flex-item-001.html
+				svg-root-as-flex-item-002.html
+				svg-root-as-flex-item-003.html
+				svg-root-as-flex-item-004.html
+				svg-root-as-flex-item-005.html
+				svg-root-as-flex-item-006.html
+				table-as-item-min-height-1.html
+				table-as-item-wide-content.html
+				table-with-infinite-max-intrinsic-width.html
 			
 
 			
    
@@ -3739,6 +3784,10 @@ Line Length Determination
 			clamped according to its used min and max main sizes
 			(and flooring the content box size at zero).
 
+			
+				text-as-flexitem-size-001.html
+			
+
 		
  1. 
 			Determine the main size of the flex container
 			using the rules of the formatting context in which it participates.
@@ -3929,6 +3978,10 @@ Cross Size Determination
 			treating this used size as its definite cross size
 			so that percentage-sized children can be resolved.
 
+			
+				table-as-item-cross-size.html
+			
+
 			
    
 				Note that this step does not affect the main size of the flex item,
 				even if it has a [=preferred aspect ratio=].
@@ -4131,6 +4184,10 @@ Resolving Flexible Lengths
 		item-with-max-height-and-scrollbar.html
 		max-width-violation.html
 		relayout-image-load.html
+		table-as-item-inflexible-in-column-1.html
+		table-as-item-inflexible-in-column-2.html
+		table-as-item-inflexible-in-row-1.html
+		table-as-item-inflexible-in-row-2.html
 	
 
 
 
+	
    +	Name: border
+	Value: <> || <> || <>
+	
    
+
+	
+		parsing/border-invalid.html
+		parsing/border-shorthand.html
+		parsing/border-valid.html
+	
+
+	The 'border' property is a [=shorthand property=] for setting
+	the same 'border-width', 'border-color', and 'border-style'
+	for all four borders of a box.
+	Unlike the shorthand 'margin' and 'padding' properties,
+	the 'border' property cannot set different values on the four borders.
+	To do so, one or more of the other border properties must be used.
+
+	The 'border' shorthand also resets 'border-image' to its initial value.
+	It is therefore recommended that authors use the 'border' shorthand,
+	rather than other shorthands or the individual properties,
+	to override any border settings earlier in the cascade.
+	This will ensure that 'border-image' has also been reset
+	to allow the new styles to take effect.
+
+	Note: The CSS Working Group intends for the 'border' shorthand
+	to reset all border properties in future levels of CSS as well.
+	For example, if a border-characters property
+	is introduced in the future to allow glyphs as borders,
+	it will also be reset by the 'border' shorthand.
+	By using the 'border' shorthand to reset borders,
+	authors can be guaranteed a “blank canvas”
+	no matter what properties are introduced in the future.
+
+	
    
+		For example, the first rule below is equivalent to the set of five
+		rules shown after it:
+
+		
    +		p { border: solid red }
+		p {
+		  border-top: solid red;
+		  border-right: solid red;
+		  border-bottom: solid red;
+		  border-left: solid red;
+		  border-image: none;
+		}
+		
    
+	
    
+
+	Since, to some extent, the properties have overlapping functionality,
+	the order in which the rules are specified is important.
+
+	
    
+		Consider this example:
+		
    +		blockquote {
+		  border-color: red;
+		  border-left: double;
+		  color: black
+		}
+		
    
+
+		In the above example,
+		the color of the left border is black, while the other borders are red.
+		This is due to 'border-left' setting the width, style, and color.
+		Since the color value is not given by the 'border-left' property,
+		it will be taken from the 'color' property.
+		The fact that the 'color' property is set after the 'border-left' property
+		is not relevant.
+	
    
+
 
    
 Corners
    
 
+	The [=padding edge=] (inner border) radius is
+	the outer border radius minus the corresponding border thickness.
+	In the case where this results in a negative value,
+	the inner radius is zero.
+	(In such cases the center of the border’s inner curve might not coincide
+	with that of its outer curve.)
+	Likewise the [=content edge=] radius is
+	the [=padding edge=] radius minus the corresponding [=padding=],
+	or if that is negative, zero.
+	The border and padding thicknesses in the curved region
+	are thus interpolated from the adjoining sides,
+	and when two adjoining borders are of different thicknesses
+	the corner will show a smooth transition
+	between the thicker and thinner borders.
+
+	All border styles (''border-style/solid'', ''border-style/dotted'',  ''border-style/inset'', etc.)
+	follow the curve of the border.
+
+	
    
+		The effect of rounded corners on unequal borders
+
+		
    
+			The effect of a rounded corner when the two borders it connects
+			are of unequal thickness (left)
+			and the effect of a rounded corner on borders
+			that are thicker than the radius of the corner (right).
+		
    
+	
    
+
+
+	Note: If the center of a corner's outer curve
+	is past an opposite [=padding edge=]
+	(in the [=border area=] of a side opposite the corner),
+	the inner curve will not be a full quarter ellipse.
+
+	
    
+		
+			
+				
    
+					
    +					p { width: 70px; height: 70px; border: solid 30px;
+					border-color: orange orange silver silver;
+					border-top-right-radius: 100%; }
+					
    
+				    		
+					The curved corner is an arc from the top left corner
+					          sweeping across the top right corner to the bottom right corner,
+					          describing a quarter-ellipse;
+					          but since the opposite sides have a border thickness
+					          the padding edge curve starts inward from the outer arc's endpoints.
+		
    
+		
    
+		Where the border-radius curve extends into the opposite sides' borders,
+		the arc of the padding edge is less than 90°.
+		
    
+	
    
+
+	The [=margin edge=], being outside the [=border edge=],
+	calculates its radius by adding the corresponding margin thickness
+	to each border radius.
+	However, in order to create a sharper corner when the border radius is small
+	(and thus ensure continuity between round and sharp corners),
+	when the [=border radius=] is less than the margin,
+	the margin is multiplied by the proportion 1 + (r-1)3,
+	where r is the ratio of the border radius to the margin,
+	in calculating the corner radii of the margin box shape.
+
+
+
    
+Corner Clipping
    
+
+	Although border images
+	are not affected by 'border-radius',
+	other effects that clip painting or event handling
+	to the [=border edge|border=], [=padding edge|padding=], or [=content edge|content=] edge
+	must clip to their respective curves.
+	For example,
+	backgrounds clip to the curve specified by 'background-clip',
+	'overflow' values other than ''visible'' to the curved [=padding edge=]
+	(when 'overflow' on both axes is not ''visible''),
+	[=replaced element=] content to the curved [=content edge=],
+	pointer events to the curved [=border edge=],
+	etc.
+
+	Note: As 'border-radius' reduces the interactive area of an element
+	authors should make sure the remaining interactive area conforms
+	to recommended minima for the platforms they target;
+	in particular, conforming to recommended minimum touch target sizes
+	may require larger widths and heights when 'border-radius' is used.
+
+	
    
+		This example adds appropriate padding,
+		so that the contents do not overflow the corners.
+		Note that there is no border,
+		but the background will still have rounded corners.
+
+		
    +		DIV {
+		    background: black;
+		    color: white;
+		    border-radius: 1em;
+		    padding: 1em }
+		
    
+	
    
+
+
    
+Color and Style Transitions
    
+
+	Color and style transitions must be contained
+	within the segment of the border that intersects
+	the smallest rectangle that contains both border radii
+	as well as the center of the inner curve
+	(which may be a point representing the corner of the padding edge,
+	if the border radii are smaller than the [=border width=]).
+
+	If one of these borders is zero-width,
+	then the other border takes up the entire transitional area.
+	Otherwise,
+	the center of color and style transitions between adjoining borders
+	is a point along the curve that is a continuous monotonic function
+	of the ratio of the border widths.
+	However it is not defined what these transitions look like
+	or what function maps from this ratio to a point on the curve.
+
+	
    
+		Illustration of the transition region on curved corners
+
+		
    
+			Given these corner shapes, color and style transitions
+			must be contained within the green region.
+			In case D the rectangle defined by the border radii
+			does not include the center of the inner curve (which is a sharp corner),
+			so the transition region is expanded to include that corner.
+			Transitions may take up the entire transition region,
+			but are not required to:
+			For example, a gradient color transition between two solid border styles
+			might take up only the region bounded by
+			the tips of the outer radii and the tips of the inner radii
+			(represented in case D by the dark green region).
+		
    
+	
    
+
+
    
+Overlapping Curves
    
+
+	Corner curves must not overlap:
+	When the sum of any two adjacent border radii
+	exceeds the size of the border box,
+	UAs must proportionally reduce
+	the used values of all border radii
+	until none of them overlap.
+	The algorithm for reducing radii is as follows:
+
+	Let f = min(Li/Si),
+	where i ∈ {top, right, bottom, left},
+	Si is the sum of the two corresponding radii
+	of the corners on side i,
+	and Ltop = Lbottom = the width of the box,
+	and Lleft = Lright = the height of the box.
+	If f < 1, then all corner radii are reduced
+	by multiplying them by f.
+
+	Note: This formula ensures that quarter circles remain quarter circles
+	and large radii remain larger than smaller ones,
+	but it may reduce corners that were already small enough,
+	which may make borders of nearby elements that should look the same
+	look different.
+
+	If the curve interferes with UI elements such as scrollbars,
+	the UA may further reduce the used value of the affected border radii
+	(and only the affected border radii)
+	as much as necessary, but no more.
+
+	
    
+		For example, the borders A of the figure below
+		might be the result of
+
+		
    +		box-sizing: border-box;
+		width: 6em;
+		height: 2.5em;
+		border-radius: 0.5em 2em 0.5em 2em
+		
    
+
+		The height (2.5em) is enough for the specified radii (0.5em plus 2.0em).
+		However, if the height is only 2em,
+
+		
    +		box-sizing: border-box;
+		width: 6em;
+		height: 2em;
+		border-radius: 0.5em 2em 0.5em 2em
+		
    
+
+		all corners need to be reduced by a factor 0.8 to make them fit.
+		The used border radii thus are
+		0.4em (instead of 0.5em) and 1.6em (instead of 2em).
+		See borders B in the figure.
+
+		
    
+			[image: rectangle with two tiny rounded corners and two very large ones, on opposite corners]
+
+			
    
+				These rounded corner might be the result of
+				''width: 6em; height: 2.5em; border-radius: 0.5em 2em 0.5em 2em''
+				for A; and ditto but with ''height: 2em'' for B.
+			
    
+		
    
+	
    
+
+
    
+Effect on Tables
    
+
+	The 'border-radius' properties do apply to
+	''display/table'', ''inline-table'', and ''table-cell'' boxes
+	in separated borders mode (''border-collapse: separate'').
+	When 'border-collapse' is ''border-collapse/collapse'', they have no effect.
+
+	
+		ttwf-reftest-borderRadius.html
+	
+
 
    
 Corner Sizing: the 'border-*-*-radius' properties
    
 
-	
    +	
     	Name: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-start-start-radius, border-start-end-radius, border-end-start-radius, border-end-end-radius
 	Value: <>{1,2}
 	Initial: 0
@@ -290,6 +812,41 @@ Corner Sizing: the 'border-*-*-radius' properties
 	Animation Type: by computed value
 	
    
 
+	The two <> values of the 'border-*-radius' properties
+	define the radii of
+	a quarter ellipse that defines the shape of the corner
+	of the outer [=border edge=] (see the diagram below).
+	The first value is the horizontal radius,
+	the second the vertical radius.
+	If the second value is omitted it is copied from the first.
+	If either length is zero, the corner is square, not rounded.
+	Percentages for the horizontal radius refer to the width of the [=border box=],
+	whereas percentages for the vertical radius refer to the height of the [=border box=].
+	Negative values are invalid.
+
+	
    
+		Diagram of the inscribed ellipse
+
+		
    
+			The two values of ''border-top-left-radius: 55pt 25pt''
+			define the curvature of the corner.
+		
    
+	
    
+
+	
    
+		This example draws ovals of 15em wide and 10em high:
+
+		
    +		DIV.standout {
+		    width: 13em;
+		    height: 8em;
+		    border: solid black 1em;
+		    border-radius: 7.5em 5em }
+		
    
+	
    
+
 	The [=flow-relative=] properties
 	'border-start-start-radius',
 	'border-start-end-radius',
@@ -315,7 +872,7 @@ The 'border-top-radius', 'border-right-radius',
 'border-block-start-radius', 'border-block-end-radius',
 'border-inline-start-radius', 'border-inline-end-radius' shorthands
 
-	
    +	
     		Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius,
 			border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius
 		Value: <>{1,2} [ / <>{1,2} ]?
@@ -372,23 +929,112 @@ The 'border-top-radius', 'border-right-radius',
 	tentative/parsing/border-top-radius-invalid.html
 	tentative/parsing/border-top-radius-valid.html
 
+
+	animations/border-bottom-left-radius-composition.html
+	animations/border-bottom-right-radius-composition.html
+	animations/border-radius-interpolation.html
+	animations/border-top-left-radius-composition.html
+	animations/border-top-right-radius-composition.html
+	border-bottom-left-radius-001.xht
+	border-bottom-left-radius-004.xht
+	border-bottom-left-radius-005.xht
+	border-bottom-left-radius-010.xht
+	border-bottom-left-radius-011.xht
+	border-bottom-left-radius-014.xht
+	border-bottom-right-radius-001.xht
+	border-bottom-right-radius-004.xht
+	border-bottom-right-radius-005.xht
+	border-bottom-right-radius-010.xht
+	border-bottom-right-radius-011.xht
+	border-bottom-right-radius-014.xht
+	border-radius-001.xht
+	border-radius-002.xht
+	border-radius-003.xht
+	border-radius-004.xht
+	border-radius-005.xht
+	border-radius-006.xht
+	border-radius-007.xht
+	border-radius-008.xht
+	border-radius-009.xht
+	border-radius-010.xht
+	border-radius-011.xht
+	border-radius-012.html
+	border-radius-013.html
+	border-radius-clip-001.html
+	border-radius-clip-002.htm
+	border-radius-clipping-002.html
+	border-radius-clipping-with-transform-001.html
+	border-radius-css-text.html
+	border-radius-dynamic-from-no-radius.html
+	border-radius-horizontal-value-is-zero.html
+	border-radius-shorthand-002.html
+	border-top-left-radius-001.xht
+	border-top-left-radius-004.xht
+	border-top-left-radius-005.xht
+	border-top-left-radius-010.xht
+	border-top-left-radius-011.xht
+	border-top-left-radius-014.xht
+	border-top-right-radius-001.xht
+	border-top-right-radius-004.xht
+	border-top-right-radius-005.xht
+	border-top-right-radius-010.xht
+	border-top-right-radius-011.xht
+	border-top-right-radius-014.xht
+	box-shadow-border-radius-001.html
+	css-border-radius-001.html
+	inheritance.sub.html
+	inner-border-non-renderable.html
+	parsing/border-radius-computed.html
+	parsing/border-radius-invalid.html
+	parsing/border-radius-valid.html
+	parsing/webkit-border-radius-valid.html
+
 
 
    
 Sizing All Corners At Once:
 The 'border-radius' shorthand
    
 
-	
    +	
     		Name: border-radius
 		Value: <>{1,4} [ / <>{1,4} ]?
-		Initial: 0
-		Applies to: all elements, except table element when 'border-collapse' is ''collapse''
-		Inherited: no
-		Animation type: see individual properties
 	
    
 
-	See [[CSS3BG]].
+	The 'border-radius' shorthand sets all four 'border-*-radius' properties.
+	If values are given before and after the slash,
+	then the values before the slash set the horizontal radii
+	and the values after the slash set the vertical radii.
+	If there is no slash, then the values set the radii in both axes equally.
+	The four values for each radii are given in the order
+	top-left, top-right, bottom-right, bottom-left.
+	If bottom-left is omitted it is the same as top-right.
+	If bottom-right is omitted it is the same as top-left.
+	If top-right is omitted it is the same as top-left.
 
-
    
+	
    
+		
    +		border-radius: 4em;
+		
    
+		is equivalent to
+		
    +		border-top-left-radius:     4em;
+		border-top-right-radius:    4em;
+		border-bottom-right-radius: 4em;
+		border-bottom-left-radius:  4em;
+		
    
+		and
+		
    +		border-radius: 2em 1em 4em / 0.5em 3em;
+		
    
+		is equivalent to
+		
    +		border-top-left-radius:     2em 0.5em;
+		border-top-right-radius:    1em 3em;
+		border-bottom-right-radius: 4em 0.5em;
+		border-bottom-left-radius:  1em 3em;
+		
    
+	
    
+
+
    
 Corner Shaping: the 'corner-*-shape' properties
    
 
 	By default, non-zero 'border-radius' values
@@ -527,7 +1173,7 @@ Corner Shaping: the 'corner-*-shape' properties
 		corner-shape/corner-shape-video-border.html
 	
 
-	
    +	
     		Name: corner-top-left-shape, corner-top-right-shape, corner-bottom-right-shape, corner-bottom-left-shape, corner-start-start-shape, corner-start-end-shape, corner-end-start-shape, corner-end-end-shape
 		Value: <>
 		Initial: round
@@ -551,7 +1197,7 @@ Corner Shaping: the 'corner-*-shape' properties
 	(i.e. patterned as corner-block-inline-shape).
 
 	
    -		<> = ''round'' | ''scoop'' | ''bevel'' | ''notch'' | ''/square'' | ''squircle'' |
+		<> = ''corner-shape/round'' | ''corner-shape/scoop'' | ''corner-shape/bevel'' | ''corner-shape/notch'' | ''corner-shape/square'' | ''corner-shape/squircle'' |
 		                       <>
 		superellipse() = superellipse(<> | infinity | -infinity)
 	
    
@@ -696,7 +1342,7 @@ The 'corner-top-left', 'corner-top-right',
 'corner-start-start', 'corner-start-end',
 'corner-end-start', 'corner-end-end' shorthands
 
-	
    +	
     		Name: corner-top-left, corner-top-right, corner-bottom-left, corner-bottom-right,
 			corner-start-start, corner-start-end, corner-end-start, corner-end-end
 		Value: <<'border-top-left-radius'>> || <<'corner-top-left-shape'>>
@@ -720,7 +1366,7 @@ The 'corner-top', 'corner-right',
 'corner-block-start', 'corner-block-end',
 'corner-inline-start', 'corner-inline-end' shorthands
 
-	
    +	
     		Name: corner-top, corner-right, corner-bottom, corner-left,
 			corner-block-start, corner-block-end, corner-inline-start, corner-inline-end
 		Value: <<'border-top-radius'>> || <<'corner-top-shape'>>
@@ -981,6 +1627,647 @@ To interpolate a [=superellipse parameter=] |s| to an interpolation value betwee
 	corner-shape/corner-shape-interpolation.html
 
 
+
    
+Border Images
    
+
+	Authors can specify an image to be used in place of the border styles.
+	In this case, the border's design is taken from the sides and corners
+	of an image specified with 'border-image-source',
+	whose pieces may be sliced, scaled, and stretched in various ways
+	to fit the size of the [=border image area=].
+	The border-image properties do not affect layout:
+	layout of the box, its content, and surrounding content
+	is based on the 'border-width' and 'border-style' properties only.
+
+	
    
+		This example creates
+		a top and bottom border consisting of a whole number of orange diamonds
+		and a left and right border of a single, stretched diamond.
+		The corners are diamonds of a different color.
+		The image to tile is as follows.
+		Apart from the diamonds, it is transparent:
+
+		Tile for border
+
+		The image is 81 by 81 pixels and has to be divided into 9 equal parts.
+		The style rules could thus be as follows:
+
+		
    +		DIV {
+		  border: double orange 1em;
+		  border-image: url("border.png") 27 round stretch;
+		 }
+		
    
+
+		The result, when applied to a DIV of 12 by 5em,
+		will be similar to this:
+
+		element with a diamond border
+	
    
+
+
    
+	This shows a more complicated example,
+	demonstrating how the border image corresponds to the fallback border-style
+	but can also extend beyond the border area.
+	The border image is a wavy green border with an extended corner effect:
+
+	
    
+		Diagram: The border image shows a wavy green border
+		     with more exaggerated waves towards the corners,
+		     which are capped by a disconnected green circle.
+		     Four cuts at 124px offsets from each side
+		     divide the image into 124px-wide square corners,
+		     124px-wide but thin side slices,
+		     and a small center square.
+
+		
    
+			The 'border-image-source' image,
+			with the four 'border-image-slice' cuts at 124px
+			dividing the image into nine parts.
+		
    
+	
    
+
+	The rest of the border properties then interact
+	to lay out the tiles as follows:
+
+	
    
+		Diagram: The image-less (fallback) rendering
+		          has a green double border.
+		          The rendering with border-image shows the wavy green border,
+		          ith the waves getting longer as they reach the corners.
+		          The corner tiles render as 124px-wide squares
+		          and the side tiles repeat a whole number of times
+		          to fill the space in between.
+		          Because of the gradual corner effects,
+		          the tiles extend deep into the padding area.
+		          The whole border image effect is outset 31px,
+		          so that the troughs of the waves align
+		          just outside the padding edge.
+
+			
    
+				Diagram of all border-image properties and how they interact,
+				and showing the rendering with and without the border-image in effect.
+			
    
+		
    
+
+		Here, even though the 'border-width' is 12px,
+		the 'border-image-width' property computes to 124px.
+		The [=border image area=] is then outset 31px from the [=border box=]
+		and into the [=margin area=].
+		If the border-image fails to load
+		(or if border images are not supported by the UA),
+		the fallback rendering uses a green double border.
+	
    
+
+	
    
+		Notice that the 'border' shorthand resets 'border-image'.
+		This makes it easy to turn off or reset all border effects:
+
+		
    +		.notebox {
+		  border: double orange;
+		  /* must set 'border' shorthand first, otherwise it erases 'border-image' */
+		  border-image: url("border.png") 30 round;
+		  /* but other 'border' properties can be set after */
+		  border-width: thin thick;
+		}
+		...
+		.sidebar .notebox {
+		  box-shadow: 0 0 5px gray;
+		  border-radius: 5px;
+		  border: none; /* turn off all borders */
+		  /* 'border' shorthand resets 'border-image' */
+		}
+		
    
+	
    
+
+
    
+Image Source: the 'border-image-source' property
    
+
+	
    +	Name: border-image-source
+	Value: none | <>
+	Initial: none
+	Applies to: All elements, except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: N/A
+	Computed value: the keyword ''border-image-source/none'' or the computed <>
+	Animation type: discrete
+	
    
+
+	
+		animations/border-image-source-interpolation.html
+		css3-border-image-source.html
+		parsing/border-image-source-computed.sub.html
+		parsing/border-image-source-invalid.html
+		parsing/border-image-source-valid.html
+	
+
+	Specifies an image to use as a border
+	in place of the rendering specified by the 'border-style' properties
+	and, if given the ''fill'' keyword in 'border-image-slice',
+	as an additional image backdrop for the element.
+	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 border image is drawn
+	as described in the sections below.
+
+
    
+Image Slicing: the 'border-image-slice' property
    
+
+	
    +	Name: border-image-slice
+	Value: [<> | <>]{1,4} && fill?
+	Initial: 100%
+	Applies to: All elements, except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: refer to size of the border image
+	Computed value: four values, each either a number or percentage; plus a ''fill'' keyword if specified
+	Animation type: by computed value
+	
    
+
+	
+		animations/border-image-slice-composition.html
+		animations/border-image-slice-interpolation-stability.html
+		animations/border-image-slice-interpolation.html
+		border-image-slice-001.xht
+		border-image-slice-002.xht
+		border-image-slice-003.xht
+		border-image-slice-004.htm
+		border-image-slice-005.htm
+		border-image-slice-006.htm
+		border-image-slice-007.htm
+		border-image-slice-fill-001.html
+		border-image-slice-fill-002.html
+		border-image-slice-fill-003.html
+		border-image-slice-percentage.html
+		border-image-slice-shorthand-reset.html
+		parsing/border-image-slice-computed.html
+		parsing/border-image-slice-invalid.html
+		parsing/border-image-slice-valid.html
+	
+
+	This property specifies inward offsets from
+	the top, right, bottom, and left edges of the image,
+	dividing it into nine regions: four corners, four edges and a middle.
+	The middle image part is discarded (treated as fully transparent)
+	unless the ''fill'' keyword is present.
+	(It is drawn over the background;
+	see Drawing the Border Image.)
+
+	If there is only one component value,
+	it applies to all sides.
+	If there are two values,
+	the top and bottom are set to the first value
+	and the right and left are set to the second.
+	If there are three values,
+	the top is set to the first value,
+	the left and right are set to the second,
+	and the bottom is set to the third.
+	If there are four values
+	they apply to the top, right, bottom, and left, respectively.
+
+	
    
+		
    <>
+		
    
+			Percentages are relative to the size of the image:
+			the width of the image for the horizontal offsets,
+			the height for vertical offsets.
+
+		
    <>
+		
    
+			Numbers represent pixels in the image
+			(if the image is a raster image)
+			or vector coordinates
+			(if the image is a vector image).
+
+		
    fill
+		
    
+			The ''fill'' keyword, if present,
+			causes the middle part of the border-image to be preserved.
+			(By default it is discarded, i.e., treated as empty.)
+	
    
+
+	Negative values are invalid.
+	Computed values larger than the size of the image are interpreted as ''100%''.
+
+	The regions given by the 'border-image-slice' values may overlap.
+	However if the sum of the right and left widths
+	is equal to or greater than the width of the image,
+	the images for the top and bottom edge and the middle part are empty--
+	which has the same effect as if a nonempty transparent image
+	had been specified for those parts.
+	Analogously for the top and bottom values.
+
+	If the image must be sized to determine the slices
+	(for example, for SVG images with no [=natural dimensions=]),
+	then it is sized using the default sizing algorithm
+	with no [=specified size=] and the [=border image area=] as the [=default object size=].
+
+	
    
+		Diagram: two horizontal cuts and two vertical cuts through an image
+
+		
    
+			Diagram illustrating the cuts corresponding to the value ''25% 30% 12% 20%''
+		
    
+	
    
+
+
    
+Drawing Areas: the 'border-image-width' property
    
+
+	
    +	Name: border-image-width
+	Value: [ <> | <> | auto ]{1,4}
+	Initial: 1
+	Applies to: All elements,
+		except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: Relative to width/height of the [=border image area=]
+	Computed value: four values,
+		each either a number,
+		the keyword ''border-image-width/auto'',
+		or a computed <> value
+	Animation type: by computed value
+	
    
+
+	
+		border-image-width-001.htm
+		border-image-width-005.xht
+		border-image-width-006.xht
+		border-image-width-007.xht
+		border-image-width-008.html
+		border-image-width-009.html
+		border-image-width-should-extend-to-padding.html
+		parsing/border-image-width-computed.html
+		parsing/border-image-width-invalid.html
+		parsing/border-image-width-valid.html
+	
+
+	The [=border image=] is drawn inside an area called the border image area.
+	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
+	regions.
+	The offsets represent inward distances from
+	the top, right, bottom, and left sides of the area, respectively.
+
+	If there is only one component value,
+	it applies to all sides.
+	If there are two values,
+	the top and bottom are set to the first value
+	and the right and left are set to the second.
+	If there are three values,
+	the top is set to the first value,
+	the left and right are set to the second,
+	and the bottom is set to the third.
+	If there are four values
+	they apply to the top, right, bottom, and left, respectively.
+
+	Values have the following meanings:
+
+	
    
+		
    <>
+		
    
+			Percentages refer to the size of the [=border image area=]:
+			the width of the area for horizontal offsets,
+			the height for vertical offsets.
+
+		
    <>
+		
    
+			Numbers represent multiples of the corresponding computed
+			border-width.
+
+		
    auto
+		
    
+			If ''border-image-width/auto'' is specified
+			then the used 'border-image-width' is
+			the [=natural size|natural=] width or height (whichever is applicable)
+			of the corresponding image slice (see 'border-image-slice').
+			If the image does not have the required [=natural dimension=]
+			then the corresponding computed 'border-width' is used instead.
+	
    
+
+	Negative values are invalid for any 'border-image-width' values.
+
+	If two opposite 'border-image-width' offsets are large enough that they overlap,
+	then the [=used values=] of all 'border-image-width' offsets
+	are proportionally reduced until they no longer overlap.
+	In mathematical notation:
+	Given Lwidth
+	as the width of the [=border image area=],
+	Lheight
+	as its height,
+	and Wside
+	as the 'border-image-width' offset for the side side,
+	let f = min(Lwidth/(Wleft+Wright),
+	Lheight/(Wtop+Wbottom)).
+	If f < 1,
+	then all W are reduced by multiplying them by f.
+
+
    
+Edge Overhang: the 'border-image-outset' property
    
+
+	
    +	Name: border-image-outset
+	Value: [ <> | <> ]{1,4}
+	Initial: 0
+	Applies to: All elements, except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: N/A
+	Computed value: four values, each a number or absolute length
+	Animation type: by computed value
+	
    
+
+	
+		animations/border-image-outset-composition.html
+		animations/border-image-outset-interpolation.html
+		border-image-outset-003.html
+		parsing/border-image-outset-computed.html
+		parsing/border-image-outset-invalid.html
+		parsing/border-image-outset-valid.html
+	
+
+	The values specify the amount by which the [=border image area=]
+	extends beyond the [=border box=].
+
+	If there is only one component value,
+	it applies to all sides.
+	If there are two values,
+	the top and bottom are set to the first value
+	and the right and left are set to the second.
+	If there are three values,
+	the top is set to the first value,
+	the left and right are set to the second,
+	and the bottom is set to the third.
+	If there are four values
+	they apply to the top, right, bottom, and left, respectively.
+
+	
    
+		
    <>
+		
    
+			Represents an outset of the specified length.
+
+		
    <>
+		
    
+			Represents an outset of the specified multiple of
+			the corresponding computed border-width.
+	
    
+
+	Negative values are invalid.
+
+	Portions of the border-image that are rendered outside the [=border box=]
+	are [=ink overflow=] and
+	do not trigger scrolling.
+	Also such portions are invisible to mouse events
+	and do not capture such events on behalf of the element.
+
+	Note: Even though they never cause a scrolling mechanism,
+	outset images may still be clipped by an ancestor or by the viewport.
+
+
    
+Image Tiling: the 'border-image-repeat' property
    
+
+	
    +	Name: border-image-repeat
+	Value: [ stretch | repeat | round | space ]{1,2}
+	Initial: stretch
+	Applies to: All elements, except internal table elements when 'border-collapse' is ''border-collapse/collapse''
+	Inherited: no
+	Percentages: N/A
+	Computed value: two keywords, one per axis
+	Animation type: discrete
+	
    
+
+	
+		animations/discrete-no-interpolation.html
+		border-image-repeat-002.htm
+		border-image-repeat-004.htm
+		border-image-repeat-005.html
+		border-image-repeat-1.html
+		border-image-repeat-repeat-001.html
+		border-image-repeat-round-003.html
+		border-image-repeat-round-1.html
+		border-image-repeat-round-2.html
+		border-image-repeat-round-stretch-001.html
+		border-image-repeat-round.html
+		border-image-repeat-space-011.html
+		border-image-repeat-space-1.html
+		border-image-repeat-space-10.html
+		border-image-repeat-space-2.html
+		border-image-repeat-space-3.html
+		border-image-repeat-space-4-ref-1.html
+		border-image-repeat-space-4.html
+		border-image-repeat-space-5-ref-1.html
+		border-image-repeat-space-5.html
+		border-image-repeat-space-6.html
+		border-image-repeat-space-7.html
+		border-image-repeat-space-8.html
+		border-image-repeat-space-9.html
+		border-image-repeat-stretch-round-001.html
+		border-image-repeat_repeatnegx_none_50px.html
+		css3-border-image-repeat-repeat.html
+		css3-border-image-repeat-stretch.html
+		parsing/border-image-repeat-computed.html
+		parsing/border-image-repeat-invalid.html
+		parsing/border-image-repeat-valid.html
+	
+
+	This property specifies how the images for the sides
+	and the middle part of the [=border image=]
+	are scaled and tiled.
+	The first keyword applies to the horizontal scaling and tiling
+	of the top, middle and bottom parts,
+	the second to the vertical scaling and tiling
+	of the left, middle and right parts;
+	see Drawing the Border Image.
+	If the second keyword is absent, it is assumed to be the same as the first.
+	Values have the following meanings:
+
+	
    
+		
    stretch
    
+		
    
+			The image is stretched to fill its corresponding [=region=].
+		
    repeat
    
+		
    
+			The image is tiled (repeated) to fill its corresponding [=region=].
+		
    round
    
+		
    
+			The image is tiled (repeated) to fill its corresponding [=region=].
+			If it does not fill the area with a whole number of tiles,
+			the image is rescaled so that it does.
+		
    space
    
+		
    
+			The image is tiled (repeated) to fill its corresponding [=region=].
+			If it does not fill the region with a whole number of tiles,
+			the extra space is distributed around the tiles.
+	
    
+
+	The exact process for scaling and tiling the border-image parts
+	is given in the section below.
+
+
    
+Drawing the Border Image
    
+
+	After the [=border image=] given by 'border-image-source'
+	is sliced by the 'border-image-slice' values,
+	the resulting nine images are scaled, positioned, and tiled
+	into their corresponding [=border image regions=] in four steps:
+
+	
      
+	
    1. Scale to 'border-image-width'.
+		
        
+		
      • The two images for the top and bottom edges are made as tall
+			as the top and bottom [=border image regions=], respectively,
+			and their width is scaled proportionally.
+
+		
      • The images for the left and right edges are made as wide
+			as the left and right [=border image regions=], respectively,
+			and their height is scaled proportionally.
+
+		
      • The corner images are scaled to be as wide and as tall
+			as the their respective [=border image regions=].
+
+		
      • The middle image's width is scaled by the same factor as the top image
+			unless that factor is zero or infinity,
+			in which case the scaling factor of the bottom is substituted,
+			and failing that, the width is not scaled.
+			The height of the middle image is scaled by the same factor as the left image
+			unless that factor is zero or infinity,
+			in which case the scaling factor of the right image is substituted,
+			and failing that, the height is not scaled.
+		
      
+
+	
    2. Scale to 'border-image-repeat'.
+		
        
+		
      • If the first keyword is ''border-image-repeat/stretch'',
+			the top, middle and bottom images are further scaled
+			to be as wide as the middle region of the [=border image area=].
+			The height is not changed any further.
+
+		
      • If the first keyword is ''border-image-repeat/round'',
+			the top, middle and bottom images are resized in width,
+			so that exactly a whole number of them fit
+			in the middle region of the [=border image area=],
+			exactly as for ''background-repeat/round'' in the 'background-repeat' property.
+
+		
      • If the first keyword is ''border-image-repeat/repeat'' or ''border-image-repeat/space'',
+			the top, middle, and bottom images are not changed any further.
+
+		
      • The effects of ''border-image-repeat/stretch'', ''border-image-repeat/round'', ''border-image-repeat/repeat'', and ''border-image-repeat/space''
+			for the second keyword are analogous,
+			acting on the height of the left, middle and right images.
+		
      
+
+	
    3. Position the first tile.
+		
        
+		
      • If the first keyword is ''border-image-repeat/repeat'',
+			the top, middle, and bottom images
+			are centered horizontally in their respective regions.
+			Otherwise the images are placed at the left edge
+			of their respective regions of the [=border image area=].
+
+		
      • If the second keyword is ''border-image-repeat/repeat'',
+			the left, middle, and right images
+			are centered vertically in their respective regions.
+			Otherwise the images are placed at the top edge
+			of their respective regions of the [=border image area=].
+		
      
+
+	
    4. Tile and draw.
+		
        
+		
      • The images are then tiled to fill their respective regions.
+
+		
      • In the case of ''border-image-repeat/space'',
+			any partial tiles are discarded and the extra space distributed
+			before, after, and between the tiles.
+			(I.e. the gap before the first tile,
+			the gap after the last tile,
+			and the gaps between tiles are equalized.)
+			This can result in empty border-image side regions.
+
+		
      • The images are drawn at the same stacking level as normal borders:
+			immediately in front of the background layers.
+
+		
      • The middle image is not drawn
+			unless ''fill'' was specified for 'border-image-source'.
+		
      
+	
    
+
+
    
+Border Image Shorthand: the 'border-image' property
    
+
+	
    +	Name: border-image
+	Value: <<'border-image-source'>> || <<'border-image-slice'>> [ / <<'border-image-width'>> | / <<'border-image-width'>>? / <<'border-image-outset'>> ]? || <<'border-image-repeat'>>
+	Initial: See individual properties
+	Applies to: See individual properties
+	Inherited: no
+	Percentages: N/A
+	Computed value: See individual properties
+	Animation Type: See individual properties
+	
    
+
+	
+		border-image-002.html
+		border-image-003.html
+		border-image-004.html
+		border-image-006.html
+		border-image-007.html
+		border-image-011.html
+		border-image-012.html
+		border-image-013.html
+		border-image-017.xht
+		border-image-018.xht
+		border-image-019.xht
+		border-image-020.xht
+		border-image-calc.html
+		border-image-image-type-001.htm
+		border-image-image-type-002.htm
+		border-image-image-type-003.htm
+		border-image-image-type-004.htm
+		border-image-image-type-005.htm
+		border-image-round-and-stretch.html
+		border-image-shorthand-001.htm
+		border-image-shorthand-002.htm
+		border-image-shorthand-003.htm
+		border-image-space-001.html
+		parsing/border-image-invalid.html
+		parsing/border-image-shorthand.sub.html
+		parsing/border-image-valid.html
+	
+
+	This is a shorthand property for setting
+	'border-image-source',
+	'border-image-slice',
+	'border-image-width',
+	'border-image-outset',
+	and 'border-image-repeat'
+	in a single declaration.
+	Omitted values are set to their [=initial values=].
+
+
    Effect on Tables
    
+
+	The 'border-image' properties apply
+	to the border of tables and inline tables
+	that have 'border-collapse' set to ''border-collapse/collapse''.
+	However, this specification does not define
+	how such an image border is rendered.
+	In particular, it does not define how the image border interacts
+	with the borders of cells, rows and row groups at the edges of the table
+	(see border conflict resolution in [[!CSS2]]).
+
+	It is expected that a future specification will define the rendering.
+	It is recommended that UAs do not apply border images
+	to tables with collapsed borders until then.
+
 
    
 Partial borders
    
 
@@ -1325,7 +2612,7 @@ The 'border-clip' properties
 	tentative/parsing/border-clip-valid.html
 
 
-
    
+
    
 Drop Shadows
    
 
 
    
@@ -1545,6 +2832,173 @@ Drop Shadows Shorthand: the 'box-shadow' property
    
 	
     	<> = <<'box-shadow-color'>>? && [ <<'box-shadow-offset'>> [ <<'box-shadow-blur'>> <<'box-shadow-spread'>>? ]? ] && <<'box-shadow-position'>>?
    
 
+
    
+Shadow Shape, Spread, and Knockout
    
+
+	An [=outer box-shadow=] casts a shadow
+	as if the border-box of the element were opaque.
+	Assuming a spread distance of zero, its perimeter has
+	the exact same size and shape as the border box.
+	The shadow is drawn outside the border edge only:
+	it is clipped inside the border-box of the element.
+
+	An [=inner box-shadow=] casts a shadow
+	as if everything outside the padding edge were opaque.
+	Assuming a spread distance of zero, its perimeter has
+	the exact same size and shape as the padding box.
+	The shadow is drawn inside the padding edge only:
+	it is clipped outside the padding box of the element.
+
+	If a [=spread distance=] is defined,
+	the shadow perimeter defined above
+	is expanded outward (for [=outer box-shadows=])
+	or contracted inward (for [=inner box-shadows=])
+	by outsetting (insetting, for inner shadows)
+	the shadow's straight edges by the [=spread distance=]
+	(and flooring the resulting width/height at zero).
+
+	
    
+		Below are some examples of an orange box with a blue border
+		being given a drop shadow.
+
+		
+			
+				
+				
+				
+				
+				
    
+					
    
+					border:5px solid blue;
+					background-color:orange;
+					width: 144px;
+					height: 144px;
+					
    
+				    		
+					
    border-radius: 20px;
    
+				    		
+					
    border-radius: 0;
    
+			
    
+					
    
+					box-shadow:
+					  rgba(0,0,0,0.4)
+					  10px 10px;
+					
    
+				    		
+					A round-cornered box with a light gray shadow the same shape
+					          as the border box offset 10px to the right and 10px down
+					          from directly underneath the box.
+				
+					A square-cornered box with a light gray shadow the same shape
+					          as the border box offset 10px to the right and 10px down
+					          from directly underneath the box.
+			
    
+					
    
+					box-shadow:
+					  rgba(0,0,0,0.4)
+					  10px 10px
+					  inset
+					
    
+				    		
+					A round-cornered box with a light gray shadow the inverse shape
+					          of the padding box filling 10px in from the top and left edges
+					          (just inside the border).
+				
+					A square-cornered box with a light gray shadow the inverse shape
+					          of the padding box filling 10px in from the top and left edges
+					          (just inside the border).
+			
    
+					
    
+					box-shadow:
+					  rgba(0,0,0,0.4)
+					  10px 10px 0
+					  10px /* spread */
+					
    
+				    		
+					A round-cornered box with a light gray shadow the same shape
+					          as the box but 20px taller and wider and offset so that the
+					          top and left edges of the shadow are directly underneath the
+					          top and left edges of the box.
+				
+					A square-cornered box with a light gray shadow the same shape
+					          as the box but 20px taller and wider and offset so that the
+					          top and left edges of the shadow are directly underneath the
+					          top and left edges of the box.
+			
    
+					
    
+					box-shadow:
+					  rgba(0,0,0,0.4)
+					  10px 10px 0
+					  10px /* spread */
+					  inset
+					
    
+				    		
+					A round-cornered box with a light gray shadow the inverse shape
+					          of the box but 20px narrower and shorter filling 20px in from
+					          the top and left edges (just inside the border).
+				
+					A round-cornered box with a light gray shadow the inverse shape
+					          of the box but 20px narrower and shorter filling 20px in from
+					          the top and left edges (just inside the border).
+		
    
+	
    
+
+	To preserve the box's shape when spread is applied,
+	the corner radii of the shadow are also increased (decreased, for inner shadows)
+	from the border-box (padding-box) radii by adding (subtracting)
+	the [=spread distance=] (and flooring at zero).
+	However, in order to create a sharper corner when the border radius is small
+	(and thus ensure continuity between round and sharp corners),
+	when the [=border radius=] is less than the [=spread distance=]
+	(or in the case of an inner shadow,
+	less than the absolute value of a negative [=spread distance=]),
+	the [=spread distance=]
+	is first multiplied by the proportion 1 + (r-1)3,
+	where r is the ratio of the border radius to the [=spread distance=],
+	in calculating the corner radii of the spread shadow shape.
+	For example, if the border radius is 10px and the [=spread distance=] is 20px (r = .5),
+	the corner radius of the shadow shape will be 10px + 20px × (1 + (.5 - 1)3) = 27.5px
+	rather than 30px.
+	This adjustment is applied independently to the radii in each dimension.
+
+	The 'border-image' does not affect the shape of the box-shadow.
+
+
    
+Blurring Shadow Edges
    
+
+	A non-zero [=blur radius=] indicates
+	that the resulting shadow should be blurred,
+	such as by a Gaussian filter.
+	The exact algorithm is not defined;
+	however the resulting shadow must approximate
+	(with each pixel being within 5% of its expected value)
+	the image that would be generated by applying to the shadow
+	a Gaussian blur with a standard deviation equal to half the blur radius.
+
+	Note: This means for a long, straight shadow edge,
+	the blur radius will create a visibly apparent color transition
+	approximately the twice length of the blur radius
+	that is perpendicular to and centered on the shadow's edge,
+	and that ranges
+	from almost the full shadow color at the endpoint inside the shadow
+	to almost fully transparent at the endpoint outside it.
+
 
    
 Layering, Layout, and Other Details
    
 
@@ -1554,7 +3008,7 @@ Layering, Layout, and Other Details
 	with 'box-shadow-offset' as the [=coordinating list base property=].
 	See [[css-values-4#linked-properties]].
 
-	
    The shadow effects are applied front-to-back:
+	The shadow effects are applied front-to-back:
 	the first shadow is on top and the others are layered behind.
 	Shadows do not influence layout and may overlap (or be overlapped by)
 	other boxes and text or their shadows.
@@ -1563,13 +3017,13 @@ Layering, Layout, and Other Details
 	and the inner shadows of an element are drawn immediately above the background of that element
 	(below the borders and border image, if any).
 
-	
    Unless otherwise specified, drop shadows are only applied to the [=principal box=].
+	Unless otherwise specified, drop shadows are only applied to the [=principal box=].
 	If the affected box has multiple fragments,
 	the shadows are applied as specified in 'box-decoration-break'.
 
-	
    Shadows do not trigger scrolling or increase the size of the scrollable area.
+	Shadows do not trigger scrolling or increase the size of the scrollable area.
 
-	
    Outer shadows have no effect on internal table elements in the collapsing border model.
+	Outer shadows have no effect on internal table elements in the collapsing border model.
 	If a shadow is defined for single border edge in the collapsing border model
 	that has multiple border thicknesses
 	(e.g. an outer shadow on a table where one row has thicker borders than the others,
@@ -1579,11 +3033,11 @@ Layering, Layout, and Other Details
 
    
 Border Shaping
    
 
-While 'corner-shape' and 'border-radius' allow some expressiveness to styling a border,
-they still work with the assumption that the border is rectangular.
+	While 'corner-shape' and 'border-radius' allow some expressiveness to styling a border,
+	they still work with the assumption that the border is rectangular.
 
-The 'border-shape' function augments these capabilities,
-by enabling the author to use any [=basic shape=] to specify the path of the border.
+	The 'border-shape' function augments these capabilities,
+	by enabling the author to use any [=basic shape=] to specify the path of the border.
 
 
    
 The 'border-shape' property
    
@@ -1657,8 +3111,10 @@ Changes since the 
 Additions since [[CSS3BG]]
@@ -1674,7 +3130,7 @@ Additions since [[CSS3BG]]
 
    
 Acknowledgments
    
 
-	
    In addition to the many contributors to the [[CSS1]], [[CSS21]],
+	
    In addition to the many contributors to the [[CSS1]], [[CSS2]],
 	and [[CSS3BG]] predecessors to this module,
 	the editors would like to thank
 	Tab Atkins,
diff --git a/css-borders-4/images/partial-curve.png b/css-borders-4/images/partial-curve.png
new file mode 100644
index 0000000000000000000000000000000000000000..6ee25d544fbee93559c39c4cc205bf4f8f4a9dcf
GIT binary patch
literal 3248
zcmV;h3{UfkP)T`!EghVz7Hey
zpk@|MnChHpzitnKsHVYo2Gea&@g)qDf|`(=Fb!_4uukir*n`2b1nSnnSSzRr*2!YA
z;HHWW755~c1i6nva{_orK@C4AjMM4p%zlg}75CtFd)+HMH`J;V#^bW~8Xuugg-_(p
zU|$SPF)&k9Crn|EX(;nNcZu4_&QAKP6u9eVfQJwyi{2X%pv5YAyd=id^;x}QW
z5mcwpk3XnASyy6Js5-4rxhHiZ{!|vJ{@MzhE1=T^suP#$yhMM*_6$<6EIYxWG9TrO^!bvW}1p?
za$8fC?8F^^7`fvQrk})PvBnJq6zha3^<<1CUBoyQKAuNlutK>`)5jl&Nr1|59ke7V
z)(KPR(MiCG+hEoFtXL;Zlk0n_P+=wLpHik19)Gmk-VKNr_x^mZ5hgPD*E7q<~eg+$D#BX?x7V&4`E3)wpreDh7$<(HFRfti9+
zcg}MZThi0fDX8=n
zfcXx#sN#>rH(r)b9<6rh#1pw+hY-^1fvhXoI=S}_%h0KD(W0`~UJKocONS9ME@Xu&
z^HT7Q%gf1V^zXQ%Jt1MXPF$MfaO7cu%6bn3yz+5!>U0zP?rWM3%sM#cIF~a)<#|*-
zPSuY;Ui0Xq!8`GIv7+}CpQ`w6nK+S`$rTwHb|=h4HxsMDnx7@_M5ZO*PCJn)N)RV5
zwOZVPihBy&S0HUCvdn9mH_!C1fDjp}7kS~Hcr4DE(sdd>?zr4ve-+$`OWDU_c7wM0
zQgyPXr;{3jbgy)rF#W|4cc^GoRo_d}Y27EEbX{=;{u(tWuEtF{m7$4>eW#v_FE0H2
zbJ|Ya1}p0d(T?i9!%}iG|Np=VyI1N?n1B~23{j|@%cbO$_rni^C!J*4C_pp$B7G9A
zRx25&);sPfeeE@IoiOE}(?7(*{ak;s6r2o(z;@f&<+$^FM4
z;|CmI+EhT4bXoCM9m-VeUSZv-e$}e#M;~R!2{Twuxwplac&M6bC-3gNyL39HoG^_#
zNI04*m18jke2h9dqNBO)l{F_!^-mDJ58XEXS4N#GpLwQf!2_MEsHkm?Fhe;Ewd
zvgkB+@WI%96AhaIhDNqcGp!`nKmC_
zBx9}MSW1lw|5*@V$Z7D@QwzWNf_*2<-lpDnYI{UE&avxTBV}bnQ-d7`s&ixUze5>rtBk1PDv-gK#9ms__IwK
zjXg0@dQMYAU|&Rus`xFDoyeYv>s}@2#1*xaPU}<8#BHyLPR;Y?k&nJg)Cp7hEu~kg
z>|^nqj7D=f{W`+gcu85hG?yEsm+hzPEGm97(}FCWq`pg~pjtvF7#4?Wbh
zaG{AufbrC7X)M#TuZF1s5u7IX+RO9nuQG7LPR8SD82sRzTL3f;*XR
z0sjC~D6QM(C#8QIi;;7;7_
zQntiISvq0d_X++=HN^<-l>hCw<>FrLQ*
zKa?767SPFTFa);Q2D?{zJ9XJ1?l6J7iPZu+<*Z)Kb+7Vv!sI_EtdnDjfKCldmXHgk
z@YiJTG~O;~Ig5Yu$$nv+j7HxsyLf*4O$kmI&m+RVQk7o|;^d5q!tT{zP>NGaqOeZp
zI|Om6dg6)BYp%gxQ;3s)QqU3|H`G1u@H<85Q}!{<8K{x5+~4zt7Ngttp^
z-KzqfCVC+4TmhX*KMb4Gy3ao2x>p4{VG3Us(8)R{Y);*mUP>0_%600rK;%wBIVBto
zlf7YZGG}FhMng8aigm&WdMRyNW*D6Ee)@^jMcBP6FJww4tEc`m&ZzqE-BH5=p`1$I
z3xiY3U3WDuUaTY?{B&aZOD_!{d+gL+d(}Spp!=`COa_D9W*)E#^KneeU9)xKZkO_C
zwX(M{>-G8Heb;*1ZREeV=fVq%KK#&{lCt5SV>Wj>KM225{1GtGH7h6gpMP@QtL#TM
z|MuIHt4heXzmfUaw8b>Ke}TWZ4>MJ3>a3jV?z^w!+H2*8V>G%WB5EFaWbDvG$(8t(
zPe1KkyO#XUpuWRC5U~S=ACThdgtto-eD#$)bjYYcUKjGxcz4~E+`CC$qfmG5m?Br2
zFXgPTIXPE^?&OGx!R|FPQ_?(Snjw=7xnP(K;AHwClaNKPH-#e}hhb8GL%6;SHgu;&Y`gDH
zR@LP%zf4xxg1@g8bFV!d#nNz1C{DKIWb9s(lB6`UX*6WjLoV^bySeEF*XwPrFK6r2
zt`EhjZMb4Tv_;YjOrOy55tUjAw{ZlATh8av+#ie+4;v|SC-@VN4biFa#h{(Y8V@uY+*Pm<@}iJCMaaZM
zzV?uuSeCu~GG4&VWC~oFQ)!om<|3>kAabGfJa%tRB{}~(d>CaJEdO`
zv=f<)$wyyJqQqbzGYy$<$gswvEMPPaQrcP`56&rOfAEg*cfvu2YzaN9SDPrt@~;|{
zd_gjgvVig6dcDi>PH?*`jStd*{S?9zD};l
zNUnPg`^ZM2EMPf#&g{v|>-gQM$is;YN96x$xN6X`!w#cX7O)?u-85=k!sE&U9!_K_
zjCT%%x}+vE4Y@~*RMb;@>_N^L>6ZoUF9Q2)FKpJy^9U~|vdQPV*N|(_-t*6&{$zog
z&6c+9&QCY(SlB<3_eHmIZ1GT^Zigf8BbTdCAO9WM1LA
z*9{MNPCZrnWdYNr?RfU|hoV!@nAxfK!V4RgE?r-Pk_8)<1?rNTN@+W2c^I7%j+xmB
zG#ZaqOSU^?X-*~{*WZ6rYpK;(t(I={GZ1s&%ueLH>&VW@F5bkWuGgELU(evgO4O)M
i>_>G{oz$pKYW@ct1QjtU+v$w}0000
Date: Sun, 12 Oct 2025 02:35:29 +0200
Subject: [PATCH 06/14] [many][editorial] Updated affiliation of L. David Baron

---
 css-color-4/Overview.bs       | 2 +-
 css-conditional-3/Overview.bs | 2 +-
 css-conditional-5/Overview.bs | 2 +-
 css-flexbox-1/Overview.bs     | 2 +-
 css-overflow-3/Overview.bs    | 2 +-
 css-overflow-4/Overview.bs    | 2 +-
 css-size-adjust-1/Overview.bs | 2 +-
 css-tables-3/Overview.bs      | 2 +-
 css-transitions-1/Overview.bs | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/css-color-4/Overview.bs b/css-color-4/Overview.bs
index bb67f201afb..725dcc7ade7 100644
--- a/css-color-4/Overview.bs
+++ b/css-color-4/Overview.bs
@@ -13,7 +13,7 @@ Implementation Report: https://wpt.fyi/results/css/css-color
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact, w3cid 42199
 Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
 Editor: Lea Verou, Invited Expert, http://lea.verou.me/, w3cid 52258
-Former Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Former Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Abstract: This specification describes CSS <> values, and properties for foreground color and group opacity.
 Repository: w3c/csswg-drafts
 Ignored Terms: double, octet
diff --git a/css-conditional-3/Overview.bs b/css-conditional-3/Overview.bs
index 7b93410838f..fb6390c278e 100644
--- a/css-conditional-3/Overview.bs
+++ b/css-conditional-3/Overview.bs
@@ -16,7 +16,7 @@ Previous Version: https://www.w3.org/TR/2022/CR-css-conditional-3-20220113/
 Previous Version: https://www.w3.org/TR/2021/CRD-css-conditional-3-20211223/
 Previous Version: https://www.w3.org/TR/2020/CR-css-conditional-3-20201208/
 Previous Version: https://www.w3.org/TR/2013/CR-css3-conditional-20130404/
-Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
 Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
 Abstract: This module contains the features of CSS for conditional processing of parts of
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index a6faa6ff2df..228199b5cd8 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -9,7 +9,7 @@ Prepare for TR: no
 Work Status: Exploring
 ED: https://drafts.csswg.org/css-conditional-5/
 TR: https://www.w3.org/TR/css-conditional-5/
-Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
 Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
 Editor: Miriam E. Suzanne, Invited Expert, https://www.miriamsuzanne.com/who/, w3cid 117151
diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs
index fe0f107c132..025913ff88f 100644
--- a/css-flexbox-1/Overview.bs
+++ b/css-flexbox-1/Overview.bs
@@ -14,7 +14,7 @@ Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
 Editor: Rossen Atanassov, Microsoft, ratan@microsoft.com, w3cid 49885
 Former Editor: Alex Mogilevsky, Microsoft Corporation, alexmog@microsoft.com
-Former Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Former Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Former Editor: Neil Deakin, Mozilla Corporation, enndeakin@gmail.com
 Former Editor: Ian Hickson, formerly of Opera Software, ian@hixie.ch
 Former Editor: David Hyatt, formerly of Netscape Corporation, hyatt@apple.com
diff --git a/css-overflow-3/Overview.bs b/css-overflow-3/Overview.bs
index 3f9dafb3cf2..02e31869d1d 100644
--- a/css-overflow-3/Overview.bs
+++ b/css-overflow-3/Overview.bs
@@ -8,7 +8,7 @@ Group: csswg
 Level: 3
 TR: https://www.w3.org/TR/css-overflow-3/
 Previous version: https://www.w3.org/TR/2021/WD-css-overflow-3-20211223/
-Former Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Former Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
 Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/, w3cid 43241
 Abstract: This module contains the features of CSS relating to scrollable overflow handling in visual media.
diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs
index 7e4d0d27a5d..e10c4d95360 100644
--- a/css-overflow-4/Overview.bs
+++ b/css-overflow-4/Overview.bs
@@ -7,7 +7,7 @@ Shortname: css-overflow
 Group: csswg
 Level: 4
 TR: https://www.w3.org/TR/css-overflow-4/
-Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/, w3cid 43241
 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
 Abstract: This module contains the features of CSS relating to scrollable overflow handling in visual media.
diff --git a/css-size-adjust-1/Overview.bs b/css-size-adjust-1/Overview.bs
index 03c0bebc7bd..04f60ea1b5c 100644
--- a/css-size-adjust-1/Overview.bs
+++ b/css-size-adjust-1/Overview.bs
@@ -7,7 +7,7 @@ Group: csswg
 Level: 1
 TR: https://www.w3.org/TR/css-size-adjust/
 ED: https://drafts.csswg.org/css-size-adjust/
-Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Editor: Tantek Çelik, Mozilla https://www.mozilla.org/, http://tantek.com/, w3cid 1464
 Abstract: This module contains features of CSS relating to one possible mechanism for adapting pages designed for desktop computer displays for display on smaller screens such as those of mobile phones.  This mechanism involves displaying a scaled down display of the Web page and allowing the user to pan and zoom within that display, but within that scaled down display making certain text and similar elements larger than specified by the page author in order to ensure that when a block of wrapped text is zoomed to the width of the device (so it can be read without side-to-side scrolling for each line), the text is large enough to be readable.
 Status Text: 
    The following features are at risk:
     
       
    • the reference to [[!CSS-TEXT-4]]'s 'text-wrap' property
      •  
    
diff --git a/css-tables-3/Overview.bs b/css-tables-3/Overview.bs
index d8c173b2734..9bb9ed07cf5 100644
--- a/css-tables-3/Overview.bs
+++ b/css-tables-3/Overview.bs
@@ -14,7 +14,7 @@ Warning: not ready
 Editor: François Remy, Invited Expert, w3cid 53348
 Editor: Greg Whitworth, Microsoft, w3cid 69511
 Former editor: Bert Bos, W3C
-Former editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Former Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Former editor: Markus Mielke, Microsoft
 Former editor: Saloni Mira Rai, Microsoft
 Abstract: This CSS module defines a two-dimensional grid-based layout system, optimized for tabular data rendering. In the table layout model, each display node is assigned to an intersection between a set of consecutive rows and a set of consecutive columns, themselves generated from the table structure and sized according to their content.
diff --git a/css-transitions-1/Overview.bs b/css-transitions-1/Overview.bs
index 982a3c9ce15..9a24d4fd45e 100644
--- a/css-transitions-1/Overview.bs
+++ b/css-transitions-1/Overview.bs
@@ -10,7 +10,7 @@ Previous version: https://www.w3.org/TR/2018/WD-css-transitions-1-20181011/
 Previous version: https://www.w3.org/TR/2017/WD-css-transitions-1-20171130/
 Previous version: https://www.w3.org/TR/2013/WD-css3-transitions-20131119/
 ED: https://drafts.csswg.org/css-transitions/
-Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393
+Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3cid 15393
 Editor: Dean Jackson, Apple Inc https://www.apple.com/, dino@apple.com, w3cid 42080
 Editor: Brian Birtles, Mozilla https://www.mozilla.org/, bbirtles@mozilla.com, w3cid 43194
 Former Editor: David Hyatt, Apple Inc https://www.apple.com/, hyatt@apple.com, w3cid 34140

From 281b5f3f5f26c9f6e192d907f6eebeb4caad727c Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Tue, 14 Oct 2025 14:11:26 -0400
Subject: [PATCH 07/14] [css-flexbox-1][editorial] Required link to imp report
 was missing

---
 css-flexbox-1/Overview.bs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs
index 025913ff88f..6a1addb0380 100644
--- a/css-flexbox-1/Overview.bs
+++ b/css-flexbox-1/Overview.bs
@@ -9,6 +9,7 @@ Work Status: Testing
 Group: csswg
 ED: https://drafts.csswg.org/css-flexbox/
 TR: https://www.w3.org/TR/css-flexbox-1/
+Implementation Report: https://wpt.fyi/results/css/css-flexbox
 Abstract: The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
 Editor: Tab Atkins Jr., Google, http://xanthir.com/contact/, w3cid 42199
 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400

From df03e2f9ec38e3425fe62b052eb3c3340b29bf36 Mon Sep 17 00:00:00 2001
From: Chris Lilley 
Date: Tue, 14 Oct 2025 14:17:03 -0400
Subject: [PATCH 08/14] [css-flexbox-1][editorial] Back to ED

---
 css-flexbox-1/Overview.bs | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/css-flexbox-1/Overview.bs b/css-flexbox-1/Overview.bs
index 6a1addb0380..058ea65cf97 100644
--- a/css-flexbox-1/Overview.bs
+++ b/css-flexbox-1/Overview.bs
@@ -2,9 +2,8 @@
 Title: CSS Flexible Box Layout Module Level 1
 Shortname: css-flexbox
 Level: 1
-Status: CRD
-Date: 2025-10-14
-Prepare for TR: yes
+Status: ED
+Prepare for TR: no
 Work Status: Testing
 Group: csswg
 ED: https://drafts.csswg.org/css-flexbox/
@@ -5218,6 +5217,14 @@ Boris Zbarsky.
 
 	This section documents the changes since previous publications.
 
+
    
+Changes since the 14 October 2025 CRD
+
    
+
+	
      
+		
    • (none)
      • 
+	
    
+
 
    
 Changes since the 19 November 2018 CR
    
 

From 5812df67e291c08c628ced23a6b6f386f6d2d421 Mon Sep 17 00:00:00 2001
From: Noam Rosenthal 
Date: Tue, 14 Oct 2025 21:02:09 +0100
Subject: [PATCH 09/14] [css-borders-4] [css-shapes-1] Specify rendering of
 single-path border-shape (#12897)

* [css-borders-4] [css-shapes-1] Specify rendering of single-path border-shape

border-shape takes its color (and thickness if single-path) from one of the
border sides, namely the first one (in logical order) that has a border-style
other than none.

Also define half-border-box as per resolution, in css-shapes-1.

https://github.com/w3c/csswg-drafts/issues/11662#issuecomment-3357273733

Closes #11662

* Update css-borders-4/Overview.bs

Co-authored-by: Tab Atkins Jr. 

---------

Co-authored-by: Tab Atkins Jr. 
---
 css-borders-4/Overview.bs | 32 +++++++++++++++++++++++---------
 css-shapes-1/Overview.bs  |  5 ++++-
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/css-borders-4/Overview.bs b/css-borders-4/Overview.bs
index 9615aa15183..31a6e3357f9 100644
--- a/css-borders-4/Overview.bs
+++ b/css-borders-4/Overview.bs
@@ -3048,23 +3048,33 @@ The 'border-shape' property
 		Initial: none
 		Applies to: all elements
 		Inherited: no
-		Percentages: relative to the given <>, or to [=border box=] if not given.
+		Percentages: see prose
 		Computed value: list, each item a computed color
 		Animation type: by computed value
 	
    
 
 The 'border-shape' property is provided with either a single <> or two <>s,
 resulting in one or two paths, respectively.
-The single-path border shape varint uses the existing ''border'' properties of the element to stroke the
-path that the given <> resolves to,
-while the double-path border shape variant fills the area between the two paths as if it were the border.
+
+When two <> values are given, the border is rendered between the paths generated shapes.
+When only a single <> is given, the border is rendered as a stroke with the
+[=relevant side for border shape|relevant side=]'s [=computed value|computed=] [=border width=] as the stroke width.
+
+The fill color of the border is the [=relevant side for border shape|relevant side=]'s [=computed value|computed=]'border-color'.
+
+When a <> is not given, the default computation of percentage differs based on the number of given <> values.
+
+When two <> values are given, the first (outer) one defaults to the [=border box=] and the second (inner) one defaults to the [=padding box=].
+This allows using the different 'border-width' properties to affect the final shape.
+
+When a single <> value is given, the <> defaults to the ''half-border-box'' value, which allows stroking in a way that matches the default border behavior.
 
 The 'border-shape' property is not compatible with 'border-radius' and 'corner-shape'.
 When an element's [=computed value=] of 'border-shape' is not none,
 its 'border-radius' is ignored, as if it was set to 0.
 'corner-shape' is implicitly ignored, as it can only work in tandem with 'border-radius'.
 
-A 'box-shadow' follows both the inner and outer border paths.
+A 'box-shadow' follows both the outer border path.
 
 'border-shape' does not affect geometry or layout,
 which is still computed using the existing 'border-width' properties.
@@ -3077,11 +3087,15 @@ as described in 
+An element's relevant side for border shape is the first side (in the order [=block-start=], [=inline-start=], [=block-end=], and [=inline-end]) that has a non-''border-style/none'' [=border style=], or [=block-start=] if they're all ''border-style/none''.
+	1. If |element|'s [=computed value|computed=] 'border-block-start-style' is not ''border-style/none'', then return [=block-start=].
+	1. If |element|'s [=computed value|computed=] 'border-inline-start-style' is not ''border-style/none'', then return [=inline-start=].
+	1. If |element|'s [=computed value|computed=] 'border-block-end-style' is not ''border-style/none'', then return [=block-end=].
+	1. If |element|'s [=computed value|computed=] 'border-inline-end-style' is not ''border-style/none'', then return [=inline-end=].
+	1. Return [=block-start=].
+
-Issue: what do we do about 'border-style'? It can't exactly work for every arbitrary shape. tentative/border-shape/border-shape-clips-background.html diff --git a/css-shapes-1/Overview.bs b/css-shapes-1/Overview.bs index fd06a7be321..d6a9843ae95 100644 --- a/css-shapes-1/Overview.bs +++ b/css-shapes-1/Overview.bs @@ -1358,7 +1358,7 @@ Shapes from Box Values Its syntax is: 
-		<> = <> | margin-box
+		<> = <> | margin-box | half-border-box
The definitions of the values are: @@ -1394,6 +1394,9 @@ Shapes from Box Values is the larger of 0 or border-radius - border-width - padding. + The half-border-box value defines the shape + enclosed by a box that is in the middle between the ''padding-box'' and the ''border-box''. +
Given the 100px square below with From 732bee021e401a1d564ddbad626e9e022baf773d Mon Sep 17 00:00:00 2001 From: Kevin Babbitt Date: Wed, 15 Oct 2025 10:03:38 -0700 Subject: [PATCH 10/14] [css-conditional-5] Spec at-rule() per CSSWG resolutions. #2463, #6966, #11116, #11117 (#12945) * [css-conditional-5] Spec at-rule() per CSSWG resolutions. #2463, #6966, #11116, #11117 * Update css-conditional-5/Overview.bs * Add to "Additions since Level 4" --------- Co-authored-by: Tab Atkins Jr. --- css-conditional-5/Overview.bs | 53 +++++++++++++++++++++++++++++------ 1 file changed, 45 insertions(+), 8 deletions(-) diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs index 228199b5cd8..092040c737d 100644 --- a/css-conditional-5/Overview.bs +++ b/css-conditional-5/Overview.bs @@ -114,18 +114,15 @@ Extensions to the ''@supports'' rule This level of the specification extends the <> syntax as follows: 
-		<supports-feature> = <> | <>
-							| <> | <>
+		<supports-feature> = <>
+		                   | <> | <>
+		                   | <>
+		                   | <>
 		<supports-font-tech-fn> = font-tech( <> )
 		<supports-font-format-fn> = font-format( <> )
+		<supports-at-rule-fn> = at-rule( <> )
- - at-supports-font-format-001.html - at-supports-font-tech-001.html - js/CSS-supports-L5.html - - : <> :: The result is true if the UA @@ -138,9 +135,24 @@ Extensions to the ''@supports'' rule supports the font format provided as an argument to the function. + : <> + :: + The result is true if the UA + supports the at-rule + provided as an argument to the function. +

Extensions to the definition of support

+

+Font techs and formats

+ + + at-supports-font-format-001.html + at-supports-font-tech-001.html + js/CSS-supports-L5.html + + A CSS processor is considered to support a font tech when it is capable of utilizing the specified [[css-fonts-4#font-tech-definitions]] @@ -152,6 +164,21 @@ Extensions to the definition of support in layout and rendering, and this format is not specified as a <>. +

+At-rules

+ + + js/supports-at-rule.html + + + A CSS processor is considered to + support an at-rule + if it would accept an [=at-rule=] beginning with the specified at-keyword + within any context. + + Note: Because ''@charset'' is not a valid [=at-rule=], + it is not considered to be supported under this definition. +

Generalized Conditional Rules: the ''@when'' rule

@@ -1812,6 +1839,14 @@ Changes since the #10544) +
  • + Extended [=supports queries=] to express [=at-rule=] capabilities + via ''at-rule()''. + (#2463, + #6966, + #11116, + #11117) +

    • @@ -1849,6 +1884,8 @@ Additions since Level 4

  • Added ''@when'' and ''@else''.
  • Extended [=supports queries=] to express font capabilities via ''font-tech()'' and ''font-format()''. +
  • Extended [=supports queries=] to express at-rule capabilities + via ''at-rule()''.
  • Moved Container Queries from [[CSS-CONTAIN-3]] to this specification. (See also the [[CSS-CONTAIN-3#changes]] for more information on the evolution of this feature.) From 55681570a6a5eefe81dccd07063386e5bb8e8847 Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Sun, 12 Oct 2025 01:37:57 +0200 Subject: [PATCH 11/14] [css-conditional-5] Defined @supports-query `@supports-query` is meant to allow authors to define and name custom support queries. --- css-cascade-5/Overview.bs | 2 +- css-conditional-5/Overview.bs | 117 +++++++++++++++++++++++++++++++++- 2 files changed, 115 insertions(+), 4 deletions(-) diff --git a/css-cascade-5/Overview.bs b/css-cascade-5/Overview.bs index 0c1d6a4e1e9..a3d44de0959 100644 --- a/css-cascade-5/Overview.bs +++ b/css-cascade-5/Overview.bs @@ -129,7 +129,7 @@ Importing Style Sheets: the ''@import'' rule as if they were written literally into the stylesheet at the point of the ''@import''. Any ''@import'' rules must precede all other valid at-rules and style rules in a style sheet - (ignoring ''@charset'' and @layer statement rules) + (ignoring ''@charset'', ''@supports-query'', and @layer statement rules) and must not have any other valid at-rules or style rules between it and previous ''@import'' rules, or else the ''@import'' rule is invalid. The syntax of ''@import'' is: diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs index 092040c737d..cde06b3a3f5 100644 --- a/css-conditional-5/Overview.bs +++ b/css-conditional-5/Overview.bs @@ -78,7 +78,7 @@ Introduction CSS Conditional Level 5 extends the ''@supports'' rule and [=supports query=] syntax - to allow testing for supported font technologies. + to allow testing for custom support queries as well as supported font technologies. It also adds an ''@when'' rule, which generalizes the concept of a conditional rule. @@ -117,12 +117,26 @@ Extensions to the ''@supports'' rule <supports-feature> = <> | <> | <> | <> - | <> + | <> + <supports-decl> = ( [ <> | <> ] ) <supports-font-tech-fn> = font-tech( <> ) <supports-font-format-fn> = font-format( <> ) <supports-at-rule-fn> = at-rule( <> ) + + at-supports-font-format-001.html + at-supports-font-tech-001.html + js/CSS-supports-L5.html + + + : <> + :: + The result is true if the UA + supports the named query. + If the name is not recognized, + the result is false. + : <> :: The result is true if the UA @@ -179,6 +193,13 @@ At-rules Note: Because ''@charset'' is not a valid [=at-rule=], it is not considered to be supported under this definition. +

    +Named queries

    + + A CSS processor is considered to + support a named query + when the related [=named supports query=] returns true. +

    Generalized Conditional Rules: the ''@when'' rule

    @@ -1743,13 +1764,86 @@ Container Relative Lengths: the ''cqw'', ''cqh'', ''cqi'', ''cqb'', ''cqmin'', '
    • +

    +Defining Custom Support Queries: the ''@supports-query'' rule

    + +The @supports-query [=at-rule=] is a [=conditional group rule=] that allows authors to define and name a [=supports query=] for later reuse, +creating a named supports query. +This enables complex or frequently-used feature queries to be referenced by name, +improving maintainability and readability. + + 
    +	@supports-query <> {
+	  <>
+	}
+
    + + Where <> is an <> that defines the name of the supports query. + + Anything inside the block is evaluated to test whether the user agent supports the features used. + The contents do not have any effect on the document's rendering. + + Once defined, the named supports query can be used in subsequent ''@supports'' or ''@when'' conditions. + + Multiple ''@supports-query'' rules with the same name in a style sheet are invalid and must be ignored. + +
    + For example, we can define a supports query checking multiple properties at once: + 
    +		@supports-condition --thicker-underlines {
+		  text-decoration-thickness: 0.2em;
+		  text-underline-offset: 0.3em;
+		}
+
+		/* Equivalent to (text-decoration-thickness: 0.2em) and (text-underline-offset: 0.3em) */
+		@supports (--thicker-underlines) {
+		  a {
+		    text-decoration: underline;
+		    text-decoration-thickness: 0.2em;
+		    text-underline-offset: 0.3em;
+		  }
+		}
+
    +
    + + ''@supports-query'' rules are allowed before ''@import'' and ''@namespace'' rules (after the ''@charset'' rule, if any). + +
    + As support queries can contain arbitrary declarations, + they can be used to detect support for complex features such as nesting: + 
    +		@supports-condition --nesting {
+		  & { }
+		}
+
+		@import url("nested-styles.css") supports(--nesting);
+
    +
    + +
    + Support queries can also be used to detect support for at-rules: + 
    +		@supports-condition --stuck-container-feature {
+		  @container scroll-state(stuck: top) { }
+		}
+
+		@supports (--stuck-container-feature) {
+		  div { border-color: navy; }
+		}
+
    +
    + + Issue: The name of the at-rule is under discussion. + Alternatives include ''@supports-condition'', ''@supports-test'', and ''@custom-supports''. + The name should be consistent with the one chosen for custom media queries. +

    APIs

    The CSSContainerRule interface

    - The {{CSSContainerRule}} interface represents a ''@container'' rule. + The {{CSSContainerRule}} interface represents an ''@container'' rule. 
     	[Exposed=Window]
@@ -1805,6 +1899,23 @@ The CSSContainerRule interface
 	When measuring layout sizes, it behaves Similar to resizeObserver,
 	but it provides the additional Container Query syntax and features.
 
+
    
+The CSSSupportsQueryRule interface
    
+
+	The {{CSSSupportsQueryRule}} interface represents an ''@supports-query'' rule.
+
+	
    +	[Exposed=Window]
+	interface CSSSupportsQueryRule : CSSGroupingRule {
+		readonly attribute CSSOMString name;
+	};
+	
    
+
+	
    
+		
    name of type CSSOMString
+		
    This attribute is the name of the [=named supports query=].
+	
    
+
 
    Security Considerations
    
 
 	No security issues have been raised against this document

From 0d0f9e982c5b0d8fe411e6681bfeb9ee94cd6252 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner 
Date: Sun, 12 Oct 2025 02:27:10 +0200
Subject: [PATCH 12/14] [css-conditional-5] Added Lea Verou as editor

---
 css-conditional-5/Overview.bs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index cde06b3a3f5..266ebd592d5 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -13,6 +13,7 @@ Editor: L. David Baron, Google https://www.google.com/, https://dbaron.org/, w3c
 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
 Editor: Chris Lilley, W3C, https://svgees.us/, w3cid 1438
 Editor: Miriam E. Suzanne, Invited Expert, https://www.miriamsuzanne.com/who/, w3cid 117151
+Editor: Lea Verou, Invited Expert, https://lea.verou.me/about, w3cid 52258
 Abstract: This module contains the features of CSS
 	for conditional processing of parts of style sheets,
 	based on capabilities of the processor or the environment

From 5aec461e5945e255df45ed30511d5dcc8c21bc32 Mon Sep 17 00:00:00 2001
From: Sebastian Zartner 
Date: Mon, 13 Oct 2025 21:15:42 +0200
Subject: [PATCH 13/14] [css-conditional-5] Renamed @supports-query to
 @supports-condition

---
 css-cascade-5/Overview.bs     |  2 +-
 css-conditional-5/Overview.bs | 44 +++++++++++++++++------------------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/css-cascade-5/Overview.bs b/css-cascade-5/Overview.bs
index a3d44de0959..daa5995e33c 100644
--- a/css-cascade-5/Overview.bs
+++ b/css-cascade-5/Overview.bs
@@ -129,7 +129,7 @@ Importing Style Sheets: the ''@import'' rule
 		as if they were written literally into the stylesheet at the point of the ''@import''.
 
 	Any ''@import'' rules must precede all other valid at-rules and style rules in a style sheet
-	(ignoring ''@charset'', ''@supports-query'', and @layer statement rules)
+	(ignoring ''@charset'', ''@supports-condition'', and @layer statement rules)
 	and must not have any other valid at-rules or style rules between it and previous ''@import'' rules,
 	or else the ''@import'' rule is invalid.
 	The syntax of ''@import'' is:
diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs
index 266ebd592d5..ab48ef4ebfe 100644
--- a/css-conditional-5/Overview.bs
+++ b/css-conditional-5/Overview.bs
@@ -119,7 +119,7 @@ Extensions to the ''@supports'' rule
 		                   | <> | <>
 		                   | <>
 						   | <>
-		<supports-decl> = ( [ <> | <> ] )
+		<supports-decl> = ( [ <> | <> ] )
 		<supports-font-tech-fn> = font-tech( <> )
 		<supports-font-format-fn> = font-format( <> )
 		<supports-at-rule-fn> = at-rule( <> )
@@ -131,10 +131,10 @@ Extensions to the ''@supports'' rule
 		js/CSS-supports-L5.html
 	
 
-	: <>
+	: <>
 	::
 		The result is true if the UA
-		supports the named query.
+		supports the named condition.
 		If the name is not recognized,
 		the result is false.
 
@@ -194,12 +194,12 @@ At-rules
 	Note: Because ''@charset'' is not a valid [=at-rule=],
 	it is not considered to be supported under this definition.
 
-
    
-Named queries
    
+
    
+Named conditions
    
 
 	A CSS processor is considered to
-	support a named query
-	when the related [=named supports query=] returns true.
+	support a named condition
+	when the related [=named supports condition=] returns true.
 
 
    
 Generalized Conditional Rules: the ''@when'' rule
    
@@ -1765,28 +1765,28 @@ Container Relative Lengths: the ''cqw'', ''cqh'', ''cqi'', ''cqb'', ''cqmin'', '
 	
 
 
-
    
-Defining Custom Support Queries: the ''@supports-query'' rule
    
+
    
+Defining Custom Support Queries: the ''@supports-condition'' rule
    
 
-The @supports-query [=at-rule=] is a [=conditional group rule=] that allows authors to define and name a [=supports query=] for later reuse,
-creating a named supports query.
+The @supports-condition [=at-rule=] is a [=conditional group rule=] that allows authors to define and name a [=supports query=] for later reuse,
+creating a named supports condition.
 This enables complex or frequently-used feature queries to be referenced by name,
 improving maintainability and readability.
 
 	
    -	@supports-query <> {
+	@supports-condition <> {
 	  <>
 	}
 	
    
 
-	Where <> is an <> that defines the name of the supports query.
+	Where <> is an <> that defines the name of the supports query.
 
 	Anything inside the block is evaluated to test whether the user agent supports the features used.
 	The contents do not have any effect on the document's rendering.
 
-	Once defined, the named supports query can be used in subsequent ''@supports'' or ''@when'' conditions.
+	Once defined, the named supports condition can be used in subsequent ''@supports'' or ''@when'' conditions.
 
-	Multiple ''@supports-query'' rules with the same name in a style sheet are invalid and must be ignored.
+	Multiple ''@supports-condition'' rules with the same name in a style sheet are invalid and must be ignored.
 
 	
    
 		For example, we can define a supports query checking multiple properties at once:
@@ -1807,7 +1807,7 @@ improving maintainability and readability.
    - ''@supports-query'' rules are allowed before ''@import'' and ''@namespace'' rules (after the ''@charset'' rule, if any). + ''@supports-condition'' rules are allowed before ''@import'' and ''@namespace'' rules (after the ''@charset'' rule, if any).
    As support queries can contain arbitrary declarations, @@ -1835,7 +1835,7 @@ improving maintainability and readability.
    Issue: The name of the at-rule is under discussion. - Alternatives include ''@supports-condition'', ''@supports-test'', and ''@custom-supports''. + Alternatives include ''@supports-query'', ''@supports-test'', and ''@custom-supports''. The name should be consistent with the one chosen for custom media queries.

    APIs

    @@ -1900,21 +1900,21 @@ The CSSContainerRule interface When measuring layout sizes, it behaves Similar to resizeObserver, but it provides the additional Container Query syntax and features. -

    -The CSSSupportsQueryRule interface

    +

    +The CSSSupportsConditionRule interface

    - The {{CSSSupportsQueryRule}} interface represents an ''@supports-query'' rule. + The {{CSSSupportsConditionRule}} interface represents an ''@supports-condition'' rule. 
     	[Exposed=Window]
-	interface CSSSupportsQueryRule : CSSGroupingRule {
+	interface CSSSupportsConditionRule : CSSGroupingRule {
 		readonly attribute CSSOMString name;
 	};
    name of type CSSOMString -
    This attribute is the name of the [=named supports query=]. +
    This attribute is the name of the [=named supports condition=].

    Security Considerations

    From fa593d3769ebaa0e79927cf6d0678a1bea0f39fe Mon Sep 17 00:00:00 2001 From: Sebastian Zartner Date: Tue, 14 Oct 2025 08:37:58 +0200 Subject: [PATCH 14/14] [css-conditional-5] Added @supports-condition and related API to Changes section --- css-conditional-5/Overview.bs | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/css-conditional-5/Overview.bs b/css-conditional-5/Overview.bs index ab48ef4ebfe..5a6d44a67db 100644 --- a/css-conditional-5/Overview.bs +++ b/css-conditional-5/Overview.bs @@ -1947,10 +1947,8 @@ Changes since the #10544) - +
  • Dimensional query containers no longer apply layout containment + (#10544)
  • Extended [=supports queries=] to express [=at-rule=] capabilities via ''at-rule()''. @@ -1958,6 +1956,8 @@ Changes since the #6966, #11116, #11117) +
  • Added ''@supports-condition'' at-rule and related {{CSSSupportsConditionRule}} interface. + (#12622)
    • @@ -1967,7 +1967,7 @@ Changes since the #10874) +
  • Added ''@container/stuck/none''-keywords to scroll-state() features (#10874)
  • Added container-type:scroll-state, and scroll-state() queries for stuck, snapped, and scrollable features (#6402, #10784, @@ -1986,7 +1986,7 @@ Changes since the #8110)
  • Updated to use the new parsing algorithm names and block production names
  • Corrected a typo in the grammar of <font-format>
    • -
  • Corrected extra spaces in the font-tech and font-format productions (#7369 )
    • +
  • Corrected extra spaces in the font-tech and font-format productions (#7369)

    • @@ -2001,6 +2001,7 @@ Additions since Level 4

  • Moved Container Queries from [[CSS-CONTAIN-3]] to this specification. (See also the [[CSS-CONTAIN-3#changes]] for more information on the evolution of this feature.) +
  • Added ''@supports-condition'' at-rule and related {{CSSSupportsConditionRule}} interface.

    Acknowledgments