1 layer at (0,0) size 785x889
2 RenderView at (0,0) size 785x600
3 layer at (0,0) size 785x889
4 RenderBlock {HTML} at (0,0) size 785x888.56
5 RenderBody {BODY} at (8,21.44) size 769x842.13
6 RenderBlock {H1} at (0,0) size 769x74
7 RenderText {#text} at (0,0) size 748x73
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 RenderBlock {P} at (0,95.44) size 769x36
11 RenderInline {EM} at (0,0) size 725x35
12 RenderText {#text} at (0,0) size 725x35
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 RenderBlock {P} at (0,147.44) size 769x36
16 RenderText {#text} at (0,0) size 124x17
17 text run at (0,0) width 124: "Assume we have a "
18 RenderInline {CODE} at (0,0) size 25x16
19 RenderText {#text} at (123,2) size 25x16
20 text run at (123,2) width 25: "div"
21 RenderText {#text} at (147,0) size 150x17
22 text run at (147,0) width 150: " with two class names: "
23 RenderInline {CODE} at (0,0) size 25x16
24 RenderText {#text} at (296,2) size 25x16
25 text run at (296,2) width 25: "box"
26 RenderText {#text} at (320,0) size 32x17
27 text run at (320,0) width 32: " and "
28 RenderInline {CODE} at (0,0) size 25x16
29 RenderText {#text} at (351,2) size 25x16
30 text run at (351,2) width 25: "one"
31 RenderText {#text} at (375,0) size 85x17
32 text run at (375,0) width 85: ". Within that "
33 RenderInline {CODE} at (0,0) size 25x16
34 RenderText {#text} at (459,2) size 25x16
35 text run at (459,2) width 25: "div"
36 RenderText {#text} at (483,0) size 77x17
37 text run at (483,0) width 77: ", we have a "
38 RenderInline {CODE} at (0,0) size 9x16
39 RenderText {#text} at (559,2) size 9x16
40 text run at (559,2) width 9: "p"
41 RenderText {#text} at (567,0) size 751x35
42 text run at (567,0) width 184: " (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 RenderBlock {PRE} at (20,199.44) size 749x16 [color=#FF0000]
45 RenderInline {CODE} at (0,0) size 456x16
46 RenderText {#text} at (0,0) size 456x16
47 text run at (0,0) width 456: "div.box.one p:after{ content:'generated content here!'; }"
48 RenderBlock {P} at (0,231.44) size 769x18
49 RenderText {#text} at (0,0) size 742x17
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 RenderBlock {PRE} at (20,265.44) size 749x16 [color=#008000]
52 RenderInline {CODE} at (0,0) size 424x16
53 RenderText {#text} at (0,0) size 424x16
54 text run at (0,0) width 424: "div.box p:after{ content:'generated content here!'; }"
55 RenderBlock {P} at (0,297.44) size 769x36
56 RenderText {#text} at (0,0) size 294x17
57 text run at (0,0) width 294: "Note also that the bug only applies to content "
58 RenderInline {EM} at (0,0) size 41x17
59 RenderText {#text} at (293,0) size 41x17
60 text run at (293,0) width 41: "within"
61 RenderText {#text} at (333,0) size 276x17
62 text run at (333,0) width 276: " the classed element \x{2014} generating content "
63 RenderInline {EM} at (0,0) size 726x35
64 RenderText {#text} at (608,0) size 726x35
65 text run at (608,0) width 118: "before or after the"
66 text run at (0,18) width 85: "element itself"
67 RenderText {#text} at (84,18) size 78x17
68 text run at (84,18) width 78: " works fine:"
69 RenderBlock {PRE} at (20,349.44) size 749x16 [color=#008000]
70 RenderInline {CODE} at (0,0) size 440x16
71 RenderText {#text} at (0,0) size 440x16
72 text run at (0,0) width 440: "div.box.one:after{ content:'generated content here!'; }"
73 RenderBlock {HR} at (0,378.44) size 769x2 [border: (1px inset #EEEEEE)]
74 RenderBlock {H2} at (0,400.34) size 769x27
75 RenderText {#text} at (0,0) size 477x26
76 text run at (0,0) width 477: "Example (view source to see CSS and HTML):"
77 RenderBlock {P} at (0,447.25) size 769x18
78 RenderText {#text} at (0,0) size 340x17
79 text run at (0,0) width 340: "Both boxes below should contain generated content ("
80 RenderInline {SPAN} at (0,0) size 53x17 [color=#008000]
81 RenderText {#text} at (339,0) size 53x17
82 text run at (339,0) width 53: "in green"
83 RenderText {#text} at (391,0) size 11x17
84 text run at (391,0) width 11: "):"
85 RenderBlock {DIV} at (0,490.25) size 769x163.44 [border: (1px solid #000000)]
86 RenderBlock {H3} at (26,44.72) size 717x22
87 RenderText {#text} at (0,0) size 46x21
88 text run at (0,0) width 46: "Box 1"
89 RenderBlock {P} at (26,85.44) size 717x36
90 RenderBlock (anonymous) at (0,0) size 717x18
91 RenderText {#text} at (0,0) size 661x17
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 RenderBlock {<pseudo:after>} at (0,18) size 717x18 [color=#008000]
94 RenderTextFragment at (0,0) size 114x17
95 text run at (0,0) width 114: "generated content"
96 RenderBlock {DIV} at (0,678.69) size 769x163.44 [border: (1px solid #000000)]
97 RenderBlock {H3} at (26,44.72) size 717x22
98 RenderText {#text} at (0,0) size 46x21
99 text run at (0,0) width 46: "Box 2"
100 RenderBlock {P} at (26,85.44) size 717x36
101 RenderBlock (anonymous) at (0,0) size 717x18
102 RenderText {#text} at (0,0) size 639x17
103 text run at (0,0) width 639: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari."
104 RenderBlock {<pseudo:after>} at (0,18) size 717x18 [color=#008000]
105 RenderTextFragment at (0,0) size 114x17
106 text run at (0,0) width 114: "generated content"
projects / platform / framework / web / crosswalk.git / blob