ruby-first-letter.html | Explore in Territory

<!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; }
  rt:first-line { font-size: 20px; background-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>&lt;ruby&gt; 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>
chromium/third_party/blink/web_tests/fast/ruby/ruby-first-letter.html
