Blitz - WPT: basic.html

wpt / css / css-ruby / break-within-bases / basic.html

/css/css-ruby/break-within-bases/basic.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.csswg.org/css-ruby/#break-within">
<link rel="match" href="basic-ref.html">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
body {
  font: 50px/1 Ahem;
}
span {
  text-wrap: nowrap;
}
p {
  word-break: break-all;
  inline-size: calc(6em + 5px);
}
.mc {
  columns: 2 calc(6em + 5px);
  column-gap: 10px;
  inline-size: calc(12em + 10px + 10px);
  block-size: 80px;
}
.indent {
  text-indent: -1em;
}
</style>
<p>zzz<ruby><span>mmm</span><span>mm</span><rt><span>mmmmmm</span><span>mmmm</span></ruby>zzz
</p>

<p class="mc">zzz<ruby><span>mmm</span><span>mm</span><rt><span>mmmmmm</span><span>mmmm</span></ruby>zzz
</p>

<!-- The first line should contain 7 letters. -->
<p class="indent">zzz<ruby>mmmmm<rt>mmmmmmmmmm</ruby>zzz
</p>

/css/css-ruby/break-within-bases/basic-ref.html

<!DOCTYPE html>
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
body {
  font: 50px/1 Ahem;
}
span {
  text-wrap: nowrap;
}
p {
  word-break: break-all;
  inline-size: calc(6em + 5px);
}
.mc {
  columns: 2 calc(6em + 5px);
  column-gap: 10px;
  inline-size: calc(12em + 10px + 10px);
  block-size: 80px;
}
.indent {
  text-indent: -1em;
}
</style>
<p>zzz<ruby><span>mmm</span><rt><span>mmmmmm</span></ruby> <ruby><span>mm</span><rt><span>mmmm</span></ruby>zzz
</p>

<p class="mc">zzz<ruby><span>mmm</span><span>mm</span><rt><span>mmmmmm</span><span>mmmm</span></ruby>zzz
</p>

<p class="indent">zzz<ruby>mmmm<rt>mmmmmmmm</ruby><br><ruby>m<rt>mm</ruby>zzz
</p>