Log Message
[GTK] Spin buttons on input type number appear over the value itself for small widths https://bugs.webkit.org/show_bug.cgi?id=173572
Reviewed by Carlos Garcia Campos. Source/WebCore: When drawing the spin buttons, override the width of the input element to increment it with the width of the spin button. This ensures that we don't end up covering the input values with the spin buttons. Do this also for user controlled styles, because most web authors won't test how their site renders on WebKitGTK+, and they will assume spin buttons in the order of 13 pixels wide (that is what most browsers use), but the GTK+ spin button is much wider (66 pixels). Test: platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html * rendering/RenderTheme.cpp: (WebCore::RenderTheme::adjustStyle): * rendering/RenderThemeGtk.cpp: (WebCore::RenderThemeGtk::adjustTextFieldStyle): Call the theme's adjustTextFieldStyle() also for user controlled styles. (WebCore::RenderThemeGtk::adjustInnerSpinButtonStyle): LayoutTests: * fast/forms/number/number-size-expected.txt: * fast/forms/number/number-size.html: Obtain the size of the spinbutton by inspecting the shadow dom (is more reliable) and make the test for user controlled style special for the case of GTK+. * platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.png: Added. * platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt: Added. * platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html: Added.
Modified Paths
- trunk/LayoutTests/ChangeLog
- trunk/LayoutTests/fast/forms/number/number-size-expected.txt
- trunk/LayoutTests/fast/forms/number/number-size.html
- trunk/Source/WebCore/ChangeLog
- trunk/Source/WebCore/rendering/RenderTheme.cpp
- trunk/Source/WebCore/rendering/RenderThemeGtk.cpp
Added Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (219331 => 219332)
--- trunk/LayoutTests/ChangeLog 2017-07-11 15:32:38 UTC (rev 219331)
+++ trunk/LayoutTests/ChangeLog 2017-07-11 15:34:41 UTC (rev 219332)
@@ -1,3 +1,17 @@
+2017-07-11 Carlos Alberto Lopez Perez <clo...@igalia.com>
+
+ [GTK] Spin buttons on input type number appear over the value itself for small widths
+ https://bugs.webkit.org/show_bug.cgi?id=173572
+
+ Reviewed by Carlos Garcia Campos.
+
+ * fast/forms/number/number-size-expected.txt:
+ * fast/forms/number/number-size.html: Obtain the size of the spinbutton by inspecting the shadow dom (is more reliable)
+ and make the test for user controlled style special for the case of GTK+.
+ * platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.png: Added.
+ * platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt: Added.
+ * platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html: Added.
+
2017-07-11 Youenn Fablet <you...@apple.com>
We should do ICE candidate filtering at the Document level
Modified: trunk/LayoutTests/fast/forms/number/number-size-expected.txt (219331 => 219332)
--- trunk/LayoutTests/fast/forms/number/number-size-expected.txt 2017-07-11 15:32:38 UTC (rev 219331)
+++ trunk/LayoutTests/fast/forms/number/number-size-expected.txt 2017-07-11 15:34:41 UTC (rev 219332)
@@ -8,8 +8,8 @@
PASS number.offsetWidth is text.offsetWidth
The number whose width is specified should respect the setting
-PASS numberWithWidth.offsetWidth is 100
-PASS numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth is 100
+PASS numberWithWidth.offsetWidth is widthSpecified(100)
+PASS numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth is widthSpecified(100)
The number input should ignore size attribute for layout
PASS number.size = 10; number.offsetWidth is text.offsetWidth
Modified: trunk/LayoutTests/fast/forms/number/number-size.html (219331 => 219332)
--- trunk/LayoutTests/fast/forms/number/number-size.html 2017-07-11 15:32:38 UTC (rev 219331)
+++ trunk/LayoutTests/fast/forms/number/number-size.html 2017-07-11 15:34:41 UTC (rev 219332)
@@ -2,6 +2,8 @@
<html>
<head>
<script src=""
+<script src=""
+<script src=""
<style>
input.with-border::-webkit-inner-spin-button {
@@ -14,10 +16,6 @@
margin: 0 10px 0 10px;
}
-input#number-without-spinbutton::-webkit-inner-spin-button {
- display: none;
- margin: 0;
-}
input#number-with-width {
width: 100px;
}
@@ -29,23 +27,27 @@
<div id="console"></div>
<script>
+
+function widthSpecified(size) {
+ // GTK+ port overrides the style width and always increments it with the spinbuttons size.
+ if (isGtk())
+ size += spinButtonWidth;
+ return size;
+}
+
description('Test for size attribute of input');
var parent = document.createElement('div');
document.body.appendChild(parent);
-parent.innerHTML = '<input type=text id=text>'
- + '<input type="number" id=number>'
- + '<input type="number" id="number-without-spinbutton" min="0" max="10" step="1">'
- + '<input type="number" id="number-with-spinbutton" min="0" max="10" step="1">'
+parent.innerHTML = '<input type=text id="text">'
+ + '<input type="number" id="number">'
+ '<input type="number" id="number-with-width">'
var number = document.getElementById('number');
-var numberWithoutSpinButton = document.getElementById('number-without-spinbutton');
-var numberWithSpinButton = document.getElementById('number-with-spinbutton');
var numberWithWidth = document.getElementById('number-with-width');
var text = document.getElementById('text');
// The width of spin button should differ by environment. So it should be calculated here.
-var spinButtonWidth = numberWithSpinButton.offsetWidth - numberWithoutSpinButton.offsetWidth;
+var spinButtonWidth = getElementByPseudoId(internals.shadowRoot(number), "-webkit-inner-spin-button").offsetWidth;
// spinButtonWidth should have menaningful width.
shouldBeGreaterThanOrEqual('spinButtonWidth', '1');
@@ -54,8 +56,8 @@
debug('');
debug('The number whose width is specified should respect the setting');
-shouldBe('numberWithWidth.offsetWidth', '100');
-shouldBe('numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth', '100');
+shouldBe('numberWithWidth.offsetWidth', 'widthSpecified(100)');
+shouldBe('numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth', 'widthSpecified(100)');
debug('');
debug('The number input should ignore size attribute for layout');
Added: trunk/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.png
(Binary files differ)
Added: svn:mime-type
Added: trunk/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt (0 => 219332)
--- trunk/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt (rev 0)
+++ trunk/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt 2017-07-11 15:34:41 UTC (rev 219332)
@@ -0,0 +1,197 @@
+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+ RenderBlock {HTML} at (0,0) size 800x600
+ RenderBody {BODY} at (8,8) size 784x584
+ RenderBlock {P} at (0,0) size 784x51
+ RenderText {#text} at (0,0) size 777x51
+ text run at (0,0) width 738: "Test that spin buttons don't cover the value of input type number. On the GTK+ port, the width of the input field type"
+ text run at (0,17) width 777: "number is incremented with the width of the spin button. The test passes if you see below the value of the 16 input numbers"
+ text run at (0,34) width 258: "visible (from 1 to 8 and from 101 to 108)"
+ RenderBlock (anonymous) at (0,67) size 784x310
+ RenderBR {BR} at (0,0) size 0x17
+ RenderBR {BR} at (0,17) size 0x17
+ RenderTextControl {INPUT} at (0,34) size 82x34 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (3,3) size 76x28
+ RenderBlock {DIV} at (0,5) size 10x18
+ RenderText {#text} at (82,42) size 4x17
+ text run at (82,42) width 4: " "
+ RenderTextControl {INPUT} at (86,34) size 82x34 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (1,1) size 80x32
+ RenderBlock {DIV} at (0,7) size 14x18
+ RenderText {#text} at (168,42) size 4x17
+ text run at (168,42) width 4: " "
+ RenderTextControl {INPUT} at (172,34) size 82x34 [bgcolor=#FF0000] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (3,3) size 76x28
+ RenderBlock {DIV} at (0,5) size 10x18
+ RenderText {#text} at (254,42) size 4x17
+ text run at (254,42) width 4: " "
+ RenderTextControl {INPUT} at (258,34) size 82x34 [bgcolor=#FFFFFF] [border: (2px dashed #000000)]
+ RenderFlexibleBox {DIV} at (3,3) size 76x28
+ RenderBlock {DIV} at (0,5) size 10x18
+ RenderText {#text} at (340,42) size 4x17
+ text run at (340,42) width 4: " "
+ RenderBR {BR} at (344,56) size 0x0
+ RenderBR {BR} at (0,68) size 0x17
+ RenderTextControl {INPUT} at (0,85) size 166x100 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (3,0) size 160x100
+ RenderBlock {DIV} at (0,3) size 94x94
+ RenderText {#text} at (166,165) size 4x17
+ text run at (166,165) width 4: " "
+ RenderTextControl {INPUT} at (170,87) size 166x100 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (1,0) size 164x100
+ RenderBlock {DIV} at (0,1) size 98x98
+ RenderText {#text} at (336,165) size 4x17
+ text run at (336,165) width 4: " "
+ RenderTextControl {INPUT} at (340,85) size 166x100 [bgcolor=#FF0000] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (3,0) size 160x100
+ RenderBlock {DIV} at (0,3) size 94x94
+ RenderText {#text} at (506,165) size 4x17
+ text run at (506,165) width 4: " "
+ RenderTextControl {INPUT} at (510,85) size 166x100 [bgcolor=#FFFFFF] [border: (2px dashed #000000)]
+ RenderFlexibleBox {DIV} at (3,0) size 160x100
+ RenderBlock {DIV} at (0,3) size 94x94
+ RenderText {#text} at (676,165) size 4x17
+ text run at (676,165) width 4: " "
+ RenderBR {BR} at (680,179) size 0x0
+ RenderBR {BR} at (0,187) size 0x17
+ RenderTextControl {INPUT} at (0,204) size 114x34 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (3,3) size 108x28
+ RenderBlock {DIV} at (0,5) size 42x18
+ RenderText {#text} at (114,212) size 4x17
+ text run at (114,212) width 4: " "
+ RenderTextControl {INPUT} at (118,204) size 114x34 [bgcolor=#FFFFFF]
+ RenderFlexibleBox {DIV} at (1,1) size 112x32
+ RenderBlock {DIV} at (0,7) size 46x18
+ RenderText {#text} at (232,212) size 4x17
+ text run at (232,212) width 4: " "
+ RenderTextControl {INPUT} at (236,204) size 114x34 [bgcolor=#FF0000] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (3,3) size 108x28
+ RenderBlock {DIV} at (0,5) size 42x18
+ RenderText {#text} at (350,212) size 4x17
+ text run at (350,212) width 4: " "
+ RenderTextControl {INPUT} at (354,204) size 114x34 [bgcolor=#FFFFFF] [border: (2px dashed #000000)]
+ RenderFlexibleBox {DIV} at (3,3) size 108x28
+ RenderBlock {DIV} at (0,5) size 42x18
+ RenderText {#text} at (468,212) size 4x17
+ text run at (468,212) width 4: " "
+ RenderBR {BR} at (472,226) size 0x0
+ RenderBR {BR} at (0,238) size 0x17
+ RenderTextControl {INPUT} at (2,257) size 113x34 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (3,3) size 107x28
+ RenderBlock {DIV} at (0,5) size 41x18
+ RenderText {#text} at (117,265) size 4x17
+ text run at (117,265) width 4: " "
+ RenderTextControl {INPUT} at (121,257) size 131x34 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (3,3) size 125x28
+ RenderBlock {DIV} at (0,5) size 59x18
+ RenderText {#text} at (252,265) size 4x17
+ text run at (252,265) width 4: " "
+ RenderTextControl {INPUT} at (256,257) size 131x34 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (14,8) size 103x18
+ RenderBlock {DIV} at (0,0) size 37x18
+ RenderText {#text} at (387,265) size 4x17
+ text run at (387,265) width 4: " "
+ RenderTextControl {INPUT} at (391,257) size 131x34 [bgcolor=#FFFFFF] [border: (2px inset #000000)]
+ RenderFlexibleBox {DIV} at (14,8) size 103x18
+ RenderBlock {DIV} at (0,0) size 37x18
+ RenderText {#text} at (522,265) size 4x17
+ text run at (522,265) width 4: " "
+ RenderBR {BR} at (526,279) size 0x0
+ RenderBR {BR} at (0,293) size 0x17
+layer at (11,118) size 10x17
+ RenderBlock {DIV} at (0,0) size 10x17
+ RenderText {#text} at (0,0) size 9x17
+ text run at (0,0) width 9: "1"
+layer at (95,118) size 14x17
+ RenderBlock {DIV} at (0,0) size 14x17
+ RenderText {#text} at (0,0) size 9x17
+ text run at (0,0) width 9: "2"
+layer at (183,118) size 10x17
+ RenderBlock {DIV} at (0,0) size 10x17
+ RenderText {#text} at (0,0) size 9x17
+ text run at (0,0) width 9: "3"
+layer at (269,118) size 10x17
+ RenderBlock {DIV} at (0,0) size 10x17
+ RenderText {#text} at (0,0) size 9x17
+ text run at (0,0) width 9: "4"
+layer at (11,163) size 94x94 scrollHeight 112
+ RenderBlock {DIV} at (0,0) size 94x94
+ RenderText {#text} at (0,0) size 56x112
+ text run at (0,0) width 56: "5"
+layer at (179,163) size 98x98 scrollHeight 112
+ RenderBlock {DIV} at (0,0) size 98x98
+ RenderText {#text} at (0,0) size 56x112
+ text run at (0,0) width 56: "6"
+layer at (351,163) size 94x94 scrollHeight 112
+ RenderBlock {DIV} at (0,0) size 94x94
+ RenderText {#text} at (0,0) size 56x112
+ text run at (0,0) width 56: "7"
+layer at (521,163) size 94x94 scrollHeight 112
+ RenderBlock {DIV} at (0,0) size 94x94
+ RenderText {#text} at (0,0) size 56x112
+ text run at (0,0) width 56: "8"
+layer at (11,288) size 42x17
+ RenderBlock {DIV} at (0,0) size 42x17
+ RenderText {#text} at (0,0) size 27x17
+ text run at (0,0) width 27: "101"
+layer at (127,288) size 46x17
+ RenderBlock {DIV} at (0,0) size 46x17
+ RenderText {#text} at (0,0) size 27x17
+ text run at (0,0) width 27: "102"
+layer at (247,288) size 42x17
+ RenderBlock {DIV} at (0,0) size 42x17
+ RenderText {#text} at (0,0) size 27x17
+ text run at (0,0) width 27: "103"
+layer at (365,288) size 42x17
+ RenderBlock {DIV} at (0,0) size 42x17
+ RenderText {#text} at (0,0) size 27x17
+ text run at (0,0) width 27: "104"
+layer at (13,341) size 41x17
+ RenderBlock {DIV} at (0,0) size 41x17
+ RenderText {#text} at (0,0) size 27x17
+ text run at (0,0) width 27: "105"
+layer at (132,341) size 59x17
+ RenderBlock {DIV} at (0,0) size 59x17
+ RenderText {#text} at (0,0) size 27x17
+ text run at (0,0) width 27: "106"
+layer at (278,341) size 37x17
+ RenderBlock {DIV} at (0,0) size 37x17
+ RenderText {#text} at (0,0) size 27x17
+ text run at (0,0) width 27: "107"
+layer at (413,341) size 37x17
+ RenderBlock {DIV} at (0,0) size 37x17
+ RenderText {#text} at (0,0) size 27x17
+ text run at (0,0) width 27: "108"
+layer at (21,118) size 66x16
+ RenderBlock (relative positioned) {DIV} at (10,6) size 66x16
+layer at (109,118) size 66x16
+ RenderBlock (relative positioned) {DIV} at (14,8) size 66x16
+layer at (193,118) size 66x16
+ RenderBlock (relative positioned) {DIV} at (10,6) size 66x16
+layer at (279,118) size 66x16
+ RenderBlock (relative positioned) {DIV} at (10,6) size 66x16
+layer at (105,202) size 66x16
+ RenderBlock (relative positioned) {DIV} at (94,42) size 66x16
+layer at (277,204) size 66x16
+ RenderBlock (relative positioned) {DIV} at (98,42) size 66x16
+layer at (445,202) size 66x16
+ RenderBlock (relative positioned) {DIV} at (94,42) size 66x16
+layer at (615,202) size 66x16
+ RenderBlock (relative positioned) {DIV} at (94,42) size 66x16
+layer at (53,288) size 66x16
+ RenderBlock (relative positioned) {DIV} at (42,6) size 66x16
+layer at (173,288) size 66x16
+ RenderBlock (relative positioned) {DIV} at (46,8) size 66x16
+layer at (289,288) size 66x16
+ RenderBlock (relative positioned) {DIV} at (42,6) size 66x16
+layer at (407,288) size 66x16
+ RenderBlock (relative positioned) {DIV} at (42,6) size 66x16
+layer at (54,341) size 66x16
+ RenderBlock (relative positioned) {DIV} at (41,6) size 66x16
+layer at (191,341) size 66x16
+ RenderBlock (relative positioned) {DIV} at (59,6) size 66x16
+layer at (315,341) size 66x16
+ RenderBlock (relative positioned) {DIV} at (37,1) size 66x16
+layer at (450,341) size 66x16
+ RenderBlock (relative positioned) {DIV} at (37,1) size 66x16
Added: trunk/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html (0 => 219332)
--- trunk/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html (rev 0)
+++ trunk/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html 2017-07-11 15:34:41 UTC (rev 219332)
@@ -0,0 +1,34 @@
+<html>
+<head>
+<title>Test that the width of input type number is incremented with the width of the spin button</title>
+<body>
+<p>Test that spin buttons don't cover the value of input type number.
+On the GTK+ port, the width of the input field type number is incremented
+with the width of the spin button.
+The test passes if you see below the value of the 16 input numbers visible
+(from 1 to 8 and from 101 to 108)</p>
+<br /> <br />
+<input type="number" style="width: 1em; height: 1em;" value=1>
+<input type="number" style="width: 1em; height: 1em; border: 0px;" value=2>
+<input type="number" style="width: 1em; height: 1em; background-color: red;" value=3>
+<input type="number" style="width: 1em; height: 1em; border-style: dashed;" value=4>
+<br /> <br />
+<input type="number" style="width: 1em; height: 1em; font-size: 100px;" value=5>
+<input type="number" style="width: 1em; height: 1em; border: 0px; font-size: 100px;" value=6>
+<input type="number" style="width: 1em; height: 1em; background-color: red; font-size: 100px;" value=7>
+<input type="number" style="width: 1em; height: 1em; border-style: dashed; font-size: 100px;" value=8>
+<br /> <br />
+<input type="number" style="width: 3em; height: 1em;" value=101>
+<input type="number" style="width: 3em; height: 1em; border: 0px;" value=102>
+<input type="number" style="width: 3em; height: 1em; background-color: red;" value=103>
+<input type="number" style="width: 3em; height: 1em; border-style: dashed;" value=104>
+<br /> <br />
+<input type="number" min="0" max="1000" value=105>
+<input type="number" min="0" max="1000" style="width: 65px; height: 34px" value=106>
+<input type="number" min="0" max="1000" style="width: 65px; height: 34px; padding: 6px 12px;" value=107>
+<input type="number" style="width: 65px; height: 34px; padding: 6px 12px;" value=108>
+<br /><br />
+</body>
+</div>
+</body>
+</html>
Modified: trunk/Source/WebCore/ChangeLog (219331 => 219332)
--- trunk/Source/WebCore/ChangeLog 2017-07-11 15:32:38 UTC (rev 219331)
+++ trunk/Source/WebCore/ChangeLog 2017-07-11 15:34:41 UTC (rev 219332)
@@ -1,3 +1,28 @@
+2017-07-11 Carlos Alberto Lopez Perez <clo...@igalia.com>
+
+ [GTK] Spin buttons on input type number appear over the value itself for small widths
+ https://bugs.webkit.org/show_bug.cgi?id=173572
+
+ Reviewed by Carlos Garcia Campos.
+
+ When drawing the spin buttons, override the width of the input
+ element to increment it with the width of the spin button.
+ This ensures that we don't end up covering the input values with
+ the spin buttons.
+
+ Do this also for user controlled styles, because most web authors
+ won't test how their site renders on WebKitGTK+, and they will
+ assume spin buttons in the order of 13 pixels wide (that is what
+ most browsers use), but the GTK+ spin button is much wider (66 pixels).
+
+ Test: platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html
+
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::adjustStyle):
+ * rendering/RenderThemeGtk.cpp:
+ (WebCore::RenderThemeGtk::adjustTextFieldStyle): Call the theme's adjustTextFieldStyle() also for user controlled styles.
+ (WebCore::RenderThemeGtk::adjustInnerSpinButtonStyle):
+
2017-07-11 Youenn Fablet <you...@apple.com>
We should do ICE candidate filtering at the Document level
Modified: trunk/Source/WebCore/rendering/RenderTheme.cpp (219331 => 219332)
--- trunk/Source/WebCore/rendering/RenderTheme.cpp 2017-07-11 15:32:38 UTC (rev 219331)
+++ trunk/Source/WebCore/rendering/RenderTheme.cpp 2017-07-11 15:34:41 UTC (rev 219332)
@@ -91,11 +91,18 @@
style.setDisplay(BLOCK);
if (UAHasAppearance && isControlStyled(style, border, background, backgroundColor)) {
- if (part == MenulistPart) {
+ switch (part) {
+ case MenulistPart:
style.setAppearance(MenulistButtonPart);
part = MenulistButtonPart;
- } else
+ break;
+ case TextFieldPart:
+ adjustTextFieldStyle(styleResolver, style, element);
+ FALLTHROUGH;
+ default:
style.setAppearance(NoControlPart);
+ break;
+ }
}
if (!style.hasAppearance())
Modified: trunk/Source/WebCore/rendering/RenderThemeGtk.cpp (219331 => 219332)
--- trunk/Source/WebCore/rendering/RenderThemeGtk.cpp 2017-07-11 15:32:38 UTC (rev 219331)
+++ trunk/Source/WebCore/rendering/RenderThemeGtk.cpp 2017-07-11 15:34:41 UTC (rev 219332)
@@ -936,7 +936,7 @@
if (!is<HTMLInputElement>(element) || !shouldHaveSpinButton(downcast<HTMLInputElement>(*element)))
return;
- // Spinbuttons need a minimum height to be rendered correctly.
+ // Input field need minimum dimensions to render the spinbuttons correctly (without covering the values).
auto& spinButtonWidget = static_cast<RenderThemeSpinButton&>(RenderThemeWidget::getOrCreate(RenderThemeWidget::Type::SpinButton));
spinButtonWidget.spinButton().setState(GTK_STATE_FLAG_NORMAL);
spinButtonWidget.entry().setState(GTK_STATE_FLAG_NORMAL);
@@ -947,8 +947,18 @@
preferredSize = preferredSize.expandedTo(spinButtonWidget.entry().preferredSize());
IntSize upPreferredSize = preferredSize.expandedTo(spinButtonWidget.up().preferredSize());
IntSize downPreferredSize = preferredSize.expandedTo(spinButtonWidget.down().preferredSize());
- int height = std::max(upPreferredSize.height(), downPreferredSize.height());
- style.setMinHeight(Length(height, Fixed));
+
+ // Ensure that the minimum height space is enough for the taller of the spin buttons.
+ int minimumHeight = std::max(upPreferredSize.height(), downPreferredSize.height());
+ style.setMinHeight(Length(minimumHeight, Fixed));
+
+ // The default theme for the GTK+ port uses very wide spin buttons (66px) compared to what other
+ // browsers use (~13 px). And unfortunately, most of the web developers won't test how their site
+ // renders on WebKitGTK+. To ensure that spin buttons don't end up covering the values of the input
+ // field, we override the width of the input element and always increment it with the width needed
+ // for the spinbutton (when drawing the spinbutton).
+ int minimumWidth = style.width().intValue() + upPreferredSize.width() + downPreferredSize.width();
+ style.setMinWidth(Length(minimumWidth, Fixed));
}
bool RenderThemeGtk::paintTextField(const RenderObject& renderObject, const PaintInfo& paintInfo, const FloatRect& rect)
@@ -1520,9 +1530,10 @@
IntSize upPreferredSize = spinButtonWidget.up().preferredSize();
IntSize downPreferredSize = spinButtonWidget.down().preferredSize();
- int buttonSize = std::max(std::max(upPreferredSize.width(), downPreferredSize.width()), std::max(upPreferredSize.height(), downPreferredSize.height()));
- style.setWidth(Length(buttonSize * 2, Fixed));
- style.setHeight(Length(buttonSize, Fixed));
+ int minimumHeight = std::max(upPreferredSize.height(), downPreferredSize.height());
+ int minimumWidth = upPreferredSize.width() + downPreferredSize.width();
+ style.setWidth(Length(minimumWidth, Fixed));
+ style.setHeight(Length(minimumHeight, Fixed));
}
bool RenderThemeGtk::paintInnerSpinButton(const RenderObject& renderObject, const PaintInfo& paintInfo, const IntRect& rect)
_______________________________________________ webkit-changes mailing list webkit-changes@lists.webkit.org https://lists.webkit.org/mailman/listinfo/webkit-changes
