-layer at (0,0) size 785x881
+layer at (0,0) size 785x887
RenderView at (0,0) size 785x600
-layer at (0,0) size 785x881
- RenderBlock {HTML} at (0,0) size 785x881
- RenderBody {BODY} at (8,21) size 769x835
+layer at (0,0) size 785x887
+ RenderBlock {HTML} at (0,0) size 785x887
+ RenderBody {BODY} at (8,21) size 769x841
RenderBlock {H1} at (0,0) size 769x74
RenderText {#text} at (0,0) size 750x74
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"
- RenderBlock {P} at (0,95) size 769x36
+ RenderBlock {P} at (0,95) size 769x37
RenderInline {EM} at (0,0) size 755x36
RenderText {#text} at (0,0) size 755x36
text run at (0,0) width 755: "When referencing an element by two class names simultaneously, Safari won't generate content (using :before or :after)"
text run at (0,18) width 119: "within the element."
- RenderBlock {P} at (0,147) size 769x36
+ RenderBlock {P} at (0,147) size 769x37
RenderText {#text} at (0,0) size 123x18
text run at (0,0) width 123: "Assume we have a "
RenderInline {CODE} at (0,0) size 24x15
RenderText {#text} at (562,0) size 741x36
text run at (562,0) width 179: " (paragraph) tag, after which"
text run at (0,18) width 501: "we'd like to insert generated content. One way to do so would be the following:"
- RenderBlock {PRE} at (20,199) size 749x15 [color=#FF0000]
+ RenderBlock {PRE} at (20,199) size 749x16 [color=#FF0000]
RenderInline {CODE} at (0,0) size 456x15
RenderText {#text} at (0,0) size 456x15
text run at (0,0) width 456: "div.box.one p:after{ content:'generated content here!'; }"
- RenderBlock {P} at (0,230) size 769x18
+ RenderBlock {P} at (0,230) size 769x19
RenderText {#text} at (0,0) size 732x18
text run at (0,0) width 732: "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,264) size 749x15 [color=#008000]
+ RenderBlock {PRE} at (20,264) size 749x16 [color=#008000]
RenderInline {CODE} at (0,0) size 424x15
RenderText {#text} at (0,0) size 424x15
text run at (0,0) width 424: "div.box p:after{ content:'generated content here!'; }"
- RenderBlock {P} at (0,295) size 769x36
+ RenderBlock {P} at (0,295) size 769x37
RenderText {#text} at (0,0) size 288x18
text run at (0,0) width 288: "Note also that the bug only applies to content "
RenderInline {EM} at (0,0) size 39x18
text run at (0,18) width 29: "itself"
RenderText {#text} at (29,18) size 75x18
text run at (29,18) width 75: " works fine:"
- RenderBlock {PRE} at (20,347) size 749x15 [color=#008000]
+ RenderBlock {PRE} at (20,347) size 749x16 [color=#008000]
RenderInline {CODE} at (0,0) size 440x15
RenderText {#text} at (0,0) size 440x15
text run at (0,0) width 440: "div.box.one:after{ content:'generated content here!'; }"
- RenderBlock {HR} at (0,375) size 769x2 [border: (1px inset #000000)]
- RenderBlock {H2} at (0,396) size 769x28
+ RenderBlock {HR} at (0,375) size 769x3 [border: (1px inset #000000)]
+ RenderBlock {H2} at (0,397) size 769x29
RenderText {#text} at (0,0) size 477x28
text run at (0,0) width 477: "Example (view source to see CSS and HTML):"
- RenderBlock {P} at (0,443) size 769x18
+ RenderBlock {P} at (0,445) size 769x19
RenderText {#text} at (0,0) size 335x18
text run at (0,0) width 335: "Both boxes below should contain generated content ("
RenderInline {SPAN} at (0,0) size 51x18 [color=#008000]
text run at (335,0) width 51: "in green"
RenderText {#text} at (386,0) size 9x18
text run at (386,0) width 9: "):"
- RenderBlock {DIV} at (0,486) size 769x162 [border: (1px solid #000000)]
- RenderBlock {H3} at (26,44) size 717x22
+ RenderBlock {DIV} at (0,488) size 769x164 [border: (1px solid #000000)]
+ RenderBlock {H3} at (26,44) size 717x23
RenderText {#text} at (0,0) size 48x22
text run at (0,0) width 48: "Box 1"
- RenderBlock {P} at (26,84) size 717x36
+ RenderBlock {P} at (26,85) size 717x37
RenderBlock (anonymous) at (0,0) size 717x18
RenderText {#text} at (0,0) size 650x18
text run at (0,0) width 650: "This box should contain the text \"generated content\" in CSS2-compliant browsers (but won't in Safari)."
RenderBlock (generated) at (0,18) size 717x18 [color=#008000]
RenderText at (0,0) size 111x18
text run at (0,0) width 111: "generated content"
- RenderBlock {DIV} at (0,673) size 769x162 [border: (1px solid #000000)]
- RenderBlock {H3} at (26,44) size 717x22
+ RenderBlock {DIV} at (0,676) size 769x165 [border: (1px solid #000000)]
+ RenderBlock {H3} at (26,44) size 717x23
RenderText {#text} at (0,0) size 48x22
text run at (0,0) width 48: "Box 2"
- RenderBlock {P} at (26,84) size 717x36
+ RenderBlock {P} at (26,85) size 717x37
RenderBlock (anonymous) at (0,0) size 717x18
RenderText {#text} at (0,0) size 628x18
text run at (0,0) width 628: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari."