Kent Tamura
6988480302
Automatic update from web-platform-tests Allow ruby annotations to overflow into the block-start margin This CL introduces the 'AnnotationSpaceOnStart' runtime feature flag and updates BlockLayoutAlgorithm to allow ruby annotations to occupy the space created by a collapsed block-start margin. Previously, we considered only the container's block-start padding as the initial annotation space. With this change, if the flag is enabled, the container has no block-start border, and the block overflow is visible, the calculation now includes the collapsed block-start margin (via MarginStrut) in addition to the padding. This allows ruby annotations to "eat into" the margin space rather than requiring explicit padding to avoid clipping or layout shifts in certain scenarios. * Web tests We do rebaseline of many pixel tests because IFC including rubies shifts up. * WPT Updates: Several tests were updated to preserve their current behavior by restricting overflow or removing margins, as they previously relied on the annotation space being limited strictly to padding. * css/css-overflow/line-clamp/line-clamp-026.html * css/css-pseudo/marker-content-024.html * css/css-ruby/ruby-annotation-with-margin.html * css/css-ruby/ruby-with-floats-001.html * css/css-ruby/ruby-with-floats-002.html * css/css-ui/text-overflow-string-004.html Bug: 445727139 Change-Id: Ied6fc7d9922b7ff0c81be5ce55e3d51600fc85e4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7990113 Auto-Submit: Kent Tamura <tkent@chromium.org> Commit-Queue: Koji Ishii <kojii@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/main@{#1652157} -- wpt-commits: 4a010dd92dac7b0cf8220edde084718403b67a5a wpt-pr: 60886
49 lines
1.3 KiB
HTML
49 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>Interlinear ruby annotation box with margin</title>
|
|
<link rel="match" href="ruby-annotation-with-margin-ref.html">
|
|
<link rel="help" href="https://drafts.csswg.org/css-ruby-1/#interlinear-layout">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
display: flow-root;
|
|
font-family: Ahem;
|
|
font-size: 10px;
|
|
}
|
|
|
|
div {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.under, [style*="writing-mode"] {
|
|
overflow: visible;
|
|
}
|
|
|
|
ruby {
|
|
color: transparent;
|
|
}
|
|
|
|
rt {
|
|
color: green;
|
|
}
|
|
|
|
.under ruby {
|
|
ruby-position: under;
|
|
}
|
|
</style>
|
|
<div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div>
|
|
<div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div>
|
|
<div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div>
|
|
|
|
<div class=under>
|
|
<div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div>
|
|
<div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div>
|
|
<div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div>
|
|
</div>
|
|
|
|
<div style="writing-mode: vertical-lr">
|
|
<div><ruby>base<rt style="margin: 10px;">annotation</rt></ruby></div>
|
|
<div><ruby>base<rt style="margin-top: 10px;">annotation</rt></ruby></div>
|
|
<div><ruby>base<rt style="margin-bottom: 10px;">annotation</rt></ruby></div>
|
|
</div>
|