blob: 77a8737765b43bc64afe15d593593d461b1fd6d1 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 200px;
}
p.before:before {
content: 'The first line';
}
p.after:after {
content: 'in green color.';
}
span.before:before {
content: 'The first line';
}
span.after:after {
content: 'in green color.';
}
p:first-line {
color: green;
}
p:first-letter {
color: blue;
}
</style>
</head>
<body>
<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>
<div>The :first-line pseudo-element style is not applied to content generated from :before/:after pseudo-elements.</div>
<br>
<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>
<p class="before"> of this paragraph should be displayed in green color.</p>
<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>
<p><span class="before"> of this paragraph should be displayed in green color.</span></p>
<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>
<p class="after">Display </p>
<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>
<p><span class="after">Display </span></p>
</body>
</html>