third_party/WebKit/LayoutTests/fast/css-generated-content/014.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   4 <head>
   5         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   6         <title>Safari CSS2 :after test</title>
   7         <style type="text/css">
   8         /* the following styles are for general layout purposes;
   9            they are not required for the purposes of this example */
  10         div.box{
  11            border:1px solid #000;
  12            margin:25px 0;
  13            padding:25px;
  14         }
  15         code{
  16            font-weight:bold;
  17         }
  18         pre{
  19            margin-left:20px;
  20         }
  21         pre.error{
  22            color:red;
  23         }
  24         pre.ok{
  25            color:green;
  26         }
  27         </style>
  28 </head>
  29 <body>
  30 <h1>Problem: Safari improperly handles generated content in certain cases when used with multiple class names</h1>
  31 <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>
  32 <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>
  33 <pre class="error"><code>div.box.one p:after{ content:'generated content here!'; }</code></pre>
  34 <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>
  35 <pre class="ok"><code>div.box p:after{ content:'generated content here!'; }</code></pre>
  36 <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>
  37 <pre class="ok"><code>div.box.one:after{ content:'generated content here!'; }</code></pre>
  38
  39 <hr />
  40
  41 <!-- all code necessary for the example, including CSS, is below: -->
  42
  43 <h2>Example (view source to see CSS and HTML):</h2>
  44 <style type="text/css">
  45     div.box.one p:after{
  46         content:'generated content';
  47         color:green;
  48         display:block;
  49     }
  50     div.two p:after{
  51         content:'generated content';
  52         color:green;
  53         display:block;
  54     }
  55 </style>
  56
  57 <p>Both boxes below should contain generated content (<span style="color:green;">in green</span>):</p>
  58
  59 <div class="box one">
  60     <h3>Box 1</h3>
  61     <p>This box should contain the text "generated content" in CSS2-compliant browsers (but won't in Safari).</p>
  62 </div>
  63
  64 <div class="box two">
  65     <h3>Box 2</h3>
  66     <p>This box should contain the text "generated content" in CSS2-compliant browsers, including Safari.</p>
  67 </div>
  68
  69 <!-- end example -->
  70
  71 </body>
  72 </html>