third_party/WebKit/LayoutTests/fast/css/first-line-text-decoration.html

   1 <head>
   2          <title>CSS Test: Text Decoration with first-line pseudo element</title>
   3         <link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo">
   4         <style type="text/css">
   5             #div1:first-line
   6             {
   7                 font: 24px sans-serif;
   8                 color: gray;
   9                 letter-spacing: 5px;
  10                 text-decoration: underline;
  11                 line-height: 48px;
  12             }
  13             #div2:first-line
  14             {
  15                 font: 24px sans-serif;
  16                 color: gray;
  17                 letter-spacing: 5px;
  18                 text-decoration: overline;
  19                 line-height: 48px;
  20             }
  21             #div3:first-line
  22             {
  23                 font: 24px sans-serif;
  24                 color: gray;
  25                 letter-spacing: 5px;
  26                 text-decoration: line-through;
  27                 line-height: 48px;
  28             }
  29             div {
  30                 color: green;
  31             }
  32             p {
  33                 font-weight:bold;
  34             }
  35
  36         </style>
  37 </head>
  38 <body>
  39         <h2>Test case for First-line text-decoration style</h2>
  40
  41         <p> Text-decoration UNDERLINE : Only the first line must have an underline.
  42         <div id="div1">Underline Underline Underline Underline<br> Underline Underline Underline Underline<br> Underline Underline Underline Underline </div>
  43         <br>
  44         </p>
  45         <p> Text-decoration OVERLINE : Only the first line must have an overline.
  46         <div id="div2">Overline Overline Overline Overline<br> Overline Overline Overline Overline<br> Overline Overline Overline Overline </div>
  47         <br>
  48         </p>
  49         <p> Text-decoration LINE-THROUGH : Only the first line must have a line through it.
  50         <div id="div3">Line-Through Line-Through Line-Through Line <br> Line-Through Line-Through Line-Through Line-Through<br> Line-Through Line-Through Line-Through Line-Through </div>
  51         <br>
  52         </p>
  53 </body>