<!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>[168286] 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/168286">168286</a></dd>
<dt>Author</dt> <dd>abucur@adobe.com</dd>
<dt>Date</dt> <dd>2014-05-05 07:47:33 -0700 (Mon, 05 May 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>[CSSRegions] Slider displayed wrong in regions
https://bugs.webkit.org/show_bug.cgi?id=132243

Reviewed by Mihnea Ovidenie.

Source/WebCore:
In case a box didn't have a range, getRegionRangeForBox was searching for
the top-most unplittable ancestor. This is not correct in every case. It's
possible to have a box with range that has children without ranges (e.g. an
absolutely positioned inline box with shadow descendants).

I've modified getRegionRangeForBox to search for the first ancestor that
has a cached range and use that instead of looking for an unsplittable box.
The range of the box is the region at the top of the box, clamped by the
range of the ancestor. This will be correct all the time once all the layout
systems are region range aware and are able to cache it.

Test: fast/regions/positioned-slider-in-regions.html

* rendering/RenderFlowThread.cpp:
(WebCore::RenderFlowThread::hasRegionRangeForBox):
(WebCore::RenderFlowThread::getRegionRangeForBox):
* rendering/RenderFlowThread.h:

LayoutTests:
Tests that the thumb of positioned slider inside regions is correctly painted.

* fast/regions/positioned-slider-in-regions-expected.html: Added.
* fast/regions/positioned-slider-in-regions.html: Added.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderFlowThreadcpp">trunk/Source/WebCore/rendering/RenderFlowThread.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderFlowThreadh">trunk/Source/WebCore/rendering/RenderFlowThread.h</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastregionspositionedsliderinregionsexpectedhtml">trunk/LayoutTests/fast/regions/positioned-slider-in-regions-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionspositionedsliderinregionshtml">trunk/LayoutTests/fast/regions/positioned-slider-in-regions.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (168285 => 168286)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2014-05-05 13:46:18 UTC (rev 168285)
+++ trunk/LayoutTests/ChangeLog        2014-05-05 14:47:33 UTC (rev 168286)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2014-05-05  Andrei Bucur  &lt;abucur@adobe.com&gt;
+
+        [CSSRegions] Slider displayed wrong in regions
+        https://bugs.webkit.org/show_bug.cgi?id=132243
+
+        Reviewed by Mihnea Ovidenie.
+
+        Tests that the thumb of positioned slider inside regions is correctly painted.
+
+        * fast/regions/positioned-slider-in-regions-expected.html: Added.
+        * fast/regions/positioned-slider-in-regions.html: Added.
+
</ins><span class="cx"> 2014-05-05  Xabier Rodriguez Calvar  &lt;calvaris@igalia.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Unreviewed. New GTK baseline for media/media-controls-clone.html.
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionspositionedsliderinregionsexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/positioned-slider-in-regions-expected.html (0 => 168286)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/positioned-slider-in-regions-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/positioned-slider-in-regions-expected.html        2014-05-05 14:47:33 UTC (rev 168286)
</span><span class="lines">@@ -0,0 +1,56 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;title&gt;[132243][CSSRegions] Slider displayed wrong in regions&lt;/title&gt;
+        &lt;style&gt;
+            #region {
+                position: absolute;
+                top: 100px;
+                left: 50px;
+                width: 100px;
+                height: 100px;
+                border: 5px solid green;
+            }
+            #region2 {
+                position: absolute;
+                top: 100px;
+                left: 200px;
+                width: 100px;
+                height: 100px;
+                border: 5px solid blue;
+            }
+            #article {
+                display: inline-block;
+                background-color: green;
+            }
+            #slider {
+                position: absolute;
+                top: 20px;
+                width: 80px;
+                height: 30px;
+                background-color: cyan;
+            }
+
+            /* Apply a custom style to the slider to avoid aliasing errors when painting the thumb. */
+            input[type=&quot;range&quot;]::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                width: 20px;
+                height: 20px;
+                background-color: gray;
+            }
+
+            input[type=&quot;range&quot;] {
+                -webkit-appearance: none;
+            }
+        &lt;/style&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;p&gt;&lt;a href=&quot;https://bugs.webkit.org/show_bug.cgi?id=132243&quot;&gt;[CSSRegions] Slider displayed wrong in regions&lt;/a&gt;. You should see a cyan slider in the blue box. The thumb should be visible.&lt;/p&gt;
+        &lt;div id=&quot;region&quot;&gt;&lt;/div&gt;
+        &lt;div id=&quot;region2&quot;&gt;
+            &lt;div id=&quot;article&quot;&gt;
+                    &lt;input id=&quot;slider&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;5&quot; value=&quot;2&quot; /&gt;
+            &lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionspositionedsliderinregionshtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/positioned-slider-in-regions.html (0 => 168286)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/positioned-slider-in-regions.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/positioned-slider-in-regions.html        2014-05-05 14:47:33 UTC (rev 168286)
</span><span class="lines">@@ -0,0 +1,58 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+    &lt;head&gt;
+        &lt;title&gt;[132243][CSSRegions] Slider displayed wrong in regions&lt;/title&gt;
+        &lt;style&gt;
+            #region {
+                -webkit-flow-from: flow;
+                position: absolute;
+                top: 100px;
+                left: 50px;
+                width: 100px;
+                height: 100px;
+                border: 5px solid green;
+            }
+            #region2 {
+                -webkit-flow-from: flow;
+                position: absolute;
+                top: 100px;
+                left: 200px;
+                width: 100px;
+                height: 100px;
+                border: 5px solid blue;
+            }
+            #article {
+                -webkit-flow-into: flow;
+                display: inline-block;
+                background-color: green;
+            }
+            #slider {
+                position: absolute;
+                top: 120px;
+                width: 80px;
+                height: 30px;
+                background-color: cyan;
+            }
+
+            /* Apply a custom style to the slider to avoid aliasing errors when painting the thumb. */
+            input[type=&quot;range&quot;]::-webkit-slider-thumb {
+                -webkit-appearance: none;
+                width: 20px;
+                height: 20px;
+                background-color: gray;
+            }
+
+            input[type=&quot;range&quot;] {
+                -webkit-appearance: none;
+            }
+        &lt;/style&gt;
+    &lt;/head&gt;
+    &lt;body&gt;
+        &lt;p&gt;&lt;a href=&quot;https://bugs.webkit.org/show_bug.cgi?id=132243&quot;&gt;[CSSRegions] Slider displayed wrong in regions&lt;/a&gt;. You should see a cyan slider in the blue box. The thumb should be visible.&lt;/p&gt;
+        &lt;div id=&quot;region&quot;&gt;&lt;/div&gt;
+        &lt;div id=&quot;region2&quot;&gt;&lt;/div&gt;
+        &lt;div id=&quot;article&quot;&gt;
+            &lt;input id=&quot;slider&quot; type=&quot;range&quot; min=&quot;0&quot; max=&quot;5&quot; value=&quot;2&quot; /&gt;
+        &lt;/div&gt;
+    &lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (168285 => 168286)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2014-05-05 13:46:18 UTC (rev 168285)
+++ trunk/Source/WebCore/ChangeLog        2014-05-05 14:47:33 UTC (rev 168286)
</span><span class="lines">@@ -1,5 +1,30 @@
</span><span class="cx"> 2014-05-05  Andrei Bucur  &lt;abucur@adobe.com&gt;
</span><span class="cx"> 
</span><ins>+        [CSSRegions] Slider displayed wrong in regions
+        https://bugs.webkit.org/show_bug.cgi?id=132243
+
+        Reviewed by Mihnea Ovidenie.
+
+        In case a box didn't have a range, getRegionRangeForBox was searching for
+        the top-most unplittable ancestor. This is not correct in every case. It's
+        possible to have a box with range that has children without ranges (e.g. an
+        absolutely positioned inline box with shadow descendants).
+
+        I've modified getRegionRangeForBox to search for the first ancestor that
+        has a cached range and use that instead of looking for an unsplittable box.
+        The range of the box is the region at the top of the box, clamped by the
+        range of the ancestor. This will be correct all the time once all the layout
+        systems are region range aware and are able to cache it.
+
+        Test: fast/regions/positioned-slider-in-regions.html
+
+        * rendering/RenderFlowThread.cpp:
+        (WebCore::RenderFlowThread::hasRegionRangeForBox):
+        (WebCore::RenderFlowThread::getRegionRangeForBox):
+        * rendering/RenderFlowThread.h:
+
+2014-05-05  Andrei Bucur  &lt;abucur@adobe.com&gt;
+
</ins><span class="cx">         [CSS Regions] ASSERT when hovering over region
</span><span class="cx">         https://bugs.webkit.org/show_bug.cgi?id=128809
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderFlowThreadcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFlowThread.cpp (168285 => 168286)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderFlowThread.cpp        2014-05-05 13:46:18 UTC (rev 168285)
+++ trunk/Source/WebCore/rendering/RenderFlowThread.cpp        2014-05-05 14:47:33 UTC (rev 168286)
</span><span class="lines">@@ -747,6 +747,20 @@
</span><span class="cx">     range.setRange(startRegion, endRegion);
</span><span class="cx"> }
</span><span class="cx"> 
</span><ins>+bool RenderFlowThread::hasRegionRangeForBox(const RenderBox* box) const
+{
+    ASSERT(box);
+
+    if (m_regionRangeMap.contains(box))
+        return true;
+
+    InlineElementBox* boxWrapper = box-&gt;inlineBoxWrapper();
+    if (boxWrapper &amp;&amp; boxWrapper-&gt;root().containingRegion())
+        return true;
+
+    return false;
+}
+
</ins><span class="cx"> bool RenderFlowThread::getRegionRangeForBoxFromCachedInfo(const RenderBox* box, RenderRegion*&amp; startRegion, RenderRegion*&amp; endRegion) const
</span><span class="cx"> {
</span><span class="cx">     ASSERT(box);
</span><span class="lines">@@ -786,21 +800,25 @@
</span><span class="cx">     // Check if the box is contained in an unsplittable box.
</span><span class="cx">     // If the unsplittable box has region range, then the start and end region for the box
</span><span class="cx">     // should be equal with the region for the unsplittable box if any.
</span><del>-    RenderBox* topMostUnsplittable = nullptr;
</del><span class="cx">     RenderBox* cb = const_cast&lt;RenderBox*&gt;(box);
</span><del>-    while (!cb-&gt;isRenderFlowThread()) {
-        if (cb-&gt;isUnsplittableForPagination())
-            topMostUnsplittable = cb;
</del><ins>+    RenderBox* cbToUse = nullptr;
+    while (!cb-&gt;isRenderFlowThread() &amp;&amp; !cbToUse) {
+        // FIXME: Use the containingBlock() value once we patch all the layout systems to be region range aware
+        // (e.g. if we use containingBlock() the shadow controls of a video element won't get the range from the
+        // video box because it's not a block; they need to be patched separately).
</ins><span class="cx">         ASSERT(cb-&gt;parent());
</span><span class="cx">         cb = cb-&gt;parent()-&gt;enclosingBox();
</span><span class="cx">         ASSERT(cb);
</span><ins>+
+        if (hasRegionRangeForBox(cb))
+            cbToUse = cb;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><del>-    if (topMostUnsplittable) {
-        if (getRegionRangeForBoxFromCachedInfo(topMostUnsplittable, startRegion, endRegion)) {
-            ASSERT(endRegion == startRegion);
-            return true;
-        }
</del><ins>+    // If a box doesn't have a cached region range it usually means the box belongs to a line so startRegion should be equal with endRegion.
+    // FIXME: Find the cases when this startRegion should not be equal with endRegion and make sure these boxes have cached region ranges.
+    if (cbToUse) {
+        startRegion = endRegion = const_cast&lt;RenderFlowThread*&gt;(this)-&gt;regionAtBlockOffset(cbToUse, box-&gt;offsetFromLogicalTopOfFirstPage(), true, DisallowRegionAutoGeneration);
+        return true;
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     return false;
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderFlowThreadh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderFlowThread.h (168285 => 168286)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderFlowThread.h        2014-05-05 13:46:18 UTC (rev 168285)
+++ trunk/Source/WebCore/rendering/RenderFlowThread.h        2014-05-05 14:47:33 UTC (rev 168286)
</span><span class="lines">@@ -141,7 +141,7 @@
</span><span class="cx"> 
</span><span class="cx">     virtual void setRegionRangeForBox(const RenderBox*, RenderRegion*, RenderRegion*);
</span><span class="cx">     bool getRegionRangeForBox(const RenderBox*, RenderRegion*&amp; startRegion, RenderRegion*&amp; endRegion) const;
</span><del>-    bool hasRegionRangeForBox(const RenderBox* box) const { ASSERT(box); return m_regionRangeMap.contains(box); }
</del><ins>+    bool hasRegionRangeForBox(const RenderBox*) const;
</ins><span class="cx"> 
</span><span class="cx">     // Check if the object is in region and the region is part of this flow thread.
</span><span class="cx">     bool objectInFlowRegion(const RenderObject*, const RenderRegion*) const;
</span></span></pre>
</div>
</div>

</body>
</html>