css/CSS2/positioning/absolute-replaced-height-001.xht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: Absolute replaced elements with 'margin-top' and 'margin-bottom' as 'auto'</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
        <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-31 -->
        <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
		<link rel="match" href="absolute-replaced-height-001-ref.xht" />

        <meta name="flags" content="image" />
        <meta name="assert" content="If the height, top, bottom and vertical margins of an absolute positioned inline replaced element are all 'auto', then its use value is determined for inline replaced element, its 'top' is given by its static position and both 'margin-top' and 'margin-bottom' used values are '0'. In this test, the 'height' and 'width' of the inline replaced element are 'auto' and the element also has an intrinsic height, so the intrinsic height and the intrinsic width become the used values." />
        <style type="text/css">
            div
            {
                border-bottom: solid orange;
                border-top: solid orange;
                height: 15px;
                width: 1in;
            }
            img
            {
                margin-bottom: auto;
                margin-top: auto;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <p>Test passes if there is <strong>no space between</strong> the blue square and the orange lines.</p>
        <div>
            <img alt="blue 15x15" src="support/blue15x15.png" />
        </div>
    </body>
</html>