layer at (0,0) size 800x885
  RenderView at (0,0) size 800x600
layer at (0,0) size 800x885
  RenderBlock {HTML} at (0,0) size 800x885
    RenderBody {BODY} at (8,18) size 784x842
      RenderBlock {H1} at (0,0) size 784x76
        RenderText {#text} at (0,0) size 763x76
          text run at (0,0) width 763: "Problem: Safari improperly handles generated content in"
          text run at (0,38) width 693: "certain cases when used with multiple class names"
      RenderBlock {P} at (0,94) size 784x40
        RenderInline {EM} at (0,0) size 759x39
          RenderText {#text} at (0,0) size 759x39
            text run at (0,0) width 759: "When referencing an element by two class names simultaneously, Safari won't generate content (using :before or :after)"
            text run at (0,20) width 119: "within the element."
      RenderBlock {P} at (0,148) size 784x39
        RenderText {#text} at (0,0) size 124x19
          text run at (0,0) width 124: "Assume we have a "
        RenderInline {CODE} at (0,0) size 21x20
          RenderText {#text} at (124,0) size 21x20
            text run at (124,0) width 21: "div"
        RenderText {#text} at (145,0) size 146x19
          text run at (145,0) width 146: " with two class names: "
        RenderInline {CODE} at (0,0) size 26x20
          RenderText {#text} at (291,0) size 26x20
            text run at (291,0) width 26: "box"
        RenderText {#text} at (317,0) size 32x19
          text run at (317,0) width 32: " and "
        RenderInline {CODE} at (0,0) size 26x20
          RenderText {#text} at (349,0) size 26x20
            text run at (349,0) width 26: "one"
        RenderText {#text} at (375,0) size 79x19
          text run at (375,0) width 79: ". Within that "
        RenderInline {CODE} at (0,0) size 21x20
          RenderText {#text} at (454,0) size 21x20
            text run at (454,0) width 21: "div"
        RenderText {#text} at (475,0) size 77x19
          text run at (475,0) width 77: ", we have a "
        RenderInline {CODE} at (0,0) size 9x20
          RenderText {#text} at (552,0) size 9x20
            text run at (552,0) width 9: "p"
        RenderText {#text} at (561,0) size 775x39
          text run at (561,0) width 214: " (paragraph) tag, after which we'd"
          text run at (0,20) width 463: "like to insert generated content. One way to do so would be the following:"
      RenderBlock {PRE} at (20,201) size 764x20 [color=#FF0000]
        RenderInline {CODE} at (0,0) size 382x20
          RenderText {#text} at (0,0) size 382x20
            text run at (0,0) width 382: "div.box.one p:after{ content:'generated content here!'; }"
      RenderBlock {P} at (0,235) size 784x19
        RenderText {#text} at (0,0) size 729x19
          text run at (0,0) width 729: "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,268) size 764x20 [color=#008000]
        RenderInline {CODE} at (0,0) size 352x20
          RenderText {#text} at (0,0) size 352x20
            text run at (0,0) width 352: "div.box p:after{ content:'generated content here!'; }"
      RenderBlock {P} at (0,302) size 784x40
        RenderText {#text} at (0,0) size 290x19
          text run at (0,0) width 290: "Note also that the bug only applies to content "
        RenderInline {EM} at (0,0) size 36x19
          RenderText {#text} at (290,0) size 36x19
            text run at (290,0) width 36: "within"
        RenderText {#text} at (326,0) size 276x19
          text run at (326,0) width 276: " the classed element \x{2014} generating content "
        RenderInline {EM} at (0,0) size 772x39
          RenderText {#text} at (602,0) size 772x39
            text run at (602,0) width 170: "before or after the element"
            text run at (0,20) width 29: "itself"
        RenderText {#text} at (29,20) size 72x19
          text run at (29,20) width 72: " works fine:"
      RenderBlock {PRE} at (20,356) size 764x20 [color=#008000]
        RenderInline {CODE} at (0,0) size 369x20
          RenderText {#text} at (0,0) size 369x20
            text run at (0,0) width 369: "div.box.one:after{ content:'generated content here!'; }"
      RenderBlock {HR} at (0,390) size 784x2 [border: (1px inset #000000)]
      RenderBlock {H2} at (0,409) size 784x29
        RenderText {#text} at (0,0) size 463x29
          text run at (0,0) width 463: "Example (view source to see CSS and HTML):"
      RenderBlock {P} at (0,455) size 784x19
        RenderText {#text} at (0,0) size 337x19
          text run at (0,0) width 337: "Both boxes below should contain generated content ("
        RenderInline {SPAN} at (0,0) size 52x19 [color=#008000]
          RenderText {#text} at (337,0) size 52x19
            text run at (337,0) width 52: "in green"
        RenderText {#text} at (389,0) size 9x19
          text run at (389,0) width 9: "):"
      RenderBlock {DIV} at (0,499) size 784x159 [border: (1px solid #000000)]
        RenderBlock {H3} at (26,42) size 732x23
          RenderText {#text} at (0,0) size 44x22
            text run at (0,0) width 44: "Box 1"
        RenderBlock {P} at (26,81) size 732x38
          RenderBlock (anonymous) at (0,0) size 732x19
            RenderText {#text} at (0,0) size 645x19
              text run at (0,0) width 645: "This box should contain the text \"generated content\" in CSS2-compliant browsers (but won't in Safari)."
          RenderBlock (generated) at (0,19) size 732x19 [color=#008000]
            RenderText at (0,0) size 116x19
              text run at (0,0) width 116: "generated content"
      RenderBlock {DIV} at (0,683) size 784x159 [border: (1px solid #000000)]
        RenderBlock {H3} at (26,42) size 732x23
          RenderText {#text} at (0,0) size 44x22
            text run at (0,0) width 44: "Box 2"
        RenderBlock {P} at (26,81) size 732x38
          RenderBlock (anonymous) at (0,0) size 732x19
            RenderText {#text} at (0,0) size 623x19
              text run at (0,0) width 623: "This box should contain the text \"generated content\" in CSS2-compliant browsers, including Safari."
          RenderBlock (generated) at (0,19) size 732x19 [color=#008000]
            RenderText at (0,0) size 116x19
              text run at (0,0) width 116: "generated content"
