1 layer at (0,0) size 800x600 clip at (0,0) size 785x600 scrollHeight 887
2 LayoutView at (0,0) size 800x600
3 layer at (0,0) size 785x887 backgroundClip at (0,0) size 785x600 clip at (0,0) size 785x600
4 LayoutBlockFlow {HTML} at (0,0) size 785x886.56
5 LayoutBlockFlow {BODY} at (8,21.44) size 769x840.13
6 LayoutBlockFlow {H1} at (0,0) size 769x74
7 LayoutText {#text} at (0,0) size 748x74
8 text run at (0,0) width 748: "Problem: Safari improperly handles generated content"
9 text run at (0,37) width 717: "in certain cases when used with multiple class names"
10 LayoutBlockFlow {P} at (0,95.44) size 769x36
11 LayoutInline {EM} at (0,0) size 725x36
12 LayoutText {#text} at (0,0) size 725x36
13 text run at (0,0) width 725: "When referencing an element by two class names simultaneously, Safari won't generate content (using :before or"
14 text run at (0,18) width 167: ":after) within the element."
15 LayoutBlockFlow {P} at (0,147.44) size 769x36
16 LayoutText {#text} at (0,0) size 124x18
17 text run at (0,0) width 124: "Assume we have a "
18 LayoutInline {CODE} at (0,0) size 24x15
19 LayoutText {#text} at (123,2) size 24x15
20 text run at (123,2) width 24: "div"
21 LayoutText {#text} at (146,0) size 150x18
22 text run at (146,0) width 150: " with two class names: "
23 LayoutInline {CODE} at (0,0) size 25x15
24 LayoutText {#text} at (295,2) size 25x15
25 text run at (295,2) width 25: "box"
26 LayoutText {#text} at (319,0) size 32x18
27 text run at (319,0) width 32: " and "
28 LayoutInline {CODE} at (0,0) size 24x15
29 LayoutText {#text} at (350,2) size 24x15
30 text run at (350,2) width 24: "one"
31 LayoutText {#text} at (373,0) size 86x18
32 text run at (373,0) width 86: ". Within that "
33 LayoutInline {CODE} at (0,0) size 24x15
34 LayoutText {#text} at (458,2) size 24x15
35 text run at (458,2) width 24: "div"
36 LayoutText {#text} at (481,0) size 77x18
37 text run at (481,0) width 77: ", we have a "
38 LayoutInline {CODE} at (0,0) size 9x15
39 LayoutText {#text} at (557,2) size 9x15
40 text run at (557,2) width 9: "p"
41 LayoutText {#text} at (565,0) size 748x36
42 text run at (565,0) width 183: " (paragraph) tag, after which"
43 text run at (0,18) width 509: "we'd like to insert generated content. One way to do so would be the following:"
44 LayoutBlockFlow {PRE} at (20,199.44) size 749x15 [color=#FF0000]
45 LayoutInline {CODE} at (0,0) size 445x15
46 LayoutText {#text} at (0,0) size 445x15
47 text run at (0,0) width 445: "div.box.one p:after{ content:'generated content here!'; }"
48 LayoutBlockFlow {P} at (0,230.44) size 769x18
49 LayoutText {#text} at (0,0) size 742x18
50 text run at (0,0) width 742: "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,264.44) size 749x15 [color=#008000]
52 LayoutInline {CODE} at (0,0) size 414x15
53 LayoutText {#text} at (0,0) size 414x15
54 text run at (0,0) width 414: "div.box p:after{ content:'generated content here!'; }"
55 LayoutBlockFlow {P} at (0,295.44) size 769x36
56 LayoutText {#text} at (0,0) size 294x18
57 text run at (0,0) width 294: "Note also that the bug only applies to content "
58 LayoutInline {EM} at (0,0) size 41x18
59 LayoutText {#text} at (293,0) size 41x18
60 text run at (293,0) width 41: "within"
61 LayoutText {#text} at (333,0) size 276x18
62 text run at (333,0) width 276: " the classed element \x{2014} generating content "
63 LayoutInline {EM} at (0,0) size 726x36
64 LayoutText {#text} at (608,0) size 726x36
65 text run at (608,0) width 118: "before or after the"
66 text run at (0,18) width 85: "element itself"
67 LayoutText {#text} at (84,18) size 78x18
68 text run at (84,18) width 78: " works fine:"
69 LayoutBlockFlow {PRE} at (20,347.44) size 749x15 [color=#008000]
70 LayoutInline {CODE} at (0,0) size 430x15
71 LayoutText {#text} at (0,0) size 430x15
72 text run at (0,0) width 430: "div.box.one:after{ content:'generated content here!'; }"
73 LayoutBlockFlow {HR} at (0,375.44) size 769x2 [border: (1px inset #EEEEEE)]
74 LayoutBlockFlow {H2} at (0,397.34) size 769x28
75 LayoutText {#text} at (0,0) size 477x28
76 text run at (0,0) width 477: "Example (view source to see CSS and HTML):"
77 LayoutBlockFlow {P} at (0,445.25) size 769x18
78 LayoutText {#text} at (0,0) size 340x18
79 text run at (0,0) width 340: "Both boxes below should contain generated content ("
80 LayoutInline {SPAN} at (0,0) size 53x18 [color=#008000]
81 LayoutText {#text} at (339,0) size 53x18
82 text run at (339,0) width 53: "in green"
83 LayoutText {#text} at (391,0) size 11x18
84 text run at (391,0) width 11: "):"
85 LayoutBlockFlow {DIV} at (0,488.25) size 769x163.44 [border: (1px solid #000000)]
86 LayoutBlockFlow {H3} at (26,44.72) size 717x22
87 LayoutText {#text} at (0,0) size 46x22
88 text run at (0,0) width 46: "Box 1"
89 LayoutBlockFlow {P} at (26,85.44) size 717x36
90 LayoutBlockFlow (anonymous) at (0,0) size 717x18
91 LayoutText {#text} at (0,0) size 661x18
92 text run at (0,0) width 661: "This box should contain the text \"generated content\" in CSS2-compliant browsers (but won't in Safari)."
93 LayoutBlockFlow {<pseudo:after>} at (0,18) size 717x18 [color=#008000]
94 LayoutTextFragment (anonymous) at (0,0) size 114x18
95 text run at (0,0) width 114: "generated content"
96 LayoutBlockFlow {DIV} at (0,676.69) size 769x163.44 [border: (1px solid #000000)]
97 LayoutBlockFlow {H3} at (26,44.72) size 717x22
98 LayoutText {#text} at (0,0) size 46x22
99 text run at (0,0) width 46: "Box 2"
100 LayoutBlockFlow {P} at (26,85.44) size 717x36
101 LayoutBlockFlow (anonymous) at (0,0) size 717x18
102 LayoutText {#text} at (0,0) size 639x18
103 text run at (0,0) width 639: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari."
104 LayoutBlockFlow {<pseudo:after>} at (0,18) size 717x18 [color=#008000]
105 LayoutTextFragment (anonymous) at (0,0) size 114x18
106 text run at (0,0) width 114: "generated content"