CSS2 Test Suite: 10.6.2 Computing heights and margins: inline, replaced elements; block-level, replaced elements in normal flow; and floating, replaced elements

The style declarations contained within this page:

.bookend {background: #FCC;}
.test {background: #9F9;}
.cl1 {height: 30px;}
.cl2 {padding: 10px 0;}
.cl3 {border: 10px solid green; border-width: 10px 0;}
.cl4 {margin: 10px 0;}
.cl5 {height: 30px; padding: 10px 0; border: 10px solid green; border-width: 10px 0; margin: 10px 0;}
.cl6 {height: auto;}

This 'p' element contains an 'img' element with a class of 'test cl1'. The image is here: . The image's height should be 30 pixels. The top and bottom padding, borders, and margins should all have zero width.

This 'p' element contains an 'img' element with a class of 'test cl2'. The image is here: . The image's top and bottom padding should each be 10 pixels wide.

This 'p' element contains an 'img' element with a class of 'test cl3'. The image is here: . The image's top and bottomborders should each be 10 pixels wide (and solid green).

This 'p' element contains an 'img' element with a class of 'test cl4'. The image is here: . The image's top and bottom margins should each be 10 pixels wide. This will raise the image 10 pixels, as well as increase the height of the line box to be 10 pixels above the top of the image (assuming the surrounding text is smaller than the image.

This 'p' element contains an 'img' element with a class of 'test cl5'. The image is here: . The image's top and bottom padding, border, and margins should each be 10 pixels wide, and the image's height should be 30 pixels.

This 'p' element contains an 'img' element with a class of 'test cl6'. The image is here: . The image's height should be equal to its intrinsic height, which is 20 pixels.