t1008-c44-ln-box-02-d-ag.htm, t100801-c544-valgn-01-d-ag.htm

http://www.w3.org/Style/CSS/Test/CSS2.1/current/html4/t1008-c44-ln-box-02-d-ag.htm
http://www.w3.org/Style/CSS/Test/CSS2.1/current/html4/t100801-c544-valgn-01-d-ag.htm

We believe there is a bug in the test cases. The background image of this test case is off by 1 pixel. The main issue seems to relate to the computation of 'vertical-align: middle;' the latter is defined in CSS2.1 [1] as: "Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent."

In this test case, the font size is 15px so 1em == 15px. The Ahem font specifies x-height to be 0.8em i.e. 12px. Therefore the 2em/30px mask image is positioned thus:

"Align the vertical midpoint of the box with the baseline of the parent box..."
	The image is 15px above the baseline and 15px below.

"... plus half the x-height of the parent."
	This moves the image up another 6px. The image is now 21px above the baseline and 9px below.

The 15px X characters have 12px ascent and 3px descent, which requires 9px of white fill above them and 6px below them. The background image, however, assumes 10px on top and 5px below, resulting in the red outlines observable in all major browsers. 

All major browsers currently fail this test as a result of this off-by-one delta.

The test case background image needs to be updated to make this case valid.

[1] http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

--
Thanks,
Arron Eicholz

Received on Saturday, 28 February 2009 01:45:44 UTC