third_party/WebKit/LayoutTests/fast/block/positioning/047.html

   1 <html>
   2 <head>
   3 <title>test page</title>
   4
   5 <style type="text/css">
   6
   7 DIV.test {
   8         position: relative;
   9         font-family: Georgia;
  10         font-size: 16pt;
  11         line-height: 22pt;
  12         width: 24em;
  13 }
  14
  15 SPAN.margin {
  16         position: absolute;
  17         font-family: "Comic Sans MS";
  18         font-size: 10pt;
  19         line-height: 12pt;
  20         width: 15em;
  21         right: -17em;
  22 }
  23
  24 </style>
  25
  26 </head>
  27 <body>
  28
  29 <div class="test">
  30
  31 <h2>Bug 1</h2>
  32
  33 <p>Safari public beta does not support CSS absolute positioning
  34 correctly (if at all). Immediately following the text position marked
  35 by the dagger, there is a &lt;span&gt element that is positioned to
  36 the right of the &lt;div&gt; block that contains this
  37 paragraph&dagger;<span class="margin">&larr; this should be to the
  38 right of the paragraph, lining up with the dagger</span>. In IE 5.x,
  39 Mozilla 1.2, and Chimera 0.6+, the contents of the &lt;span&gt;
  40 element appears in the margin directly to the right of the dagger.</p>
  41
  42 <p>I should note that Chimera 0.6 rendered this test with the
  43 marginal note shifted down by one line; this has been fixed in
  44 subsequent builds.</p>
  45
  46 <h2>Bug 2</h2>
  47 <p style="font-size: 10pt">Fonts also render substantially smaller
  48 than other browsers, which is not a good thing when you consider that
  49 most sites specify fonts that are too small in the first place.</p>
  50
  51 <p>At the very least, the preferences panel needs a default
  52 text-zoom setting to enable compatibility with other browsers.</p>
  53
  54 <h2>Bug 3</h2>
  55 <p>Worse, <i>the "make text bigger" button does not scale line-height
  56 when it scales font-size</i> (hit it a few times on this page). This
  57 is a crippling flaw for people who need to enlarge the fonts to read
  58 comfortably.</p>
  59
  60 </div>
  61 </body>
  62 </html>