layout/reftests/list-item/bullet-space-1-ref.html

   1 <!DOCTYPE html>
   2 <html>
   3
   4 <head>
   5  <meta charset="utf-8">
   6  <title>Bug 1017335</title>
   7  <style>
   8   body {
   9     font-family:monospace;
  10     font-size:24px;
  11   }
  12   .outer {
  13     position:absolute;
  14     top:0;
  15     width:300px;
  16   }
  17   ul {
  18     margin:0;
  19     list-style-type:none;
  20   }
  21   span {
  22     display:inline-block;
  23   }
  24   .L {
  25     width:40px;
  26     text-align:right;
  27     white-space: pre;
  28   }
  29   .R {
  30     width:40px;
  31     text-align:left;
  32     white-space: pre;
  33   }
  34   .bullet {
  35     background:yellow;
  36   }
  37   ::marker { font-family:inherit; }
  38  </style>
  39 </head>
  40
  41 <body>
  42
  43 <div class="outer">
  44 <div>
  45  <ul>
  46   <li>foo</li>
  47  </ul>
  48 </div>
  49
  50 <div dir="rtl">
  51  <ul>
  52   <li>bar</li>
  53  </ul>
  54 </div>
  55 </div>
  56
  57 <!-- The yellow background of the bullet spans here should completely cover the
  58      bullets from the <ul> items above, even though the exact positioning of the
  59      list item images may not match the plain-text version of the bullets.
  60      Therefore, the testcase (with list-style-type:disc) and reference (none)
  61      should match. -->
  62 <div class="outer">
  63 <div>
  64  <span class="L"><span class="bullet">&#x2022;</span> </span>foo
  65 </div>
  66
  67 <div dir="rtl">
  68  <span class="R"><span class="bullet">&#x2022;</span> </span>bar
  69 </div>
  70 </div>
  71
  72 </body>
  73
  74 </html>