wpt / css / CSS2 / positioning / absolute-replaced-height-003.xht

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

TestRefTest SourceRef Source

/css/CSS2/positioning/absolute-replaced-height-003.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: Absolutely positioned inline replaced element with intrinsic ratio and 'height' set to '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-non-replaced-height-007-ref.xht" />

        <meta name="flags" content="image" />
        <meta name="assert" content="The 'height' is the used width divided by the intrinsic ratio when an absolutely positioned inline replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified." />
        <style type="text/css">
            div
            {
                position: relative;
            }
            div div
            {
                background: blue;
                height: 100px;
                left: 100px;
                position: absolute;
                top: 0;
            }
            img
            {
                height: auto;
                position: absolute;
            }
            div div, img
            {
                width: 100px;
            }
        </style>
    </head>
    <body>
		<p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p>
        <div>
            <img alt="Image download support must be enabled" src="support/swatch-orange.png" />
            <div></div>
        </div>
    </body>
</html>

/css/CSS2/positioning/absolute-non-replaced-height-007-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
  {
  height: 100px;
  width: 100px;
  }
  ]]></style>

 </head>

 <body>

  <p>Test passes if the orange and blue squares have the <strong>same height</strong>.</p>

  <div><img src="support/swatch-orange.png" alt="Image download support must be enabled" /><img src="support/blue15x15.png" alt="Image download support must be enabled" /></div>

 </body>
</html>