layout/reftests/box-properties/CSS21-t100301.xhtml

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3         <head>
   4                 <title>CSS 2.1 Test Suite: Inline, non-replaced elements</title>
   5                 <link rel="author" title="L. David Baron" href="https://dbaron.org/" />
   6                 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
   7                 <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-width" />
   8                 <meta name="flags" content="ahem" />
   9                 <style type="text/css"><![CDATA[
  10
  11                 @font-face {
  12                         src: url(../fonts/Ahem.ttf);
  13                         font-family: Ahem;
  14         }
  15
  16                 html { background: white; }
  17
  18                 body {
  19                         width: 100px; height: 100px;
  20                         border: 10px solid lime; background: red;
  21             font: 20px/1 Ahem;
  22                 }
  23
  24                 span { background: red; color: green; }
  25
  26                 .X::before, .space::before { background:green; color:transparent; }
  27                 .X::before { content:"X"; }
  28                 .space::before { content:" "; }
  29
  30                 ]]></style>
  31         </head>
  32         <body>
  33
  34         <!-- First row -->
  35         <!-- The width property does not apply -->
  36         <!-- check padding-left and border-right too -->
  37         <span style="width: 1px"><span class="X"></span></span
  38         ><span style="width: 200px"><span class="X"></span></span
  39         ><span style="width: 10px; padding-left: 10px;background:green"><span class="X"></span></span
  40         ><span style="border-right: 10px solid green; width: 40px"><span class="X"></span></span>
  41
  42         <!-- Second row -->
  43         <!-- auto values for margin-left and margin-right are zero -->
  44         <span style="background:green"
  45                 ><span style="margin-right: auto"><span class="X"></span></span
  46                 ><span style="margin-left: 5px"><span class="X"></span></span
  47                 ><span style="margin-left:auto;background:green"><span class="space"></span></span
  48                 ><span style="margin-right: 15px"><span class="X"></span></span
  49         ></span>
  50
  51         <!-- Third row -->
  52         <!-- auto values for left and right are 0, and other values don't
  53              do anything either, unless we have position:relative -->
  54         <span style="left: auto"><span class="X"></span></span
  55         ><span style="left:8px"><span class="X"></span></span
  56         ><span style="right:73px"><span class="X"></span></span
  57         ><span style="right:auto"><span class="X"></span></span
  58         ><span style="background:transparent;color:red"><span class="X"></span><span style="position:relative;right:20px"><span class="X"></span></span></span>
  59
  60         <!-- Fourth row -->
  61         <!-- toss in some negative and adjacent margins -->
  62         <span style="margin-right: -5px;color:red;background:red"><span class="X"></span></span
  63         ><span style="margin-left: -15px"><span class="X"></span></span
  64         ><span style="background:green"
  65                 ><span style="margin-right:25px"><span class="X"></span></span
  66                 ><span style="margin-left: 15px"><span class="X"></span></span
  67         ></span>
  68
  69         <!-- Fifth row -->
  70         <!-- border and padding and margin -->
  71         <span style="margin-left:15px; margin-right:348px"
  72                 ><span style="background: green; margin-left:-15px; border-left: 15px solid; padding-left: 25px;padding-right: 8px;border-right:32px solid;"><span class="X"></span></span
  73         ></span>
  74
  75         </body>
  76 </html>