Skip to content
Permalink
Browse files
Button elements are clipping overflow by default
Button elements are clipping overflow by default
https://bugs.webkit.org/show_bug.cgi?id=173872

Reviewed by Aditya Keerthi.

This patch is to align Webkit with Gecko / Firefox and Blink / Chromium.

Merge - https://src.chromium.org/viewvc/blink?view=revision&revision=193213

By default, the button element has clipping overflow and it is not aligned with web
and causes webcompat issues (e.g., http://nydailynews.com (see the feedback button)).

* Source/WebCore/rendering/RenderButton.cpp:
(RenderButton::hasControlClip): Add new function
* Source/WebCore/rendering/RenderButton.h: Update "hasControlClip" to not return
true by default
* LayoutTests/fast/forms/control-clip.html: Rebaselined
* LayoutTests/fast/forms/control-clip-overflow.html: Rebaselined
* LayoutTests/platform/gtk/fast/forms/control-clip-expected.png: Rebaselined
* LayoutTests/platform/gtk/fast/forms/control-clip-expected.txt: Rebaselined
* LayoutTests/platform/gtk/fast/forms/control-clip-overflow-expected.png: Rebaselined
* LayoutTests/platform/gtk/fast/forms/control-clip-overflow-expected.txt: Rebaselined
* LayoutTests/platform/ios/fast/forms/control-clip-expected.txt: Rebaselined
* LayoutTests/platform/ios/fast/forms/control-clip-overflow-expected.txt: Rebaselined
* LayoutTests/platform/mac/fast/forms/control-clip-expected.png: Rebaselined
* LayoutTests/platform/mac/fast/forms/control-clip-expected.txt: Rebaselined
* LayoutTests/platform/mac/fast/forms/control-clip-overflow-expected.png: Rebaselined
* LayoutTests/platform/mac/fast/forms/control-clip-overflow-expected.txt: Rebaselined

Canonical link: https://commits.webkit.org/257439@main
  • Loading branch information
Ahmad-S792 authored and Ahmad Saleem committed Dec 6, 2022
1 parent e18f26f commit 7db4da203517ad5d8bfdc28593054beedbad2a74
Show file tree
Hide file tree
Showing 14 changed files with 66 additions and 54 deletions.
@@ -6,7 +6,8 @@
REGRESSION: Really long &lt;option> causes unnecessary page scroll bars to accommodate content</i>.
</p>
<p>
There should not be scroll bars below the popup and the button.
There should not be scroll bars below the popup.
There should be scrollbars below the button (see https://bugs.webkit.org/show_bug.cgi?id=173872).
</p>
<div class="test-area">
<select style="width: 80px">
@@ -12,7 +12,7 @@
</p>
<p>
Each button below should have a yellow border and a black dashed outline.
Contents should not overflow the yellow border.
Contents should overflow the yellow border.
</p>
<p>
<button>
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -6,12 +6,11 @@ layer at (0,0) size 800x600
RenderBlock {P} at (0,0) size 784x18
RenderText {#text} at (0,0) size 228x17
text run at (0,0) width 228: "Tests that buttons clip their contents."
RenderBlock {P} at (0,34) size 784x36
RenderText {#text} at (0,0) size 738x35
RenderBlock {P} at (0,34) size 784x18
RenderText {#text} at (0,0) size 763x17
text run at (0,0) width 481: "Each button below should have a yellow border and a black dashed outline. "
text run at (481,0) width 257: "Contents should not overflow the yellow"
text run at (0,18) width 45: "border."
RenderBlock {P} at (0,86) size 784x50
text run at (481,0) width 282: "Contents should overflow the yellow border."
RenderBlock {P} at (0,68) size 784x50
RenderButton {BUTTON} at (0,0) size 100x50 [color=#000000CC] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderBlock (anonymous) at (12,12) size 76x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
@@ -22,7 +21,7 @@ layer at (0,0) size 800x600
text run at (12,38) width 30: "only"
text run at (3,56) width 48: "please"
RenderText {#text} at (0,0) size 0x0
RenderButton {BUTTON} at (0,152) size 100x50 [color=#000000CC] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderButton {BUTTON} at (0,134) size 100x50 [color=#000000CC] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderBlock (anonymous) at (12,12) size 76x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
RenderBlock (floating) {DIV} at (52,2) size 20x100 [bgcolor=#006400]
@@ -31,9 +30,9 @@ layer at (0,0) size 800x600
text run at (5,20) width 44: "words"
text run at (12,38) width 30: "only"
text run at (3,56) width 48: "please"
RenderBlock {P} at (0,218) size 784x0
layer at (8,226) size 100x50
RenderButton {BUTTON} at (8,226) size 100x50 [color=#000000CC] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderBlock {P} at (0,200) size 784x0
layer at (8,208) size 100x50
RenderButton {BUTTON} at (8,208) size 100x50 [color=#000000CC] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderBlock (anonymous) at (12,12) size 76x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
RenderBlock (floating) {DIV} at (52,2) size 20x100 [bgcolor=#006400]
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -16,18 +16,20 @@ layer at (0,0) size 800x600
text run at (0,18) width 226: "scroll bars to accommodate content"
RenderText {#text} at (225,18) size 5x17
text run at (225,18) width 5: "."
RenderBlock {P} at (0,52) size 784x18
RenderText {#text} at (0,0) size 402x17
text run at (0,0) width 402: "There should not be scroll bars below the popup and the button."
layer at (8,94) size 100x50
RenderBlock {DIV} at (0,86) size 100x50
RenderBlock {P} at (0,52) size 784x36
RenderText {#text} at (0,0) size 617x35
text run at (0,0) width 312: "There should not be scroll bars below the popup. "
text run at (312,0) width 305: "There should be scrollbars below the button (see"
text run at (0,18) width 322: "https://bugs.webkit.org/show_bug.cgi?id=173872)."
layer at (8,112) size 100x50
RenderBlock {DIV} at (0,104) size 100x50
RenderMenuList {SELECT} at (0,0) size 80x30 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
RenderBlock (anonymous) at (1,1) size 78x28
RenderText at (5,5) size 191x17
text run at (5,5) width 191: "Lorem ipsum dolor sit amet"
RenderText {#text} at (0,0) size 0x0
layer at (8,164) size 100x50
RenderBlock {DIV} at (0,156) size 100x50
layer at (8,182) size 100x50 clip at (8,182) size 100x35 scrollWidth 199
RenderBlock {DIV} at (0,174) size 100x50
RenderButton {BUTTON} at (0,0) size 80x27 [color=#000000CC] [bgcolor=#C0C0C0] [border: (2px outset #C0C0C0)]
RenderBlock (anonymous) at (8,4) size 64x18
RenderText {#text} at (0,0) size 191x17
@@ -6,12 +6,11 @@ layer at (0,0) size 800x600
RenderBlock {P} at (0,0) size 784x20
RenderText {#text} at (0,0) size 235x19
text run at (0,0) width 235: "Tests that buttons clip their contents."
RenderBlock {P} at (0,36) size 784x40
RenderText {#text} at (0,0) size 748x39
RenderBlock {P} at (0,36) size 784x20
RenderText {#text} at (0,0) size 773x19
text run at (0,0) width 487: "Each button below should have a yellow border and a black dashed outline. "
text run at (486,0) width 262: "Contents should not overflow the yellow"
text run at (0,20) width 45: "border."
RenderBlock {P} at (0,92) size 784x50
text run at (486,0) width 287: "Contents should overflow the yellow border."
RenderBlock {P} at (0,72) size 784x50
RenderButton {BUTTON} at (0,0) size 100x50 [color=#007AFF] [bgcolor=#E9E9EA] [border: (1px solid #FFFF00)]
RenderBlock (anonymous) at (11,11) size 78x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
@@ -22,7 +21,7 @@ layer at (0,0) size 800x600
text run at (16,30) width 22: "only"
text run at (9,44) width 36: "please"
RenderText {#text} at (0,0) size 0x0
RenderButton {BUTTON} at (0,158) size 100x50 [color=#007AFF] [bgcolor=#E9E9EA] [border: (1px solid #FFFF00)]
RenderButton {BUTTON} at (0,138) size 100x50 [color=#007AFF] [bgcolor=#E9E9EA] [border: (1px solid #FFFF00)]
RenderBlock (anonymous) at (11,11) size 78x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
RenderBlock (floating) {DIV} at (52,2) size 20x100 [bgcolor=#006400]
@@ -31,9 +30,9 @@ layer at (0,0) size 800x600
text run at (11,16) width 32: "words"
text run at (16,30) width 22: "only"
text run at (9,44) width 36: "please"
RenderBlock {P} at (0,224) size 784x0
layer at (8,232) size 100x50
RenderButton {BUTTON} at (8,232) size 100x50 [color=#007AFF] [bgcolor=#E9E9EA] [border: (1px solid #FFFF00)]
RenderBlock {P} at (0,204) size 784x0
layer at (8,212) size 100x50
RenderButton {BUTTON} at (8,212) size 100x50 [color=#007AFF] [bgcolor=#E9E9EA] [border: (1px solid #FFFF00)]
RenderBlock (anonymous) at (11,11) size 78x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
RenderBlock (floating) {DIV} at (52,2) size 20x100 [bgcolor=#006400]
@@ -16,18 +16,20 @@ layer at (0,0) size 800x600
text run at (0,20) width 229: "scroll bars to accommodate content"
RenderText {#text} at (228,20) size 5x19
text run at (228,20) width 5: "."
RenderBlock {P} at (0,56) size 784x20
RenderText {#text} at (0,0) size 408x19
text run at (0,0) width 408: "There should not be scroll bars below the popup and the button."
layer at (8,100) size 100x50
RenderBlock {DIV} at (0,92) size 100x50
RenderBlock {P} at (0,56) size 784x40
RenderText {#text} at (0,0) size 627x39
text run at (0,0) width 317: "There should not be scroll bars below the popup. "
text run at (316,0) width 311: "There should be scrollbars below the button (see"
text run at (0,20) width 327: "https://bugs.webkit.org/show_bug.cgi?id=173872)."
layer at (8,120) size 100x50
RenderBlock {DIV} at (0,112) size 100x50
RenderMenuList {SELECT} at (0,0) size 80x20 [color=#007AFF] [bgcolor=#E9E9EA] [border: (1px solid #FFFFFF)]
RenderBlock (anonymous) at (6,3) size 68x14
RenderText at (0,0) size 143x14
text run at (0,0) width 143: "Lorem ipsum dolor sit amet"
RenderText {#text} at (0,0) size 0x0
layer at (8,170) size 100x50
RenderBlock {DIV} at (0,162) size 100x50
layer at (8,190) size 100x50 clip at (8,190) size 100x35 scrollWidth 155
RenderBlock {DIV} at (0,182) size 100x50
RenderButton {BUTTON} at (0,0) size 80x20 [color=#007AFF] [bgcolor=#E9E9EA] [border: (1px solid #FFFFFF)]
RenderBlock (anonymous) at (12,3) size 56x14
RenderText {#text} at (0,0) size 143x14
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -6,12 +6,11 @@ layer at (0,0) size 800x600
RenderBlock {P} at (0,0) size 784x18
RenderText {#text} at (0,0) size 235x18
text run at (0,0) width 235: "Tests that buttons clip their contents."
RenderBlock {P} at (0,34) size 784x36
RenderText {#text} at (0,0) size 747x36
RenderBlock {P} at (0,34) size 784x18
RenderText {#text} at (0,0) size 772x18
text run at (0,0) width 487: "Each button below should have a yellow border and a black dashed outline. "
text run at (486,0) width 261: "Contents should not overflow the yellow"
text run at (0,18) width 45: "border."
RenderBlock {P} at (0,86) size 784x50
text run at (486,0) width 286: "Contents should overflow the yellow border."
RenderBlock {P} at (0,68) size 784x50
RenderButton {BUTTON} at (0,0) size 100x50 [color=#000000D8] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderBlock (anonymous) at (12,12) size 76x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
@@ -22,7 +21,7 @@ layer at (0,0) size 800x600
text run at (16,28) width 22: "only"
text run at (9,41) width 36: "please"
RenderText {#text} at (0,0) size 0x0
RenderButton {BUTTON} at (0,152) size 100x50 [color=#000000D8] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderButton {BUTTON} at (0,134) size 100x50 [color=#000000D8] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderBlock (anonymous) at (12,12) size 76x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
RenderBlock (floating) {DIV} at (52,2) size 20x100 [bgcolor=#006400]
@@ -31,9 +30,9 @@ layer at (0,0) size 800x600
text run at (11,15) width 32: "words"
text run at (16,28) width 22: "only"
text run at (9,41) width 36: "please"
RenderBlock {P} at (0,218) size 784x0
layer at (8,226) size 100x50
RenderButton {BUTTON} at (8,226) size 100x50 [color=#000000D8] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderBlock {P} at (0,200) size 784x0
layer at (8,208) size 100x50
RenderButton {BUTTON} at (8,208) size 100x50 [color=#000000D8] [bgcolor=#C0C0C0] [border: (2px outset #FFFF00)]
RenderBlock (anonymous) at (12,12) size 76x204
RenderBlock {DIV} at (0,0) size 74x204 [bgcolor=#008080] [border: (2px solid #800080)]
RenderBlock (floating) {DIV} at (52,2) size 20x100 [bgcolor=#006400]
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -16,18 +16,20 @@ layer at (0,0) size 800x600
text run at (0,18) width 229: "scroll bars to accommodate content"
RenderText {#text} at (228,18) size 5x18
text run at (228,18) width 5: "."
RenderBlock {P} at (0,52) size 784x18
RenderText {#text} at (0,0) size 408x18
text run at (0,0) width 408: "There should not be scroll bars below the popup and the button."
layer at (8,94) size 100x50
RenderBlock {DIV} at (0,86) size 100x50
RenderBlock {P} at (0,52) size 784x36
RenderText {#text} at (0,0) size 627x36
text run at (0,0) width 317: "There should not be scroll bars below the popup. "
text run at (316,0) width 311: "There should be scrollbars below the button (see"
text run at (0,18) width 327: "https://bugs.webkit.org/show_bug.cgi?id=173872)."
layer at (8,112) size 100x50
RenderBlock {DIV} at (0,104) size 100x50
RenderMenuList {SELECT} at (0,0) size 80x18 [bgcolor=#FFFFFF]
RenderBlock (anonymous) at (0,0) size 80x18
RenderText at (8,2) size 143x13
text run at (8,2) width 143: "Lorem ipsum dolor sit amet"
RenderText {#text} at (0,0) size 0x0
layer at (8,164) size 100x50
RenderBlock {DIV} at (0,156) size 100x50
layer at (8,182) size 100x50 clip at (8,182) size 100x35 scrollWidth 151
RenderBlock {DIV} at (0,174) size 100x50
RenderButton {BUTTON} at (0,0) size 80x18 [color=#000000D8] [bgcolor=#C0C0C0] [border: none (2px outset #C0C0C0) none (2px outset #C0C0C0)]
RenderBlock (anonymous) at (8,2) size 64x13
RenderText {#text} at (0,0) size 143x13
@@ -1,5 +1,6 @@
/**
* Copyright (C) 2005 Apple Inc.
* Copyright (C) 2005-2022 Apple Inc.
* Copyright (C) 2015 Google Inc. All rights reserved.
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Library General Public
@@ -169,4 +170,10 @@ void RenderButton::layout()
}
#endif

// Only clip overflow on input elements, to match other browsers.
bool RenderButton::hasControlClip() const
{
return is<HTMLInputElement>(formControlElement());
}

} // namespace WebCore
@@ -1,6 +1,7 @@
/*
* Copyright (C) 2005 Apple Inc.
*
* Copyright (C) 2005-2022 Apple Inc.
* Copyright (C) 2022 Google Inc. All rights reserved.
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Library General Public
* License as published by the Free Software Foundation; either
@@ -46,7 +47,7 @@ class RenderButton final : public RenderFlexibleBox {
void updateFromElement() override;

bool canHaveGeneratedChildren() const override;
bool hasControlClip() const override { return true; }
bool hasControlClip() const override;
LayoutRect controlClipRect(const LayoutPoint&) const override;

void updateAnonymousChildStyle(RenderStyle&) const override;

0 comments on commit 7db4da2

Please sign in to comment.