If you have any comments to make regarding this test, e-mail email@example.com.
Below, the underlining should be green, the text blue.
This should look the same:
Below, the underlining should be green, unbroken, of the same size. The text will vary in height, boldness, and so on. The underline should be the same distance from the base line of the first piece of text (which is repeated through the test, it reads "Green Text"). It shouldn't follow the baseline of each inline.
Note that this is a very tenuous argument. It stems from the
statement in the spec which reads
This property is not inherited,
but descendant boxes of a block box should be formatted with the same
decoration, implying that the underline is actually the underline
of the parent element that affects children, and not the underline
that is applied (as if the property was inherited).
Following this line of thought generates much nicer looking underlines, as it is not broken everything the text gets bolder, and so on.
This is the same test, with overline:
This is the same test, with strike-through:
The underline should span through the picture below, under the cat's paws:
However, in the following case there should be no underline under the image:
Similarly here -- in the following case there should again be no underline under the image:
The text should be green, the underlining purple, and the overlining blue.
The text below should have a double underline, one fuchsia and the
other blue. This is based on that same CSS spec quote:
property is not inherited, but descendant boxes of a block box should
be formatted with the same decoration. I assert that this means
that the underlining spans all children, and so if one of the
children is explictly underlined too, it would have both
Make sure the double underlining continues on the second line!
It is the same argument which causes the double underlining as allows the underlining and overstriking to occur simultaneously. In the case of the underlining, the main text is moved up a bit by using the vertical-align property. This assumes that the underlining is based at a certain distance from the baseline of the text on which it is set.
In the following text, the lines should be balanced so that the underline, for example, is never heavier than the overline. This is a matter of taste, really. Oh well. For comparison, the tests are all on the same line.
Here, the underline and overline should be normal, but the line in the middle may be thicker. The text should in any case be bold:
Here, the underline, overline and middle line should not change weight where the text goes bold:
Here is an odd one -- below, only the text should blink, the lines should remain in place even when the text disappears. Note that if the text does not blink at all, you may ignore this particular subtest as blink is explicitly specified as an optional feature.
An extension of this principle (that underlining affects all children simply by "being there" rather than through an act of the children themselves) is that if a child is hidden, the underlining should remain.
First, what it looks like with everything visible:
Now, hiding the inner span:
Logically, only the text should have disappeared, leaving
the underlining where it was. Ignore this test when reporting results
if the blue text did not dissapear, since
that would mean
visibility is not implemented.
Finally, let's blink the middle text:
The underline under the blue text should remain, even when the blue text disappears for a blink!
Note. If the text is not blinking, then ignore this final test. Blink is explicitly specified as an optional feature.
Up to the Evil Tests Page.
Last updated in May 1999.