OLD | NEW |
1 layer at (0,0) size 785x886 | 1 layer at (0,0) size 785x889 |
2 RenderView at (0,0) size 785x600 | 2 RenderView at (0,0) size 785x600 |
3 layer at (0,0) size 785x886 | 3 layer at (0,0) size 785x889 |
4 RenderBlock {HTML} at (0,0) size 785x885.56 | 4 RenderBlock {HTML} at (0,0) size 785x888.56 |
5 RenderBody {BODY} at (8,21.44) size 769x839.13 | 5 RenderBody {BODY} at (8,21.44) size 769x842.13 |
6 RenderBlock {H1} at (0,0) size 769x74 | 6 RenderBlock {H1} at (0,0) size 769x74 |
7 RenderText {#text} at (0,0) size 748x73 | 7 RenderText {#text} at (0,0) size 748x73 |
8 text run at (0,0) width 748: "Problem: Safari improperly handles gener
ated content" | 8 text run at (0,0) width 748: "Problem: Safari improperly handles gener
ated content" |
9 text run at (0,37) width 717: "in certain cases when used with multipl
e class names" | 9 text run at (0,37) width 717: "in certain cases when used with multipl
e class names" |
10 RenderBlock {P} at (0,95.44) size 769x36 | 10 RenderBlock {P} at (0,95.44) size 769x36 |
11 RenderInline {EM} at (0,0) size 725x35 | 11 RenderInline {EM} at (0,0) size 725x35 |
12 RenderText {#text} 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 cla
ss names simultaneously, Safari won't generate content (using :before or" | 13 text run at (0,0) width 725: "When referencing an element by two cla
ss names simultaneously, Safari won't generate content (using :before or" |
14 text run at (0,18) width 167: ":after) within the element." | 14 text run at (0,18) width 167: ":after) within the element." |
15 RenderBlock {P} at (0,147.44) size 769x36 | 15 RenderBlock {P} at (0,147.44) size 769x36 |
16 RenderText {#text} at (0,0) size 124x17 | 16 RenderText {#text} at (0,0) size 124x17 |
17 text run at (0,0) width 124: "Assume we have a " | 17 text run at (0,0) width 124: "Assume we have a " |
18 RenderInline {CODE} at (0,0) size 24x15 | 18 RenderInline {CODE} at (0,0) size 25x16 |
19 RenderText {#text} at (123,3) size 24x15 | 19 RenderText {#text} at (123,2) size 25x16 |
20 text run at (123,3) width 24: "div" | 20 text run at (123,2) width 25: "div" |
21 RenderText {#text} at (146,0) size 150x17 | 21 RenderText {#text} at (147,0) size 150x17 |
22 text run at (146,0) width 150: " with two class names: " | 22 text run at (147,0) width 150: " with two class names: " |
23 RenderInline {CODE} at (0,0) size 25x15 | 23 RenderInline {CODE} at (0,0) size 25x16 |
24 RenderText {#text} at (295,3) size 25x15 | 24 RenderText {#text} at (296,2) size 25x16 |
25 text run at (295,3) width 25: "box" | 25 text run at (296,2) width 25: "box" |
26 RenderText {#text} at (319,0) size 32x17 | 26 RenderText {#text} at (320,0) size 32x17 |
27 text run at (319,0) width 32: " and " | 27 text run at (320,0) width 32: " and " |
28 RenderInline {CODE} at (0,0) size 24x15 | 28 RenderInline {CODE} at (0,0) size 25x16 |
29 RenderText {#text} at (350,3) size 24x15 | 29 RenderText {#text} at (351,2) size 25x16 |
30 text run at (350,3) width 24: "one" | 30 text run at (351,2) width 25: "one" |
31 RenderText {#text} at (373,0) size 86x17 | 31 RenderText {#text} at (375,0) size 85x17 |
32 text run at (373,0) width 86: ". Within that " | 32 text run at (375,0) width 85: ". Within that " |
33 RenderInline {CODE} at (0,0) size 24x15 | 33 RenderInline {CODE} at (0,0) size 25x16 |
34 RenderText {#text} at (458,3) size 24x15 | 34 RenderText {#text} at (459,2) size 25x16 |
35 text run at (458,3) width 24: "div" | 35 text run at (459,2) width 25: "div" |
36 RenderText {#text} at (481,0) size 77x17 | 36 RenderText {#text} at (483,0) size 77x17 |
37 text run at (481,0) width 77: ", we have a " | 37 text run at (483,0) width 77: ", we have a " |
38 RenderInline {CODE} at (0,0) size 9x15 | 38 RenderInline {CODE} at (0,0) size 9x16 |
39 RenderText {#text} at (557,3) size 9x15 | 39 RenderText {#text} at (559,2) size 9x16 |
40 text run at (557,3) width 9: "p" | 40 text run at (559,2) width 9: "p" |
41 RenderText {#text} at (565,0) size 748x35 | 41 RenderText {#text} at (567,0) size 751x35 |
42 text run at (565,0) width 183: " (paragraph) tag, after which" | 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:" | 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 749x15 [color=#FF0000] | 44 RenderBlock {PRE} at (20,199.44) size 749x16 [color=#FF0000] |
45 RenderInline {CODE} at (0,0) size 445x15 | 45 RenderInline {CODE} at (0,0) size 456x16 |
46 RenderText {#text} at (0,0) size 445x15 | 46 RenderText {#text} at (0,0) size 456x16 |
47 text run at (0,0) width 445: "div.box.one p:after{ content:'generate
d content here!'; }" | 47 text run at (0,0) width 456: "div.box.one p:after{ content:'generate
d content here!'; }" |
48 RenderBlock {P} at (0,230.44) size 769x18 | 48 RenderBlock {P} at (0,231.44) size 769x18 |
49 RenderText {#text} at (0,0) size 742x17 | 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:" | 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,264.44) size 749x15 [color=#008000] | 51 RenderBlock {PRE} at (20,265.44) size 749x16 [color=#008000] |
52 RenderInline {CODE} at (0,0) size 414x15 | 52 RenderInline {CODE} at (0,0) size 424x16 |
53 RenderText {#text} at (0,0) size 414x15 | 53 RenderText {#text} at (0,0) size 424x16 |
54 text run at (0,0) width 414: "div.box p:after{ content:'generated co
ntent here!'; }" | 54 text run at (0,0) width 424: "div.box p:after{ content:'generated co
ntent here!'; }" |
55 RenderBlock {P} at (0,295.44) size 769x36 | 55 RenderBlock {P} at (0,297.44) size 769x36 |
56 RenderText {#text} at (0,0) size 294x17 | 56 RenderText {#text} at (0,0) size 294x17 |
57 text run at (0,0) width 294: "Note also that the bug only applies to c
ontent " | 57 text run at (0,0) width 294: "Note also that the bug only applies to c
ontent " |
58 RenderInline {EM} at (0,0) size 41x17 | 58 RenderInline {EM} at (0,0) size 41x17 |
59 RenderText {#text} at (293,0) size 41x17 | 59 RenderText {#text} at (293,0) size 41x17 |
60 text run at (293,0) width 41: "within" | 60 text run at (293,0) width 41: "within" |
61 RenderText {#text} at (333,0) size 276x17 | 61 RenderText {#text} at (333,0) size 276x17 |
62 text run at (333,0) width 276: " the classed element \x{2014} generati
ng content " | 62 text run at (333,0) width 276: " the classed element \x{2014} generati
ng content " |
63 RenderInline {EM} at (0,0) size 726x35 | 63 RenderInline {EM} at (0,0) size 726x35 |
64 RenderText {#text} at (608,0) size 726x35 | 64 RenderText {#text} at (608,0) size 726x35 |
65 text run at (608,0) width 118: "before or after the" | 65 text run at (608,0) width 118: "before or after the" |
66 text run at (0,18) width 85: "element itself" | 66 text run at (0,18) width 85: "element itself" |
67 RenderText {#text} at (84,18) size 78x17 | 67 RenderText {#text} at (84,18) size 78x17 |
68 text run at (84,18) width 78: " works fine:" | 68 text run at (84,18) width 78: " works fine:" |
69 RenderBlock {PRE} at (20,347.44) size 749x15 [color=#008000] | 69 RenderBlock {PRE} at (20,349.44) size 749x16 [color=#008000] |
70 RenderInline {CODE} at (0,0) size 430x15 | 70 RenderInline {CODE} at (0,0) size 440x16 |
71 RenderText {#text} at (0,0) size 430x15 | 71 RenderText {#text} at (0,0) size 440x16 |
72 text run at (0,0) width 430: "div.box.one:after{ content:'generated
content here!'; }" | 72 text run at (0,0) width 440: "div.box.one:after{ content:'generated
content here!'; }" |
73 RenderBlock {HR} at (0,375.44) size 769x2 [border: (1px inset #EEEEEE)] | 73 RenderBlock {HR} at (0,378.44) size 769x2 [border: (1px inset #EEEEEE)] |
74 RenderBlock {H2} at (0,397.34) size 769x27 | 74 RenderBlock {H2} at (0,400.34) size 769x27 |
75 RenderText {#text} at (0,0) size 477x26 | 75 RenderText {#text} at (0,0) size 477x26 |
76 text run at (0,0) width 477: "Example (view source to see CSS and HTML
):" | 76 text run at (0,0) width 477: "Example (view source to see CSS and HTML
):" |
77 RenderBlock {P} at (0,444.25) size 769x18 | 77 RenderBlock {P} at (0,447.25) size 769x18 |
78 RenderText {#text} at (0,0) size 340x17 | 78 RenderText {#text} at (0,0) size 340x17 |
79 text run at (0,0) width 340: "Both boxes below should contain generate
d content (" | 79 text run at (0,0) width 340: "Both boxes below should contain generate
d content (" |
80 RenderInline {SPAN} at (0,0) size 53x17 [color=#008000] | 80 RenderInline {SPAN} at (0,0) size 53x17 [color=#008000] |
81 RenderText {#text} at (339,0) size 53x17 | 81 RenderText {#text} at (339,0) size 53x17 |
82 text run at (339,0) width 53: "in green" | 82 text run at (339,0) width 53: "in green" |
83 RenderText {#text} at (391,0) size 11x17 | 83 RenderText {#text} at (391,0) size 11x17 |
84 text run at (391,0) width 11: "):" | 84 text run at (391,0) width 11: "):" |
85 RenderBlock {DIV} at (0,487.25) size 769x163.44 [border: (1px solid #00000
0)] | 85 RenderBlock {DIV} at (0,490.25) size 769x163.44 [border: (1px solid #00000
0)] |
86 RenderBlock {H3} at (26,44.72) size 717x22 | 86 RenderBlock {H3} at (26,44.72) size 717x22 |
87 RenderText {#text} at (0,0) size 46x21 | 87 RenderText {#text} at (0,0) size 46x21 |
88 text run at (0,0) width 46: "Box 1" | 88 text run at (0,0) width 46: "Box 1" |
89 RenderBlock {P} at (26,85.44) size 717x36 | 89 RenderBlock {P} at (26,85.44) size 717x36 |
90 RenderBlock (anonymous) at (0,0) size 717x18 | 90 RenderBlock (anonymous) at (0,0) size 717x18 |
91 RenderText {#text} at (0,0) size 661x17 | 91 RenderText {#text} at (0,0) size 661x17 |
92 text run at (0,0) width 661: "This box should contain the text \"g
enerated content\" in CSS2-compliant browsers (but won't in Safari)." | 92 text run at (0,0) width 661: "This box should contain the text \"g
enerated content\" in CSS2-compliant browsers (but won't in Safari)." |
93 RenderBlock (generated) at (0,18) size 717x18 [color=#008000] | 93 RenderBlock (generated) at (0,18) size 717x18 [color=#008000] |
94 RenderText at (0,0) size 114x17 | 94 RenderText at (0,0) size 114x17 |
95 text run at (0,0) width 114: "generated content" | 95 text run at (0,0) width 114: "generated content" |
96 RenderBlock {DIV} at (0,675.69) size 769x163.44 [border: (1px solid #00000
0)] | 96 RenderBlock {DIV} at (0,678.69) size 769x163.44 [border: (1px solid #00000
0)] |
97 RenderBlock {H3} at (26,44.72) size 717x22 | 97 RenderBlock {H3} at (26,44.72) size 717x22 |
98 RenderText {#text} at (0,0) size 46x21 | 98 RenderText {#text} at (0,0) size 46x21 |
99 text run at (0,0) width 46: "Box 2" | 99 text run at (0,0) width 46: "Box 2" |
100 RenderBlock {P} at (26,85.44) size 717x36 | 100 RenderBlock {P} at (26,85.44) size 717x36 |
101 RenderBlock (anonymous) at (0,0) size 717x18 | 101 RenderBlock (anonymous) at (0,0) size 717x18 |
102 RenderText {#text} at (0,0) size 639x17 | 102 RenderText {#text} at (0,0) size 639x17 |
103 text run at (0,0) width 639: "This box should contain the text \"g
enerated content\" in CSS2-compliant browsers, including Safari." | 103 text run at (0,0) width 639: "This box should contain the text \"g
enerated content\" in CSS2-compliant browsers, including Safari." |
104 RenderBlock (generated) at (0,18) size 717x18 [color=#008000] | 104 RenderBlock (generated) at (0,18) size 717x18 [color=#008000] |
105 RenderText at (0,0) size 114x17 | 105 RenderText at (0,0) size 114x17 |
106 text run at (0,0) width 114: "generated content" | 106 text run at (0,0) width 114: "generated content" |
OLD | NEW |