1 layer at (0,0) size 800x600 clip at (0,0) size 785x600 scrollHeight 915
2 LayoutView at (0,0) size 800x600
3 layer at (0,0) size 785x915 backgroundClip at (0,0) size 785x600 clip at (0,0) size 785x600
4 LayoutBlockFlow {HTML} at (0,0) size 785x914.56
5 LayoutBlockFlow {BODY} at (8,21.44) size 769x868.13
6 LayoutBlockFlow {H1} at (0,0) size 769x74
7 LayoutText {#text} at (0,0) size 750x73
8 text run at (0,0) width 750: "Problem: Safari improperly handles generated content"
9 text run at (0,37) width 716: "in certain cases when used with multiple class names"
10 LayoutBlockFlow {P} at (0,95.44) size 769x40
11 LayoutInline {EM} at (0,0) size 767x39
12 LayoutText {#text} at (0,0) size 767x39
13 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)"
14 text run at (0,20) width 122: "within the element."
15 LayoutBlockFlow {P} at (0,151.44) size 769x40
16 LayoutText {#text} at (0,0) size 117x19
17 text run at (0,0) width 117: "Assume we have a "
18 LayoutInline {CODE} at (0,0) size 24x16
19 LayoutText {#text} at (117,3) size 24x16
20 text run at (117,3) width 24: "div"
21 LayoutText {#text} at (141,0) size 138x19
22 text run at (141,0) width 138: " with two class names: "
23 LayoutInline {CODE} at (0,0) size 24x16
24 LayoutText {#text} at (279,3) size 24x16
25 text run at (279,3) width 24: "box"
26 LayoutText {#text} at (303,0) size 30x19
27 text run at (303,0) width 30: " and "
28 LayoutInline {CODE} at (0,0) size 24x16
29 LayoutText {#text} at (333,3) size 24x16
30 text run at (333,3) width 24: "one"
31 LayoutText {#text} at (357,0) size 77x19
32 text run at (357,0) width 77: ". Within that "
33 LayoutInline {CODE} at (0,0) size 24x16
34 LayoutText {#text} at (434,3) size 24x16
35 text run at (434,3) width 24: "div"
36 LayoutText {#text} at (458,0) size 73x19
37 text run at (458,0) width 73: ", we have a "
38 LayoutInline {CODE} at (0,0) size 8x16
39 LayoutText {#text} at (531,3) size 8x16
40 text run at (531,3) width 8: "p"
41 LayoutText {#text} at (539,0) size 768x39
42 text run at (539,0) width 229: " (paragraph) tag, after which we'd like"
43 text run at (0,20) width 419: "to insert generated content. One way to do so would be the following:"
44 LayoutBlockFlow {PRE} at (20,207.44) size 749x16 [color=#FF0000]
45 LayoutInline {CODE} at (0,0) size 456x16
46 LayoutText {#text} at (0,0) size 456x16
47 text run at (0,0) width 456: "div.box.one p:after{ content:'generated content here!'; }"
48 LayoutBlockFlow {P} at (0,239.44) size 769x20
49 LayoutText {#text} at (0,0) size 701x19
50 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:"
51 LayoutBlockFlow {PRE} at (20,275.44) size 749x16 [color=#008000]
52 LayoutInline {CODE} at (0,0) size 424x16
53 LayoutText {#text} at (0,0) size 424x16
54 text run at (0,0) width 424: "div.box p:after{ content:'generated content here!'; }"
55 LayoutBlockFlow {P} at (0,307.44) size 769x40
56 LayoutText {#text} at (0,0) size 276x19
57 text run at (0,0) width 276: "Note also that the bug only applies to content "
58 LayoutInline {EM} at (0,0) size 40x19
59 LayoutText {#text} at (276,0) size 40x19
60 text run at (276,0) width 40: "within"
61 LayoutText {#text} at (316,0) size 257x19
62 text run at (316,0) width 257: " the classed element \x{2014} generating content "
63 LayoutInline {EM} at (0,0) size 745x39
64 LayoutText {#text} at (573,0) size 745x39
65 text run at (573,0) width 172: "before or after the element"
66 text run at (0,20) width 31: "itself"
67 LayoutText {#text} at (31,20) size 70x19
68 text run at (31,20) width 70: " works fine:"
69 LayoutBlockFlow {PRE} at (20,363.44) size 749x16 [color=#008000]
70 LayoutInline {CODE} at (0,0) size 440x16
71 LayoutText {#text} at (0,0) size 440x16
72 text run at (0,0) width 440: "div.box.one:after{ content:'generated content here!'; }"
73 LayoutBlockFlow {HR} at (0,392.44) size 769x2 [border: (1px inset #EEEEEE)]
74 LayoutBlockFlow {H2} at (0,414.34) size 769x27
75 LayoutText {#text} at (0,0) size 474x26
76 text run at (0,0) width 474: "Example (view source to see CSS and HTML):"
77 LayoutBlockFlow {P} at (0,461.25) size 769x20
78 LayoutText {#text} at (0,0) size 320x19
79 text run at (0,0) width 320: "Both boxes below should contain generated content ("
80 LayoutInline {SPAN} at (0,0) size 47x19 [color=#008000]
81 LayoutText {#text} at (320,0) size 47x19
82 text run at (320,0) width 47: "in green"
83 LayoutText {#text} at (367,0) size 8x19
84 text run at (367,0) width 8: "):"
85 LayoutBlockFlow {DIV} at (0,506.25) size 769x168.44 [border: (1px solid #000000)]
86 LayoutBlockFlow {H3} at (26,44.72) size 717x23
87 LayoutText {#text} at (0,0) size 47x22
88 text run at (0,0) width 47: "Box 1"
89 LayoutBlockFlow {P} at (26,86.44) size 717x40
90 LayoutBlockFlow (anonymous) at (0,0) size 717x20
91 LayoutText {#text} at (0,0) size 617x19
92 text run at (0,0) width 617: "This box should contain the text \"generated content\" in CSS2-compliant browsers (but won't in Safari)."
93 LayoutBlockFlow {<pseudo:after>} at (0,20) size 717x20 [color=#008000]
94 LayoutTextFragment (anonymous) at (0,0) size 107x19
95 text run at (0,0) width 107: "generated content"
96 LayoutBlockFlow {DIV} at (0,699.69) size 769x168.44 [border: (1px solid #000000)]
97 LayoutBlockFlow {H3} at (26,44.72) size 717x23
98 LayoutText {#text} at (0,0) size 47x22
99 text run at (0,0) width 47: "Box 2"
100 LayoutBlockFlow {P} at (26,86.44) size 717x40
101 LayoutBlockFlow (anonymous) at (0,0) size 717x20
102 LayoutText {#text} at (0,0) size 593x19
103 text run at (0,0) width 593: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari."
104 LayoutBlockFlow {<pseudo:after>} at (0,20) size 717x20 [color=#008000]
105 LayoutTextFragment (anonymous) at (0,0) size 107x19
106 text run at (0,0) width 107: "generated content"