:first-line pseudo selector ignoring words created from :before
[WebKit-https.git] / 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