| layer at (0,0) size 800x914 |
| RenderView at (0,0) size 800x600 |
| layer at (0,0) size 800x914 |
| RenderBlock {HTML} at (0,0) size 800x914 |
| RenderBody {BODY} at (8,21) size 784x868 |
| RenderBlock {H1} at (0,0) size 784x76 |
| RenderText {#text} at (0,1) size 781x74 |
| text run at (0,1) width 781: "Problem: Safari improperly handles generated content in" |
| text run at (0,39) width 682: "certain cases when used with multiple class names" |
| RenderBlock {P} at (0,97) size 784x41 |
| RenderInline {EM} at (0,0) size 767x39 |
| RenderText {#text} at (0,0) size 767x39 |
| text run at (0,0) width 767: "When referencing an element by two class names simultaneously, Safari won't generate content (using :before or :after)" |
| text run at (0,20) width 122: "within the element." |
| RenderBlock {P} at (0,153) size 784x41 |
| RenderText {#text} at (0,0) size 124x19 |
| text run at (0,0) width 124: "Assume we have a " |
| RenderInline {CODE} at (0,0) size 24x14 |
| RenderText {#text} at (123,5) size 24x14 |
| text run at (123,5) width 24: "div" |
| RenderText {#text} at (146,0) size 150x19 |
| text run at (146,0) width 150: " with two class names: " |
| RenderInline {CODE} at (0,0) size 25x14 |
| RenderText {#text} at (295,5) size 25x14 |
| text run at (295,5) width 25: "box" |
| RenderText {#text} at (319,0) size 32x19 |
| text run at (319,0) width 32: " and " |
| RenderInline {CODE} at (0,0) size 24x14 |
| RenderText {#text} at (350,5) size 24x14 |
| text run at (350,5) width 24: "one" |
| RenderText {#text} at (373,0) size 85x19 |
| text run at (373,0) width 85: ". Within that " |
| RenderInline {CODE} at (0,0) size 24x14 |
| RenderText {#text} at (457,5) size 24x14 |
| text run at (457,5) width 24: "div" |
| RenderText {#text} at (480,0) size 77x19 |
| text run at (480,0) width 77: ", we have a " |
| RenderInline {CODE} at (0,0) size 9x14 |
| RenderText {#text} at (556,5) size 9x14 |
| text run at (556,5) width 9: "p" |
| RenderText {#text} at (564,0) size 781x39 |
| text run at (564,0) width 217: " (paragraph) tag, after which we'd" |
| text run at (0,20) width 475: "like to insert generated content. One way to do so would be the following:" |
| RenderBlock {PRE} at (20,209) size 764x15 [color=#FF0000] |
| RenderInline {CODE} at (0,0) size 445x14 |
| RenderText {#text} at (0,0) size 445x14 |
| text run at (0,0) width 445: "div.box.one p:after{ content:'generated content here!'; }" |
| RenderBlock {P} at (0,239) size 784x21 |
| RenderText {#text} at (0,0) size 741x19 |
| text run at (0,0) width 741: "But that doesn't work in Safari. However, if you drop one of the class names, as shown below, it works as expected:" |
| RenderBlock {PRE} at (20,275) size 764x15 [color=#008000] |
| RenderInline {CODE} at (0,0) size 414x14 |
| RenderText {#text} at (0,0) size 414x14 |
| text run at (0,0) width 414: "div.box p:after{ content:'generated content here!'; }" |
| RenderBlock {P} at (0,305) size 784x41 |
| RenderText {#text} at (0,0) size 294x19 |
| text run at (0,0) width 294: "Note also that the bug only applies to content " |
| RenderInline {EM} at (0,0) size 41x19 |
| RenderText {#text} at (293,0) size 41x19 |
| text run at (293,0) width 41: "within" |
| RenderText {#text} at (333,0) size 276x19 |
| text run at (333,0) width 276: " the classed element \x{2014} generating content " |
| RenderInline {EM} at (0,0) size 779x39 |
| RenderText {#text} at (608,0) size 779x39 |
| text run at (608,0) width 171: "before or after the element" |
| text run at (0,20) width 32: "itself" |
| RenderText {#text} at (31,20) size 77x19 |
| text run at (31,20) width 77: " works fine:" |
| RenderBlock {PRE} at (20,361) size 764x15 [color=#008000] |
| RenderInline {CODE} at (0,0) size 430x14 |
| RenderText {#text} at (0,0) size 430x14 |
| text run at (0,0) width 430: "div.box.one:after{ content:'generated content here!'; }" |
| RenderBlock {HR} at (0,388) size 784x3 [border: (1px inset #000000)] |
| RenderBlock {H2} at (0,410) size 784x31 |
| RenderText {#text} at (0,1) size 477x28 |
| text run at (0,1) width 477: "Example (view source to see CSS and HTML):" |
| RenderBlock {P} at (0,460) size 784x21 |
| RenderText {#text} at (0,0) size 340x19 |
| text run at (0,0) width 340: "Both boxes below should contain generated content (" |
| RenderInline {SPAN} at (0,0) size 53x19 [color=#008000] |
| RenderText {#text} at (339,0) size 53x19 |
| text run at (339,0) width 53: "in green" |
| RenderText {#text} at (391,0) size 11x19 |
| text run at (391,0) width 11: "):" |
| RenderBlock {DIV} at (0,505) size 784x169 [border: (1px solid #000000)] |
| RenderBlock {H3} at (26,44) size 732x24 |
| RenderText {#text} at (0,0) size 46x22 |
| text run at (0,0) width 46: "Box 1" |
| RenderBlock {P} at (26,86) size 732x41 |
| RenderBlock (anonymous) at (0,0) size 732x20 |
| RenderText {#text} at (0,0) size 661x19 |
| text run at (0,0) width 661: "This box should contain the text \"generated content\" in CSS2-compliant browsers (but won't in Safari)." |
| RenderBlock (generated) at (0,20) size 732x20 [color=#008000] |
| RenderText at (0,0) size 114x19 |
| text run at (0,0) width 114: "generated content" |
| RenderBlock {DIV} at (0,698) size 784x170 [border: (1px solid #000000)] |
| RenderBlock {H3} at (26,44) size 732x24 |
| RenderText {#text} at (0,0) size 46x22 |
| text run at (0,0) width 46: "Box 2" |
| RenderBlock {P} at (26,86) size 732x41 |
| RenderBlock (anonymous) at (0,0) size 732x20 |
| RenderText {#text} at (0,0) size 639x19 |
| text run at (0,0) width 639: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari." |
| RenderBlock (generated) at (0,20) size 732x20 [color=#008000] |
| RenderText at (0,0) size 114x19 |
| text run at (0,0) width 114: "generated content" |
