Title: [258806] trunk
- Revision
- 258806
- Author
- [email protected]
- Date
- 2020-03-21 07:11:01 -0700 (Sat, 21 Mar 2020)
Log Message
telerik.com: Placeholder text is misaligned in search text box
https://bugs.webkit.org/show_bug.cgi?id=209371
<rdar://problem/45945564>
Reviewed by Antti Koivisto.
Source/WebCore:
Let the placeholder box do its own vertical positioning/sizing.
The placeholder box's height is currently set to the height of the editable renderer (sibling box), so when the ::placeholder has
a large font-size set, the text is oddly positioned and gets cut off (the placeholder box has 'overflow: hidden' UA style).
This patch makes the placeholder box center aligned and sized based on the used size (matches both Chrome and FF).
Test: fast/forms/placeholder-content-center.html
* rendering/RenderTextControlSingleLine.cpp:
(WebCore::RenderTextControlSingleLine::layout):
LayoutTests:
* fast/forms/placeholder-content-center-expected.html: Added.
* fast/forms/placeholder-content-center.html: Added.
Modified Paths
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (258805 => 258806)
--- trunk/LayoutTests/ChangeLog 2020-03-21 05:54:52 UTC (rev 258805)
+++ trunk/LayoutTests/ChangeLog 2020-03-21 14:11:01 UTC (rev 258806)
@@ -1,3 +1,14 @@
+2020-03-21 Zalan Bujtas <[email protected]>
+
+ telerik.com: Placeholder text is misaligned in search text box
+ https://bugs.webkit.org/show_bug.cgi?id=209371
+ <rdar://problem/45945564>
+
+ Reviewed by Antti Koivisto.
+
+ * fast/forms/placeholder-content-center-expected.html: Added.
+ * fast/forms/placeholder-content-center.html: Added.
+
2020-03-20 Wenson Hsieh <[email protected]>
[iPadOS] Yahoo! search results are sometimes zoomed in a little
Added: trunk/LayoutTests/fast/forms/placeholder-content-center-expected.html (0 => 258806)
--- trunk/LayoutTests/fast/forms/placeholder-content-center-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/placeholder-content-center-expected.html 2020-03-21 14:11:01 UTC (rev 258806)
@@ -0,0 +1,15 @@
+<style>
+div {
+ padding-top: 9px;
+ padding-left: 1px;
+
+ color: black;
+
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ font-family: system-ui;
+ font-variant-caps: normal;
+}
+</style>
+<div>PASS if placeholder text is fully visible</div>
Added: trunk/LayoutTests/fast/forms/placeholder-content-center.html (0 => 258806)
--- trunk/LayoutTests/fast/forms/placeholder-content-center.html (rev 0)
+++ trunk/LayoutTests/fast/forms/placeholder-content-center.html 2020-03-21 14:11:01 UTC (rev 258806)
@@ -0,0 +1,16 @@
+<style>
+input {
+ -webkit-appearance: none;
+ height: 40px;
+ width: 600px;
+ border: none;
+ color: black;
+ font-size: 10px;
+}
+
+::placeholder {
+ color: black;
+ font-size: 20px;
+}
+</style>
+<input placeholder="PASS if placeholder text is fully visible">
Modified: trunk/LayoutTests/platform/ios/TestExpectations (258805 => 258806)
--- trunk/LayoutTests/platform/ios/TestExpectations 2020-03-21 05:54:52 UTC (rev 258805)
+++ trunk/LayoutTests/platform/ios/TestExpectations 2020-03-21 14:11:01 UTC (rev 258806)
@@ -637,6 +637,7 @@
fast/forms/textarea-scrolled-endline-caret.html [ Skip ]
fast/forms/textfield-inside-anchor.html [ Skip ]
fast/forms/type-after-focus-rule-shrink-width.html [ Skip ]
+fast/forms/placeholder-content-center.html [ Skip ]
fast/frames/frame-deep-nested-resize.html [ Skip ]
fast/frames/frame-set-rotation-hit.html [ Skip ]
fast/frames/frame-set-scaling-hit.html [ Skip ]
Modified: trunk/Source/WebCore/ChangeLog (258805 => 258806)
--- trunk/Source/WebCore/ChangeLog 2020-03-21 05:54:52 UTC (rev 258805)
+++ trunk/Source/WebCore/ChangeLog 2020-03-21 14:11:01 UTC (rev 258806)
@@ -1,3 +1,21 @@
+2020-03-21 Zalan Bujtas <[email protected]>
+
+ telerik.com: Placeholder text is misaligned in search text box
+ https://bugs.webkit.org/show_bug.cgi?id=209371
+ <rdar://problem/45945564>
+
+ Reviewed by Antti Koivisto.
+
+ Let the placeholder box do its own vertical positioning/sizing.
+ The placeholder box's height is currently set to the height of the editable renderer (sibling box), so when the ::placeholder has
+ a large font-size set, the text is oddly positioned and gets cut off (the placeholder box has 'overflow: hidden' UA style).
+ This patch makes the placeholder box center aligned and sized based on the used size (matches both Chrome and FF).
+
+ Test: fast/forms/placeholder-content-center.html
+
+ * rendering/RenderTextControlSingleLine.cpp:
+ (WebCore::RenderTextControlSingleLine::layout):
+
2020-03-20 Simon Fraser <[email protected]>
REGRESSION (r258679): [ Mac ] fast/scrolling/arrow-key-scroll-in-rtl-document.html is failing and timing out
Modified: trunk/Source/WebCore/rendering/RenderTextControlSingleLine.cpp (258805 => 258806)
--- trunk/Source/WebCore/rendering/RenderTextControlSingleLine.cpp 2020-03-21 05:54:52 UTC (rev 258805)
+++ trunk/Source/WebCore/rendering/RenderTextControlSingleLine.cpp 2020-03-21 14:11:01 UTC (rev 258806)
@@ -175,11 +175,10 @@
HTMLElement* placeholderElement = inputElement().placeholderElement();
if (RenderBox* placeholderBox = placeholderElement ? placeholderElement->renderBox() : 0) {
- LayoutSize innerTextSize;
+ auto innerTextWidth = LayoutUnit { };
if (innerTextRenderer)
- innerTextSize = innerTextRenderer->size();
- placeholderBox->mutableStyle().setWidth(Length(innerTextSize.width() - placeholderBox->horizontalBorderAndPaddingExtent(), Fixed));
- placeholderBox->mutableStyle().setHeight(Length(innerTextSize.height() - placeholderBox->verticalBorderAndPaddingExtent(), Fixed));
+ innerTextWidth = innerTextRenderer->logicalWidth();
+ placeholderBox->mutableStyle().setWidth(Length(innerTextWidth - placeholderBox->horizontalBorderAndPaddingExtent(), Fixed));
bool neededLayout = placeholderBox->needsLayout();
bool placeholderBoxHadLayout = placeholderBox->everHadLayout();
if (innerTextSizeChanged) {
@@ -187,15 +186,20 @@
placeholderBox->setChildNeedsLayout(MarkOnlyThis);
}
placeholderBox->layoutIfNeeded();
- LayoutPoint textOffset;
+ auto placeholderTopLeft = containerRenderer ? containerRenderer->location() : LayoutPoint { };
+ auto* innerBlockRenderer = innerBlockElement() ? innerBlockElement()->renderBox() : nullptr;
+ if (innerBlockRenderer)
+ placeholderTopLeft += toLayoutSize(innerBlockRenderer->location());
if (innerTextRenderer)
- textOffset = innerTextRenderer->location();
- if (innerBlockElement() && innerBlockElement()->renderBox())
- textOffset += toLayoutSize(innerBlockElement()->renderBox()->location());
- if (containerRenderer)
- textOffset += toLayoutSize(containerRenderer->location());
- placeholderBox->setLocation(textOffset);
-
+ placeholderTopLeft += toLayoutSize(innerTextRenderer->location());
+ placeholderBox->setLogicalLeft(placeholderTopLeft.x());
+ // Here the container box indicates the renderer that the placeholder content is aligned with (no parent and/or containing block relationship).
+ auto* containerBox = innerTextRenderer ? innerTextRenderer : innerBlockRenderer ? innerBlockRenderer : containerRenderer;
+ if (containerBox) {
+ // Center vertical align the placeholder content.
+ auto logicalTop = placeholderTopLeft.y() + (containerBox->logicalHeight() / 2 - placeholderBox->logicalHeight() / 2);
+ placeholderBox->setLogicalTop(logicalTop);
+ }
if (!placeholderBoxHadLayout && placeholderBox->checkForRepaintDuringLayout()) {
// This assumes a shadow tree without floats. If floats are added, the
// logic should be shared with RenderBlock::layoutBlockChild.
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes
