| layer at (0,0) size 800x888 |
| RenderView at (0,0) size 800x600 |
| layer at (0,0) size 800x888 |
| RenderBlock {HTML} at (0,0) size 800x888 |
| RenderBody {BODY} at (8,18) size 784x845 |
| RenderBlock {H1} at (0,0) size 784x76 |
| RenderText {#text} at (0,0) size 763x76 |
| text run at (0,0) width 763: "Problem: Safari improperly handles generated content in" |
| text run at (0,38) width 693: "certain cases when used with multiple class names" |
| RenderBlock {P} at (0,94) size 784x40 |
| RenderInline {EM} at (0,0) size 759x39 |
| RenderText {#text} at (0,0) size 759x39 |
| text run at (0,0) width 759: "When referencing an element by two class names simultaneously, Safari won't generate content (using :before or :after)" |
| text run at (0,20) width 119: "within the element." |
| RenderBlock {P} at (0,148) size 784x39 |
| RenderText {#text} at (0,1) size 124x19 |
| text run at (0,1) width 124: "Assume we have a " |
| RenderInline {CODE} at (0,0) size 24x20 |
| RenderText {#text} at (124,0) size 24x20 |
| text run at (124,0) width 24: "div" |
| RenderText {#text} at (148,1) size 146x19 |
| text run at (148,1) width 146: " with two class names: " |
| RenderInline {CODE} at (0,0) size 24x20 |
| RenderText {#text} at (294,0) size 24x20 |
| text run at (294,0) width 24: "box" |
| RenderText {#text} at (318,1) size 32x19 |
| text run at (318,1) width 32: " and " |
| RenderInline {CODE} at (0,0) size 24x20 |
| RenderText {#text} at (350,0) size 24x20 |
| text run at (350,0) width 24: "one" |
| RenderText {#text} at (374,1) size 79x19 |
| text run at (374,1) width 79: ". Within that " |
| RenderInline {CODE} at (0,0) size 24x20 |
| RenderText {#text} at (453,0) size 24x20 |
| text run at (453,0) width 24: "div" |
| RenderText {#text} at (477,1) size 77x19 |
| text run at (477,1) width 77: ", we have a " |
| RenderInline {CODE} at (0,0) size 8x20 |
| RenderText {#text} at (554,0) size 8x20 |
| text run at (554,0) width 8: "p" |
| RenderText {#text} at (562,1) size 776x38 |
| text run at (562,1) width 214: " (paragraph) tag, after which we'd" |
| text run at (0,20) width 463: "like to insert generated content. One way to do so would be the following:" |
| RenderBlock {PRE} at (20,201) size 764x21 [color=#FF0000] |
| RenderInline {CODE} at (0,0) size 456x20 |
| RenderText {#text} at (0,0) size 456x20 |
| text run at (0,0) width 456: "div.box.one p:after{ content:'generated content here!'; }" |
| RenderBlock {P} at (0,236) size 784x19 |
| RenderText {#text} at (0,0) size 729x19 |
| text run at (0,0) width 729: "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,269) size 764x21 [color=#008000] |
| RenderInline {CODE} at (0,0) size 424x20 |
| RenderText {#text} at (0,0) size 424x20 |
| text run at (0,0) width 424: "div.box p:after{ content:'generated content here!'; }" |
| RenderBlock {P} at (0,304) size 784x40 |
| RenderText {#text} at (0,0) size 290x19 |
| text run at (0,0) width 290: "Note also that the bug only applies to content " |
| RenderInline {EM} at (0,0) size 36x19 |
| RenderText {#text} at (290,0) size 36x19 |
| text run at (290,0) width 36: "within" |
| RenderText {#text} at (326,0) size 276x19 |
| text run at (326,0) width 276: " the classed element \x{2014} generating content " |
| RenderInline {EM} at (0,0) size 772x39 |
| RenderText {#text} at (602,0) size 772x39 |
| text run at (602,0) width 170: "before or after the element" |
| text run at (0,20) width 29: "itself" |
| RenderText {#text} at (29,20) size 72x19 |
| text run at (29,20) width 72: " works fine:" |
| RenderBlock {PRE} at (20,358) size 764x21 [color=#008000] |
| RenderInline {CODE} at (0,0) size 440x20 |
| RenderText {#text} at (0,0) size 440x20 |
| text run at (0,0) width 440: "div.box.one:after{ content:'generated content here!'; }" |
| RenderBlock {HR} at (0,393) size 784x2 [border: (1px inset #000000)] |
| RenderBlock {H2} at (0,412) size 784x29 |
| RenderText {#text} at (0,0) size 463x29 |
| text run at (0,0) width 463: "Example (view source to see CSS and HTML):" |
| RenderBlock {P} at (0,458) size 784x19 |
| RenderText {#text} at (0,0) size 337x19 |
| text run at (0,0) width 337: "Both boxes below should contain generated content (" |
| RenderInline {SPAN} at (0,0) size 52x19 [color=#008000] |
| RenderText {#text} at (337,0) size 52x19 |
| text run at (337,0) width 52: "in green" |
| RenderText {#text} at (389,0) size 9x19 |
| text run at (389,0) width 9: "):" |
| RenderBlock {DIV} at (0,502) size 784x159 [border: (1px solid #000000)] |
| RenderBlock {H3} at (26,42) size 732x23 |
| RenderText {#text} at (0,0) size 44x22 |
| text run at (0,0) width 44: "Box 1" |
| RenderBlock {P} at (26,81) size 732x38 |
| RenderBlock (anonymous) at (0,0) size 732x19 |
| RenderText {#text} at (0,0) size 645x19 |
| text run at (0,0) width 645: "This box should contain the text \"generated content\" in CSS2-compliant browsers (but won't in Safari)." |
| RenderBlock (generated) at (0,19) size 732x19 [color=#008000] |
| RenderText at (0,0) size 116x19 |
| text run at (0,0) width 116: "generated content" |
| RenderBlock {DIV} at (0,686) size 784x159 [border: (1px solid #000000)] |
| RenderBlock {H3} at (26,42) size 732x23 |
| RenderText {#text} at (0,0) size 44x22 |
| text run at (0,0) width 44: "Box 2" |
| RenderBlock {P} at (26,81) size 732x38 |
| RenderBlock (anonymous) at (0,0) size 732x19 |
| RenderText {#text} at (0,0) size 623x19 |
| text run at (0,0) width 623: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari." |
| RenderBlock (generated) at (0,19) size 732x19 [color=#008000] |
| RenderText at (0,0) size 116x19 |
| text run at (0,0) width 116: "generated content" |
