blob: 6bd742216ff4d2c41811369eeac0e964afb2f42e [file] [log] [blame]
<!DOCTYPE html>
<meta charset="utf-8">
<style>
@font-face {
font-family: NotoSansCJK;
src: url("../../../third_party/NotoSansCJK/NotoSansCJKjp-Regular-cid03075.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>