testing/web-platform/tests/css/CSS2/margin-padding-clear/margin-collapse-106.xht

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4   <title>CSS Test: Margin Collapsing: in flow (simple)</title>
   5   <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
   6   <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-08-15 -->
   7   <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/006.html" type="text/html"/>
   8   <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/>
   9   <link rel="match" href="margin-collapse-106-ref.xht" />
  10
  11   <meta name="flags" content="ahem" />
  12
  13   <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
  14   <style type="text/css">
  15    table { border-spacing: 0; font: 50px/1 Ahem; border: solid 3px; background: red; }
  16    td { padding: 0; }
  17    /* test */
  18    .test { background: orange; }
  19    .test div { margin: 1em 0; background: red; }
  20    .test .a { color: yellow; }
  21    .test .b { color: lime; }
  22    /* control */
  23    .control div { width: 1em; }
  24    .control .c { border-top: 1em orange solid; }
  25    .control .a { border-top: 1em yellow solid; }
  26    .control .b { border-top: 1em lime solid; }
  27    /* control control */
  28    .red { background: red; height: 1em; width: 10em; border: solid; }
  29    .orange { border-top: 1em orange solid; }
  30   </style>
  31  </head>
  32  <body>
  33   <p>Test passes if there is a stack of 5 bands which are <strong>from top to bottom: orange, yellow, orange, lime, orange</strong> and with no red.</p>
  34   <table>
  35    <tr>
  36     <td class="test">
  37      <div class="a">X</div>
  38      <div class="b">X</div>
  39     </td>
  40     <td class="control">
  41      <div class="c"></div>
  42      <div class="a"></div>
  43      <div class="c"></div>
  44      <div class="b"></div>
  45      <div class="c"></div>
  46     </td>
  47    </tr>
  48   </table>
  49
  50 </body>
  51 </html>