Blitz - WPT: ruby-base-different-size.html

wpt / css / css-ruby / ruby-base-different-size.html

/css/css-ruby/ruby-base-different-size.html

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>CSS Ruby Test: sizing and positioning of ruby containers when size of ruby bases and the base container differ</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-layout">
<link rel="match" href="ruby-base-different-size-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
body {
  font: 16px/1 Ahem;
  padding: 32px 0;
}
p {
  margin: 0;
  border: 5px solid blue;
}
ruby {
  ruby-align: center;
}
.a {
  font-size: 32px;
}
</style>
<p><ruby><rb class="a">X<rb>X<rt>x<rt>x</ruby></p>

/css/css-ruby/ruby-base-different-size-ref.html

<!DOCTYPE html>
<html lang="ja">
<meta charset="UTF-8">
<title>CSS Ruby Reference</title>
<link rel="author" title="Xidorn Quan" href="https://www.upsuper.org">
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
body {
  font: 16px/1 Ahem;
  padding: 32px 0;
}
p {
  margin: 0;
  border: 5px solid blue;
}
ruby {
  ruby-align: center;
  font-size: 32px;
}
rt {
  font-size: 8px;
}
.b {
  font-size: 16px;
}
</style>
<p><ruby><rb>X<rb class="b">X<rt>x<rt>x</ruby></p>