fast/css-generated-content/014.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Safari CSS2 :after test</title>
	<style type="text/css">
	/* the following styles are for general layout purposes;
	   they are not required for the purposes of this example */
	div.box{
	   border:1px solid #000;
	   margin:25px 0;
	   padding:25px;
	}
	code{
	   font-weight:bold;
	}
	pre{
	   margin-left:20px;
	}
	pre.error{
	   color:red;
	}
	pre.ok{
	   color:green;
	}
	</style>
</head>
<body>
<h1>Problem: Safari improperly handles generated content in certain cases when used with multiple class names</h1>
<p><em>When referencing an element by two class names simultaneously, Safari won't generate content (using :before or :after) within the element.</em></p>
<p>Assume we have a <code>div</code> with two class names: <code>box</code> and <code>one</code>. Within that <code>div</code>, we have a <code>p</code> (paragraph) tag, after which we'd like to insert generated content. One way to do so would be the following:</p>
<pre class="error"><code>div.box.one p:after{ content:'generated content here!'; }</code></pre>
<p>But that doesn't work in Safari. However, if you drop one of the class names, as shown below, it works as expected:</p>
<pre class="ok"><code>div.box p:after{ content:'generated content here!'; }</code></pre>
<p>Note also that the bug only applies to content <em>within</em> the classed element &mdash; generating content <em>before or after the element itself</em> works fine:</p>
<pre class="ok"><code>div.box.one:after{ content:'generated content here!'; }</code></pre>

<hr />

<!-- all code necessary for the example, including CSS, is below: -->

<h2>Example (view source to see CSS and HTML):</h2>
<style type="text/css">
    div.box.one p:after{
        content:'generated content';
        color:green;
        display:block;
    }
    div.two p:after{
        content:'generated content';
        color:green;
        display:block;
    }
</style>

<p>Both boxes below should contain generated content (<span style="color:green;">in green</span>):</p>

<div class="box one">
    <h3>Box 1</h3>
    <p>This box should contain the text "generated content" in CSS2-compliant browsers (but won't in Safari).</p>
</div>

<div class="box two">
    <h3>Box 2</h3>
    <p>This box should contain the text "generated content" in CSS2-compliant browsers, including Safari.</p>
</div>

<!-- end example -->

</body>
</html>