| layer at (0,0) size 800x600 clip at (0,0) size 785x600 scrollHeight 915 |
| LayoutView at (0,0) size 800x600 |
| layer at (0,0) size 785x915 backgroundClip at (0,0) size 785x600 clip at (0,0) size 785x600 |
| LayoutBlockFlow {HTML} at (0,0) size 785x914.56 |
| LayoutBlockFlow {BODY} at (8,21.44) size 769x868.13 |
| LayoutBlockFlow {H1} at (0,0) size 769x74 |
| LayoutText {#text} at (0,0) size 750x73 |
| text run at (0,0) width 750: "Problem: Safari improperly handles generated content" |
| text run at (0,37) width 716: "in certain cases when used with multiple class names" |
| LayoutBlockFlow {P} at (0,95.44) size 769x40 |
| LayoutInline {EM} at (0,0) size 767x39 |
| LayoutText {#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." |
| LayoutBlockFlow {P} at (0,151.44) size 769x40 |
| LayoutText {#text} at (0,0) size 117x19 |
| text run at (0,0) width 117: "Assume we have a " |
| LayoutInline {CODE} at (0,0) size 24x16 |
| LayoutText {#text} at (117,3) size 24x16 |
| text run at (117,3) width 24: "div" |
| LayoutText {#text} at (141,0) size 138x19 |
| text run at (141,0) width 138: " with two class names: " |
| LayoutInline {CODE} at (0,0) size 24x16 |
| LayoutText {#text} at (279,3) size 24x16 |
| text run at (279,3) width 24: "box" |
| LayoutText {#text} at (303,0) size 30x19 |
| text run at (303,0) width 30: " and " |
| LayoutInline {CODE} at (0,0) size 24x16 |
| LayoutText {#text} at (333,3) size 24x16 |
| text run at (333,3) width 24: "one" |
| LayoutText {#text} at (357,0) size 77x19 |
| text run at (357,0) width 77: ". Within that " |
| LayoutInline {CODE} at (0,0) size 24x16 |
| LayoutText {#text} at (434,3) size 24x16 |
| text run at (434,3) width 24: "div" |
| LayoutText {#text} at (458,0) size 73x19 |
| text run at (458,0) width 73: ", we have a " |
| LayoutInline {CODE} at (0,0) size 8x16 |
| LayoutText {#text} at (531,3) size 8x16 |
| text run at (531,3) width 8: "p" |
| LayoutText {#text} at (539,0) size 768x39 |
| text run at (539,0) width 229: " (paragraph) tag, after which we'd like" |
| text run at (0,20) width 419: "to insert generated content. One way to do so would be the following:" |
| LayoutBlockFlow {PRE} at (20,207.44) size 749x16 [color=#FF0000] |
| LayoutInline {CODE} at (0,0) size 456x16 |
| LayoutText {#text} at (0,0) size 456x16 |
| text run at (0,0) width 456: "div.box.one p:after{ content:'generated content here!'; }" |
| LayoutBlockFlow {P} at (0,239.44) size 769x20 |
| LayoutText {#text} at (0,0) size 701x19 |
| text run at (0,0) width 701: "But that doesn't work in Safari. However, if you drop one of the class names, as shown below, it works as expected:" |
| LayoutBlockFlow {PRE} at (20,275.44) size 749x16 [color=#008000] |
| LayoutInline {CODE} at (0,0) size 424x16 |
| LayoutText {#text} at (0,0) size 424x16 |
| text run at (0,0) width 424: "div.box p:after{ content:'generated content here!'; }" |
| LayoutBlockFlow {P} at (0,307.44) size 769x40 |
| LayoutText {#text} at (0,0) size 276x19 |
| text run at (0,0) width 276: "Note also that the bug only applies to content " |
| LayoutInline {EM} at (0,0) size 40x19 |
| LayoutText {#text} at (276,0) size 40x19 |
| text run at (276,0) width 40: "within" |
| LayoutText {#text} at (316,0) size 257x19 |
| text run at (316,0) width 257: " the classed element \x{2014} generating content " |
| LayoutInline {EM} at (0,0) size 745x39 |
| LayoutText {#text} at (573,0) size 745x39 |
| text run at (573,0) width 172: "before or after the element" |
| text run at (0,20) width 31: "itself" |
| LayoutText {#text} at (31,20) size 70x19 |
| text run at (31,20) width 70: " works fine:" |
| LayoutBlockFlow {PRE} at (20,363.44) size 749x16 [color=#008000] |
| LayoutInline {CODE} at (0,0) size 440x16 |
| LayoutText {#text} at (0,0) size 440x16 |
| text run at (0,0) width 440: "div.box.one:after{ content:'generated content here!'; }" |
| LayoutBlockFlow {HR} at (0,392.44) size 769x2 [border: (1px inset #EEEEEE)] |
| LayoutBlockFlow {H2} at (0,414.34) size 769x27 |
| LayoutText {#text} at (0,0) size 474x26 |
| text run at (0,0) width 474: "Example (view source to see CSS and HTML):" |
| LayoutBlockFlow {P} at (0,461.25) size 769x20 |
| LayoutText {#text} at (0,0) size 320x19 |
| text run at (0,0) width 320: "Both boxes below should contain generated content (" |
| LayoutInline {SPAN} at (0,0) size 47x19 [color=#008000] |
| LayoutText {#text} at (320,0) size 47x19 |
| text run at (320,0) width 47: "in green" |
| LayoutText {#text} at (367,0) size 8x19 |
| text run at (367,0) width 8: "):" |
| LayoutBlockFlow {DIV} at (0,506.25) size 769x168.44 [border: (1px solid #000000)] |
| LayoutBlockFlow {H3} at (26,44.72) size 717x23 |
| LayoutText {#text} at (0,0) size 47x22 |
| text run at (0,0) width 47: "Box 1" |
| LayoutBlockFlow {P} at (26,86.44) size 717x40 |
| LayoutBlockFlow (anonymous) at (0,0) size 717x20 |
| LayoutText {#text} at (0,0) size 617x19 |
| text run at (0,0) width 617: "This box should contain the text \"generated content\" in CSS2-compliant browsers (but won't in Safari)." |
| LayoutBlockFlow {<pseudo:after>} at (0,20) size 717x20 [color=#008000] |
| LayoutTextFragment (anonymous) at (0,0) size 107x19 |
| text run at (0,0) width 107: "generated content" |
| LayoutBlockFlow {DIV} at (0,699.69) size 769x168.44 [border: (1px solid #000000)] |
| LayoutBlockFlow {H3} at (26,44.72) size 717x23 |
| LayoutText {#text} at (0,0) size 47x22 |
| text run at (0,0) width 47: "Box 2" |
| LayoutBlockFlow {P} at (26,86.44) size 717x40 |
| LayoutBlockFlow (anonymous) at (0,0) size 717x20 |
| LayoutText {#text} at (0,0) size 593x19 |
| text run at (0,0) width 593: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari." |
| LayoutBlockFlow {<pseudo:after>} at (0,20) size 717x20 [color=#008000] |
| LayoutTextFragment (anonymous) at (0,0) size 107x19 |
| text run at (0,0) width 107: "generated content" |
