wpt / css / CSS2 / linebox / inline-box-001.xht

Status: FAIL | Duration: 14ms | Subtests: 0/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/CSS2/linebox/inline-box-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: Inline box containing block boxes</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-04-04 -->
        <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" />
        <link rel="match" href="inline-box-001-ref.xht" />

        <meta name="assert" content="Inline boxes that contain block boxes will break up the inline content around the block box." />
        <style type="text/css">
            #div1
            {
                border: 2px solid blue;
                display: inline;
            }
            div div
            {
                background: orange;
                width: 2in;
            }
        </style>
    </head>
    <body>
        <p>Test passes if there are blue borders around the top, left and bottom but not the right side of the text "First line", and borders around the top, right, bottom but not the left of the text "Last line".</p>
        <div id="div1">
            First line
            <div>Filler Text</div>
            Last line
        </div>
    </body>
</html>

/css/CSS2/linebox/inline-box-001-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 {width: 192px;}

  span {border-color: blue;}

  span#top
  {
  border-style: solid none solid solid;
  border-width: 2px 0px 2px 2px;
  }

  div#middle {background-color: orange;}

  span#bottom
  {
  border-style: solid solid solid none;
  border-width: 2px 2px 2px 0px;
  }
  ]]></style>

 </head>

 <body>

  <p>Test passes if there are blue borders around the top, left and bottom but not the right side of the text "First line", and borders around the top, right, bottom but not the left of the text "Last line".</p>

  <div><span id="top">First line</span></div>
  <div id="middle">Filler Text</div>
  <div><span id="bottom">Last line</span></div>

 </body>
</html>