| <!DOCTYPE html> |
| <style> |
| .b::before { |
| content: '[before]'; |
| color: blue; |
| } |
| .a::after { |
| content: '[after]'; |
| } |
| span { |
| color: blue; |
| } |
| rt { |
| background: yellow; |
| } |
| </style> |
| <p>Tests that CSS-generated :before or :after content just appear as |
| if they were the first or last DOM child of the ruby element.</p> |
| <p>The blue text should have annotations above them (yellow background).</p> |
| </p>Foo <ruby class="b"><span>b</span><rt>long text</rt></ruby> Bar<br></p> |
| </p>Foo <ruby class="a"><span>b</span><rt>long text</rt></ruby> Bar<br></p> |
| </p>Foo <ruby class="b a"><span>b</span><rt>long text</rt></ruby> Bar<br></p> |