<!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>[200265] 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/200265">200265</a></dd>
<dt>Author</dt> <dd>tonikitoo@webkit.org</dd>
<dt>Date</dt> <dd>2016-04-29 14:48:43 -0700 (Fri, 29 Apr 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>&lt;select multiple&gt; padding should react when scrolling
Source/WebCore:

https://bugs.webkit.org/show_bug.cgi?id=156590
https://bugs.webkit.org/show_bug.cgi?id=156591

Reviewed by Reviewed by Darin Adler.

Tests: fast/forms/listbox-respects-padding-bottom.html
       fast/forms/listbox-top-padding-do-not-clip-items.html

Non-dropdown listboxes have support to padding-{top,bottom} implemented similarly
to the border model: the padding area does not move when the listbox' content gets scrolled,
but instead it clips out its content.
This is not consistent with other browsers and is not consistent with the CSS box model.

This in practice, if a &lt;select&gt; has padding-top set, the padding-top area will clip out listbox'
content as one scrolls upwards.
It also means that if padding-bottom is set, when one scrolls all the way to the bottom
of the listbox content, padding-bottom is not respected.

In order to fix these two problems, and make WebKit match Blink with respect to the the way
padding-{top,bottom} are handled, patch adds two class member variables that control the number
of list items (i.e. &lt;option&gt;s) that can be painted over the current listbox' padding area.

In short, depending on the scroll position and the amount of space available in the padding top/bottom
areas, items are painted or not on top of it, mimic'ing the CSS box model behavior of other browsers.

Note that this is specific solution is worth it to pursue on the short/mid term, but a long-term solution
to this problem and many other listbox discrepancies on WebKit's implementation, would be to reimplement
RenderListBox class in terms of RenderLayer. This will be a follow up work.

* rendering/RenderListBox.cpp:
(WebCore::RenderListBox::updateFromElement):
(WebCore::RenderListBox::numVisibleItems):
(WebCore::RenderListBox::paintObject):
(WebCore::RenderListBox::scrollToRevealElementAtListIndex):
(WebCore::RenderListBox::listIndexIsVisible):
(WebCore::RenderListBox::maximumNumberOfItemsThatFitInPaddingBottomArea):
(WebCore::RenderListBox::numberOfVisibleItemsInPaddingTop):
(WebCore::RenderListBox::numberOfVisibleItemsInPaddingBottom):
(WebCore::RenderListBox::computeFirstIndexesVisibleInPaddingTopBottomAreas):
(WebCore::RenderListBox::scrollTo):
* rendering/RenderListBox.h:

LayoutTests:

https://bugs.webkit.org/show_bug.cgi?id=156590
https://bugs.webkit.org/show_bug.cgi?id=156591

Reviewed by Reviewed by Darin Adler.

* fast/forms/listbox-respects-padding-bottom-expected.txt: Added.
* fast/forms/listbox-respects-padding-bottom.html: Added.
* fast/forms/listbox-top-padding-do-not-clip-items-expected.txt: Added.
* fast/forms/listbox-top-padding-do-not-clip-items.html: Added.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</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>
<li><a href="#trunkSourceWebCorerenderingRenderListBoxh">trunk/Source/WebCore/rendering/RenderListBox.h</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastformslistboxrespectspaddingbottomexpectedtxt">trunk/LayoutTests/fast/forms/listbox-respects-padding-bottom-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxrespectspaddingbottomhtml">trunk/LayoutTests/fast/forms/listbox-respects-padding-bottom.html</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxtoppaddingdonotclipitemsexpectedtxt">trunk/LayoutTests/fast/forms/listbox-top-padding-do-not-clip-items-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastformslistboxtoppaddingdonotclipitemshtml">trunk/LayoutTests/fast/forms/listbox-top-padding-do-not-clip-items.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (200264 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-04-29 21:29:01 UTC (rev 200264)
+++ trunk/LayoutTests/ChangeLog        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2016-04-29  Antonio Gomes  &lt;tonikitoo@webkit.org&gt;
+
+        &lt;select multiple&gt; padding should react when scrolling
+        https://bugs.webkit.org/show_bug.cgi?id=156590
+        https://bugs.webkit.org/show_bug.cgi?id=156591
+
+        Reviewed by Reviewed by Darin Adler.
+
+        * fast/forms/listbox-respects-padding-bottom-expected.txt: Added.
+        * fast/forms/listbox-respects-padding-bottom.html: Added.
+        * fast/forms/listbox-top-padding-do-not-clip-items-expected.txt: Added.
+        * fast/forms/listbox-top-padding-do-not-clip-items.html: Added.
+
</ins><span class="cx"> 2016-04-29  Eric Carlson  &lt;eric.carlson@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [Mac] AirPlay fails if target is set before AVPlayer has been created
</span></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxrespectspaddingbottomexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-respects-padding-bottom-expected.txt (0 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/forms/listbox-respects-padding-bottom-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-respects-padding-bottom-expected.txt        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Tests that padding-bottom is respected in non-dropdown listbox'es. Once a listbox is scrolled to its end, clicking on the padding-bottom area should hit an item only after the listbox is scrolled upwards some steps.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+PASS i &gt; 5 &amp;&amp; i &lt; maxAttempts is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxrespectspaddingbottomhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-respects-padding-bottom.html (0 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/forms/listbox-respects-padding-bottom.html                                (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-respects-padding-bottom.html        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -0,0 +1,50 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+    &lt;script&gt;
+        description(&quot;Tests that padding-bottom is respected in non-dropdown listbox'es. Once a listbox is scrolled to its end, clicking on the padding-bottom area should hit an item only after the listbox is scrolled upwards some steps.&quot;);
+        window.jsTestIsAsync = true;
+
+        var i = 0;
+        var maxAttempts = 10;
+        function runTest()
+        {
+            var scrollAmount = 0;
+            var select = document.getElementById(&quot;sl&quot;);
+            select.scrollTop = select.scrollHeight;
+            var maxScrollOffset = select.scrollTop;
+
+            var x = select.offsetLeft + (select.offsetLeft + select.offsetWidth) / 2;
+            var y = select.offsetTop + select.offsetHeight - 15;
+
+            for ( ; i &lt; maxAttempts; i++) {
+                 var el = document.elementFromPoint(x, y);
+                 if (el instanceof HTMLOptionElement)
+                     break;
+
+                 scrollAmount += 10;
+                 select.scrollTop = maxScrollOffset - scrollAmount;
+            }
+
+            shouldBeTrue(&quot;i &gt; 5 &amp;&amp; i &lt; maxAttempts&quot;);
+            finishJSTest();
+        }
+    &lt;/script&gt;
+    &lt;body onload=&quot;runTest()&quot;&gt;
+        &lt;select id=&quot;sl&quot; multiple=&quot;multiple&quot; style=&quot;padding-bottom: 100px; font-size: 15px;&quot;&gt;
+            &lt;option&gt;January (0)&lt;/option&gt;
+            &lt;option&gt;February (1)&lt;/option&gt;
+            &lt;option&gt;March (2)&lt;/option&gt;
+            &lt;option&gt;April (3)&lt;/option&gt;
+            &lt;option&gt;May (4)&lt;/option&gt;
+            &lt;option&gt;June (5) &lt;/option&gt;
+            &lt;option&gt;July (6)&lt;/option&gt;
+            &lt;option&gt;August (7)&lt;/option&gt;
+            &lt;option&gt;September (8)&lt;/option&gt;
+            &lt;option&gt;October (9)&lt;/option&gt;
+            &lt;option&gt;November (10)&lt;/option&gt;
+            &lt;option&gt;December (11)&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/body&gt;
+    &lt;script src=&quot;../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxtoppaddingdonotclipitemsexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-top-padding-do-not-clip-items-expected.txt (0 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/forms/listbox-top-padding-do-not-clip-items-expected.txt                                (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-top-padding-do-not-clip-items-expected.txt        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -0,0 +1,10 @@
</span><ins>+Tests that padding-top does not clip out listbox' items once it scrolled upwards.
+
+On success, you will see a series of &quot;PASS&quot; messages, followed by &quot;TEST COMPLETE&quot;.
+
+
+PASS i &gt; 0 &amp;&amp; i &lt; maxAttempts is true
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastformslistboxtoppaddingdonotclipitemshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/forms/listbox-top-padding-do-not-clip-items.html (0 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/forms/listbox-top-padding-do-not-clip-items.html                                (rev 0)
+++ trunk/LayoutTests/fast/forms/listbox-top-padding-do-not-clip-items.html        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;script src=&quot;../../resources/js-test-pre.js&quot;&gt;&lt;/script&gt;
+    &lt;script&gt;
+        description(&quot;Tests that padding-top does not clip out listbox' items once it scrolled upwards.&quot;);
+        window.jsTestIsAsync = true;
+
+        var i = 0;
+        var maxAttempts = 10;
+        function runTest()
+        {
+            var scrollAmount = 0;
+            for ( ; i &lt; maxAttempts; i++) {
+                 var select = document.getElementById(&quot;sl&quot;);
+                 var x = select.offsetLeft + (select.offsetLeft + select.offsetWidth) / 2;
+                 var y = select.offsetTop + 15;
+                 var el = document.elementFromPoint(x, y);
+                 if (el instanceof HTMLOptionElement)
+                     break;
+                 scrollAmount += 10;
+                 select.scrollTop = scrollAmount;
+            }
+            shouldBeTrue(&quot;i &gt; 0 &amp;&amp; i &lt; maxAttempts&quot;);
+            finishJSTest();
+        }
+    &lt;/script&gt;
+    &lt;body onload=&quot;runTest()&quot;&gt;
+        &lt;select id=&quot;sl&quot; multiple=&quot;multiple&quot; style=&quot;padding: 50px; font-size: 15px;&quot;&gt;
+            &lt;option&gt;January (0)&lt;/option&gt;
+            &lt;option&gt;February (1)&lt;/option&gt;
+            &lt;option&gt;March (2)&lt;/option&gt;
+            &lt;option&gt;April (3)&lt;/option&gt;
+            &lt;option&gt;May (4)&lt;/option&gt;
+            &lt;option&gt;June (5) &lt;/option&gt;
+            &lt;option&gt;July (6)&lt;/option&gt;
+            &lt;option&gt;August (7)&lt;/option&gt;
+            &lt;option&gt;September (8)&lt;/option&gt;
+            &lt;option&gt;October (9)&lt;/option&gt;
+            &lt;option&gt;November (10)&lt;/option&gt;
+            &lt;option&gt;December (11)&lt;/option&gt;
+        &lt;/select&gt;
+    &lt;/body&gt;
+    &lt;script src=&quot;../../resources/js-test-post.js&quot;&gt;&lt;/script&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (200264 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations        2016-04-29 21:29:01 UTC (rev 200264)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -3001,6 +3001,8 @@
</span><span class="cx"> fast/forms/listbox-padding-clip.html [ ImageOnlyFailure ]
</span><span class="cx"> fast/forms/listbox-padding-clip-overlay.html [ ImageOnlyFailure ]
</span><span class="cx"> fast/forms/listbox-padding-clip-selected.html [ ImageOnlyFailure ]
</span><ins>+fast/forms/listbox-respects-padding-bottom.html [ ImageOnlyFailure ]
+fast/forms/listbox-top-padding-do-not-clip-items.html [ ImageOnlyFailure ]
</ins><span class="cx"> 
</span><span class="cx"> # MSE not enabled.
</span><span class="cx"> media/media-source/media-source-airplay.html [ Skip ]
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (200264 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-04-29 21:29:01 UTC (rev 200264)
+++ trunk/Source/WebCore/ChangeLog        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -1,3 +1,49 @@
</span><ins>+2016-04-29  Antonio Gomes  &lt;tonikitoo@webkit.org&gt;
+
+        &lt;select multiple&gt; padding should react when scrolling
+
+        https://bugs.webkit.org/show_bug.cgi?id=156590
+        https://bugs.webkit.org/show_bug.cgi?id=156591
+
+        Reviewed by Reviewed by Darin Adler.
+
+        Tests: fast/forms/listbox-respects-padding-bottom.html
+               fast/forms/listbox-top-padding-do-not-clip-items.html
+
+        Non-dropdown listboxes have support to padding-{top,bottom} implemented similarly
+        to the border model: the padding area does not move when the listbox' content gets scrolled,
+        but instead it clips out its content.
+        This is not consistent with other browsers and is not consistent with the CSS box model.
+
+        This in practice, if a &lt;select&gt; has padding-top set, the padding-top area will clip out listbox'
+        content as one scrolls upwards.
+        It also means that if padding-bottom is set, when one scrolls all the way to the bottom
+        of the listbox content, padding-bottom is not respected.
+
+        In order to fix these two problems, and make WebKit match Blink with respect to the the way
+        padding-{top,bottom} are handled, patch adds two class member variables that control the number
+        of list items (i.e. &lt;option&gt;s) that can be painted over the current listbox' padding area.
+
+        In short, depending on the scroll position and the amount of space available in the padding top/bottom
+        areas, items are painted or not on top of it, mimic'ing the CSS box model behavior of other browsers.
+
+        Note that this is specific solution is worth it to pursue on the short/mid term, but a long-term solution
+        to this problem and many other listbox discrepancies on WebKit's implementation, would be to reimplement
+        RenderListBox class in terms of RenderLayer. This will be a follow up work.
+
+        * rendering/RenderListBox.cpp:
+        (WebCore::RenderListBox::updateFromElement):
+        (WebCore::RenderListBox::numVisibleItems):
+        (WebCore::RenderListBox::paintObject):
+        (WebCore::RenderListBox::scrollToRevealElementAtListIndex):
+        (WebCore::RenderListBox::listIndexIsVisible):
+        (WebCore::RenderListBox::maximumNumberOfItemsThatFitInPaddingBottomArea):
+        (WebCore::RenderListBox::numberOfVisibleItemsInPaddingTop):
+        (WebCore::RenderListBox::numberOfVisibleItemsInPaddingBottom):
+        (WebCore::RenderListBox::computeFirstIndexesVisibleInPaddingTopBottomAreas):
+        (WebCore::RenderListBox::scrollTo):
+        * rendering/RenderListBox.h:
+
</ins><span class="cx"> 2016-04-29  Eric Carlson  &lt;eric.carlson@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [Mac] AirPlay fails if target is set before AVPlayer has been created
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderListBoxcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderListBox.cpp (200264 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderListBox.cpp        2016-04-29 21:29:01 UTC (rev 200264)
+++ trunk/Source/WebCore/rendering/RenderListBox.cpp        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -139,6 +139,8 @@
</span><span class="cx">         
</span><span class="cx">         setHasVerticalScrollbar(true);
</span><span class="cx"> 
</span><ins>+        computeFirstIndexesVisibleInPaddingTopBottomAreas();
+
</ins><span class="cx">         setNeedsLayoutAndPrefWidthsRecalc();
</span><span class="cx">     }
</span><span class="cx"> }
</span><span class="lines">@@ -236,10 +238,14 @@
</span><span class="cx">     return defaultSize;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-int RenderListBox::numVisibleItems() const
</del><ins>+int RenderListBox::numVisibleItems(ConsiderPadding considerPadding) const
</ins><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&lt;int&gt;(1, (contentHeight() + paddingBottom() + rowSpacing) / itemHeight());
</del><ins>+    int visibleItemsExcludingPadding = std::max&lt;int&gt;(1, (contentHeight() + rowSpacing) / itemHeight());
+    if (considerPadding == ConsiderPadding::No)
+        return visibleItemsExcludingPadding;
+
+    return numberOfVisibleItemsInPaddingTop() + visibleItemsExcludingPadding + numberOfVisibleItemsInPaddingBottom();
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> int RenderListBox::numItems() const
</span><span class="lines">@@ -275,8 +281,9 @@
</span><span class="cx"> void RenderListBox::paintItem(PaintInfo&amp; paintInfo, const LayoutPoint&amp; paintOffset, PaintFunction paintFunction)
</span><span class="cx"> {
</span><span class="cx">     int listItemsSize = numItems();
</span><del>-    int endIndex = m_indexOffset + numVisibleItems();
-    for (int i = m_indexOffset; i &lt; listItemsSize &amp;&amp; i &lt;= endIndex; ++i)
</del><ins>+    int firstVisibleItem = m_indexOfFirstVisibleItemInsidePaddingTopArea.valueOr(m_indexOffset);
+    int endIndex = firstVisibleItem + numVisibleItems(ConsiderPadding::Yes);
+    for (int i = firstVisibleItem; i &lt; listItemsSize &amp;&amp; i &lt; endIndex; ++i)
</ins><span class="cx">         paintFunction(paintInfo, paintOffset, i);
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="lines">@@ -589,8 +596,13 @@
</span><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> bool RenderListBox::listIndexIsVisible(int index)
</span><del>-{    
-    return index &gt;= m_indexOffset &amp;&amp; index &lt; m_indexOffset + numVisibleItems();
</del><ins>+{
+    int firstIndex = m_indexOfFirstVisibleItemInsidePaddingTopArea.valueOr(m_indexOffset);
+    int endIndex = m_indexOfFirstVisibleItemInsidePaddingBottomArea
+        ? m_indexOfFirstVisibleItemInsidePaddingBottomArea.value() + numberOfVisibleItemsInPaddingBottom()
+        : m_indexOffset + numVisibleItems();
+
+    return index &gt;= firstIndex &amp;&amp; index &lt; endIndex;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> bool RenderListBox::scroll(ScrollDirection direction, ScrollGranularity granularity, float multiplier, Element**, RenderBox*, const IntPoint&amp;)
</span><span class="lines">@@ -634,12 +646,53 @@
</span><span class="cx">     scrollTo(offset.y());
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+int RenderListBox::maximumNumberOfItemsThatFitInPaddingBottomArea() const
+{
+    return paddingBottom() / itemHeight();
+}
+
+int RenderListBox::numberOfVisibleItemsInPaddingTop() const
+{
+    if (!m_indexOfFirstVisibleItemInsidePaddingTopArea)
+        return 0;
+
+    return m_indexOffset - m_indexOfFirstVisibleItemInsidePaddingTopArea.value();
+}
+
+int RenderListBox::numberOfVisibleItemsInPaddingBottom() const
+{
+    if (!m_indexOfFirstVisibleItemInsidePaddingBottomArea)
+        return 0;
+
+    return std::min(maximumNumberOfItemsThatFitInPaddingBottomArea(), numItems() - m_indexOffset - numVisibleItems());
+}
+
+void RenderListBox::computeFirstIndexesVisibleInPaddingTopBottomAreas()
+{
+    m_indexOfFirstVisibleItemInsidePaddingTopArea = Nullopt;
+    m_indexOfFirstVisibleItemInsidePaddingBottomArea = Nullopt;
+
+    int maximumNumberOfItemsThatFitInPaddingTopArea = paddingTop() / itemHeight();
+    if (maximumNumberOfItemsThatFitInPaddingTopArea) {
+        if (m_indexOffset)
+            m_indexOfFirstVisibleItemInsidePaddingTopArea = std::max(0, m_indexOffset - maximumNumberOfItemsThatFitInPaddingTopArea);
+    }
+
+    if (maximumNumberOfItemsThatFitInPaddingBottomArea()) {
+        if (numItems() &gt; (m_indexOffset + numVisibleItems()))
+            m_indexOfFirstVisibleItemInsidePaddingBottomArea = m_indexOffset + numVisibleItems();
+    }
+}
+
</ins><span class="cx"> void RenderListBox::scrollTo(int newOffset)
</span><span class="cx"> {
</span><span class="cx">     if (newOffset == m_indexOffset)
</span><span class="cx">         return;
</span><span class="cx"> 
</span><span class="cx">     m_indexOffset = newOffset;
</span><ins>+
+    computeFirstIndexesVisibleInPaddingTopBottomAreas();
+
</ins><span class="cx">     repaint();
</span><span class="cx">     document().eventQueue().enqueueOrDispatchScrollEvent(selectElement());
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderListBoxh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderListBox.h (200264 => 200265)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderListBox.h        2016-04-29 21:29:01 UTC (rev 200264)
+++ trunk/Source/WebCore/rendering/RenderListBox.h        2016-04-29 21:48:43 UTC (rev 200265)
</span><span class="lines">@@ -34,6 +34,8 @@
</span><span class="cx"> #include &quot;RenderBlockFlow.h&quot;
</span><span class="cx"> #include &quot;ScrollableArea.h&quot;
</span><span class="cx"> 
</span><ins>+#include &lt;wtf/Optional.h&gt;
+
</ins><span class="cx"> namespace WebCore {
</span><span class="cx"> 
</span><span class="cx"> class HTMLSelectElement;
</span><span class="lines">@@ -149,9 +151,18 @@
</span><span class="cx">     PassRefPtr&lt;Scrollbar&gt; createScrollbar();
</span><span class="cx">     void destroyScrollbar();
</span><span class="cx">     
</span><ins>+    int maximumNumberOfItemsThatFitInPaddingBottomArea() const;
+
+    int numberOfVisibleItemsInPaddingTop() const;
+    int numberOfVisibleItemsInPaddingBottom() const;
+
+    void computeFirstIndexesVisibleInPaddingTopBottomAreas();
+
</ins><span class="cx">     LayoutUnit itemHeight() const;
</span><span class="cx">     void valueChanged(unsigned listIndex);
</span><del>-    int numVisibleItems() const;
</del><ins>+
+    enum class ConsiderPadding { Yes, No };
+    int numVisibleItems(ConsiderPadding = ConsiderPadding::No) const;
</ins><span class="cx">     int numItems() const;
</span><span class="cx">     LayoutUnit listHeight() const;
</span><span class="cx">     void paintScrollbar(PaintInfo&amp;, const LayoutPoint&amp;);
</span><span class="lines">@@ -167,6 +178,9 @@
</span><span class="cx">     int m_optionsWidth;
</span><span class="cx">     int m_indexOffset;
</span><span class="cx"> 
</span><ins>+    Optional&lt;int&gt; m_indexOfFirstVisibleItemInsidePaddingTopArea;
+    Optional&lt;int&gt; m_indexOfFirstVisibleItemInsidePaddingBottomArea;
+
</ins><span class="cx">     RefPtr&lt;Scrollbar&gt; m_vBar;
</span><span class="cx"> };
</span><span class="cx"> 
</span></span></pre>
</div>
</div>

</body>
</html>