| <!doctype html> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| <script> |
| function runTest() |
| { |
| var child = document.createElement('rb'); |
| child.textContent = 'content'; |
| document.querySelector('rbc').appendChild(child) |
| |
| child = document.createElement('rt'); |
| child.textContent = 'content'; |
| document.querySelector('.reading').appendChild(child); |
| |
| child = document.createTextNode('text'); |
| var rb = document.querySelector('.rb'); |
| rb.insertBefore(child, rb.firstChild); |
| |
| child = document.createTextNode('text'); |
| var rt = document.querySelector('.rt'); |
| rt.insertBefore(child, rt.firstChild); |
| |
| child = document.createElement('rt'); |
| child.innerText = 'Test'; |
| document.querySelector('#ruby').appendChild(document.createTextNode('T')); |
| document.querySelector('#ruby').appendChild(child); |
| } |
| onload = runTest; |
| </script> |
| <style> |
| ruby:first-letter { font-size: 20px; color: red; } |
| rt:first-letter { font-size: 20px; color: blue; } |
| rb:first-letter { font-size: 20px; color: green; } |
| rbc:first-letter { font-size: 20px; color: purple; } |
| rtc:first-letter { font-size: 20px; color: orange; } |
| rp:first-letter { font-size: 20px; color: brown;} |
| </style> |
| |
| <div>This test is verifying that adding content that uses first letter into |
| ruby tags works correctly.</div> |
| |
| <p><ruby> is defined in the |
| <ruby id='ruby'>H<rt>Hyper</rt>T<rt>Text</rt>M<rt>Markup</rt>L<rt>Language</rt>5<rt>Level |
| 5</rt></ruby> specs.</p> |
| |
| <ruby xml:lang="ja"> |
| <rbc> |
| <rb class='rb'>斎</rb> |
| <rb>藤</rb> |
| <rb>信</rb> |
| <rb>男</rb> |
| </rbc> |
| <rtc class="reading"> |
| <rt class='rt'>さい</rt> |
| <rt>とう</rt> |
| <rt>のぶ</rt> |
| <rt>お</rt> |
| </rtc> |
| <rtc class="annotation"> |
| <rt rbspan="4" xml:lang="en">W3C Associate Chairman</rt> |
| </rtc> |
| |
| <rp>(</rp> |
| <rt>aaa</rt> |
| <rp>)</rp> |
| </ruby> |
