These tests are new, if you spot any problems with them then please tell me!
In the test box below, there should be nothing. In fact, it should only appear as a thin line across the viewport.
In the test box below, there should be a single aqua line, 110
pixels tall and 10 pixels across. The box should be exactly
the same height as the previous one because the inner
div contains only a single span, and that span has a
line-height of zero, and the div contains a line-height of zero too.
In other words, the text box should really just be a solid line
spanning the viewport again.
The visible line should come from the border of that empty inline element (span) with a line-height of zero and a font-size of 100px. The bar should come straight out of the top of the box, possibly going under this paragraph.
The following test should be identical to the previous one with the exception that the aqua bar should this time be recognisable as a border, which is a lot wider (100px wider to be precise) thus resulting in a square border 110px to a side. At the bottom of the box there should be a solid green bar. The border should stick out of the top of the `box' (well, bar), going under this paragraph, and the green bar may stick out of the bottom of the box a bit. The box should again be exactly as wide as the first box in this section, though.
The following test should look absolutely identical to the previous one. The only difference is that now we have more than one line in the markup, but since the line height is zero, this should have no noticeable effect. There should be no red visible in the following test, only the green bar with its aqua border as before.
The following test box should have the same height as before (i.e., zero), as should the aqua border, but this time the aqua border should be filled all in green, not just a small bar at the bottom.
In the test below, there should be a solid green square, exactly 100px to a side. The height of the test box should be only 4/10th of the font-size, i.e. 40 pixels. A ruler is present to measure this.
In the test below, there should be another green square, but the top 2/10th of it should be a different shade than the bottom 8/10th. It is actually the same test as the previous one in this section, but just with different colours to aid debugging.
In the test below, there should be two solid slabs of green, separated by a block of transparency (probably white). The two slabs should appear at the top and bottom respectively of a brighter green box surrounding them. The containing block should be 160 pixels high, and a ruler has been placed to let this be measured.
In the following test, there should be a single rectangular green block with a thick lime green border. The container box should be exactly 180px high according to the ruler and the border and green block should extend outside the test box.
The following test is similar, the height here should be exactly 100px.
The following test is similar, the height here should be exactly 60px.
The following test is similar, the height here should be exactly 20px.
The following test is similar, the height here should be exactly 10px.
Bugzilla: Bug 4234
This page is maintained by Ian Hickson (py8ieh@bath.ac.uk).
Last updated in May 1999.