[GTK] Spin buttons on input type number appear over the value itself for small widths
authorclopez@igalia.com <clopez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 11 Jul 2017 15:34:41 +0000 (15:34 +0000)
committerclopez@igalia.com <clopez@igalia.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 11 Jul 2017 15:34:41 +0000 (15:34 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@219332 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/fast/forms/number/number-size-expected.txt
LayoutTests/fast/forms/number/number-size.html
LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.png [new file with mode: 0644]
LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt [new file with mode: 0644]
LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderTheme.cpp
Source/WebCore/rendering/RenderThemeGtk.cpp

index 8e9a2db..6a89d67 100644 (file)
@@ -1,3 +1,17 @@
+2017-07-11  Carlos Alberto Lopez Perez  <clopez@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  <youenn@apple.com>
 
         We should do ICE candidate filtering at the Document level
index cb3dee2..beae28d 100644 (file)
@@ -8,8 +8,8 @@ The content area of the number input without min/max/step attribute should have
 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
index 539cd02..c524608 100644 (file)
@@ -2,6 +2,8 @@
 <html>
 <head>
 <script src="../../../resources/js-test-pre.js"></script>
+<script src="../../../resources/platform-helper.js"></script>
+<script src="../resources/common.js"></script>
 <style>
 
 input.with-border::-webkit-inner-spin-button {
@@ -14,10 +16,6 @@ input.with-margin::-webkit-inner-spin-button {
      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 @@ input#number-with-width {
 <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 @@ shouldBe('number.offsetWidth', 'text.offsetWidth');
 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');
diff --git a/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.png b/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.png
new file mode 100644 (file)
index 0000000..73ae422
Binary files /dev/null and b/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.png differ
diff --git a/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt b/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt
new file mode 100644 (file)
index 0000000..9dc451e
--- /dev/null
@@ -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
diff --git a/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html b/LayoutTests/platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html
new file mode 100644 (file)
index 0000000..2361719
--- /dev/null
@@ -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>
index 3969232..f06165c 100644 (file)
@@ -1,3 +1,28 @@
+2017-07-11  Carlos Alberto Lopez Perez  <clopez@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  <youenn@apple.com>
 
         We should do ICE candidate filtering at the Document level
index 99df773..281264d 100644 (file)
@@ -91,11 +91,18 @@ void RenderTheme::adjustStyle(StyleResolver& styleResolver, RenderStyle& style,
         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())
index f55b9a4..d86fa4e 100644 (file)
@@ -936,7 +936,7 @@ void RenderThemeGtk::adjustTextFieldStyle(StyleResolver&, RenderStyle& style, co
     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 @@ void RenderThemeGtk::adjustTextFieldStyle(StyleResolver&, RenderStyle& style, co
     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 @@ void RenderThemeGtk::adjustInnerSpinButtonStyle(StyleResolver&, RenderStyle& sty
 
     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)