third_party/WebKit/LayoutTests/fast/css/first-line-style-for-before-after-content.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 p {
   6     width: 200px;
   7 }
   8 p.before:before {
   9     content: 'The first line';
  10 }
  11 p.after:after {
  12     content: 'in green color.';
  13 }
  14 span.before:before {
  15     content: 'The first line';
  16 }
  17 span.after:after {
  18     content: 'in green color.';
  19 }
  20 p:first-line {
  21     color: green;
  22 }
  23 p:first-letter {
  24     color: blue;
  25 }
  26 </style>
  27 </head>
  28 <body>
  29     <div>Test for Bugzilla <a href="https://bugs.webkit.org/show_bug.cgi?id=80794">Bug 80794</a>: :first-line pseudo selector ignoring words created from :before.</div>
  30     <div>The :first-line pseudo-element style is not applied to content generated from :before/:after pseudo-elements.</div>
  31     <br>
  32
  33     <div>In the following paragraph the first-letter should be displayed in blue color and the first-line in green color including the words 'The first line'. This test verifies the behavior with :before style specified on a block flow element.</div>
  34     <p class="before"> of this paragraph should be displayed in green color.</p>
  35
  36     <div>In the following paragraph the first-letter should be displayed in blue color and the first-line in green color including the words 'The first line'. This test verifies the behavior with :before style specified on an inline element.</div>
  37     <p><span class="before"> of this paragraph should be displayed in green color.</span></p>
  38
  39     <div>In the following paragraph the first-letter should be displayed in blue color and the first-line in green color including the words 'in green color.'. This test verifies the behavior with :after style specified on a block flow element.</div>
  40     <p class="after">Display </p>
  41
  42     <div>In the following paragraph the first-letter should be displayed in blue color and the first-line in green color including the words 'in green color.'. This test verifies the behavior with :after style specified on an inline element.</div>
  43     <p><span class="after">Display </span></p>
  44 </body>
  45 </html>
  46