Blitz - WPT: margin-004.xht

wpt / css / CSS2 / margin-padding-clear / margin-004.xht

/css/CSS2/margin-padding-clear/margin-004.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: Margin set to using four values</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-13 -->
        <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#propdef-margin" />
        <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" />
        <link rel="match" href="margin-004-ref.xht" />

        <meta name="assert" content="The 'margin' property set using three values properly assigns the first value to the top margin, the second value to the left margin, the third value to the bottom margin, and the fourth value to the right margin." />
        <style type="text/css">
            #wrapper
            {
                position: relative;
            }
            #div1, #div2
            {
                border: 10px solid green;
            }
            #div1, #reference
            {
                left: 0;
                position: absolute;
                top: 0;
            }
            #div2
            {
                margin: 2.54cm 0.25in 144pt 12.7mm;
                height: 1in;
                width: 3in;
            }
            #reference
            {
                border: 10px solid red;
                height: 404px;
                width: 380px;
            }
        </style>
    </head>
    <body>
        <p>Test passes if there is <strong>no red</strong>.</p>
        <div id="wrapper">
            <div id="reference"></div>
            <div id="div1">
                <div id="div2"></div>
            </div>
        </div>
    </body>
</html>

/css/CSS2/margin-padding-clear/margin-004-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: green solid 10px;}

  div#inline-block
  {
  padding: 96px 24px 192px 48px;
  width: 308px;
  }

  div#block {padding: 48px 144px;}
  ]]></style>

 </head>

 <body>

  <p>Test passes if there is <strong>no red</strong>.</p>

  <div id="inline-block">
    <div id="block"></div>
  </div>

 </body>
</html>