blob: 8e753ee53450be65076611b511a5241f1feb8f92 [file] [log] [blame]
layer at (0,0) size 785x887
RenderView at (0,0) size 785x600
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 747x74
text run at (0,0) width 747: "Problem: Safari improperly handles generated content"
text run at (0,37) width 717: "in certain cases when used with multiple class names"
RenderBlock {P} at (0,95) size 769x37
RenderInline {EM} at (0,0) size 767x36
RenderText {#text} at (0,0) size 767x36
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,18) width 122: "within the element."
RenderBlock {P} at (0,147) size 769x37
RenderText {#text} at (0,0) size 124x18
text run at (0,0) width 124: "Assume we have a "
RenderInline {CODE} at (0,0) size 24x15
RenderText {#text} at (123,2) size 24x15
text run at (123,2) width 24: "div"
RenderText {#text} at (146,0) size 150x18
text run at (146,0) width 150: " with two class names: "
RenderInline {CODE} at (0,0) size 25x15
RenderText {#text} at (295,2) size 25x15
text run at (295,2) width 25: "box"
RenderText {#text} at (319,0) size 32x18
text run at (319,0) width 32: " and "
RenderInline {CODE} at (0,0) size 24x15
RenderText {#text} at (350,2) size 24x15
text run at (350,2) width 24: "one"
RenderText {#text} at (373,0) size 85x18
text run at (373,0) width 85: ". Within that "
RenderInline {CODE} at (0,0) size 25x15
RenderText {#text} at (457,2) size 25x15
text run at (457,2) width 25: "div"
RenderText {#text} at (481,0) size 77x18
text run at (481,0) width 77: ", we have a "
RenderInline {CODE} at (0,0) size 8x15
RenderText {#text} at (557,2) size 8x15
text run at (557,2) width 8: "p"
RenderText {#text} at (564,0) size 748x36
text run at (564,0) width 184: " (paragraph) tag, after which"
text run at (0,18) width 509: "we'd like to insert generated content. One way to do so would be the following:"
RenderBlock {PRE} at (20,199) size 749x16 [color=#FF0000]
RenderInline {CODE} at (0,0) size 447x15
RenderText {#text} at (0,0) size 447x15
text run at (0,0) width 447: "div.box.one p:after{ content:'generated content here!'; }"
RenderBlock {P} at (0,230) size 769x19
RenderText {#text} at (0,0) size 741x18
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,264) size 749x16 [color=#008000]
RenderInline {CODE} at (0,0) size 415x15
RenderText {#text} at (0,0) size 415x15
text run at (0,0) width 415: "div.box p:after{ content:'generated content here!'; }"
RenderBlock {P} at (0,295) size 769x37
RenderText {#text} at (0,0) size 294x18
text run at (0,0) width 294: "Note also that the bug only applies to content "
RenderInline {EM} at (0,0) size 41x18
RenderText {#text} at (293,0) size 41x18
text run at (293,0) width 41: "within"
RenderText {#text} at (333,0) size 276x18
text run at (333,0) width 276: " the classed element \x{2014} generating content "
RenderInline {EM} at (0,0) size 726x36
RenderText {#text} at (608,0) size 726x36
text run at (608,0) width 118: "before or after the"
text run at (0,18) width 85: "element itself"
RenderText {#text} at (84,18) size 77x18
text run at (84,18) width 77: " works fine:"
RenderBlock {PRE} at (20,347) size 749x16 [color=#008000]
RenderInline {CODE} at (0,0) size 431x15
RenderText {#text} at (0,0) size 431x15
text run at (0,0) width 431: "div.box.one:after{ content:'generated content here!'; }"
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,445) size 769x19
RenderText {#text} at (0,0) size 340x18
text run at (0,0) width 340: "Both boxes below should contain generated content ("
RenderInline {SPAN} at (0,0) size 53x18 [color=#008000]
RenderText {#text} at (339,0) size 53x18
text run at (339,0) width 53: "in green"
RenderText {#text} at (391,0) size 11x18
text run at (391,0) width 11: "):"
RenderBlock {DIV} at (0,488) size 769x164 [border: (1px solid #000000)]
RenderBlock {H3} at (26,44) size 717x23
RenderText {#text} at (0,0) size 46x22
text run at (0,0) width 46: "Box 1"
RenderBlock {P} at (26,85) size 717x37
RenderBlock (anonymous) at (0,0) size 717x18
RenderText {#text} at (0,0) size 661x18
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,18) size 717x18 [color=#008000]
RenderText at (0,0) size 114x18
text run at (0,0) width 114: "generated content"
RenderBlock {DIV} at (0,676) size 769x165 [border: (1px solid #000000)]
RenderBlock {H3} at (26,44) size 717x23
RenderText {#text} at (0,0) size 46x22
text run at (0,0) width 46: "Box 2"
RenderBlock {P} at (26,85) size 717x37
RenderBlock (anonymous) at (0,0) size 717x18
RenderText {#text} at (0,0) size 639x18
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,18) size 717x18 [color=#008000]
RenderText at (0,0) size 114x18
text run at (0,0) width 114: "generated content"