Diff
Modified: trunk/LayoutTests/ChangeLog (199552 => 199553)
--- trunk/LayoutTests/ChangeLog 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/LayoutTests/ChangeLog 2016-04-14 21:14:55 UTC (rev 199553)
@@ -1,3 +1,17 @@
+2016-04-14 Antonio Gomes <[email protected]>
+
+ Allow listbox content and scrollbar to intrude padding area.
+ https://bugs.webkit.org/show_bug.cgi?id=128489
+
+ Reviewed by Myles C. Maxfield.
+
+ * fast/forms/listbox-selection-3-expected.txt: Added.
+ * fast/forms/listbox-selection-3.html: Added.
+ * fast/forms/listbox-padding-clip-selected.html: Added.
+ * fast/forms/listbox-padding-clip-selected-expected.html: Added.
+ * fast/forms/listbox-padding-clip-expected-mismatch.html: Renamed from listbox-padding-clip-overlay-expected.html.
+ * fast/forms/listbox-padding-clip-overlay-expected-mismatch.html: Renamed from listbox-padding-clip-expected.html.
+
2016-04-14 Manuel Rego Casasnovas <[email protected]>
[css-grid] Implement CSSGridTemplateAreasValue::equals
Added: trunk/LayoutTests/fast/forms/listbox-padding-clip-expected-mismatch.html (0 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-padding-clip-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-padding-clip-expected-mismatch.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<p>This test makes sure that the contents of list boxes can intrude upon their padding. The test passes if you see a tall green box below and black pixels inside it)<p>
+<div style="display: inline-block; width: 100px; height: 400px; background: green;"></div>
+</body>
+</html>
Deleted: trunk/LayoutTests/fast/forms/listbox-padding-clip-expected.html (199552 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-padding-clip-expected.html 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/LayoutTests/fast/forms/listbox-padding-clip-expected.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-</head>
-<body>
-<p>This test makes sure that the contents of list boxes do not intrude upon their padding. The test passes if you see a tall green box below (and not a single black pixel anywhere inside it)<p>
-<div style="display: inline-block; width: 100px; height: 400px; background: green;"></div>
-</body>
-</html>
Added: trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected-mismatch.html (0 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected-mismatch.html (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected-mismatch.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="display: inline-block; width: 100px; height: 400px; background: green;"></div>
+</body>
+</html>
Deleted: trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected.html (199552 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected.html 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -1,9 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-</head>
-<body>
-<p>This test makes sure that the contents of list boxes do not intrude upon their padding. The test passes if you see a tall green box below (and not a single black pixel anywhere inside it)<p>
-<div style="display: inline-block; width: 100px; height: 400px; background: green;"></div>
-</body>
-</html>
Modified: trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay.html (199552 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay.html 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -25,7 +25,6 @@
</script>
</head>
<body>
-<p>This test makes sure that the contents of list boxes do not intrude upon their padding. The test passes if you see a tall green box below (and not a single black pixel anywhere inside it)<p>
<div class="item">
<select multiple="multiple" class="listBox">
<option>f</option>
Added: trunk/LayoutTests/fast/forms/listbox-padding-clip-selected-expected.html (0 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-padding-clip-selected-expected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-padding-clip-selected-expected.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -0,0 +1,2 @@
+<p>This test makes sure that the contents of list box items do not intrude upon their padding when in 'selected' state. The test passes if you see a tall green box below (and not a single black pixel anywhere inside it)<p>
+<div style="display: inline-block; width: 250px; height: 230px; background: green; position: absolute; top:50px; left:50px;"></div>
Added: trunk/LayoutTests/fast/forms/listbox-padding-clip-selected.html (0 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-padding-clip-selected.html (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-padding-clip-selected.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -0,0 +1,26 @@
+<head>
+ <style type="text/css" media="screen">
+ :focus {
+ outline: 0;
+ }
+ </style>
+ <script type="text/_javascript_">
+ if (window.testRunner)
+ testRunner.waitUntilDone();
+ if (window.internals)
+ internals.setUsesOverlayScrollbars(true);
+ function runTest()
+ {
+ document.getElementById('sl').focus();
+ testRunner.notifyDone();
+ }
+ </script>
+</head>
+<body _onload_="setTimeout(runTest, 0)">
+ <p>This test makes sure that the contents of list box items do not intrude upon their padding when in 'selected' state. The test passes if you see a tall green box below (and not a single black pixel anywhere inside it)<p>
+ <select id="sl" multiple="multiple" style="border: 0px; height: 220px; width: 250px; font: 30px Zapfino; padding-right: 50px; padding-left: 50px;">
+ <option selected>faQ'</option>
+ <option>a</option>
+ </select>
+ <div style="display: inline-block; width: 250px; height: 230px; background: green; position: absolute; top:50px; left:50px;"></div>
+</body>
Modified: trunk/LayoutTests/fast/forms/listbox-padding-clip.html (199552 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-padding-clip.html 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/LayoutTests/fast/forms/listbox-padding-clip.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -21,8 +21,6 @@
</style>
</head>
<body>
-<p>This test makes sure that the contents of list boxes do not intrude upon their padding. The test passes if you see a tall green box below (and not a single black pixel anywhere inside it)<p>
-
<div class="item">
<select multiple="multiple" class="listBox">
<option>f</option>
Added: trunk/LayoutTests/fast/forms/listbox-selection-3-expected.txt (0 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-selection-3-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-selection-3-expected.txt 2016-04-14 21:14:55 UTC (rev 199553)
@@ -0,0 +1,15 @@
+Clicking on items of <select> with padding set.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS successfullyParsed is true
+
+TEST COMPLETE
+PASS selectionPattern("sl1") is "00000000000000000"
+PASS selectionPattern("sl1") is "01000000000000000"
+PASS selectionPattern("sl1") is "10000000000000000"
+PASS selectionPattern("sl1") is "10000000000000000"
+PASS selectionPattern("sl1") is "10000000000000000"
+PASS selectionPattern("sl1") is "00000000100000000"
+
Added: trunk/LayoutTests/fast/forms/listbox-selection-3.html (0 => 199553)
--- trunk/LayoutTests/fast/forms/listbox-selection-3.html (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-selection-3.html 2016-04-14 21:14:55 UTC (rev 199553)
@@ -0,0 +1,104 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script src=""
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script>
+description('Clicking on items of <select> with padding set.');
+
+var parent = document.createElement('div');
+parent.innerHTML = '<select id="sl1" multiple size=5>'
+ + '<option id="opt1">one</option>'
+ + '<option id="opt2">two</option>'
+ + '<option id="opt3">three</option>'
+ + '<option id="opt4">four</option>'
+ + '<option id="opt5">five</option>'
+ + '<option id="opt6">six</option>'
+ + '<option id="opt7">seven</option>'
+ + '<option id="opt8">eight</option>'
+ + '<option id="opt9">nine</option>'
+ + '<option id="opt10">ten</option>'
+ + '<option id="opt11">eleven</option>'
+ + '<option id="opt12">twelve</option>'
+ + '<option id="opt13">thirteen</option>'
+ + '<option id="opt14">fourteen</option>'
+ + '<option id="opt15">fifteen</option>'
+ + '<option id="opt16">sixteen</option>'
+ + '<option id="opt17">seventeen</option>'
+ + '</select>';
+document.body.appendChild(parent);
+
+// Determine the item height.
+var sl1 = document.getElementById('sl1');
+var sl2 = document.getElementById('sl2');
+var itemHeight = Math.floor(sl1.offsetHeight / sl1.size);
+sl1.removeAttribute('size');
+var height = itemHeight * 9;
+sl1.setAttribute('style', 'height: ' + height + 'px; border: 0px; padding-top: 0px; padding-left: 25px; padding-right: 25px; padding-bottom: 20px;');
+
+var kClickOnPaddingLeftArea = 1;
+var kClickOnPaddingRightArea = 2;
+var kClickOnOptionElement = 3;
+
+function mouseDownOnSelect(selId, index, fudge)
+{
+ var sl = document.getElementById(selId);
+ var opt = document.getElementById("opt" + index);
+ var paddingTop = 0;
+ var paddingLeft = 25;
+ var paddingRight = 25;
+
+ // default clicking to the middle of the option element.
+ var x = ((sl.offsetLeft + sl.offsetWidth - paddingRight) - (sl.offsetLeft + paddingLeft)) / 2;
+ x += sl.offsetLeft + paddingLeft;
+
+ var y = (index - 1) * itemHeight + itemHeight / 3 - window.pageYOffset + paddingTop;
+ y += sl.offsetTop;
+
+ if (fudge == kClickOnPaddingLeftArea) {
+ x = opt.offsetLeft + (paddingLeft / 2); // middle of the padding left area.
+ } else if (fudge == kClickOnOptionElement) {
+ // do nothing, already set as default value above.
+ } else if (fudge == kClickOnPaddingRightArea) {
+ x = opt.offsetRight + (paddingRight / 2); // middle of the padding right area.
+ }
+ var event = document.createEvent("MouseEvent");
+ event.initMouseEvent("mousedown", true, true, document.defaultView, 1, x, y, x, y, false, false, false, false, 0, document);
+ sl.dispatchEvent(event);
+}
+
+function selectionPattern(selectId)
+{
+ var select = document.getElementById(selectId);
+ var result = "";
+ for (var i = 0; i < select.options.length; i++)
+ result += select.options[i].selected ? '1' : '0';
+ return result;
+}
+
+window._onload_ = function () {
+ mouseDownOnSelect("sl1", 2, kClickOnPaddingRightArea);
+ shouldBe('selectionPattern("sl1")', '"00000000000000000"');
+
+ mouseDownOnSelect("sl1", 2, kClickOnOptionElement);
+ shouldBe('selectionPattern("sl1")', '"01000000000000000"');
+
+ mouseDownOnSelect("sl1", 1, kClickOnOptionElement);
+ shouldBe('selectionPattern("sl1")', '"10000000000000000"');
+
+ mouseDownOnSelect("sl1", 2, kClickOnPaddingRightArea);
+ shouldBe('selectionPattern("sl1")', '"10000000000000000"');
+
+ mouseDownOnSelect("sl1", 2, kClickOnPaddingLeftArea);
+ shouldBe('selectionPattern("sl1")', '"10000000000000000"');
+
+ mouseDownOnSelect("sl1", 9, kClickOnOptionElement);
+ shouldBe('selectionPattern("sl1")', '"00000000100000000"');
+};
+</script>
+<script src=""
+</body>
+</html>
Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (199552 => 199553)
--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2016-04-14 21:14:55 UTC (rev 199553)
@@ -1762,6 +1762,7 @@
fast/forms/listbox-non-contiguous-keyboard-selection.html [ Failure ]
fast/forms/listbox-onchange.html [ Failure ]
fast/forms/listbox-selection-2.html [ Failure ]
+fast/forms/listbox-selection-3.html [ Failure ]
fast/forms/listbox-selection-after-typeahead.html [ Failure ]
fast/forms/listbox-selection.html [ Failure ]
fast/forms/listbox-typeahead-scroll.html [ Failure ]
@@ -3029,9 +3030,9 @@
# iOS list box controls are not drawn in the standard way.
fast/forms/listbox-padding-clip.html [ ImageOnlyFailure ]
fast/forms/listbox-padding-clip-overlay.html [ ImageOnlyFailure ]
+fast/forms/listbox-padding-clip-selected.html [ ImageOnlyFailure ]
# No focusring on iOS.
fast/images/image-map-outline-in-positioned-container.html [ Pass ImageOnlyFailure ]
fast/images/image-map-outline-with-paint-root-offset.html [ Pass ImageOnlyFailure ]
fast/images/image-map-outline-with-scale-transform.html [ Pass ImageOnlyFailure ]
-
\ No newline at end of file
Modified: trunk/Source/WebCore/ChangeLog (199552 => 199553)
--- trunk/Source/WebCore/ChangeLog 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/Source/WebCore/ChangeLog 2016-04-14 21:14:55 UTC (rev 199553)
@@ -1,3 +1,43 @@
+2016-04-14 Antonio Gomes <[email protected]>
+
+ Allow listbox content and scrollbar to intrude padding area.
+ https://bugs.webkit.org/show_bug.cgi?id=128489
+
+ Reviewed by Myles C. Maxfield.
+
+ Originally when the RenderListBox::controlClipRect method was implemented (see [1]), it used
+ to allow its content (<option>'s) to intrude padding to get rendered. Overlay scrollbars were also
+ allowed to paint over the padding area, if necessary.
+
+ [2] changed this behavior to restrict list-box'es content within the content box rect (excluding padding and border).
+
+ This had two consequences:
+ 1) it made WebKit disallow list-box' content to intrude the padding area, diverging from other vendors.
+ like Firefox and Chrome.
+ 2) Since overlay scrollbar might get painted over the padding area, if any, [2] could result
+ in the scrollbar being clipped out if padding-right is set (or padding-left in case of RTL content).
+
+ Patch changed WebKit back so that it allows list-box' content and overlay scrollbars to intrude the
+ padding area, matching other browsers vendors
+
+ [1] https://trac.webkit.org/changeset/18819/trunk/WebCore/rendering/RenderListBox.cpp
+ [2] https://trac.webkit.org/changeset/19037/trunk/WebCore/rendering/RenderListBox.cpp
+
+ Tests: fast/forms/listbox-selection-3.html
+ fast/forms/listbox-padding-clip-selected.html
+ fast/forms/listbox-padding-clip-expected-mismatch.html (renamed from listbox-padding-clip-overlay-expected.html)
+ fast/forms/listbox-padding-clip-overlay-expected-mismatch.html (renamed from listbox-padding-clip-expected.html)
+
+ * rendering/RenderListBox.cpp:
+ (WebCore::RenderListBox::numVisibleItems): changed to allow list-box items to get rendered on the padding-bottom area.
+ This matches Firefox and Chrome.
+ (WebCore::RenderListBox::listIndexAtOffset): relax the check for a given list-box item at a specific offset in the vertical axis.
+ This means if an list-box item has its content painted into the padding-bottom area, it will be actionable by mouse clicking.
+ This matches Firefox and Chrome.
+ (WebCore::RenderListBox::controlClipRect): clips list-box content against the padding box rect rather than the content box rect,
+ to allow its list-box items' content intrude the padding area.
+ This matches Firefox and Chrome.
+
2016-04-14 Antti Koivisto <[email protected]>
Collapsed border cache invalidation can lead to O(n^2) during style resolve
Modified: trunk/Source/WebCore/rendering/RenderListBox.cpp (199552 => 199553)
--- trunk/Source/WebCore/rendering/RenderListBox.cpp 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/Source/WebCore/rendering/RenderListBox.cpp 2016-04-14 21:14:55 UTC (rev 199553)
@@ -239,7 +239,7 @@
int RenderListBox::numVisibleItems() const
{
// Only count fully visible rows. But don't return 0 even if only part of a row shows.
- return std::max<int>(1, (contentHeight() + rowSpacing) / itemHeight());
+ return std::max<int>(1, (contentHeight() + paddingBottom() + rowSpacing) / itemHeight());
}
int RenderListBox::numItems() const
@@ -466,7 +466,7 @@
if (!numItems())
return -1;
- if (offset.height() < borderTop() + paddingTop() || offset.height() > height() - paddingBottom() - borderBottom())
+ if (offset.height() < borderTop() || offset.height() > height() - borderBottom())
return -1;
int scrollbarWidth = m_vBar ? m_vBar->width() : 0;
@@ -726,7 +726,9 @@
LayoutRect RenderListBox::controlClipRect(const LayoutPoint& additionalOffset) const
{
- LayoutRect clipRect = contentBoxRect();
+ // Clip against the padding box, to give <option>s and overlay scrollbar some extra space
+ // to get painted.
+ LayoutRect clipRect = paddingBoxRect();
if (verticalScrollbarIsOnLeft() && (!layer() || !layer()->verticalScrollbarIsOnLeft()))
clipRect.move(m_vBar->occupiedWidth(), 0);
clipRect.moveBy(additionalOffset);
