Align placeholder element and inner-editor element at their baselines.
We aligned them at their top position. It was incorrect in some cases.
- We reset line-height of inner-editor element in some cases, but never reset
line-height of placeholder.
- Even if their font settings are identical, box heights can be different if the
specified font doesn't cover all of characters and another font is used.
This problem happened frequently after crrev.com/369975 because we don't limit the
inner-editor height since it.
BUG=178032,569869,579381
Review URL: https://codereview.chromium.org/1616553004
Cr-Commit-Position: refs/heads/master@{#370642}
diff --git a/third_party/WebKit/LayoutTests/TestExpectations b/third_party/WebKit/LayoutTests/TestExpectations
index 0406381..9a3ece0 100644
--- a/third_party/WebKit/LayoutTests/TestExpectations
+++ b/third_party/WebKit/LayoutTests/TestExpectations
@@ -261,6 +261,7 @@
crbug.com/576589 [ Mac10.10 ] tables/mozilla/bugs/bug46368-1.html [ NeedsRebaseline ]
crbug.com/576589 [ Mac10.10 ] tables/mozilla/bugs/bug46368-2.html [ NeedsRebaseline ]
crbug.com/576589 [ Mac10.10 ] tables/mozilla/dom/tableDom.html [ NeedsRebaseline ]
+crbug.com/579381 fast/forms/text/input-placeholder-paint-order.html [ NeedsRebaseline ]
crbug.com/498539 http/tests/inspector/elements/styles/selector-line.html [ Pass Timeout ]
crbug.com/498539 http/tests/inspector/network/network-datareceived.html [ Pass Timeout ]
diff --git a/third_party/WebKit/LayoutTests/fast/forms/placeholder-position.html b/third_party/WebKit/LayoutTests/fast/forms/placeholder-position.html
index f94ca3d9..a3f6220 100644
--- a/third_party/WebKit/LayoutTests/fast/forms/placeholder-position.html
+++ b/third_party/WebKit/LayoutTests/fast/forms/placeholder-position.html
@@ -4,8 +4,12 @@
}
</style>
<!-- This tests that the placeholder is positioned correctly in different kinds of elements -->
-<input type="search" placeholder="placeholder"><br>
-<input type="text" placeholder="placeholder"><br>
+<input type="search" placeholder="placeholder">
+<br>
+<input type="text" placeholder="placeholder" size=10>
+<input placeholder="placeholder" style="line-height:1;" size=10>
+<input placeholder="日本語placeholder">
+<br>
<input type="search" placeholder="placeholder" style="direction: rtl"><br>
<input type="search" placeholder="placeholder" results=5><br>
<textarea placeholder="placeholder"></textarea><br>
@@ -14,10 +18,14 @@
<input type="text" placeholder="placeholder" style="font-size: 15px; border: solid 5px black; margin: 5px;"><br>
<input value="Value" style="line-height: 25px;">
-<input placeholder="placeholder" style="line-height: 25px;"> <br>
+<input placeholder="placeholder" style="line-height: 25px;">
+<input placeholder="placeholder" style="height: 25px;">
+<input placeholder="placeholder" style="height: 25px; line-height: 25px;">
+<br>
<input value="Value" style="text-align: center;">
<input placeholder="placeholder" style="text-align: center;">
-<input placeholder="placeholder" class="center"> <br>
+<input placeholder="placeholder" class="center">
+<br>
<input type="text" placeholder="placeholder" style="padding-top: 15px; transform: translateY(30px) rotateZ(30deg)"><br>
diff --git a/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.png b/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.png
index 92e7967..31931594 100644
--- a/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.png
+++ b/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.png
Binary files differ
diff --git a/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.txt b/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.txt
index 78441ef..3a8a8333 100644
--- a/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.txt
+++ b/third_party/WebKit/LayoutTests/platform/mac/fast/forms/placeholder-position-expected.txt
@@ -7,9 +7,19 @@
LayoutFlexibleBox {DIV} at (4,3) size 125x13
LayoutBlockFlow {DIV} at (0,6.50) size 5x0
LayoutBlockFlow {DIV} at (5,0) size 108x13
- LayoutBR {BR} at (133,14) size 0x0
- LayoutTextControl {INPUT} at (0,19) size 131x19 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
- LayoutBR {BR} at (131,33) size 0x0
+ LayoutText {#text} at (133,0) size 4x18
+ text run at (133,0) width 4: " "
+ LayoutBR {BR} at (137,14) size 0x0
+ LayoutTextControl {INPUT} at (0,19) size 71x19 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
+ LayoutText {#text} at (71,19) size 4x18
+ text run at (71,19) width 4: " "
+ LayoutTextControl {INPUT} at (75,19) size 71x19 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
+ LayoutText {#text} at (146,19) size 4x18
+ text run at (146,19) width 4: " "
+ LayoutTextControl {INPUT} at (150,19) size 131x19 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
+ LayoutText {#text} at (281,19) size 4x18
+ text run at (281,19) width 4: " "
+ LayoutBR {BR} at (285,33) size 0x0
LayoutTextControl {INPUT} at (0,38) size 133x19 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
LayoutFlexibleBox {DIV} at (4,3) size 125x13
LayoutBlockFlow {DIV} at (0,6.50) size 5x0
@@ -32,7 +42,13 @@
LayoutTextControl {INPUT} at (135,225) size 131x31 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
LayoutText {#text} at (266,231) size 4x18
text run at (266,231) width 4: " "
- LayoutBR {BR} at (270,245) size 0x0
+ LayoutTextControl {INPUT} at (270,228) size 131x25 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
+ LayoutText {#text} at (401,231) size 4x18
+ text run at (401,231) width 4: " "
+ LayoutTextControl {INPUT} at (405,228) size 131x25 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
+ LayoutText {#text} at (536,231) size 4x18
+ text run at (536,231) width 4: " "
+ LayoutBR {BR} at (0,0) size 0x0
LayoutTextControl {INPUT} at (0,256) size 131x19 [bgcolor=#FFFFFF] [border: (2px inset #EEEEEE)]
LayoutText {#text} at (131,256) size 4x18
text run at (131,256) width 4: " "
@@ -50,11 +66,23 @@
text run at (0,0) width 59: "placeholder"
layer at (17,11) size 108x13
LayoutBlockFlow {DIV} at (0,0) size 108x13
-layer at (11,30) size 125x13
- LayoutBlockFlow {DIV} at (3,3) size 125x13 [color=#A9A9A9]
+layer at (11,30) size 65x13
+ LayoutBlockFlow {DIV} at (3,3) size 65x13 [color=#A9A9A9]
LayoutText {#text} at (0,0) size 59x13
text run at (0,0) width 59: "placeholder"
-layer at (11,30) size 125x13
+layer at (11,30) size 65x13
+ LayoutBlockFlow {DIV} at (3,3) size 65x13
+layer at (86,31) size 65x11 scrollHeight 12
+ LayoutBlockFlow {DIV} at (3,4) size 65x11 [color=#A9A9A9]
+ LayoutText {#text} at (0,-1) size 59x13
+ text run at (0,-1) width 59: "placeholder"
+layer at (86,30) size 65x13
+ LayoutBlockFlow {DIV} at (3,3) size 65x13
+layer at (161,30) size 125x13
+ LayoutBlockFlow {DIV} at (3,3) size 125x13 [color=#A9A9A9]
+ LayoutText {#text} at (0,0) size 92x13
+ text run at (0,0) width 92: "\x{65E5}\x{672C}\x{8A9E}placeholder"
+layer at (161,30) size 125x13
LayoutBlockFlow {DIV} at (3,3) size 125x13
layer at (17,49) size 108x13
LayoutBlockFlow {DIV} at (9,3) size 108x13 [color=#A9A9A9]
@@ -102,6 +130,18 @@
text run at (0,6) width 59: "placeholder"
layer at (146,236) size 125x25
LayoutBlockFlow {DIV} at (3,3) size 125x25
+layer at (281,242) size 125x13
+ LayoutBlockFlow {DIV} at (3,6) size 125x13 [color=#A9A9A9]
+ LayoutText {#text} at (0,0) size 59x13
+ text run at (0,0) width 59: "placeholder"
+layer at (281,242) size 125x13
+ LayoutBlockFlow {DIV} at (3,6) size 125x13
+layer at (416,236) size 125x25
+ LayoutBlockFlow {DIV} at (3,0) size 125x25 [color=#A9A9A9]
+ LayoutText {#text} at (0,6) size 59x13
+ text run at (0,6) width 59: "placeholder"
+layer at (416,242) size 125x13
+ LayoutBlockFlow {DIV} at (3,6) size 125x13
layer at (11,267) size 125x13
LayoutBlockFlow {DIV} at (3,3) size 125x13
LayoutText {#text} at (49,0) size 27x13
diff --git a/third_party/WebKit/Source/core/layout/LayoutTextControlSingleLine.cpp b/third_party/WebKit/Source/core/layout/LayoutTextControlSingleLine.cpp
index a86df4b..b8619f2 100644
--- a/third_party/WebKit/Source/core/layout/LayoutTextControlSingleLine.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutTextControlSingleLine.cpp
@@ -165,7 +165,6 @@
if (innerEditorLayoutObject)
innerEditorSize = innerEditorLayoutObject->size();
placeholderBox->mutableStyleRef().setWidth(Length(innerEditorSize.width() - placeholderBox->borderAndPaddingWidth(), Fixed));
- placeholderBox->mutableStyleRef().setHeight(Length(innerEditorSize.height() - placeholderBox->borderAndPaddingHeight(), Fixed));
bool neededLayout = placeholderBox->needsLayout();
placeholderBox->layoutIfNeeded();
LayoutPoint textOffset;
@@ -175,6 +174,16 @@
textOffset += toLayoutSize(editingViewPortElement()->layoutBox()->location());
if (containerLayoutObject)
textOffset += toLayoutSize(containerLayoutObject->location());
+ if (innerEditorLayoutObject) {
+ // We use inlineBlockBaseline() for innerEditor because it has no
+ // inline boxes when we show the placeholder.
+ int innerEditorBaseline = innerEditorLayoutObject->inlineBlockBaseline(HorizontalLine);
+ // We use firstLineBoxBaseline() for placeholder.
+ // TODO(tkent): It's inconsistent with innerEditorBaseline. However
+ // placeholderBox->inlineBlockBase() is unexpectedly larger.
+ int placeholderBaseline = placeholderBox->firstLineBoxBaseline();
+ textOffset += LayoutSize(0, innerEditorBaseline - placeholderBaseline);
+ }
placeholderBox->setLocation(textOffset);
// The placeholder gets layout last, after the parent text control and its other children,
