wpt / css / CSS2 / positioning / absolute-non-replaced-max-height-008.xht

Status: PASS | Duration: 9ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/CSS2/positioning/absolute-non-replaced-max-height-008.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: Max-height on absolutely positioned, non-replaced elements, 'top' set to static position</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-29 -->
        <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height" />
		<link rel="match" href="absolute-non-replaced-max-height-008-ref.xht" />

        <meta name="assert" content="When 'top' is set to the static position and any 'auto' values for top and bottom margin are set to '0', when 'top' and 'bottom' are 'auto' and 'height' is not 'auto'." />
        <style type="text/css">
            #div1
            {
                background: blue;
                height: 3in;
                position: relative;
                width: 1in;
            }
            div div
            {
                background: orange;
                bottom: auto;
                height: 1in;
                margin-bottom: auto;
                margin-top: auto;
                max-height: 0.5in;
                position: absolute;
                top: auto;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <p>Test passes if there is a small orange rectangle and a bigger blue rectangle.</p>
        <div id="div1">
            <div></div>
        </div>
    </body>
</html>

/css/CSS2/positioning/absolute-non-replaced-max-height-008-ref.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 Reftest Reference</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />

  <style type="text/css"><![CDATA[
  img {vertical-align: top;}
  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a small orange rectangle and a bigger blue rectangle.</p>

  <div><img src="support/swatch-orange.png" width="96" height="48" alt="Image download support must be enabled" /><br /><img src="support/blue15x15.png" width="96" height="240" alt="Image download support must be enabled" /></div>

 </body>
</html>