Diff
Modified: trunk/LayoutTests/ChangeLog (270324 => 270325)
--- trunk/LayoutTests/ChangeLog 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/LayoutTests/ChangeLog 2020-12-01 20:57:09 UTC (rev 270325)
@@ -1,3 +1,19 @@
+2020-12-01 Aditya Keerthi <[email protected]>
+
+ [iOS] <button> with multi-line content does not render properly
+ https://bugs.webkit.org/show_bug.cgi?id=219372
+ <rdar://problem/6061602>
+
+ Reviewed by Darin Adler.
+
+ * fast/forms/button-multiline-height-expected.txt: Added.
+ * fast/forms/button-multiline-height.html: Added.
+ * platform/ios/css3/flexbox/button-expected.txt:
+ * platform/ios/fast/forms/box-shadow-override-expected.txt:
+ * platform/ios/fast/forms/button-sizes-expected.txt:
+ * platform/ios/fast/forms/control-restrict-line-height-expected.txt:
+ * platform/ios/fast/forms/input-button-sizes-expected.txt:
+
2020-12-01 Chris Dumez <[email protected]>
REGRESSION: imported/w3c/web-platform-tests/streams/transform-streams/terminate.any.html is a flaky failure
Added: trunk/LayoutTests/fast/forms/button-multiline-height-expected.txt (0 => 270325)
--- trunk/LayoutTests/fast/forms/button-multiline-height-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/forms/button-multiline-height-expected.txt 2020-12-01 20:57:09 UTC (rev 270325)
@@ -0,0 +1,14 @@
+Test that the height of a button that contains multiple lines of text is greater than the height of a button that contains a single line of text.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS multipleLinesBtn.offsetHeight > singleLineBtn.offsetHeight is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+Line 1
+
+Line 1
+Line 2
+
Added: trunk/LayoutTests/fast/forms/button-multiline-height.html (0 => 270325)
--- trunk/LayoutTests/fast/forms/button-multiline-height.html (rev 0)
+++ trunk/LayoutTests/fast/forms/button-multiline-height.html 2020-12-01 20:57:09 UTC (rev 270325)
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <script src=""
+ <script>
+ function runTest()
+ {
+ description("Test that the height of a button that contains multiple lines of text is greater than the height of a button that contains a single line of text.");
+
+ shouldBeTrue("multipleLinesBtn.offsetHeight > singleLineBtn.offsetHeight");
+ }
+ </script>
+</head>
+<body _onload_="runTest()">
+<button id="singleLineBtn">Line 1</button>
+<br>
+<button id="multipleLinesBtn">
+ <div>Line 1</div>
+ <div>Line 2</div>
+</button>
+</body>
+</html>
Modified: trunk/LayoutTests/platform/ios/css3/flexbox/button-expected.txt (270324 => 270325)
--- trunk/LayoutTests/platform/ios/css3/flexbox/button-expected.txt 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/LayoutTests/platform/ios/css3/flexbox/button-expected.txt 2020-12-01 20:57:09 UTC (rev 270325)
@@ -1,8 +1,8 @@
layer at (0,0) size 800x600
RenderView at (0,0) size 800x600
-layer at (0,0) size 800x270
- RenderBlock {HTML} at (0,0) size 800x270
- RenderBody {BODY} at (8,8) size 784x254
+layer at (0,0) size 800x272
+ RenderBlock {HTML} at (0,0) size 800x272
+ RenderBody {BODY} at (8,8) size 784x256
RenderBlock (anonymous) at (0,0) size 784x40
RenderText {#text} at (0,0) size 778x39
text run at (0,0) width 410: "Test for empty buttons, which inherit from RenderFlexibleBox. "
@@ -23,14 +23,14 @@
RenderButton {INPUT} at (2,48) size 24x20 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBR {BR} at (28,52) size 0x19
RenderBlock {HR} at (0,138) size 784x2 [border: (1px inset #000000)]
- RenderBlock (anonymous) at (0,148) size 784x106
+ RenderBlock (anonymous) at (0,148) size 784x108
RenderText {#text} at (0,0) size 745x39
text run at (0,0) width 745: "Empty <button> and <input type=button> with overflow: scroll;. The presence of the scrollbar should not shrink the"
text run at (0,20) width 45: "button."
RenderBR {BR} at (44,20) size 1x19
RenderBR {BR} at (43,40) size 0x19
- RenderBR {BR} at (43,73) size 0x19
+ RenderBR {BR} at (43,75) size 0x19
layer at (10,207) size 39x20 clip at (11,208) size 22x3
RenderButton {BUTTON} at (2,51) size 39x20 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
-layer at (10,240) size 39x20 clip at (11,241) size 22x3
- RenderButton {INPUT} at (2,84) size 39x20 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+layer at (10,231) size 39x31 clip at (11,232) size 22x14
+ RenderButton {INPUT} at (2,75) size 39x31 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
Modified: trunk/LayoutTests/platform/ios/fast/forms/box-shadow-override-expected.txt (270324 => 270325)
--- trunk/LayoutTests/platform/ios/fast/forms/box-shadow-override-expected.txt 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/LayoutTests/platform/ios/fast/forms/box-shadow-override-expected.txt 2020-12-01 20:57:09 UTC (rev 270325)
@@ -50,7 +50,7 @@
text run at (0,0) width 59: "Choose File"
RenderText {#text} at (422,12) size 4x19
text run at (422,12) width 4: " "
- RenderButton {INPUT} at (428,2) size 100x36 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (428,2) size 100x37 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (21,5) size 58x26
RenderText at (0,0) size 58x25
text run at (0,0) width 58: "Button"
@@ -62,13 +62,13 @@
text run at (0,0) width 32: "Button"
RenderText {#text} at (593,12) size 5x19
text run at (593,12) width 5: " "
- RenderButton {INPUT} at (597,21) size 28x9 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (6,1) size 15x7
+ RenderButton {INPUT} at (597,21) size 28x10 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (6,1) size 15x8
RenderText at (0,0) size 15x7
text run at (0,0) width 15: "Button"
RenderText {#text} at (624,12) size 5x19
text run at (624,12) width 5: " "
- RenderButton {BUTTON} at (630,2) size 100x36 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {BUTTON} at (630,2) size 100x37 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (21,5) size 58x26
RenderText {#text} at (0,0) size 58x25
text run at (0,0) width 58: "Button"
Modified: trunk/LayoutTests/platform/ios/fast/forms/button-sizes-expected.txt (270324 => 270325)
--- trunk/LayoutTests/platform/ios/fast/forms/button-sizes-expected.txt 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/LayoutTests/platform/ios/fast/forms/button-sizes-expected.txt 2020-12-01 20:57:09 UTC (rev 270325)
@@ -3,37 +3,37 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderButton {BUTTON} at (0,12) size 38x9 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (6,1) size 26x7
+ RenderButton {BUTTON} at (0,12) size 38x10 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (6,1) size 26x8
RenderText {#text} at (0,0) size 26x7
text run at (0,0) width 26: "Test Button"
RenderText {#text} at (37,3) size 5x19
text run at (37,3) width 5: " "
- RenderButton {BUTTON} at (41,11) size 45x10 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (7,1) size 31x8
+ RenderButton {BUTTON} at (41,11) size 45x11 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (7,1) size 31x9
RenderText {#text} at (0,0) size 31x8
text run at (0,0) width 31: "Test Button"
RenderText {#text} at (85,3) size 5x19
text run at (85,3) width 5: " "
- RenderButton {BUTTON} at (89,9) size 52x12 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (8,1) size 36x10
+ RenderButton {BUTTON} at (89,9) size 52x13 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (8,1) size 36x11
RenderText {#text} at (0,0) size 36x10
text run at (0,0) width 36: "Test Button"
RenderText {#text} at (140,3) size 5x19
text run at (140,3) width 5: " "
- RenderButton {BUTTON} at (144,8) size 59x14 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {BUTTON} at (144,8) size 59x15 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (9,1) size 41x12
RenderText {#text} at (0,0) size 41x11
text run at (0,0) width 41: "Test Button"
RenderText {#text} at (202,3) size 5x19
text run at (202,3) width 5: " "
- RenderButton {BUTTON} at (206,7) size 66x16 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (10,2) size 46x12
+ RenderButton {BUTTON} at (206,7) size 66x17 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (10,2) size 46x13
RenderText {#text} at (0,0) size 46x12
text run at (0,0) width 46: "Test Button"
RenderText {#text} at (271,3) size 5x19
text run at (271,3) width 5: " "
- RenderButton {BUTTON} at (275,6) size 73x18 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {BUTTON} at (275,6) size 73x19 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (11,2) size 51x14
RenderText {#text} at (0,0) size 51x13
text run at (0,0) width 51: "Test Button"
@@ -51,62 +51,62 @@
text run at (0,0) width 56: "Test Button"
RenderText {#text} at (521,3) size 5x19
text run at (521,3) width 5: " "
- RenderButton {BUTTON} at (527,3) size 87x21 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (13,3) size 61x15
+ RenderButton {BUTTON} at (527,3) size 87x22 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (13,3) size 61x16
RenderText {#text} at (0,0) size 61x15
text run at (0,0) width 61: "Test Button"
RenderText {#text} at (615,3) size 5x19
text run at (615,3) width 5: " "
- RenderButton {BUTTON} at (621,2) size 94x23 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {BUTTON} at (621,2) size 94x24 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (14,3) size 66x17
RenderText {#text} at (0,0) size 66x16
text run at (0,0) width 66: "Test Button"
RenderText {#text} at (716,3) size 5x19
text run at (716,3) width 5: " "
- RenderButton {BUTTON} at (2,35) size 101x25 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {BUTTON} at (2,36) size 101x26 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (15,3) size 71x19
RenderText {#text} at (0,0) size 71x18
text run at (0,0) width 71: "Test Button"
- RenderText {#text} at (104,37) size 5x19
- text run at (104,37) width 5: " "
- RenderButton {BUTTON} at (110,33) size 108x27 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (16,4) size 76x19
+ RenderText {#text} at (104,38) size 5x19
+ text run at (104,38) width 5: " "
+ RenderButton {BUTTON} at (110,34) size 108x28 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (16,4) size 76x20
RenderText {#text} at (0,0) size 76x19
text run at (0,0) width 76: "Test Button"
- RenderText {#text} at (219,37) size 5x19
- text run at (219,37) width 5: " "
- RenderButton {BUTTON} at (225,32) size 115x29 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderText {#text} at (219,38) size 5x19
+ text run at (219,38) width 5: " "
+ RenderButton {BUTTON} at (225,33) size 115x30 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (17,4) size 81x21
RenderText {#text} at (0,0) size 81x20
text run at (0,0) width 81: "Test Button"
- RenderText {#text} at (341,37) size 5x19
- text run at (341,37) width 5: " "
- RenderButton {BUTTON} at (347,31) size 122x30 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderText {#text} at (341,38) size 5x19
+ text run at (341,38) width 5: " "
+ RenderButton {BUTTON} at (347,32) size 122x31 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (18,4) size 86x22
RenderText {#text} at (0,0) size 86x21
text run at (0,0) width 86: "Test Button"
- RenderText {#text} at (470,37) size 5x19
- text run at (470,37) width 5: " "
- RenderButton {BUTTON} at (476,30) size 129x32 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (19,5) size 91x22
+ RenderText {#text} at (470,38) size 5x19
+ text run at (470,38) width 5: " "
+ RenderButton {BUTTON} at (476,31) size 129x33 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (19,5) size 91x23
RenderText {#text} at (0,0) size 91x22
text run at (0,0) width 91: "Test Button"
- RenderText {#text} at (606,37) size 5x19
- text run at (606,37) width 5: " "
- RenderButton {BUTTON} at (612,29) size 136x34 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderText {#text} at (606,38) size 5x19
+ text run at (606,38) width 5: " "
+ RenderButton {BUTTON} at (612,30) size 136x35 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (20,5) size 96x24
RenderText {#text} at (0,0) size 96x23
text run at (0,0) width 96: "Test Button"
- RenderText {#text} at (749,37) size 5x19
- text run at (749,37) width 5: " "
- RenderButton {BUTTON} at (2,69) size 143x36 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderText {#text} at (749,38) size 5x19
+ text run at (749,38) width 5: " "
+ RenderButton {BUTTON} at (2,71) size 143x37 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (21,5) size 101x26
RenderText {#text} at (0,0) size 101x25
text run at (0,0) width 101: "Test Button"
- RenderText {#text} at (146,79) size 5x19
- text run at (146,79) width 5: " "
- RenderButton {BUTTON} at (152,67) size 150x38 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (22,6) size 106x26
+ RenderText {#text} at (146,81) size 5x19
+ text run at (146,81) width 5: " "
+ RenderButton {BUTTON} at (152,69) size 150x39 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (22,6) size 106x27
RenderText {#text} at (0,0) size 106x26
text run at (0,0) width 106: "Test Button"
RenderText {#text} at (0,0) size 0x0
Modified: trunk/LayoutTests/platform/ios/fast/forms/control-restrict-line-height-expected.txt (270324 => 270325)
--- trunk/LayoutTests/platform/ios/fast/forms/control-restrict-line-height-expected.txt 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/LayoutTests/platform/ios/fast/forms/control-restrict-line-height-expected.txt 2020-12-01 20:57:09 UTC (rev 270325)
@@ -11,18 +11,18 @@
RenderText at (0,0) size 248x14
text run at (0,0) width 248: "This text should be centered vertically in the button"
RenderBR {BR} at (284,21) size 0x19
- RenderButton {INPUT} at (2,46) size 272x20 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (2,46) size 272x28 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (12,1) size 248x26
RenderText at (0,6) size 248x14
text run at (0,6) width 248: "This text should be centered vertically in the button"
RenderBR {BR} at (275,49) size 1x19
- RenderTextControl {INPUT} at (2,70) size 138x34 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
+ RenderTextControl {INPUT} at (2,78) size 138x34 [bgcolor=#FFFFFF] [border: (1px solid #4C4C4C)]
RenderFlexibleBox {DIV} at (6,3) size 125x27
RenderBlock {DIV} at (0,13) size 0x0
RenderBlock {DIV} at (0,0) size 125x26
RenderBlock {DIV} at (124,13) size 0x0
RenderText {#text} at (0,0) size 0x0
-layer at (17,81) size 124x26 scrollWidth 250
+layer at (17,89) size 124x26 scrollWidth 250
RenderBlock {DIV} at (0,0) size 125x26
RenderText {#text} at (0,6) size 248x14
text run at (0,6) width 248: "This text should be centered vertically in the button"
Modified: trunk/LayoutTests/platform/ios/fast/forms/input-button-sizes-expected.txt (270324 => 270325)
--- trunk/LayoutTests/platform/ios/fast/forms/input-button-sizes-expected.txt 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/LayoutTests/platform/ios/fast/forms/input-button-sizes-expected.txt 2020-12-01 20:57:09 UTC (rev 270325)
@@ -3,37 +3,37 @@
layer at (0,0) size 800x600
RenderBlock {HTML} at (0,0) size 800x600
RenderBody {BODY} at (8,8) size 784x584
- RenderButton {INPUT} at (0,13) size 38x9 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (6,1) size 26x7
+ RenderButton {INPUT} at (0,13) size 38x10 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (6,1) size 26x8
RenderText at (0,0) size 26x7
text run at (0,0) width 26: "Test Button"
RenderText {#text} at (37,4) size 5x19
text run at (37,4) width 5: " "
- RenderButton {INPUT} at (41,12) size 45x10 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (7,1) size 31x8
+ RenderButton {INPUT} at (41,12) size 45x11 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (7,1) size 31x9
RenderText at (0,0) size 31x8
text run at (0,0) width 31: "Test Button"
RenderText {#text} at (85,4) size 5x19
text run at (85,4) width 5: " "
- RenderButton {INPUT} at (89,10) size 52x12 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (8,1) size 36x10
+ RenderButton {INPUT} at (89,10) size 52x13 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (8,1) size 36x11
RenderText at (0,0) size 36x10
text run at (0,0) width 36: "Test Button"
RenderText {#text} at (140,4) size 5x19
text run at (140,4) width 5: " "
- RenderButton {INPUT} at (144,9) size 59x14 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (144,9) size 59x15 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (9,1) size 41x12
RenderText at (0,0) size 41x11
text run at (0,0) width 41: "Test Button"
RenderText {#text} at (202,4) size 5x19
text run at (202,4) width 5: " "
- RenderButton {INPUT} at (206,8) size 66x16 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (10,2) size 46x12
+ RenderButton {INPUT} at (206,8) size 66x17 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (10,2) size 46x13
RenderText at (0,0) size 46x12
text run at (0,0) width 46: "Test Button"
RenderText {#text} at (271,4) size 5x19
text run at (271,4) width 5: " "
- RenderButton {INPUT} at (275,7) size 73x18 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (275,7) size 73x19 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (11,2) size 51x14
RenderText at (0,0) size 51x13
text run at (0,0) width 51: "Test Button"
@@ -45,62 +45,62 @@
text run at (0,0) width 56: "Test Button"
RenderText {#text} at (434,4) size 5x19
text run at (434,4) width 5: " "
- RenderButton {INPUT} at (440,4) size 87x21 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (13,3) size 61x15
+ RenderButton {INPUT} at (440,4) size 87x22 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (13,3) size 61x16
RenderText at (0,0) size 61x15
text run at (0,0) width 61: "Test Button"
RenderText {#text} at (528,4) size 5x19
text run at (528,4) width 5: " "
- RenderButton {INPUT} at (534,3) size 94x23 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (534,3) size 94x24 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (14,3) size 66x17
RenderText at (0,0) size 66x16
text run at (0,0) width 66: "Test Button"
RenderText {#text} at (629,4) size 5x19
text run at (629,4) width 5: " "
- RenderButton {INPUT} at (635,2) size 101x25 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (635,2) size 101x26 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (15,3) size 71x19
RenderText at (0,0) size 71x18
text run at (0,0) width 71: "Test Button"
RenderText {#text} at (737,4) size 5x19
text run at (737,4) width 5: " "
- RenderButton {INPUT} at (2,35) size 108x27 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (16,4) size 76x19
+ RenderButton {INPUT} at (2,35) size 108x28 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (16,4) size 76x20
RenderText at (0,0) size 76x19
text run at (0,0) width 76: "Test Button"
RenderText {#text} at (111,39) size 5x19
text run at (111,39) width 5: " "
- RenderButton {INPUT} at (117,34) size 115x29 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (117,34) size 115x30 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (17,4) size 81x21
RenderText at (0,0) size 81x20
text run at (0,0) width 81: "Test Button"
RenderText {#text} at (233,39) size 5x19
text run at (233,39) width 5: " "
- RenderButton {INPUT} at (239,33) size 122x30 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (239,33) size 122x31 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (18,4) size 86x22
RenderText at (0,0) size 86x21
text run at (0,0) width 86: "Test Button"
RenderText {#text} at (362,39) size 5x19
text run at (362,39) width 5: " "
- RenderButton {INPUT} at (368,32) size 129x32 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (19,5) size 91x22
+ RenderButton {INPUT} at (368,32) size 129x33 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (19,5) size 91x23
RenderText at (0,0) size 91x22
text run at (0,0) width 91: "Test Button"
RenderText {#text} at (498,39) size 5x19
text run at (498,39) width 5: " "
- RenderButton {INPUT} at (504,31) size 136x34 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (504,31) size 136x35 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (20,5) size 96x24
RenderText at (0,0) size 96x23
text run at (0,0) width 96: "Test Button"
RenderText {#text} at (641,39) size 5x19
text run at (641,39) width 5: " "
- RenderButton {INPUT} at (2,71) size 143x36 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderButton {INPUT} at (2,72) size 143x37 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
RenderBlock (anonymous) at (21,5) size 101x26
RenderText at (0,0) size 101x25
text run at (0,0) width 101: "Test Button"
- RenderText {#text} at (146,81) size 5x19
- text run at (146,81) width 5: " "
- RenderButton {INPUT} at (152,69) size 150x38 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
- RenderBlock (anonymous) at (22,6) size 106x26
+ RenderText {#text} at (146,82) size 5x19
+ text run at (146,82) width 5: " "
+ RenderButton {INPUT} at (152,70) size 150x39 [bgcolor=#FFFFFF03] [border: (1px solid #4C4C4C)]
+ RenderBlock (anonymous) at (22,6) size 106x27
RenderText at (0,0) size 106x26
text run at (0,0) width 106: "Test Button"
RenderText {#text} at (0,0) size 0x0
Modified: trunk/Source/WebCore/ChangeLog (270324 => 270325)
--- trunk/Source/WebCore/ChangeLog 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/Source/WebCore/ChangeLog 2020-12-01 20:57:09 UTC (rev 270325)
@@ -1,3 +1,38 @@
+2020-12-01 Aditya Keerthi <[email protected]>
+
+ [iOS] <button> with multi-line content does not render properly
+ https://bugs.webkit.org/show_bug.cgi?id=219372
+ <rdar://problem/6061602>
+
+ Reviewed by Darin Adler.
+
+ Currently, on iOS, a <button> that has multiple lines of content clips
+ the content to a single line. This behavior is incorrect, since <button>
+ can contain arbitrary HTML and should resize based on its content.
+
+ The incorrect behavior occurs due to the forcing of a single line height
+ for the button in RenderThemeIOS::adjustButtonStyle. To fix, replace
+ setHeight with setMinHeight when styling the button. This ensures the
+ button retains its appearance for single-line content, but does not clip
+ multi-line content.
+
+ Test: fast/forms/button-multiline-height.html
+
+ * rendering/RenderTheme.cpp:
+ (WebCore::RenderTheme::adjustButtonStyle const):
+ * rendering/RenderTheme.h:
+ (WebCore::RenderTheme::setButtonSize): Removed.
+
+ This virtual method is unnecessary, as it is only used by a single
+ derived class, RenderThemeIOS.
+
+ * rendering/RenderThemeIOS.h:
+ * rendering/RenderThemeIOS.mm:
+ (WebCore::RenderThemeIOS::adjustButtonStyle const):
+
+ No longer round down the height calculation, to ensure the min height
+ better matches the font size.
+
2020-12-01 Youenn Fablet <[email protected]>
Update SFrame transformation implementation according post-commit review
Modified: trunk/Source/WebCore/rendering/RenderTheme.cpp (270324 => 270325)
--- trunk/Source/WebCore/rendering/RenderTheme.cpp 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/Source/WebCore/rendering/RenderTheme.cpp 2020-12-01 20:57:09 UTC (rev 270325)
@@ -956,12 +956,8 @@
style.setBoxShadow(nullptr);
}
-void RenderTheme::adjustButtonStyle(RenderStyle& style, const Element*) const
+void RenderTheme::adjustButtonStyle(RenderStyle&, const Element*) const
{
- // Most platforms will completely honor all CSS, and so we have no need to
- // adjust the style at all by default. We will still allow the theme a crack
- // at setting up a desired vertical size.
- setButtonSize(style);
}
void RenderTheme::adjustInnerSpinButtonStyle(RenderStyle&, const Element*) const
Modified: trunk/Source/WebCore/rendering/RenderTheme.h (270324 => 270325)
--- trunk/Source/WebCore/rendering/RenderTheme.h 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/Source/WebCore/rendering/RenderTheme.h 2020-12-01 20:57:09 UTC (rev 270325)
@@ -292,7 +292,6 @@
virtual void adjustButtonStyle(RenderStyle&, const Element*) const;
virtual bool paintButton(const RenderObject&, const PaintInfo&, const IntRect&) { return true; }
- virtual void setButtonSize(RenderStyle&) const { }
virtual void adjustInnerSpinButtonStyle(RenderStyle&, const Element*) const;
virtual bool paintInnerSpinButton(const RenderObject&, const PaintInfo&, const IntRect&) { return true; }
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.h (270324 => 270325)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.h 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.h 2020-12-01 20:57:09 UTC (rev 270325)
@@ -84,7 +84,6 @@
void adjustButtonStyle(RenderStyle&, const Element*) const override;
void paintButtonDecorations(const RenderObject&, const PaintInfo&, const IntRect&) override;
void paintPushButtonDecorations(const RenderObject&, const PaintInfo&, const IntRect&) override;
- void setButtonSize(RenderStyle&) const override;
void paintFileUploadIconDecorations(const RenderObject& inputRenderer, const RenderObject& buttonRenderer, const PaintInfo&, const IntRect&, Icon*, FileUploadDecorations) override;
Modified: trunk/Source/WebCore/rendering/RenderThemeIOS.mm (270324 => 270325)
--- trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-12-01 20:33:36 UTC (rev 270324)
+++ trunk/Source/WebCore/rendering/RenderThemeIOS.mm 2020-12-01 20:57:09 UTC (rev 270325)
@@ -1024,7 +1024,11 @@
void RenderThemeIOS::adjustButtonStyle(RenderStyle& style, const Element* element) const
{
- RenderTheme::adjustButtonStyle(style, element);
+ // If no size is specified, ensure the height of the button matches ControlBaseHeight scaled
+ // with the font size. min-height is used rather than height to avoid clipping the contents of
+ // the button in cases where the button contains more than one line of text.
+ if (style.width().isIntrinsicOrAuto() || style.height().isAuto())
+ style.setMinHeight(Length(ControlBaseHeight / ControlBaseFontSize * style.fontDescription().computedSize(), Fixed));
#if ENABLE(INPUT_TYPE_COLOR)
if (style.appearance() == ColorWellPart)
@@ -1076,16 +1080,6 @@
}
}
-void RenderThemeIOS::setButtonSize(RenderStyle& style) const
-{
- // If the width and height are both specified, then we have nothing to do.
- if (!style.width().isIntrinsicOrAuto() && !style.height().isAuto())
- return;
-
- // Use the font size to determine the intrinsic width of the control.
- style.setHeight(Length(static_cast<int>(ControlBaseHeight / ControlBaseFontSize * style.fontDescription().computedSize()), Fixed));
-}
-
const int kThumbnailBorderStrokeWidth = 1;
const int kThumbnailBorderCornerRadius = 1;
const int kVisibleBackgroundImageWidth = 1;
