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