RichInStyle.com tests: text-decoration

Text-decoration is slightly complicated. Text-decoration is 'inherited' (not spanned):

but only to inline descendants;
with the color of the ancestor;
and at the level appropriate for the descendant.

Basic tests

For these tests, since font-size and line-height are constant and vertical-align: baseline, the text-decoration should always be in the same place.

This should be underlined in red, as should this (which should be green with red underline - no green underline should be visible).
This should be underlined in red, as should this .
This should be blinking, as should this.
This should be overlined in red, as should this (which should be green with red overline - no green overline should be visible).
This should be overlined in red, as should this.
This should be line-throughed in red, as should this (which should be green with red line-through).
This should be line-throughed in red, as should this.
This should be underlined, as should this (which should be green with green underline - no red underline should be visible).
This should be overlined, as should this (which should be green with green overline - no red overline should be visible).
This should be line-throughed, as should this (which should be green with green line-through - no red line-through should be visible).
This should be underlined and overlined.
This should be underlined and blinking.
This should be underlined and line-throughed.
This should be overlined and blinking.
This should be overlined and line-throughed.
This should be blinking and line-throughed.
This should be blinking, line-throughed and overlined.
This should be blinking, line-throughed and underlined.
This should be blinking, underlined and overlined.
This should be underlined, line-throughed and overlined.
This should be underlined, line-throughed, blinking and overlined.

Compliance tests

This should be underlined, but not line-throughed. (text-decoration: line-through; text-decoration: underline).
If there hasn't been any blinking in the rest of the document, this should be underlined. (text-decoration: underline; text-decoration: blink).
If there hasn't been any overlining in the rest of the document, this should be underlined. (text-decoration: underline; text-decoration: overline)
This should not have any text decoration at all. (text-decoration: underline; text-decoration: none)
This should be underlined (otherwise future t-d values will cause problems). (text-decoration: underline; text-decoration: newvalue).
This should not be underlined because it contains multiple t-decoration values and one is invalid.
This should not be underlined, since t-d only spans descendant inline elements.
This should be line-throughed but not underlined (ADDRESS {text-decoration: underline} ADDRESS.one {text-decoration: line-through}).

Advanced tests

This should be underlined (font-size: 16px; text-decoration: underline; line-height: 16px; color: red). As should this (vertical-align: sub; color: green; font-size: 64px; line-height: 64px;)

The above test should only have one color of underline, which should be in red at the appropriate level for underline - just below the baseline.
This should be underlined(font-size: 16px; text-decoration: underline; line-height: 16px; color: red). As should this (vertical-align: super; color: green; font-size: 64px; line-height: 64px;)

The above test should only have one color of underline, which should be in red at the appropriate level for underline - just below the baseline.
This should be underlined (font-size: 16px; text-decoration: underline; line-height: 16px; color: red). As should this (vertical-align: sub; color: green; font-size: 64px; text-decoration: underline; line-height: 64px;)

The above test should only have two colors of underline - green below the big text, red below the small text. However, each piece of text should be underlined just once - a little below the baseline.
This should be underlined (font-size: 16px; text-decoration: underline; line-height: 16px; color: red). As should this (font-size: 64px; vertical-align: super; color: green; text-decoration: underline;line-height: 64px;)

The above test should only have two colors of underline - green below the big text, red below the small text. However, each piece of text should be underlined just once - a little below the baseline.
This should be line-throughed. So should this.

The above test should only have one color of line-through - black. The line-through should go through the middle of each piece of text.
This should be overlined. So should this.

The above test should only have one color of overline - black. The overline should go over the top of each piece of text.
This should be overlined, underlined and line-throughed. So should this.

The above test should only have one color of decoration - black. The decoration should be positioned at the appropriate level for each piece of text.
The underlining should be of the minimum possible thickness.
The underlining should be of enormous thickness.
The underlining should be of enormous thickness.
This image should not be underlined.
This image should not be underlined.
The alt text of this image should be underlined.

Text-decoration, vertical-align and TD interaction

The two below should look the same; the only difference in the markup is that the first has text-decoration: underline on the TD, and the second uses a SPAN with inline text-decoration declaration to underline all of the content except for the = sign.

In particular the following should be observed:

each piece of text should only be underlined once
the 8 should be superscripted

=3 × 10⁸

d

=3 × 10⁸

d