placeholder-wrongly-placed-if-too-tall.html

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
input {
    height: 26px;
    line-height: 29px;
    padding: 0 5px;
    border: none;
    border-bottom: 1px solid #888;
    outline: none;
}
</style>
<div>Both inputs should be of the same size and the placeholder should be at the same place.</div>
<div id="console"></div>
<input type="text" placeholder="placeholder">
<input type="text" placeholder="placeholder">
<script>
window.jsTestIsAsync = true;

var inputs = document.getElementsByTagName("input");

function checkInputs()
{
    rect0 = inputs[0].getBoundingClientRect();
    rect1 = inputs[1].getBoundingClientRect();
    shouldBe("rect0.top", "rect1.top");
    shouldBe("rect0.height", "rect1.height");

    finishJSTest();
}

inputs[1].focus();
// Forcing a layout in this frame makes the issue disappear.
window.requestAnimationFrame(checkInputs);
</script>

chromium/third_party/blink/web_tests/fast/forms/text/placeholder-wrongly-placed-if-too-tall.html