[css-text-decor-4] Add 'inset' and disallow negative spread radius for 'text-shadow'. #6074 #6971

Author: fantasai

css-text-decor-4/Overview.bs

@@ -1912,68 +1912,69 @@ Text Shadows: the 'text-shadow' property</h2>
 
 	<pre class="propdef">
 	Name: text-shadow
-	Value: none | [ <<color>>? && <<length>>{2,4} ]#
+	Value: none | <<shadow>>#
 	Initial: none
 	Applies to: text
 	Inherited: yes
 	Computed value: either the keyword ''box-shadow/none'' or
 		a list, each item consisting of four absolute lengths
 		plus a computed color
-	Animation type: as [=shadow list=]
+		and optionally also an ''text-shadow/inset'' keyword
+	Animation type: <a href="https://www.w3.org/TR/web-animations-1/#animating-shadow-lists">as shadow list</a>
 	</pre>
 
 	This property accepts a comma-separated list of shadow effects
 	to be applied to the text of the element.
 	Values are interpreted as for 'box-shadow' [[!CSS-BACKGROUNDS-3]].
-	(But note that the ''box-shadow/inset'' keyword are not allowed.)
 	Each layer shadows the element's text and all its text decorations
 	(composited together).
-	If the color of the shadow is not specified,
-	it defaults to ''currentColor'',
-	i.e. the shadow’s color is taken from the element’s 'color' property.
-
 	The shadow effects are applied front-to-back:
 	the first shadow is on top.
-	The shadows may thus overlay each other,
-	but they never overlay the text itself.
-	The shadow must be painted at a stack level
-	between the element's border and/or background (if present)
+	The shadows may thus overlay each other.
+
+	Unlike 'box-shadow',
+	the <a spec=css-backgrounds-3>spread distance</a>
+	is strictly interpreted as outset distance
+	from any point of the glyph outline,
+	and therefore, similar to the blur radius,
+	creates rounded, rather than sharp, corners.
+	Negative spread values are invalid.
+
+	<dfn>Outer text shadows</dfn>
+	(specified without the ''box-shadow/inset'' keyword)
+	shadow the text--
+	including any text stroke [[!FILL-STROKE-3]]--
+	as if it were cut and raised above the surrounding canvas.
+	Unlike 'box-shadow',
+	outer text shadows are not clipped to the shadowed shape
+	and may show through if the text is partially-transparent.
+
+	<dfn>Inner text shadows</dfn>
+	(specified with the ''box-shadow/inset'' keyword)
+	shadow the canvas--
+	and any text stroke [[!FILL-STROKE-3]]--
+	as if the text were cut and dropped below the surrounding canvas.
+	They are therefore only drawn within the inner edge of the stroke.
+
+	[=Outer text shadows=] must be painted at a stack level
+	between the element's border/background (if present)
 	and the elements text and text decoration.
+	[=Inner text shadows=] must be painted
+	over the text and its decorations.
 	UAs should avoid painting text shadows over text
 	in adjacent elements belonging to the same stack level and stacking context.
 	(This may mean that the exact stack level of the shadows depends
 	on whether the element has a border or background:
 	the exact stacking behavior of text shadows is thus UA-defined.)
-	It is undefined whether a given shadow layer shadows
-	each glyph or decoration independently
-	or if the text and/or decorations are flattened and then shadowed.
 
-	Unlike 'box-shadow', text shadows are not clipped to the shadowed shape
-	and may show through if the text is partially-transparent.
 	Like 'box-shadow', text shadows do not influence layout,
 	and do not trigger scrolling
 	or increase the size of the <a>scrollable overflow region</a>.
 
-	Also unlike 'box-shadow',
-	the [=spread distance=] is strictly interpreted as outset distance
-	from any point of the glyph outline,
-	and therefore, similar to the blur radius,
-	creates rounded, rather than sharp, corners.
-
-	Note: The painting order of shadows defined here is the opposite
-	of that defined in the 1998
-	<a href="https://www.w3.org/TR/1998/REC-CSS2-19980512">CSS2 Recommendation</a>.
-
 	The ''text-shadow'' property applies to both the
 	<code>::first-line</code> and <code>::first-letter</code>
 	pseudo-elements.
 
-	Level 4 adds a spread radius argument to 'text-shadow',
-	using the same syntax and interpretation as for 'box-shadow',
-	except that corners are always rounded
-	(since the geometry of a glyph is not so simple as a box).
-
-
 <h2 id="painting">
 Painting Text Decorations</h2>
 
@@ -2089,41 +2090,34 @@ Appendix B: Default UA Stylesheet</h2>
 <h2 class="no-num" id="changes">Appendix C:
 Changes</h2>
 
-<h3 class="no-num" id="changes-2018">
-Changes since the 13 March 2018 Working Draft</h3>
-
-<ul>
-	<li>Merged in entire contents of <a href="https://www.w3.org/TR/css-text-decor-3/">CSS Text Decoration Level 3</a>,
-	so that this is no longer a diff spec.
-	<li>Split 'text-decoration-skip' into longhands.
-		(<a href="https://github.com/w3c/csswg-drafts/issues/843">Issue 843</a>)
-	<li>Added ''text-decoration-skip-ink/all'' value to 'text-decoration-skip-ink'.
-	<li>Renamed <css>text-decoration-width</css> to 'text-decoration-thickness'.
-	<li>Added <<percentage>> values to 'text-decoration-thickness' and 'text-underline-offset'.
-		(<a href="https://github.com/w3c/csswg-drafts/issues/2165">Issue 2165</a>)
-	<li>Defined 'text-underline-offset' position values as outsets rather than insets,
-		because this was more intuitive to users.
-	<li>Moved ''text-underline-position/from-font'' keyword from 'text-underline-offset' to 'text-underline-position'.
-		(<a href="https://github.com/w3c/csswg-drafts/issues/3118#issuecomment-432297480">Issue 3118</a>)
-	<li>Adjust ''text-emphasis-skip: punctuation'' to include all of Po category, with some exceptions.
-		(<a href="https://github.com/w3c/csswg-drafts/issues/839">Issue 839</a>)
-	<li>Clarified that line-throughs are always continuous.
-	<li>Miscellaneous clarifications and editorial tweaks.
-</ul>
+<h3 class="no-num" id="changes-2020">
+Changes since the 6 May 2020 Working Draft</h3>
+
+
+	Significant changes since the
+	<a href="https://www.w3.org/TR/2020/WD-css-text-decor-4-20200506/">6 May 2020 Working Draft</a>:
+
+	<ul>
+		<li>Added <a spec=css-backgrounds-3>spread distance</a> and ''box-shadow/inset'' to 'text-shadow'.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/6074">Issue 6074</a>,
+			 <a href="https://github.com/w3c/csswg-drafts/issues/6971">Issue 6971</a>)
+		<li>Explicitly noted properties applying to text in “Applies to” line.
+			(<a href="https://github.com/w3c/csswg-drafts/issues/5303">Issue 5303</a>)
+	</ul>
 
 <h3 class="no-num" id="additions-l3">
 Additions Since Level 3</h3>
 
-The following features have been added since <a href="https://www.w3.org/TR/css-text-decor-3/">Level 3</a>:
+	The following features have been added since <a href="https://www.w3.org/TR/css-text-decor-3/">Level 3</a>:
 
-<ul>
-	<li>Added ''spelling-error'' and ''grammar-error'' values to 'text-decoration-line'.
-	<li>Added 'text-decoration-thickness' and 'text-underline-offset' properties.
-	<li>Added ''text-underline-position/from-font'' value to 'text-underline-position'.
-	<li>Drafted 'text-decoration-skip' property and its longhands.
-	<li>Drafted 'text-emphasis-skip' property.
-	<li>Added [=spread distance=] value to 'text-shadow'.
-</ul>
+	<ul>
+		<li>Added ''spelling-error'' and ''grammar-error'' values to 'text-decoration-line'.
+		<li>Added 'text-decoration-thickness' and 'text-underline-offset' properties.
+		<li>Added ''text-underline-position/from-font'' value to 'text-underline-position'.
+		<li>Drafted 'text-decoration-skip' property and its longhands.
+		<li>Drafted 'text-emphasis-skip' property.
+		<li>Added <a spec=css-backgrounds-3>spread distance</a> and ''box-shadow/inset'' to 'text-shadow'.
+	</ul>
 
 
 Privacy and Security Considerations {#priv-sec}