layout/reftests/first-letter/font-text-styles.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <head>
   4 <title>Testing first-letter handling of font/text styles</title>
   5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   6
   7 <style type="text/css">
   8 html { overflow: hidden; }
   9 body {
  10   margin: 1em;
  11   font-size: 25px;
  12   line-height: 1.2em;
  13   font-family: serif;
  14 }
  15
  16 div { width: 200px; }
  17 p { width: 0.5em; margin: 0; }
  18 p:first-letter { font-weight: bold; text-transform: uppercase; }
  19 p.reverse:first-letter { font-style: italic; text-transform: lowercase; }
  20 span.floater { float: left; }
  21 span.floater:first-letter { font-family: sans-serif; text-transform: uppercase; }
  22 span.special { display: inline-block; }
  23 span.special:first-letter { font-weight: bold; text-transform: uppercase; }
  24 </style>
  25
  26 </head>
  27 <body>
  28 <div>
  29 <p>yellow corndog</p>
  30 <p class="reverse">HIPPIE BANANA</p>
  31 <p><span class="floater">gonzo macadamia</span></p>
  32 <p class="reverse">FELICITOUS <span class="special">raspberry</span></p>
  33 </div>
  34 </body>
  35 </html>