Minseong Kim
6e4c1eb708
Automatic update from web-platform-tests [ruby-overhang] Support overhang for space, NBSP, other space separator This CL implement support for ruby-overhang: spaces, which allows ruby annotations to overhang adjacent spaces, including preserved white space, no-break space (U+00A0), and other space separators. The implementation sums the widths of consecutive whitespace or control items surrounding the current ruby column. To prevent annotations from overlapping with adjacent ruby column, the `end_overhang` is stored in `InlineItemResultRubyColumn`. The next ruby column uses this value to avoid overlapping. This CL also adds new WPTs to verify the behavior across vertical writing modes, complex case with tabs and ideographic spaces, other space separators. Support for overhanging fullwidth opening/closing punctuation and middle dots will be implemented in a following CL. There is no behavior change unless the CSSRubyOverhang runtime flag is enabled. Spec: https://drafts.csswg.org/css-ruby-1/#ruby-overhang Bug: 499042741, 366873207 Change-Id: Icfbf52ab5436b554c258daa6510d428f90f602f9 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7809406 Commit-Queue: Koji Ishii <kojii@chromium.org> Reviewed-by: Kent Tamura <tkent@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/main@{#1628464} -- wpt-commits: 8577acb6b06659906adeaa6aa81d6a5c93af69ca wpt-pr: 59785
26 lines
838 B
HTML
26 lines
838 B
HTML
<!DOCTYPE html>
|
|
<meta charset="UTF-8">
|
|
<title>Tests for ruby-overhang: spaces with ideographic spaces</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#ruby-overhang">
|
|
<link rel="match" href="ruby-overhang-spaces-001-ref.html">
|
|
<meta name=assert content="With 'ruby-overhang: spaces', excess ruby overhang on top of the ideographic spaces, but no further.">
|
|
<style>
|
|
ruby {
|
|
ruby-overhang: spaces;
|
|
ruby-align: center;
|
|
}
|
|
div {
|
|
font-size: 20px;
|
|
border-left: 5px solid;
|
|
border-right: 5px solid;
|
|
width: max-content;
|
|
}
|
|
.test { border-color: orange; }
|
|
.measure { border-color: blue; }
|
|
</style>
|
|
<body lang="ja">
|
|
<p>Test passes if orange and blue lines are aligned.
|
|
<div class=test>あ <ruby>あ<rt>ああああああああああ</ruby> あ</div>
|
|
<div class=measure>あ あ あ</div>
|
|
</body>
|