-layer at (0,0) size 785x886
+layer at (0,0) size 785x889
RenderView at (0,0) size 785x600
-layer at (0,0) size 785x886
- RenderBlock {HTML} at (0,0) size 785x885.56
- RenderBody {BODY} at (8,21.44) size 769x839.13
+layer at (0,0) size 785x889
+ RenderBlock {HTML} at (0,0) size 785x888.56
+ RenderBody {BODY} at (8,21.44) size 769x842.13
RenderBlock {H1} at (0,0) size 769x74
RenderText {#text} at (0,0) size 748x73
text run at (0,0) width 748: "Problem: Safari improperly handles generated content"
RenderBlock {P} at (0,147.44) size 769x36
RenderText {#text} at (0,0) size 124x17
text run at (0,0) width 124: "Assume we have a "
- RenderInline {CODE} at (0,0) size 24x15
- RenderText {#text} at (123,3) size 24x15
- text run at (123,3) width 24: "div"
- RenderText {#text} at (146,0) size 150x17
- text run at (146,0) width 150: " with two class names: "
- RenderInline {CODE} at (0,0) size 25x15
- RenderText {#text} at (295,3) size 25x15
- text run at (295,3) width 25: "box"
- RenderText {#text} at (319,0) size 32x17
- text run at (319,0) width 32: " and "
- RenderInline {CODE} at (0,0) size 24x15
- RenderText {#text} at (350,3) size 24x15
- text run at (350,3) width 24: "one"
- RenderText {#text} at (373,0) size 86x17
- text run at (373,0) width 86: ". Within that "
- RenderInline {CODE} at (0,0) size 24x15
- RenderText {#text} at (458,3) size 24x15
- text run at (458,3) width 24: "div"
- RenderText {#text} at (481,0) size 77x17
- text run at (481,0) width 77: ", we have a "
- RenderInline {CODE} at (0,0) size 9x15
- RenderText {#text} at (557,3) size 9x15
- text run at (557,3) width 9: "p"
- RenderText {#text} at (565,0) size 748x35
- text run at (565,0) width 183: " (paragraph) tag, after which"
+ RenderInline {CODE} at (0,0) size 25x16
+ RenderText {#text} at (123,2) size 25x16
+ text run at (123,2) width 25: "div"
+ RenderText {#text} at (147,0) size 150x17
+ text run at (147,0) width 150: " with two class names: "
+ RenderInline {CODE} at (0,0) size 25x16
+ RenderText {#text} at (296,2) size 25x16
+ text run at (296,2) width 25: "box"
+ RenderText {#text} at (320,0) size 32x17
+ text run at (320,0) width 32: " and "
+ RenderInline {CODE} at (0,0) size 25x16
+ RenderText {#text} at (351,2) size 25x16
+ text run at (351,2) width 25: "one"
+ RenderText {#text} at (375,0) size 85x17
+ text run at (375,0) width 85: ". Within that "
+ RenderInline {CODE} at (0,0) size 25x16
+ RenderText {#text} at (459,2) size 25x16
+ text run at (459,2) width 25: "div"
+ RenderText {#text} at (483,0) size 77x17
+ text run at (483,0) width 77: ", we have a "
+ RenderInline {CODE} at (0,0) size 9x16
+ RenderText {#text} at (559,2) size 9x16
+ text run at (559,2) width 9: "p"
+ RenderText {#text} at (567,0) size 751x35
+ text run at (567,0) width 184: " (paragraph) tag, after which"
text run at (0,18) width 509: "we'd like to insert generated content. One way to do so would be the following:"
- RenderBlock {PRE} at (20,199.44) size 749x15 [color=#FF0000]
- RenderInline {CODE} at (0,0) size 445x15
- RenderText {#text} at (0,0) size 445x15
- text run at (0,0) width 445: "div.box.one p:after{ content:'generated content here!'; }"
- RenderBlock {P} at (0,230.44) size 769x18
+ RenderBlock {PRE} at (20,199.44) size 749x16 [color=#FF0000]
+ RenderInline {CODE} at (0,0) size 456x16
+ RenderText {#text} at (0,0) size 456x16
+ text run at (0,0) width 456: "div.box.one p:after{ content:'generated content here!'; }"
+ RenderBlock {P} at (0,231.44) size 769x18
RenderText {#text} at (0,0) size 742x17
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:"
- RenderBlock {PRE} at (20,264.44) size 749x15 [color=#008000]
- RenderInline {CODE} at (0,0) size 414x15
- RenderText {#text} at (0,0) size 414x15
- text run at (0,0) width 414: "div.box p:after{ content:'generated content here!'; }"
- RenderBlock {P} at (0,295.44) size 769x36
+ RenderBlock {PRE} at (20,265.44) size 749x16 [color=#008000]
+ RenderInline {CODE} at (0,0) size 424x16
+ RenderText {#text} at (0,0) size 424x16
+ text run at (0,0) width 424: "div.box p:after{ content:'generated content here!'; }"
+ RenderBlock {P} at (0,297.44) size 769x36
RenderText {#text} at (0,0) size 294x17
text run at (0,0) width 294: "Note also that the bug only applies to content "
RenderInline {EM} at (0,0) size 41x17
text run at (0,18) width 85: "element itself"
RenderText {#text} at (84,18) size 78x17
text run at (84,18) width 78: " works fine:"
- RenderBlock {PRE} at (20,347.44) size 749x15 [color=#008000]
- RenderInline {CODE} at (0,0) size 430x15
- RenderText {#text} at (0,0) size 430x15
- text run at (0,0) width 430: "div.box.one:after{ content:'generated content here!'; }"
- RenderBlock {HR} at (0,375.44) size 769x2 [border: (1px inset #EEEEEE)]
- RenderBlock {H2} at (0,397.34) size 769x27
+ RenderBlock {PRE} at (20,349.44) size 749x16 [color=#008000]
+ RenderInline {CODE} at (0,0) size 440x16
+ RenderText {#text} at (0,0) size 440x16
+ text run at (0,0) width 440: "div.box.one:after{ content:'generated content here!'; }"
+ RenderBlock {HR} at (0,378.44) size 769x2 [border: (1px inset #EEEEEE)]
+ RenderBlock {H2} at (0,400.34) size 769x27
RenderText {#text} at (0,0) size 477x26
text run at (0,0) width 477: "Example (view source to see CSS and HTML):"
- RenderBlock {P} at (0,444.25) size 769x18
+ RenderBlock {P} at (0,447.25) size 769x18
RenderText {#text} at (0,0) size 340x17
text run at (0,0) width 340: "Both boxes below should contain generated content ("
RenderInline {SPAN} at (0,0) size 53x17 [color=#008000]
text run at (339,0) width 53: "in green"
RenderText {#text} at (391,0) size 11x17
text run at (391,0) width 11: "):"
- RenderBlock {DIV} at (0,487.25) size 769x163.44 [border: (1px solid #000000)]
+ RenderBlock {DIV} at (0,490.25) size 769x163.44 [border: (1px solid #000000)]
RenderBlock {H3} at (26,44.72) size 717x22
RenderText {#text} at (0,0) size 46x21
text run at (0,0) width 46: "Box 1"
RenderBlock (anonymous) at (0,0) size 717x18
RenderText {#text} at (0,0) size 661x17
text run at (0,0) width 661: "This box should contain the text \"generated content\" in CSS2-compliant browsers (but won't in Safari)."
- RenderBlock (generated) at (0,18) size 717x18 [color=#008000]
- RenderText at (0,0) size 114x17
+ RenderBlock (pseudo:after) at (0,18) size 717x18 [color=#008000]
+ RenderTextFragment at (0,0) size 114x17
text run at (0,0) width 114: "generated content"
- RenderBlock {DIV} at (0,675.69) size 769x163.44 [border: (1px solid #000000)]
+ RenderBlock {DIV} at (0,678.69) size 769x163.44 [border: (1px solid #000000)]
RenderBlock {H3} at (26,44.72) size 717x22
RenderText {#text} at (0,0) size 46x21
text run at (0,0) width 46: "Box 2"
RenderBlock (anonymous) at (0,0) size 717x18
RenderText {#text} at (0,0) size 639x17
text run at (0,0) width 639: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari."
- RenderBlock (generated) at (0,18) size 717x18 [color=#008000]
- RenderText at (0,0) size 114x17
+ RenderBlock (pseudo:after) at (0,18) size 717x18 [color=#008000]
+ RenderTextFragment at (0,0) size 114x17
text run at (0,0) width 114: "generated content"
projects / platform / framework / web / crosswalk.git / blobdiff