text-underline-position-cjk.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.test-block {
  border: 2px solid orange;
  padding: 1px;
  line-height: 1.2;
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration-skip-ink: none;
}
.test-block::before {
  content: attr(title);
  font-family: sans-serif;
  background-color: white;
  border: 2px solid gray;
  padding: .2em;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 0;
}
.test-block div {
  display: inline-block;
  border: 1px solid lime;
}
.vrl {
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}
.vlr {
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
}
.sideways {
  text-orientation: sideways;
}
.msgothic { font-family: 'MS Gothic'; }
.meiryo { font-family: Meiryo; }
.noto { font-family: 'Noto Sans CJK JP'; }
/* Originally "Yu Gothic" was also included,
   but the test had inconsistent results on Windows.
   See: http://crbug.com/690486 */
.large { font-size: 200%; }
.under {
  text-underline-position: under;
  -moz-text-underline-position: under;
  -ms-text-underline-position: below;
  -webkit-text-underline-position: under;
}
.under-left {
  text-underline-position: under left;
  -moz-text-underline-position: under left;
  -ms-text-underline-position: below;
  -webkit-text-underline-position: under left;
}
.under-right {
  text-underline-position: under right;
  -moz-text-underline-position: under right;
  -ms-text-underline-position: below;
  -webkit-text-underline-position: under right;
}
</style>
<body>
  <div title="initial" class="test-block">
    <div>
      <div><u>漢efg混植</u></div><br>
      <div class="msgothic"><u>漢efg混植</u></div><br>
      <div class="meiryo"><u>漢efg混植</u></div><br>
      <div class="noto"><u>漢efg混植</u></div><br>
      <div><u>漢<span class="large">efg</span>混植</u></div><br>
    </div><br>
    <div class="vrl"><u>漢efg混植</u></div>
    <div class="vrl meiryo"><u>漢efg混植</u></div>
    <div class="vrl sideways"><u>漢efg混植</u></div>
    <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
    <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
    <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div>
    <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div>
  </div>
  <div title="lang=zh" lang="zh" class="test-block">
    <div>
      <div><u>漢efg混植</u></div><br>
      <div class="msgothic"><u>漢efg混植</u></div><br>
      <div class="meiryo"><u>漢efg混植</u></div><br>
      <div class="noto"><u>漢efg混植</u></div><br>
      <div><u>漢<span class="large">efg</span>混植</u></div><br>
    </div><br>
    <div class="vrl"><u>漢efg混植</u></div>
    <div class="vrl meiryo"><u>漢efg混植</u></div>
    <div class="vrl sideways"><u>漢efg混植</u></div>
    <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
    <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
    <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div>
    <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div>
  </div>
  <div title="lang=ja" lang="ja" class="test-block">
    <div>
      <div><u>漢efg混植</u></div><br>
      <div class="msgothic"><u>漢efg混植</u></div><br>
      <div class="meiryo"><u>漢efg混植</u></div><br>
      <div class="noto"><u>漢efg混植</u></div><br>
      <div><u>漢<span class="large">efg</span>混植</u></div><br>
    </div><br>
    <div class="vrl"><u>漢efg混植</u></div>
    <div class="vrl meiryo"><u>漢efg混植</u></div>
    <div class="vrl sideways"><u>漢efg混植</u></div>
    <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
    <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
    <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div>
    <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div>
  </div>
  <div class="under">
    <div title="under" class="test-block">
      <div>
        <div><u>漢efg混植</u></div><br>
        <div class="msgothic"><u>漢efg混植</u></div><br>
        <div class="meiryo"><u>漢efg混植</u></div><br>
        <div class="noto"><u>漢efg混植</u></div><br>
        <div><u>漢<span class="large">efg</span>混植</u></div><br>
      </div><br>
      <div class="vrl"><u>漢efg混植</u></div>
      <div class="vrl meiryo"><u>漢efg混植</u></div>
      <div class="vrl sideways"><u>漢efg混植</u></div>
      <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
      <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
      <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div>
      <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div>
    </div>
    <div title="under zh" lang="zh" class="test-block">
      <div>
        <div><u>漢efg混植</u></div><br>
        <div class="msgothic"><u>漢efg混植</u></div><br>
        <div class="meiryo"><u>漢efg混植</u></div><br>
        <div class="noto"><u>漢efg混植</u></div><br>
        <div><u>漢<span class="large">efg</span>混植</u></div><br>
      </div><br>
      <div class="vrl"><u>漢efg混植</u></div>
      <div class="vrl meiryo"><u>漢efg混植</u></div>
      <div class="vrl sideways"><u>漢efg混植</u></div>
      <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
      <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
      <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div>
      <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div>
    </div>
    <div title="under ja" lang="ja" class="test-block">
      <div>
        <div><u>漢efg混植</u></div><br>
        <div class="msgothic"><u>漢efg混植</u></div><br>
        <div class="meiryo"><u>漢efg混植</u></div><br>
        <div class="noto"><u>漢efg混植</u></div><br>
        <div><u>漢<span class="large">efg</span>混植</u></div><br>
      </div><br>
      <div class="vrl"><u>漢efg混植</u></div>
      <div class="vrl meiryo"><u>漢efg混植</u></div>
      <div class="vrl sideways"><u>漢efg混植</u></div>
      <div class="vlr"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
      <div class="vlr sideways"><u>ᠮᠣᠨᠭᠭᠣᠯ ᠬᠡᠯᠡ efg漢</u></div>
      <div class="vrl"><u>漢<span class="large">漢fg</span>混植</u></div>
      <div class="vlr"><u>漢<span class="large">漢fg</span>混植</u></div>
    </div>
  </div>
</body>
chromium/third_party/blink/web_tests/fast/css3-text/css3-text-decoration/text-underline-position/text-underline-position-cjk.html
