| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <title>Ruby: Ping Test</title> |
| <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> |
| <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ruby/001.html"/> |
| <link rel="help" href="http://www.w3.org/TR/css3-ruby/"/> |
| <style type="text/css"> |
| p { color: navy; } |
| .a ruby { display: ruby-base; display: inline; display: ruby-base; } |
| .a rbc { display: ruby-base-container; display: inline; display: ruby-base-container; } |
| .a rb { display: ruby-base; display: inline; display: ruby-base; } |
| .a rtc.before { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: before; } |
| .a rtc.after { display: ruby-text-container; display: inline; display: ruby-text-container; ruby-position: after; } |
| .a rt { display: ruby-text; display: inline; display: ruby-text; ruby-span: 3; } |
| .b ruby { display: inline; } |
| .b rbc { display: inline; } |
| .b rb { display: inline; } |
| .b rtc { display: inline; } |
| .b rt { display: inline; } |
| </style> |
| </head> |
| <body> |
| <p>There should be exactly four lines of text below.</p> |
| <p> |
| <ruby class="a"> |
| <rbc> |
| <rb> 2. This is </rb> |
| <rb> the second </rb> |
| <rb> line. </rb> |
| </rbc> |
| <rtc class="before"> |
| <rt> 1. This is </rt> |
| <rt> the first </rt> |
| <rt> line. </rt> |
| </rtc> |
| <rtc class="after"> |
| <rt> 3. This is the third line. </rt> |
| </rtc> |
| </ruby> |
| </p> |
| <p> |
| <ruby class="b"> |
| <rbc> |
| <rb> 4. This </rb> |
| <rb> is </rb> |
| <rb> the </rb> |
| </rbc> |
| <rtc class="before"> |
| <rt> fourth </rt> |
| <rt> and </rt> |
| <rt> final </rt> |
| </rtc> |
| <rtc class="after"> |
| <rt> line. </rt> |
| </rtc> |
| </ruby> |
| </p> |
| </body> |
| </html> |
