Changeset 219332 in webkit


Ignore:
Timestamp:
Jul 11, 2017 8:34:41 AM (7 years ago)
Author:
clopez@igalia.com
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.
Location:
trunk
Files:
3 added
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r219331 r219332  
     12017-07-11  Carlos Alberto Lopez Perez  <clopez@igalia.com>
     2
     3        [GTK] Spin buttons on input type number appear over the value itself for small widths
     4        https://bugs.webkit.org/show_bug.cgi?id=173572
     5
     6        Reviewed by Carlos Garcia Campos.
     7
     8        * fast/forms/number/number-size-expected.txt:
     9        * fast/forms/number/number-size.html: Obtain the size of the spinbutton by inspecting the shadow dom (is more reliable)
     10          and make the test for user controlled style special for the case of GTK+.
     11        * platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.png: Added.
     12        * platform/gtk/fast/forms/number/number-size-spinbutton-nocover-expected.txt: Added.
     13        * platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html: Added.
     14
    1152017-07-11  Youenn Fablet  <youenn@apple.com>
    216

  • trunk/LayoutTests/fast/forms/number/number-size-expected.txt

    r203333 r219332  
    99
    1010The number whose width is specified should respect the setting
    11 PASS numberWithWidth.offsetWidth is 100
    12 PASS numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth is 100
     11PASS numberWithWidth.offsetWidth is widthSpecified(100)
     12PASS numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth is widthSpecified(100)
    1313
    1414The number input should ignore size attribute for layout

  • trunk/LayoutTests/fast/forms/number/number-size.html

    r203333 r219332  
    33<head>
    44<script src="../../../resources/js-test-pre.js"></script>
     5<script src="../../../resources/platform-helper.js"></script>
     6<script src="../resources/common.js"></script>
    57<style>
    68
    … …  
    1517}
    1618
    17 input#number-without-spinbutton::-webkit-inner-spin-button {
    18      display: none;
    19      margin: 0;
    20 }
    2119input#number-with-width {
    2220     width: 100px;
    … …  
    3028
    3129<script>
     30
     31function widthSpecified(size) {
     32    // GTK+ port overrides the style width and always increments it with the spinbuttons size.
     33    if (isGtk())
     34      size += spinButtonWidth;
     35    return size;
     36}
     37
    3238description('Test for size attribute of input');
    3339
    3440var parent = document.createElement('div');
    3541document.body.appendChild(parent);
    36 parent.innerHTML = '<input type=text id=text>'
    37   + '<input type="number" id=number>'
    38   + '<input type="number" id="number-without-spinbutton" min="0" max="10" step="1">'
    39   + '<input type="number" id="number-with-spinbutton" min="0" max="10" step="1">'
     42parent.innerHTML = '<input type=text id="text">'
     43  + '<input type="number" id="number">'
    4044  + '<input type="number" id="number-with-width">'
    4145var number = document.getElementById('number');
    42 var numberWithoutSpinButton = document.getElementById('number-without-spinbutton');
    43 var numberWithSpinButton = document.getElementById('number-with-spinbutton');
    4446var numberWithWidth = document.getElementById('number-with-width');
    4547var text = document.getElementById('text');
    4648
    4749// The width of spin button should differ by environment. So it should be calculated here.
    48 var spinButtonWidth = numberWithSpinButton.offsetWidth - numberWithoutSpinButton.offsetWidth;
     50var spinButtonWidth = getElementByPseudoId(internals.shadowRoot(number), "-webkit-inner-spin-button").offsetWidth;
    4951// spinButtonWidth should have menaningful width.
    5052shouldBeGreaterThanOrEqual('spinButtonWidth', '1');
    … …  
    5557
    5658debug('The number whose width is specified should respect the setting');
    57 shouldBe('numberWithWidth.offsetWidth', '100');
    58 shouldBe('numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth', '100');
     59shouldBe('numberWithWidth.offsetWidth', 'widthSpecified(100)');
     60shouldBe('numberWithWidth.min = 0; numberWithWidth.max = 100; numberWithWidth.offsetWidth', 'widthSpecified(100)');
    5961debug('');
    6062

  • trunk/Source/WebCore/ChangeLog

    r219331 r219332  
     12017-07-11  Carlos Alberto Lopez Perez  <clopez@igalia.com>
     2
     3        [GTK] Spin buttons on input type number appear over the value itself for small widths
     4        https://bugs.webkit.org/show_bug.cgi?id=173572
     5
     6        Reviewed by Carlos Garcia Campos.
     7
     8        When drawing the spin buttons, override the width of the input
     9        element to increment it with the width of the spin button.
     10        This ensures that we don't end up covering the input values with
     11        the spin buttons.
     12
     13        Do this also for user controlled styles, because most web authors
     14        won't test how their site renders on WebKitGTK+, and they will
     15        assume spin buttons in the order of 13 pixels wide (that is what
     16        most browsers use), but the GTK+ spin button is much wider (66 pixels).
     17
     18        Test: platform/gtk/fast/forms/number/number-size-spinbutton-nocover.html
     19
     20        * rendering/RenderTheme.cpp:
     21        (WebCore::RenderTheme::adjustStyle):
     22        * rendering/RenderThemeGtk.cpp:
     23        (WebCore::RenderThemeGtk::adjustTextFieldStyle): Call the theme's adjustTextFieldStyle() also for user controlled styles.
     24        (WebCore::RenderThemeGtk::adjustInnerSpinButtonStyle):
     25
    1262017-07-11  Youenn Fablet  <youenn@apple.com>
    227

  • trunk/Source/WebCore/rendering/RenderTheme.cpp

    r217937 r219332  
    9292
    9393    if (UAHasAppearance && isControlStyled(style, border, background, backgroundColor)) {
    94         if (part == MenulistPart) {
     94        switch (part) {
     95        case MenulistPart:
    9596            style.setAppearance(MenulistButtonPart);
    9697            part = MenulistButtonPart;
    97         } else
     98            break;
     99        case TextFieldPart:
     100            adjustTextFieldStyle(styleResolver, style, element);
     101            FALLTHROUGH;
     102        default:
    98103            style.setAppearance(NoControlPart);
     104            break;
     105        }
    99106    }
    100107

  • trunk/Source/WebCore/rendering/RenderThemeGtk.cpp

    r217702 r219332  
    937937        return;
    938938
    939     // Spinbuttons need a minimum height to be rendered correctly.
     939    // Input field need minimum dimensions to render the spinbuttons correctly (without covering the values).
    940940    auto& spinButtonWidget = static_cast<RenderThemeSpinButton&>(RenderThemeWidget::getOrCreate(RenderThemeWidget::Type::SpinButton));
    941941    spinButtonWidget.spinButton().setState(GTK_STATE_FLAG_NORMAL);
    … …  
    948948    IntSize upPreferredSize = preferredSize.expandedTo(spinButtonWidget.up().preferredSize());
    949949    IntSize downPreferredSize = preferredSize.expandedTo(spinButtonWidget.down().preferredSize());
    950     int height = std::max(upPreferredSize.height(), downPreferredSize.height());
    951     style.setMinHeight(Length(height, Fixed));
     950
     951    // Ensure that the minimum height space is enough for the taller of the spin buttons.
     952    int minimumHeight = std::max(upPreferredSize.height(), downPreferredSize.height());
     953    style.setMinHeight(Length(minimumHeight, Fixed));
     954
     955    // The default theme for the GTK+ port uses very wide spin buttons (66px) compared to what other
     956    // browsers use (~13 px). And unfortunately, most of the web developers won't test how their site
     957    // renders on WebKitGTK+. To ensure that spin buttons don't end up covering the values of the input
     958    // field, we override the width of the input element and always increment it with the width needed
     959    // for the spinbutton (when drawing the spinbutton).
     960    int minimumWidth = style.width().intValue() + upPreferredSize.width() + downPreferredSize.width();
     961    style.setMinWidth(Length(minimumWidth, Fixed));
    952962}
    953963
    … …  
    15211531    IntSize upPreferredSize = spinButtonWidget.up().preferredSize();
    15221532    IntSize downPreferredSize = spinButtonWidget.down().preferredSize();
    1523     int buttonSize = std::max(std::max(upPreferredSize.width(), downPreferredSize.width()), std::max(upPreferredSize.height(), downPreferredSize.height()));
    1524     style.setWidth(Length(buttonSize * 2, Fixed));
    1525     style.setHeight(Length(buttonSize, Fixed));
     1533    int minimumHeight = std::max(upPreferredSize.height(), downPreferredSize.height());
     1534    int minimumWidth = upPreferredSize.width() + downPreferredSize.width();
     1535    style.setWidth(Length(minimumWidth, Fixed));
     1536    style.setHeight(Length(minimumHeight, Fixed));
    15261537}
    15271538
Note: See TracChangeset for help on using the changeset viewer.