blob: ec035aef3111aa826f5f74641ccb36296debd74b [file] [log] [blame]
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"