OLD | NEW |
| (Empty) |
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) s
ize 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 749x73 | |
8 text run at (0,0) width 749: "Problem: Safari improperly handles gener
ated content" | |
9 text run at (0,37) width 716: "in certain cases when used with multipl
e class names" | |
10 LayoutBlockFlow {P} at (0,95.44) size 769x40 | |
11 LayoutInline {EM} at (0,0) size 765x39 | |
12 LayoutText {#text} at (0,0) size 765x39 | |
13 text run at (0,0) width 765: "When referencing an element by two cla
ss 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 25x16 | |
34 LayoutText {#text} at (433,3) size 25x16 | |
35 text run at (433,3) width 25: "div" | |
36 LayoutText {#text} at (457,0) size 74x19 | |
37 text run at (457,0) width 74: ", we have a " | |
38 LayoutInline {CODE} at (0,0) size 9x16 | |
39 LayoutText {#text} at (530,3) size 9x16 | |
40 text run at (530,3) width 9: "p" | |
41 LayoutText {#text} at (538,0) size 768x39 | |
42 text run at (538,0) width 230: " (paragraph) tag, after which we'd lik
e" | |
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:'generate
d content here!'; }" | |
48 LayoutBlockFlow {P} at (0,239.44) size 769x20 | |
49 LayoutText {#text} at (0,0) size 700x19 | |
50 text run at (0,0) width 700: "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 co
ntent 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 c
ontent " | |
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} generati
ng 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 generate
d 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 #0
00000)] | |
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 \"g
enerated 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 #0
00000)] | |
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 \"g
enerated 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" | |
OLD | NEW |