[css-text-decor-3] [css-text-decor-4] Add example describing how decorating box interacts with text-shadow (#7588)

* [css-text-decor-3] [css-text-decor-4] Add example describing how decorating box interacts with text-shadow

Thanks to Alan Bujtas for the example and research!

* Apply suggestions from code review

Co-authored-by: fantasai <fantasai.bugs@inkedblade.net>

Co-authored-by: fantasai <fantasai.bugs@inkedblade.net>

Author: litherum

css-text-decor-3/Overview.bs

@@ -216,6 +216,25 @@ Line Decoration: Underline, Overline, and Strike-Through</h2>
 		represents the span element, and the orange lines represent the
 		blocks.
 	</div>
+	<div class="example">
+		In the following style sheet and document fragment:
+		<pre>
+		  div { color: black; font-size: 48px; text-decoration: underline; text-shadow: blue 0px 50px 0px; }
+		  span { font-size: 20px; vertical-align: top; text-shadow: green 0px 100px 0px; }
+		</pre>
+		<pre>
+                  &lt;div&gt;Help, help! &lt;span&gt;I am under a hat!&lt;/span&gt;&lt;/div&gt;
+		</pre>
+		...the &lt;div&gt; is the [=decorating box=] for its underline (in black),
+		which is rendered uninterrupted through both the &lt;div&gt; and the &lt;span&gt;.
+		Unlike line decorations, however,
+		`text-shadow` is inherited as a property;
+		therefore the green text shadow on the &lt;span&gt;
+		overrides the blue text shadow on the &lt;div&gt;.
+		As a result, when the shadows are painted,
+		the shadow of the &lt;div&gt;’s underline is disjoint across the two elements.
+		<img src="images/underline-example-2.png" alt="Sample rendering of the above underline example">
+	</div>
 
 	Note: Line decorations are propagated through the box tree,
 	not through inheritance,

css-text-decor-3/images/underline-example-2.png

@@ -160,6 +160,25 @@ Line Decoration: Underline, Overline, and Strike-Through</h2>
 		represents the span element, and the orange lines represent the
 		blocks.
 	</div>
+	<div class="example">
+		In the following style sheet and document fragment:
+		<pre>
+		  div { color: black; font-size: 48px; text-decoration: underline; text-shadow: blue 0px 50px 0px; }
+		  span { font-size: 20px; vertical-align: top; text-shadow: green 0px 100px 0px; }
+		</pre>
+		<pre>
+                  &lt;div&gt;Help, help! &lt;span&gt;I am under a hat!&lt;/span&gt;&lt;/div&gt;
+		</pre>
+		...the &lt;div&gt; is the [=decorating box=] for its underline (in black),
+		which is rendered uninterrupted through both the &lt;div&gt; and the &lt;span&gt;.
+		Unlike line decorations, however,
+		`text-shadow` is inherited as a property;
+		therefore the green text shadow on the &lt;span&gt;
+		overrides the blue text shadow on the &lt;div&gt;.
+		As a result, when the shadows are painted,
+		the shadow of the &lt;div&gt;’s underline is disjoint across the two elements.
+		<img src="images/underline-example-2.png" alt="Sample rendering of the above underline example">
+	</div>
 
 	Note: Line decorations are propagated through the box tree,
 	not through inheritance,