Blitz - WPT: absolute-replaced-height-016.xht

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

/css/CSS2/positioning/absolute-replaced-height-016.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 relying on intrinsic height dimensions and 'top', 'bottom' are not '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-09-01 -->
        <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#abs-replaced-height" />
		<link rel="match" href="absolute-replaced-height-008-ref.xht" />

        <meta name="flags" content="image" />
        <meta name="assert" content="The 'height' is the intrinsic height when an absolutely positioned inline replaced element has an intrinsic height and its height is specified as 'auto', 'width' is specified 'auto' and 'top', 'bottom' are not 'auto'." />
        <style type="text/css">
            #div1
            {
                border-top: solid black;
                position: relative;
            }
            div div
            {
                background: blue;
                height: 15px;
                left: 15px;
                position: absolute;
                top: 1in;
                width: 15px;
            }
            img
            {
                bottom: 1in;
                /*
                The equation gets overconstrained; and so, the used value for
                bottom in that test will be ignored and will be solved
                as minus (1in + 15px)  (-111px) because the height of
                containing block is 0.
                */
                height: auto;
                position: absolute;
                top: 1in;
                width: auto;
            }
        </style>
    </head>
    <body>
        <p>Test passes if there is a short blue bar and it does not touch the black line.</p>
        <div id="div1">
            <img alt="blue 15x15" src="support/blue15x15.png" />
            <div></div>
        </div>
    </body>
</html>

/css/CSS2/positioning/absolute-replaced-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[
  div
  {
  border-top: black solid medium;
  margin-bottom: 96px;
  }

  div + div
  {
  background-color: blue;
  border-top: none 0px;
  height: 15px;
  width: 30px;
  }
  ]]></style>

 </head>

 <body>

  <p>Test passes if there is a short blue bar and it does not touch the black line.</p>

  <div></div>

  <div></div>

 </body>
</html>