Chromium Code Reviews Chromium Code Reviews
Issue 1499063002:
input's placeholder is inconsistently laid out (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master| Index: third_party/WebKit/LayoutTests/fast/input/placeholder-wrongly-placed-if-too-tall.html |
| diff --git a/third_party/WebKit/LayoutTests/fast/input/placeholder-wrongly-placed-if-too-tall.html b/third_party/WebKit/LayoutTests/fast/input/placeholder-wrongly-placed-if-too-tall.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..02dcca7fef6fb6387a83ee1f01784ba435d8100b |
| --- /dev/null |
| +++ b/third_party/WebKit/LayoutTests/fast/input/placeholder-wrongly-placed-if-too-tall.html |
| @@ -0,0 +1,55 @@ |
| +<!DOCTYPE html> |
| +<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="placholder" data-offset-y="8"> |
|
mstensho (USE GERRIT)
2015/12/04 12:55:54
Who is Plach, and why is he older?
Julien - ping for review
2015/12/04 14:45:42
http://theinfosphere.org/Claw-Plach !!!
|
| +<input type="text" placeholder="placholder" data-offset-y="8"> |
| +<script src="../../resources/check-layout.js"></script> |
|
mstensho (USE GERRIT)
2015/12/04 12:55:54
There are attributes in this document that check-l
Julien - ping for review
2015/12/04 14:45:42
Doh', you're right. I tried to make it a checkLayo
|
| +<script> |
| +if (window.testRunner) { |
| + testRunner.dumpAsText(); |
| + testRunner.waitUntilDone(); |
| +} |
| + |
| +var console = document.getElementById("console"); |
| +var inputs = document.getElementsByTagName("input"); |
| + |
| +function log(msg) |
| +{ |
| + console.appendChild(document.createTextNode(msg)); |
| + console.appendChild(document.createElement("br")); |
| +} |
| + |
| +function checkInputs() |
| +{ |
| + var rect0 = inputs[0].getBoundingClientRect(); |
| + var rect1 = inputs[1].getBoundingClientRect(); |
| + if (rect0.top === rect1.top) { |
| + log("PASSED, same top"); |
|
mstensho (USE GERRIT)
2015/12/04 12:55:54
Couldn't you just use the shouldBe() thing in js-t
Julien - ping for review
2015/12/04 14:45:42
Done!
|
| + } else { |
| + log("FAILED top: got " + rect0.top + " and " + rect1.top); |
| + } |
| + |
| + if (rect0.height === rect1.height) { |
| + log("PASSED, same height"); |
| + } else { |
| + log("FAILED height: got " + rect0.height + " and " + rect1.height); |
| + } |
| + |
| + if (window.testRunner) |
| + testRunner.notifyDone(); |
| +} |
| + |
| +inputs[1].focus(); |
| +// Forcing a layout in this frame makes the issue disappear. |
|
mstensho (USE GERRIT)
2015/12/04 12:55:54
Scary. But I guess there's no need to explain this
Julien - ping for review
2015/12/04 14:45:42
It's more of a warning to reviewer. I still think
mstensho (USE GERRIT)
2015/12/04 14:57:35
Absolutely. Sorry about being unclear. What I didn
|
| +window.requestAnimationFrame(checkInputs); |
| +</script> |
