Kent Tamura
358120f2ed
Automatic update from web-platform-tests text-fit: Scale underline offsets When the 'text-fit' property scales text, decoration offsets must also be scaled to maintain correct positioning relative to the scaled glyphs. Previously, these offsets used unscaled font metrics, leading to incorrect placement. This patch: - Updates 'TextDecorationOffset' methods to take 'UsedFont' instead of 'SimpleFontData' or 'FontMetrics', allowing access to the 'ScalingFactor()'. - Scales font metrics (ascent, underline position) by the scaling factor during offset computation. - Modifies 'StyleUnderlineOffsetToPixels' to scale percentage-based offsets by the scaling factor, ensuring they remain relative to the effectively used font size. Bug: 417306102 Change-Id: I77ed776a1d005027d67ba7631ba189b216caa6fb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7839098 Commit-Queue: Koji Ishii <kojii@chromium.org> Auto-Submit: Kent Tamura <tkent@chromium.org> Commit-Queue: Kent Tamura <tkent@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/main@{#1630506} -- wpt-commits: cac62c5c97fb235950ad5aaa07089060e29f07ca wpt-pr: 59873
74 lines
1.7 KiB
HTML
74 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html class="reftest-wait">
|
|
<meta charset="utf-8">
|
|
<meta name="flags" content="ahem">
|
|
<link rel="stylesheet" href="/fonts/ahem.css">
|
|
<style>
|
|
.grow-consistent {
|
|
font: 40px/2 Ahem;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
display: inline-block;
|
|
width: 160px;
|
|
text-fit: none;
|
|
white-space: pre;
|
|
border: 1px solid gray;
|
|
margin: 20px;
|
|
text-decoration: underline lime;
|
|
text-decoration-skip-ink: none;
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
.grow-line {
|
|
font: 20px/2 Ahem;
|
|
color: rgba(0, 0, 0, 0.5);
|
|
display: inline-block;
|
|
width: 160px;
|
|
text-fit: none;
|
|
white-space: pre;
|
|
border: 1px solid gray;
|
|
margin: 20px;
|
|
text-decoration: underline lime;
|
|
text-decoration-skip-ink: none;
|
|
text-decoration-thickness: 2px;
|
|
}
|
|
|
|
.length {
|
|
text-underline-offset: 8px;
|
|
}
|
|
|
|
.percentage {
|
|
text-underline-offset: 50%;
|
|
}
|
|
</style>
|
|
|
|
<div>
|
|
<!-- text-underline-offset:auto -->
|
|
<div class="grow-consistent">ÉpÉ
|
|
pÉpÉ</div>
|
|
<div class="grow-line"><span style="font-size:40px;">ÉpÉp</span>
|
|
pÉpÉpÉpÉ</div>
|
|
<div>
|
|
|
|
<div>
|
|
<!-- text-underline-offset:<length> -->
|
|
<div class="grow-consistent length">ÉpÉ
|
|
pÉpÉ</div>
|
|
<div class="grow-line length"><span style="font-size:40px">ÉpÉp</span>
|
|
pÉpÉpÉpÉ</div>
|
|
<div>
|
|
|
|
<div>
|
|
<!-- text-underline-offset:<percentage> -->
|
|
<div class="grow-consistent percentage">ÉpÉ
|
|
pÉpÉ</div>
|
|
<div class="grow-line percentage" style="text-decoration:none;"><span style="font-size:40px; text-decoration:underline lime; text-decoration-thickness:2px; text-underline-offset:50%;">ÉpÉp</span>
|
|
<span style="text-decoration:underline lime; text-decoration-thickness:2px; text-underline-offset:50%;">pÉpÉpÉpÉ</span></div>
|
|
<div>
|
|
|
|
|
|
<script>
|
|
document.fonts.ready.then(() => {
|
|
document.documentElement.classList.remove('reftest-wait');
|
|
});
|
|
</script>
|
|
|