<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[199553] trunk</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/199553">199553</a></dd>
<dt>Author</dt> <dd>tonikitoo@webkit.org</dd>
<dt>Date</dt> <dd>2016-04-14 14:14:55 -0700 (Thu, 14 Apr 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Allow listbox content and scrollbar to intrude padding area.
https://bugs.webkit.org/show_bug.cgi?id=128489
Reviewed by Myles C. Maxfield.
Source/WebCore:
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.
LayoutTests:
* 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.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxpaddingclipoverlayhtml">trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay.html</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxpaddingcliphtml">trunk/LayoutTests/fast/forms/listbox-padding-clip.html</a></li>
<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderListBoxcpp">trunk/Source/WebCore/rendering/RenderListBox.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastformslistboxpaddingclipexpectedmismatchhtml">trunk/LayoutTests/fast/forms/listbox-padding-clip-expected-mismatch.html</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxpaddingclipoverlayexpectedmismatchhtml">trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected-mismatch.html</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxpaddingclipselectedexpectedhtml">trunk/LayoutTests/fast/forms/listbox-padding-clip-selected-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxpaddingclipselectedhtml">trunk/LayoutTests/fast/forms/listbox-padding-clip-selected.html</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxselection3expectedtxt">trunk/LayoutTests/fast/forms/listbox-selection-3-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxselection3html">trunk/LayoutTests/fast/forms/listbox-selection-3.html</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastformslistboxpaddingclipexpectedhtml">trunk/LayoutTests/fast/forms/listbox-padding-clip-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxpaddingclipoverlayexpectedhtml">trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (199552 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-04-14 21:09:19 UTC (rev 199552)
+++ trunk/LayoutTests/ChangeLog 2016-04-14 21:14:55 UTC (rev 199553)
</span><span class="lines">@@ -1,3 +1,17 @@
</span><ins>+2016-04-14 Antonio Gomes <tonikitoo@webkit.org>
+
+ 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.
+
</ins><span class="cx"> 2016-04-14 Manuel Rego Casasnovas <rego@igalia.com>
</span><span class="cx">
</span><span class="cx"> [css-grid] Implement CSSGridTemplateAreasValue::equals
</span></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxpaddingclipexpectedmismatchhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-padding-clip-expected-mismatch.html (0 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,9 @@
</span><ins>+<!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>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxpaddingclipexpectedhtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/fast/forms/listbox-padding-clip-expected.html (199552 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,9 +0,0 @@
</span><del>-<!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>
</del></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxpaddingclipoverlayexpectedmismatchhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected-mismatch.html (0 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+<!DOCTYPE html>
+<html>
+<head>
+</head>
+<body>
+<div style="display: inline-block; width: 100px; height: 400px; background: green;"></div>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxpaddingclipoverlayexpectedhtml"></a>
<div class="delfile"><h4>Deleted: trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay-expected.html (199552 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,9 +0,0 @@
</span><del>-<!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>
</del></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxpaddingclipoverlayhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/forms/listbox-padding-clip-overlay.html (199552 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -25,7 +25,6 @@
</span><span class="cx"> </script>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>-<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>
</del><span class="cx"> <div class="item">
</span><span class="cx"> <select multiple="multiple" class="listBox">
</span><span class="cx"> <option>f</option>
</span></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxpaddingclipselectedexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-padding-clip-selected-expected.html (0 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,2 @@
</span><ins>+<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>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxpaddingclipselectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-padding-clip-selected.html (0 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,26 @@
</span><ins>+<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>
</ins></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxpaddingcliphtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/fast/forms/listbox-padding-clip.html (199552 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -21,8 +21,6 @@
</span><span class="cx"> </style>
</span><span class="cx"> </head>
</span><span class="cx"> <body>
</span><del>-<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>
-
</del><span class="cx"> <div class="item">
</span><span class="cx"> <select multiple="multiple" class="listBox">
</span><span class="cx"> <option>f</option>
</span></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxselection3expectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-selection-3-expected.txt (0 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+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"
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxselection3html"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-selection-3.html (0 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,104 @@
</span><ins>+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script src="../../resources/js-test-pre.js"></script>
+</head>
+<body>
+<p id="description"></p>
+<div id="console"></div>
+<script>
+description('Clicking on items of &lt;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="../../resources/js-test-post.js"></script>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (199552 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1762,6 +1762,7 @@
</span><span class="cx"> fast/forms/listbox-non-contiguous-keyboard-selection.html [ Failure ]
</span><span class="cx"> fast/forms/listbox-onchange.html [ Failure ]
</span><span class="cx"> fast/forms/listbox-selection-2.html [ Failure ]
</span><ins>+fast/forms/listbox-selection-3.html [ Failure ]
</ins><span class="cx"> fast/forms/listbox-selection-after-typeahead.html [ Failure ]
</span><span class="cx"> fast/forms/listbox-selection.html [ Failure ]
</span><span class="cx"> fast/forms/listbox-typeahead-scroll.html [ Failure ]
</span><span class="lines">@@ -3029,9 +3030,9 @@
</span><span class="cx"> # iOS list box controls are not drawn in the standard way.
</span><span class="cx"> fast/forms/listbox-padding-clip.html [ ImageOnlyFailure ]
</span><span class="cx"> fast/forms/listbox-padding-clip-overlay.html [ ImageOnlyFailure ]
</span><ins>+fast/forms/listbox-padding-clip-selected.html [ ImageOnlyFailure ]
</ins><span class="cx">
</span><span class="cx"> # No focusring on iOS.
</span><span class="cx"> fast/images/image-map-outline-in-positioned-container.html [ Pass ImageOnlyFailure ]
</span><span class="cx"> fast/images/image-map-outline-with-paint-root-offset.html [ Pass ImageOnlyFailure ]
</span><span class="cx"> fast/images/image-map-outline-with-scale-transform.html [ Pass ImageOnlyFailure ]
</span><del>-
</del><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (199552 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,43 @@
</span><ins>+2016-04-14 Antonio Gomes <tonikitoo@webkit.org>
+
+ 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.
+
</ins><span class="cx"> 2016-04-14 Antti Koivisto <antti@apple.com>
</span><span class="cx">
</span><span class="cx"> Collapsed border cache invalidation can lead to O(n^2) during style resolve
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderListBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderListBox.cpp (199552 => 199553)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -239,7 +239,7 @@
</span><span class="cx"> int RenderListBox::numVisibleItems() const
</span><span class="cx"> {
</span><span class="cx"> // Only count fully visible rows. But don't return 0 even if only part of a row shows.
</span><del>- return std::max<int>(1, (contentHeight() + rowSpacing) / itemHeight());
</del><ins>+ return std::max<int>(1, (contentHeight() + paddingBottom() + rowSpacing) / itemHeight());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> int RenderListBox::numItems() const
</span><span class="lines">@@ -466,7 +466,7 @@
</span><span class="cx"> if (!numItems())
</span><span class="cx"> return -1;
</span><span class="cx">
</span><del>- if (offset.height() < borderTop() + paddingTop() || offset.height() > height() - paddingBottom() - borderBottom())
</del><ins>+ if (offset.height() < borderTop() || offset.height() > height() - borderBottom())
</ins><span class="cx"> return -1;
</span><span class="cx">
</span><span class="cx"> int scrollbarWidth = m_vBar ? m_vBar->width() : 0;
</span><span class="lines">@@ -726,7 +726,9 @@
</span><span class="cx">
</span><span class="cx"> LayoutRect RenderListBox::controlClipRect(const LayoutPoint& additionalOffset) const
</span><span class="cx"> {
</span><del>- LayoutRect clipRect = contentBoxRect();
</del><ins>+ // Clip against the padding box, to give <option>s and overlay scrollbar some extra space
+ // to get painted.
+ LayoutRect clipRect = paddingBoxRect();
</ins><span class="cx"> if (verticalScrollbarIsOnLeft() && (!layer() || !layer()->verticalScrollbarIsOnLeft()))
</span><span class="cx"> clipRect.move(m_vBar->occupiedWidth(), 0);
</span><span class="cx"> clipRect.moveBy(additionalOffset);
</span></span></pre>
</div>
</div>
</body>
</html>