text-font-height-mismatch.html | Explore in Territory

<!DOCTYPE html>
<meta charset="utf-8">
<style>
@font-face {
    font-family: NotoSansCJK;
    src: url("../../../third_party/NotoSansCJK/NotoSansCJKjp-Regular-subset.otf") format("opentype");
}

input {
    margin: 4px;
}

.noto {
    border: solid 1px black;
    font-family: NotoSansCJK;
    font-size: 16px;
}
</style>
<p>Editable text should be centered vertically.</p>
<div id="webfont"><input style="font-family:NotoSansCJK;"value="ABCgjy"></div>
<div><input style="border: solid 1px black; line-height:16px; height:24px; font-size:24px;" value="ABCgjy"></div>

<!-- crbug.com/539858 -->
<div><input style="font-size:100%; height:22px; line-height: 1px;" value="ABCgjy"></div>

<!-- Centering should respect to min-height and max-height. -->
<div>
<input class="noto" style="min-height: 40px;" value="&#x3075; ABCgyj">
<input class="noto" style="max-height: 14px;" value="&#x3075; ABCgyj">
</div>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

document.fonts.ready.then(function() {
    document.getElementById('webfont').innerHTML =
        '<input class="noto" value="&#x3075; ABCgjy">' +
        '<input class="noto" style="line-height:17px; height:24px;" ' +
        'value="&#x3075; ABCgjy">';
    // The first INPUT is for crbug.com/519331.
    // The second INPUT is for crbug.com/576589.
    if (window.testRunner)
        testRunner.notifyDone();
});
</script>
chromium/third_party/blink/web_tests/fast/forms/text/text-font-height-mismatch.html
