| <!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> |
