Koji Ishii
2e5d9b1dea
Automatic update from web-platform-tests [initial-letter] Fix positioning for raised/sunken initial letters When the the `initial-letter` property[1] has its `size` larger than `sink`, the top of the initial letter glyph overhangs the top of the first line. Before this patch, the block-direction position of such initial letters were computed based on the actual size of the fragment. This patch changes it to the specified `size`, making it consistent across different font metrics. Note, the change to the positioning made two tests to hit existing issues in exclusion space in vertical flow. They are tracked at crbug.com/370423031. [1] https://drafts.csswg.org/css-inline-3/#sizing-drop-initials Bug: 370217727, 370423031 Change-Id: I24b8de13d1a76a27c30850297ca380f98f5021b8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5896658 Commit-Queue: Kent Tamura <tkent@chromium.org> Auto-Submit: Koji Ishii <kojii@chromium.org> Reviewed-by: Kent Tamura <tkent@chromium.org> Cr-Commit-Position: refs/heads/main@{#1362700} -- wpt-commits: a1f4bbf4c6e1a9a861a145a34cd097ea260b5a49 wpt-pr: 48414
41 lines
1008 B
HTML
41 lines
1008 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Tests initial letter with under ruby</title>
|
|
<link rel="author" title="Google LLC" href="https://www.google.com/">
|
|
<link rel="help" href="https://drafts.csswg.org/css-inline/#initial-letter-block-position">
|
|
<meta name="flags" content="ahem">
|
|
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" >
|
|
<style>
|
|
.sample {
|
|
border: solid 1px green;
|
|
font-family: Ahem;
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
width: 230px;
|
|
}
|
|
ruby { ruby-position: under; }
|
|
.fake-initial-letter {
|
|
background: lime;
|
|
float: left;
|
|
height: 80px;
|
|
margin-top: 2px;
|
|
width: 80px;
|
|
}
|
|
|
|
.surrounding {
|
|
display:inline-block;
|
|
margin-top: -16px;
|
|
margin-bottom: -2px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="sample">
|
|
<div class="fake-initial-letter"></div><br><br>
|
|
<div class="surrounding">bc <ruby>xyz<rt>XYZ</rt></ruby></div>
|
|
def<br>ghi<br>jkl<br>mno<br>
|
|
</div>
|
|
</body>
|
|
</html>
|