Skip to content

GitLab

T
tangled
Commit 14dd1094 authored by Kent Tamura's avatar Kent Tamura Committed by Commit Bot
Browse files
Options

Menulist SELECT: Fix baseline with emojis 

If the selected OPTION label contains characters of which height is
taller than the primary font, a shadow element containing the label
expanded its line-height, however the SELECT box's height didn't
expand. So its baseline was shifted.

This CL gives a fixed line-height to the shadow element to fix the
issue.

Bug: 1085898
Change-Id: I24e2b5836c54550ee2e76537fb52ec6199441189
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2227947
Commit-Queue: Kent Tamura <tkent@chromium.org>
Commit-Queue: Yoshifumi Inoue <yosin@chromium.org>
Reviewed-by: default avatarYoshifumi Inoue <yosin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#775034}
parent b141188d
Hide whitespace changes
Inline Side-by-side
Showing with 28 additions and 0 deletions
third_party/blink/renderer/core/html/forms/menu_list_inner_element.cc
View file @ 14dd1094
......@@ -33,6 +33,16 @@ MenuListInnerElement::CustomStyleForLayoutObject() {
style->SetTextOverflow(parent_style.TextOverflow());
style->SetUserModify(EUserModify::kReadOnly);
if (style->LineHeight() == ComputedStyleInitialValues::InitialLineHeight()) {
// line-height should be consistent with MenuListIntrinsicBlockSize()
// in layout_box.cc.
const SimpleFontData* font_data = style->GetFont().PrimaryFont();
if (font_data)
style->SetLineHeight(Length::Fixed(font_data->GetFontMetrics().Height()));
else
style->SetLineHeight(Length::Fixed(style->FontSize()));
}
// Use margin:auto instead of align-items:center to get safe centering, i.e.
// when the content overflows, treat it the same as align-items: flex-start.
// But we only do that for the cases where html.css would otherwise use
......
third_party/blink/web_tests/fast/forms/select/menulist-baseline-with-emoji.html 0 → 100644
View file @ 14dd1094
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div>
<select><option>Dog 🐶 ypqtib</option></select>
<select><option>Dog ypqtib</option></select>
</div>
<script>
test(() => {
const selects = document.querySelectorAll('select');
assert_equals(selects[0].offsetTop, selects[1].offsetTop);
}, '<select> with/without emojis should have identical baselines');
</script>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment