diff --git a/css-text-decor-3/Overview.bs b/css-text-decor-3/Overview.bs index 74604b9459b..7a672d592ea 100644 --- a/css-text-decor-3/Overview.bs +++ b/css-text-decor-3/Overview.bs @@ -216,6 +216,25 @@ Line Decoration: Underline, Overline, and Strike-Through represents the span element, and the orange lines represent the blocks. +
+ In the following style sheet and document fragment: + 
+		  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; }
+
+ 
+                  <div>Help, help! <span>I am under a hat!</span></div>
+
+ ...the <div> is the [=decorating box=] for its underline (in black), + which is rendered uninterrupted through both the <div> and the <span>. + Unlike line decorations, however, + `text-shadow` is inherited as a property; + therefore the green text shadow on the <span> + overrides the blue text shadow on the <div>. + As a result, when the shadows are painted, + the shadow of the <div>’s underline is disjoint across the two elements. + Sample rendering of the above underline example +
Note: Line decorations are propagated through the box tree, not through inheritance, diff --git a/css-text-decor-3/images/underline-example-2.png b/css-text-decor-3/images/underline-example-2.png new file mode 100644 index 00000000000..d95118a8da7 Binary files /dev/null and b/css-text-decor-3/images/underline-example-2.png differ diff --git a/css-text-decor-4/Overview.bs b/css-text-decor-4/Overview.bs index 9065e6856ea..ecb618d1f76 100644 --- a/css-text-decor-4/Overview.bs +++ b/css-text-decor-4/Overview.bs @@ -160,6 +160,25 @@ Line Decoration: Underline, Overline, and Strike-Through represents the span element, and the orange lines represent the blocks. +
+ In the following style sheet and document fragment: + 
+		  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; }
+
+ 
+                  <div>Help, help! <span>I am under a hat!</span></div>
+
+ ...the <div> is the [=decorating box=] for its underline (in black), + which is rendered uninterrupted through both the <div> and the <span>. + Unlike line decorations, however, + `text-shadow` is inherited as a property; + therefore the green text shadow on the <span> + overrides the blue text shadow on the <div>. + As a result, when the shadows are painted, + the shadow of the <div>’s underline is disjoint across the two elements. + Sample rendering of the above underline example +
Note: Line decorations are propagated through the box tree, not through inheritance, diff --git a/css-text-decor-4/images/underline-example-2.png b/css-text-decor-4/images/underline-example-2.png new file mode 100644 index 00000000000..d95118a8da7 Binary files /dev/null and b/css-text-decor-4/images/underline-example-2.png differ