<!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>[164481] 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/164481">164481</a></dd>
<dt>Author</dt> <dd>abucur@adobe.com</dd>
<dt>Date</dt> <dd>2014-02-21 03:26:44 -0800 (Fri, 21 Feb 2014)</dd>
</dl>

<h3>Log Message</h3>
<pre>[CSS Regions] Regions don't paint correctly in new-multicol elements
https://bugs.webkit.org/show_bug.cgi?id=120711

Reviewed by David Hyatt.

Source/WebCore:

This patch implements basic support for regions inside multi-column elements.
Currently, the painting and hit-testing logic of CSS Regions is not aware of
enclosing multi-column elements. The change is integrated at a layer level by
making use of the pre-computed layer fragments during the painting and hit-testing
phases for regions.

There are limitations such that self painting layers found inside the named flow
thread layer will not be correctly processed because they don't go through the
layer fragment collection step. This is not trivial to implement because the enclosing
pagination layer provided by the multi-column element is not visibile from inside
the named flow thread layer and they reside in different coordinate systems.

A side effect of this patch is the fix of regions incorrect clipping in certain
cases (when both a region and its container clip their overflow, the region's
content is visible outside the container).

Tests: fast/regions/region-clipping.html
       fast/regions/regions-in-multicol-bt.html
       fast/regions/regions-in-multicol-hover-overflow.html
       fast/regions/regions-in-multicol-hover.html
       fast/regions/regions-in-multicol-lr.html
       fast/regions/regions-in-multicol-rl.html
       fast/regions/regions-in-multicol.html

* rendering/RenderLayer.cpp:
(WebCore::RenderLayer::paintLayerContents):
(WebCore::RenderLayer::hitTestLayer):
(WebCore::RenderLayer::paintFlowThreadIfRegionForFragments):
(WebCore::RenderLayer::hitTestFlowThreadIfRegionForFragments):
* rendering/RenderLayer.h:

LayoutTests:

Add tests for regions in multi-column elements and a test that verifies
regions are correctly clipped by their containers when both have hidden
overflow.
For the non horizontal-tb writing modes tests there's no overflow after the
last region because it's not rendered correctly yet in a new column.

* fast/regions/region-clipping-expected.html: Added.
* fast/regions/region-clipping.html: Added.
* fast/regions/regions-in-multicol-bt-expected.html: Added.
* fast/regions/regions-in-multicol-bt.html: Added.
* fast/regions/regions-in-multicol-expected.html: Added.
* fast/regions/regions-in-multicol-hover-expected.html: Added.
* fast/regions/regions-in-multicol-hover-overflow-expected.html: Added.
* fast/regions/regions-in-multicol-hover-overflow.html: Added.
* fast/regions/regions-in-multicol-hover.html: Added.
* fast/regions/regions-in-multicol-lr-expected.html: Added.
* fast/regions/regions-in-multicol-lr.html: Added.
* fast/regions/regions-in-multicol-rl-expected.html: Added.
* fast/regions/regions-in-multicol-rl.html: Added.
* fast/regions/regions-in-multicol.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="#trunkSourceWebCorerenderingRenderLayercpp">trunk/Source/WebCore/rendering/RenderLayer.cpp</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderLayerh">trunk/Source/WebCore/rendering/RenderLayer.h</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastregionsregionclippingexpectedhtml">trunk/LayoutTests/fast/regions/region-clipping-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionclippinghtml">trunk/LayoutTests/fast/regions/region-clipping.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolbtexpectedhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-bt-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolbthtml">trunk/LayoutTests/fast/regions/regions-in-multicol-bt.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolexpectedhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolhoverexpectedhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-hover-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolhoveroverflowexpectedhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-hover-overflow-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolhoveroverflowhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-hover-overflow.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolhoverhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-hover.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticollrexpectedhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-lr-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticollrhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-lr.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolrlexpectedhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-rl-expected.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolrlhtml">trunk/LayoutTests/fast/regions/regions-in-multicol-rl.html</a></li>
<li><a href="#trunkLayoutTestsfastregionsregionsinmulticolhtml">trunk/LayoutTests/fast/regions/regions-in-multicol.html</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (164480 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2014-02-21 09:19:16 UTC (rev 164480)
+++ trunk/LayoutTests/ChangeLog        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -1,3 +1,31 @@
</span><ins>+2014-02-21  Andrei Bucur  &lt;abucur@adobe.com&gt;
+
+        [CSS Regions] Regions don't paint correctly in new-multicol elements
+        https://bugs.webkit.org/show_bug.cgi?id=120711
+
+        Reviewed by David Hyatt.
+
+        Add tests for regions in multi-column elements and a test that verifies
+        regions are correctly clipped by their containers when both have hidden
+        overflow.
+        For the non horizontal-tb writing modes tests there's no overflow after the
+        last region because it's not rendered correctly yet in a new column.
+
+        * fast/regions/region-clipping-expected.html: Added.
+        * fast/regions/region-clipping.html: Added.
+        * fast/regions/regions-in-multicol-bt-expected.html: Added.
+        * fast/regions/regions-in-multicol-bt.html: Added.
+        * fast/regions/regions-in-multicol-expected.html: Added.
+        * fast/regions/regions-in-multicol-hover-expected.html: Added.
+        * fast/regions/regions-in-multicol-hover-overflow-expected.html: Added.
+        * fast/regions/regions-in-multicol-hover-overflow.html: Added.
+        * fast/regions/regions-in-multicol-hover.html: Added.
+        * fast/regions/regions-in-multicol-lr-expected.html: Added.
+        * fast/regions/regions-in-multicol-lr.html: Added.
+        * fast/regions/regions-in-multicol-rl-expected.html: Added.
+        * fast/regions/regions-in-multicol-rl.html: Added.
+        * fast/regions/regions-in-multicol.html: Added.
+
</ins><span class="cx"> 2014-02-21  Mihai Tica  &lt;mitica@adobe.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [CSS Blending] Refactor -webkit-blend-mode to -webkit-mix-blend-mode
</span></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionclippingexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/region-clipping-expected.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/region-clipping-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/region-clipping-expected.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,30 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style&gt;
+      #region1 {
+        width: 300px;
+        border: 1px solid black;
+        margin-top: 50px;
+        overflow: hidden;
+      }
+
+      #clipper {
+        border: 5px solid blue;
+        height: 110px;
+        overflow: hidden;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;There should be no text below the blue rectangle.&lt;/p&gt;
+    &lt;div id=&quot;clipper&quot;&gt;
+      &lt;div id=&quot;region1&quot;&gt;
+        &lt;article id=&quot;content&quot;&gt;
+          &lt;p&gt;Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text.&lt;/p&gt;
+        &lt;/article&gt;
+      &lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionclippinghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/region-clipping.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/region-clipping.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/region-clipping.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,36 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style&gt;
+      #region1 {
+        -webkit-flow-from: article;
+        width: 300px;
+        border: 1px solid black;
+        margin-top: 50px;
+        overflow: hidden;
+      }
+      
+      #content {
+        -webkit-flow-into: article;
+      }
+
+      #clipper {
+        border: 5px solid blue;
+        height: 110px;
+        overflow: hidden;
+      }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;There should be no text below the blue rectangle.&lt;/p&gt;
+    &lt;div id=&quot;clipper&quot;&gt;
+      &lt;div id=&quot;region1&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;article id=&quot;content&quot;&gt;
+      &lt;p&gt;
+        Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. 
+      &lt;/p&gt;
+    &lt;/article&gt;
+  &lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolbtexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-bt-expected.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-bt-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-bt-expected.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        html {
+            -webkit-writing-mode: horizontal-bt;
+        }
+        .pass {
+            position: absolute;
+            background-color: green;
+            top: 150px;
+            width: 50px;
+            height: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            left: 20px;
+        }
+        #bar-2 {
+            left: 80px;
+        }
+        #bar-3 {
+            left: 140px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks that the named flow text content flows through the regions in the multicolumn layout that is applied to the regions' parent.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars and no red.&lt;/p&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolbthtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-bt.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-bt.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-bt.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,66 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        html {
+            -webkit-writing-mode: horizontal-bt;
+        }
+        #named-flow {
+            font-family: Ahem;
+            font-size: 25px;
+            line-height: 1em;
+            color: green;
+            -webkit-flow-into: multicol;
+        }
+        #multicol-container {
+            position: absolute;
+            top: 150px;
+            left: 20px;
+            width: 170px;
+            height: 200px;
+            -webkit-columns: 3;
+            -webkit-column-gap: 10px;
+        }
+        #region-1 , #region-2, #region-3 {
+            width: 50px;
+            height: 200px;
+            -webkit-flow-from: multicol;
+        }
+        .failure {
+            position: absolute;
+            background-color: red;
+            top: 150px;
+            width: 50px;
+            height: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            left: 20px;
+        }
+        #bar-2 {
+            left: 80px;
+        }
+        #bar-3 {
+            left: 140px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks that the named flow text content flows through the regions in the multicolumn layout that is applied to the regions' parent.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars and no red.&lt;/p&gt;
+    &lt;div id=&quot;named-flow&quot;&gt;
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+    &lt;/div&gt;
+    &lt;div id=&quot;multicol-container&quot;&gt;
+       &lt;div id=&quot;region-1&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-2&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-3&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-expected.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-expected.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,36 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        .pass {
+            position: absolute;
+            background-color: green;
+            top: 150px;
+            width: 50px;
+            height: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            left: 20px;
+        }
+        #bar-2 {
+            left: 80px;
+        }
+        #bar-3 {
+            left: 140px;
+        }
+        #bar-4 {
+            left: 200px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks that the named flow text content flows through the regions in the multicolumn layout that is applied to the regions' parent and that it overflows visibly into a fourth column.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars and no red.&lt;/p&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-4&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolhoverexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-hover-expected.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-hover-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-hover-expected.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        .pass {
+            position: absolute;
+            background-color: green;
+            top: 150px;
+            width: 50px;
+            height: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            left: 20px;
+        }
+        #bar-2 {
+            left: 80px;
+            background-color: blue;
+        }
+        #bar-3 {
+            left: 140px;
+        }
+        #bar-4 {
+            left: 200px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks if a region inside a column of a multi-column element can be hovered.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars, no red and the second column turns blue when hovered.&lt;/p&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-4&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolhoveroverflowexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-hover-overflow-expected.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-hover-overflow-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-hover-overflow-expected.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,37 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        .pass {
+            position: absolute;
+            background-color: green;
+            top: 150px;
+            width: 50px;
+            height: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            left: 20px;
+        }
+        #bar-2 {
+            left: 80px;
+        }
+        #bar-3 {
+            left: 140px;
+        }
+        #bar-4 {
+            background-color: blue;
+            left: 200px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks if the overflow of the last region in a new column of a multi-column element can be hovered.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars, no red and the last column turns blue when hovered.&lt;/p&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-4&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolhoveroverflowhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-hover-overflow.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-hover-overflow.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-hover-overflow.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,79 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        #named-flow {
+            font-family: Ahem;
+            font-size: 25px;
+            line-height: 1em;
+            color: green;
+            -webkit-flow-into: multicol;
+        }
+        #multicol-container {
+            position: absolute;
+            top: 150px;
+            left: 20px;
+            width: 170px;
+            height: 200px;
+            -webkit-columns: 3;
+            -webkit-column-gap: 10px;
+        }
+        #region-1 , #region-2, #region-3 {
+            width: 50px;
+            height: 200px;
+            -webkit-flow-from: multicol;
+        }
+        .failure {
+            position: absolute;
+            background-color: red;
+            top: 150px;
+            width: 50px;
+            height: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            left: 20px;
+        }
+        #bar-2 {
+            left: 80px;
+        }
+        #bar-3 {
+            left: 140px;
+        }
+        #bar-4 {
+            left: 200px;
+        }
+
+        .hover:hover {
+            color: blue;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks if the overflow of the last region in a new column of a multi-column element can be hovered.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars, no red and the last column turns blue when hovered.&lt;/p&gt;
+    &lt;div id=&quot;named-flow&quot;&gt;
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+        &lt;span class=&quot;hover&quot;&gt;XX XX XX XX XX XX XX XX&lt;/span&gt;
+    &lt;/div&gt;
+    &lt;div id=&quot;multicol-container&quot;&gt;
+       &lt;div id=&quot;region-1&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-2&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-3&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-4&quot;&gt;&lt;/div&gt;
+
+    &lt;script type=&quot;text/javascript&quot;&gt;
+        if (window.eventSender) {
+            var box = document.querySelector(&quot;#bar-4&quot;).getBoundingClientRect();
+            window.eventSender.mouseMoveTo((box.right + box.left) / 2, (box.top + box.bottom) / 2);
+        }
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolhoverhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-hover.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-hover.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-hover.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,79 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        #named-flow {
+            font-family: Ahem;
+            font-size: 25px;
+            line-height: 1em;
+            color: green;
+            -webkit-flow-into: multicol;
+        }
+        #multicol-container {
+            position: absolute;
+            top: 150px;
+            left: 20px;
+            width: 170px;
+            height: 200px;
+            -webkit-columns: 3;
+            -webkit-column-gap: 10px;
+        }
+        #region-1 , #region-2, #region-3 {
+            width: 50px;
+            height: 200px;
+            -webkit-flow-from: multicol;
+        }
+        .failure {
+            position: absolute;
+            background-color: red;
+            top: 150px;
+            width: 50px;
+            height: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            left: 20px;
+        }
+        #bar-2 {
+            left: 80px;
+        }
+        #bar-3 {
+            left: 140px;
+        }
+        #bar-4 {
+            left: 200px;
+        }
+
+        .hover:hover {
+            color: blue;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks if a region inside a column of a multi-column element can be hovered.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars, no red and the second column turns blue when hovered.&lt;/p&gt;
+    &lt;div id=&quot;named-flow&quot;&gt;
+        XX XX XX XX XX XX XX XX
+        &lt;span class=&quot;hover&quot;&gt;XX XX XX XX XX XX XX XX&lt;/span&gt;
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+    &lt;/div&gt;
+    &lt;div id=&quot;multicol-container&quot;&gt;
+       &lt;div id=&quot;region-1&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-2&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-3&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-4&quot;&gt;&lt;/div&gt;
+
+    &lt;script type=&quot;text/javascript&quot;&gt;
+        if (window.eventSender) {
+            var box = document.querySelector(&quot;#bar-2&quot;).getBoundingClientRect();
+            window.eventSender.mouseMoveTo((box.right + box.left) / 2, (box.top + box.bottom) / 2);
+        }
+    &lt;/script&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticollrexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-lr-expected.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-lr-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-lr-expected.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        html {
+            -webkit-writing-mode: vertical-lr;
+        }
+        .pass {
+            position: absolute;
+            background-color: green;
+            left: 150px;
+            height: 50px;
+            width: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            top: 20px;
+        }
+        #bar-2 {
+            top: 80px;
+        }
+        #bar-3 {
+            top: 140px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks that the named flow text content flows through the regions in the multicolumn layout that is applied to the regions' parent.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars and no red.&lt;/p&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticollrhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-lr.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-lr.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-lr.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,66 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        html {
+            -webkit-writing-mode: vertical-lr;
+        }
+        #named-flow {
+            font-family: Ahem;
+            font-size: 25px;
+            line-height: 1em;
+            color: green;
+            -webkit-flow-into: multicol;
+        }
+        #multicol-container {
+            position: absolute;
+            left: 150px;
+            top: 20px;
+            height: 170px;
+            width: 200px;
+            -webkit-columns: 3;
+            -webkit-column-gap: 10px;
+        }
+        #region-1 , #region-2, #region-3 {
+            height: 50px;
+            width: 200px;
+            -webkit-flow-from: multicol;
+        }
+        .failure {
+            position: absolute;
+            background-color: red;
+            left: 150px;
+            height: 50px;
+            width: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            top: 20px;
+        }
+        #bar-2 {
+            top: 80px;
+        }
+        #bar-3 {
+            top: 140px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks that the named flow text content flows through the regions in the multicolumn layout that is applied to the regions' parent.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars and no red.&lt;/p&gt;
+    &lt;div id=&quot;named-flow&quot;&gt;
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+    &lt;/div&gt;
+    &lt;div id=&quot;multicol-container&quot;&gt;
+       &lt;div id=&quot;region-1&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-2&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-3&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolrlexpectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-rl-expected.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-rl-expected.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-rl-expected.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,35 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        html {
+            -webkit-writing-mode: vertical-rl;
+        }
+        .pass {
+            position: absolute;
+            background-color: green;
+            left: 150px;
+            height: 50px;
+            width: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            top: 20px;
+        }
+        #bar-2 {
+            top: 80px;
+        }
+        #bar-3 {
+            top: 140px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks that the named flow text content flows through the regions in the multicolumn layout that is applied to the regions' parent.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars and no red.&lt;/p&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;pass&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolrlhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol-rl.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol-rl.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol-rl.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,66 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        html {
+            -webkit-writing-mode: vertical-rl;
+        }
+        #named-flow {
+            font-family: Ahem;
+            font-size: 25px;
+            line-height: 1em;
+            color: green;
+            -webkit-flow-into: multicol;
+        }
+        #multicol-container {
+            position: absolute;
+            left: 150px;
+            top: 20px;
+            height: 170px;
+            width: 200px;
+            -webkit-columns: 3;
+            -webkit-column-gap: 10px;
+        }
+        #region-1 , #region-2, #region-3 {
+            height: 50px;
+            width: 200px;
+            -webkit-flow-from: multicol;
+        }
+        .failure {
+            position: absolute;
+            background-color: red;
+            left: 150px;
+            height: 50px;
+            width: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            top: 20px;
+        }
+        #bar-2 {
+            top: 80px;
+        }
+        #bar-3 {
+            top: 140px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks that the named flow text content flows through the regions in the multicolumn layout that is applied to the regions' parent.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars and no red.&lt;/p&gt;
+    &lt;div id=&quot;named-flow&quot;&gt;
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+    &lt;/div&gt;
+    &lt;div id=&quot;multicol-container&quot;&gt;
+       &lt;div id=&quot;region-1&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-2&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-3&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+&lt;/body&gt;
+&lt;/html&gt;
</ins></span></pre></div>
<a id="trunkLayoutTestsfastregionsregionsinmulticolhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/regions/regions-in-multicol.html (0 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/regions/regions-in-multicol.html                                (rev 0)
+++ trunk/LayoutTests/fast/regions/regions-in-multicol.html        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -0,0 +1,68 @@
</span><ins>+&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+    &lt;title&gt;Test - Bug 120711: [CSS Regions] Regions don't paint correctly in new-multicol elements&lt;/title&gt;
+    &lt;style type=&quot;text/css&quot;&gt;
+        #named-flow {
+            font-family: Ahem;
+            font-size: 25px;
+            line-height: 1em;
+            color: green;
+            -webkit-flow-into: multicol;
+        }
+        #multicol-container {
+            position: absolute;
+            top: 150px;
+            left: 20px;
+            width: 170px;
+            height: 200px;
+            -webkit-columns: 3;
+            -webkit-column-gap: 10px;
+        }
+        #region-1 , #region-2, #region-3 {
+            width: 50px;
+            height: 200px;
+            -webkit-flow-from: multicol;
+        }
+        .failure {
+            position: absolute;
+            background-color: red;
+            top: 150px;
+            width: 50px;
+            height: 200px;
+            z-index: -1;
+        }
+        #bar-1 {
+            left: 20px;
+        }
+        #bar-2 {
+            left: 80px;
+        }
+        #bar-3 {
+            left: 140px;
+        }
+        #bar-4 {
+            left: 200px;
+        }
+    &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+    &lt;p&gt;This test checks that the named flow text content flows through the regions in the multicolumn layout that is applied to the regions' parent and that it overflows visibly into a fourth column.&lt;/p&gt;
+    &lt;p&gt;The test passes if there are four green vertical bars and no red.&lt;/p&gt;
+    &lt;div id=&quot;named-flow&quot;&gt;
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+        XX XX XX XX XX XX XX XX
+    &lt;/div&gt;
+    &lt;div id=&quot;multicol-container&quot;&gt;
+       &lt;div id=&quot;region-1&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-2&quot;&gt;&lt;/div&gt;
+       &lt;div id=&quot;region-3&quot;&gt;&lt;/div&gt;
+    &lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-1&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-2&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-3&quot;&gt;&lt;/div&gt;
+    &lt;div class=&quot;failure&quot; id=&quot;bar-4&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 (164480 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2014-02-21 09:19:16 UTC (rev 164480)
+++ trunk/Source/WebCore/ChangeLog        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -1,3 +1,41 @@
</span><ins>+2014-02-21  Andrei Bucur  &lt;abucur@adobe.com&gt;
+
+        [CSS Regions] Regions don't paint correctly in new-multicol elements
+        https://bugs.webkit.org/show_bug.cgi?id=120711
+
+        Reviewed by David Hyatt.
+
+        This patch implements basic support for regions inside multi-column elements.
+        Currently, the painting and hit-testing logic of CSS Regions is not aware of
+        enclosing multi-column elements. The change is integrated at a layer level by
+        making use of the pre-computed layer fragments during the painting and hit-testing
+        phases for regions.
+
+        There are limitations such that self painting layers found inside the named flow
+        thread layer will not be correctly processed because they don't go through the
+        layer fragment collection step. This is not trivial to implement because the enclosing
+        pagination layer provided by the multi-column element is not visibile from inside
+        the named flow thread layer and they reside in different coordinate systems.
+
+        A side effect of this patch is the fix of regions incorrect clipping in certain
+        cases (when both a region and its container clip their overflow, the region's
+        content is visible outside the container).
+
+        Tests: fast/regions/region-clipping.html
+               fast/regions/regions-in-multicol-bt.html
+               fast/regions/regions-in-multicol-hover-overflow.html
+               fast/regions/regions-in-multicol-hover.html
+               fast/regions/regions-in-multicol-lr.html
+               fast/regions/regions-in-multicol-rl.html
+               fast/regions/regions-in-multicol.html
+
+        * rendering/RenderLayer.cpp:
+        (WebCore::RenderLayer::paintLayerContents):
+        (WebCore::RenderLayer::hitTestLayer):
+        (WebCore::RenderLayer::paintFlowThreadIfRegionForFragments):
+        (WebCore::RenderLayer::hitTestFlowThreadIfRegionForFragments):
+        * rendering/RenderLayer.h:
+
</ins><span class="cx"> 2014-02-21  Mihai Tica  &lt;mitica@adobe.com&gt;
</span><span class="cx"> 
</span><span class="cx">         [CSS Blending] Refactor -webkit-blend-mode to -webkit-mix-blend-mode
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (164480 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayer.cpp        2014-02-21 09:19:16 UTC (rev 164480)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -4094,7 +4094,7 @@
</span><span class="cx">         
</span><span class="cx">         // If this is a region, paint its contents via the flow thread's layer.
</span><span class="cx">         if (shouldPaintContent)
</span><del>-            paintFlowThreadIfRegion(context, localPaintingInfo, localPaintFlags, offsetFromRoot, paintDirtyRect, isPaintingOverflowContents);
</del><ins>+            paintFlowThreadIfRegionForFragments(layerFragments, context, localPaintingInfo, localPaintFlags);
</ins><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     if (isPaintingOverlayScrollbars)
</span><span class="lines">@@ -4861,13 +4861,6 @@
</span><span class="cx">         candidateLayer = hitLayer;
</span><span class="cx">     }
</span><span class="cx"> 
</span><del>-    hitLayer = hitTestFlowThreadIfRegion(rootLayer, request, result, hitTestRect, hitTestLocation, localTransformState.get(), zOffsetForDescendantsPtr);
-    if (hitLayer) {
-        if (!depthSortDescendants)
-            return hitLayer;
-        candidateLayer = hitLayer;
-    }
-
</del><span class="cx">     // Collect the fragments. This will compute the clip rectangles for each layer fragment.
</span><span class="cx">     LayerFragments layerFragments;
</span><span class="cx">     collectFragments(layerFragments, rootLayer, hitTestLocation.region(), hitTestRect, RootRelativeClipRects, IncludeOverlayScrollbarSize);
</span><span class="lines">@@ -4877,6 +4870,13 @@
</span><span class="cx">         return this;
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    hitLayer = hitTestFlowThreadIfRegionForFragments(layerFragments, rootLayer, request, result, hitTestRect, hitTestLocation, localTransformState.get(), zOffsetForDescendantsPtr);
+    if (hitLayer) {
+        if (!depthSortDescendants)
+            return hitLayer;
+        candidateLayer = hitLayer;
+    }
+
</ins><span class="cx">     // Next we want to see if the mouse pos is inside the child RenderObjects of the layer. Check
</span><span class="cx">     // every fragment in reverse order.
</span><span class="cx">     if (isSelfPaintingLayer()) {
</span><span class="lines">@@ -6764,7 +6764,7 @@
</span><span class="cx">     context-&gt;restore();
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-void RenderLayer::paintFlowThreadIfRegion(GraphicsContext* context, const LayerPaintingInfo&amp; paintingInfo, PaintLayerFlags paintFlags, LayoutPoint paintOffset, LayoutRect dirtyRect, bool isPaintingOverflowContents)
</del><ins>+void RenderLayer::paintFlowThreadIfRegionForFragments(const LayerFragments&amp; fragments, GraphicsContext* context, const LayerPaintingInfo&amp; paintingInfo, PaintLayerFlags paintFlags)
</ins><span class="cx"> {
</span><span class="cx">     if (!renderer().isRenderNamedFlowFragmentContainer())
</span><span class="cx">         return;
</span><span class="lines">@@ -6773,10 +6773,11 @@
</span><span class="cx">     RenderNamedFlowFragment* flowFragment = renderNamedFlowFragmentContainer-&gt;renderNamedFlowFragment();
</span><span class="cx">     if (!flowFragment-&gt;isValid())
</span><span class="cx">         return;
</span><del>-    
-    ClipRect regionClipRect;
</del><ins>+
</ins><span class="cx">     RenderNamedFlowThread* flowThread = flowFragment-&gt;namedFlowThread();
</span><span class="cx">     RenderLayer* flowThreadLayer = flowThread-&gt;layer();
</span><ins>+
+    LayoutRect regionClipRect = LayoutRect::infiniteRect();
</ins><span class="cx">     if (flowFragment-&gt;shouldClipFlowThreadContent()) {
</span><span class="cx">         regionClipRect = renderNamedFlowFragmentContainer-&gt;paddingBoxRect();
</span><span class="cx"> 
</span><span class="lines">@@ -6787,31 +6788,34 @@
</span><span class="cx">         // thread's layer.
</span><span class="cx">         if (!isComposited()) {
</span><span class="cx">             LayoutPoint regionOffsetFromRoot;
</span><del>-            convertToLayerCoords(flowThreadLayer, regionOffsetFromRoot);
</del><ins>+            convertToLayerCoords(paintingInfo.rootLayer, regionOffsetFromRoot);
</ins><span class="cx">             regionClipRect.moveBy(regionOffsetFromRoot);
</span><span class="cx">         }
</span><del>-    } else {
-        if (paintingInfo.rootLayer != this &amp;&amp; parent()) {
-            ClipRectsContext clipRectsContext(paintingInfo.rootLayer, flowFragment,
-                (paintFlags &amp; PaintLayerTemporaryClipRects) ? TemporaryClipRects : PaintingClipRects,
-                IgnoreOverlayScrollbarSize, (isPaintingOverflowContents) ? IgnoreOverflowClip : RespectOverflowClip);
-            regionClipRect = backgroundClipRect(clipRectsContext);
-        } else
-            regionClipRect = dirtyRect;
</del><span class="cx">     }
</span><ins>+    
+    for (size_t i = 0; i &lt; fragments.size(); ++i) {
+        const LayerFragment&amp; fragment = fragments.at(i);
</ins><span class="cx"> 
</span><del>-    // Optimize clipping for the single fragment case.
-    bool shouldClip = !regionClipRect.isEmpty() &amp;&amp; regionClipRect != LayoutRect::infiniteRect();
-    if (shouldClip)
-        clipToRect(paintingInfo.rootLayer, context, paintingInfo.paintDirtyRect, regionClipRect);
</del><ins>+        if (!fragment.shouldPaintContent)
+            continue;
</ins><span class="cx"> 
</span><del>-    flowThreadLayer-&gt;paintNamedFlowThreadInsideRegion(context, flowFragment, paintingInfo.paintDirtyRect, paintOffset, paintingInfo.paintBehavior, paintFlags);
</del><ins>+        ClipRect clipRect = fragment.backgroundRect;
+        if (flowFragment-&gt;shouldClipFlowThreadContent())
+            clipRect.intersect(regionClipRect);
</ins><span class="cx"> 
</span><del>-    if (shouldClip)
-        restoreClip(context, paintingInfo.paintDirtyRect, regionClipRect);
</del><ins>+        bool shouldClip = !clipRect.isEmpty() &amp;&amp; clipRect != LayoutRect::infiniteRect();
+        // Optimize clipping for the single fragment case.
+        if (shouldClip)
+            clipToRect(paintingInfo.rootLayer, context, paintingInfo.paintDirtyRect, clipRect);
+
+        flowThreadLayer-&gt;paintNamedFlowThreadInsideRegion(context, flowFragment, paintingInfo.paintDirtyRect, fragment.layerBounds.location() + paintingInfo.subPixelAccumulation, paintingInfo.paintBehavior, paintFlags);
+
+        if (shouldClip)
+            restoreClip(context, paintingInfo.paintDirtyRect, clipRect);
+    }
</ins><span class="cx"> }
</span><span class="cx"> 
</span><del>-RenderLayer* RenderLayer::hitTestFlowThreadIfRegion(RenderLayer* rootLayer, const HitTestRequest&amp; request, HitTestResult&amp; result, const LayoutRect&amp; hitTestRect, 
</del><ins>+RenderLayer* RenderLayer::hitTestFlowThreadIfRegionForFragments(const LayerFragments&amp; fragments, RenderLayer* rootLayer, const HitTestRequest&amp; request, HitTestResult&amp; result, const LayoutRect&amp; hitTestRect, 
</ins><span class="cx">     const HitTestLocation&amp; hitTestLocation,
</span><span class="cx">     const HitTestingTransformState* transformState, 
</span><span class="cx">     double* zOffsetForDescendants)
</span><span class="lines">@@ -6824,20 +6828,10 @@
</span><span class="cx">         return 0;
</span><span class="cx"> 
</span><span class="cx">     RenderFlowThread* flowThread = region-&gt;flowThread();
</span><del>-
-    // If the hit location is inside a clipped out area, don't forward the hit test to the flow thread.
-    if (rootLayer != this &amp;&amp; parent()) {
-        ClipRectsContext clipRectsContext(rootLayer, hitTestLocation.region(), TemporaryClipRects);
-        ClipRect clipRect = backgroundClipRect(clipRectsContext);
-        if (!clipRect.intersects(hitTestLocation))
-            return 0;
-    }
-
</del><span class="cx">     LayoutPoint regionOffsetFromRoot;
</span><span class="cx">     convertToLayerCoords(rootLayer, regionOffsetFromRoot);
</span><span class="cx"> 
</span><span class="cx">     LayoutPoint portionLocation = region-&gt;flowThreadPortionRect().location();
</span><del>-
</del><span class="cx">     if (flowThread-&gt;style().isFlippedBlocksWritingMode()) {
</span><span class="cx">         // The portion location coordinate must be translated into physical coordinates.
</span><span class="cx">         if (flowThread-&gt;style().isHorizontalWritingMode())
</span><span class="lines">@@ -6847,20 +6841,33 @@
</span><span class="cx">     }
</span><span class="cx"> 
</span><span class="cx">     LayoutRect regionContentBox = toRenderBlockFlow(&amp;renderer())-&gt;contentBoxRect();
</span><del>-    LayoutSize hitTestOffset = portionLocation - (regionOffsetFromRoot + regionContentBox.location());
</del><span class="cx"> 
</span><del>-    // Always ignore clipping, since the RenderFlowThread has nothing to do with the bounds of the FrameView.
-    HitTestRequest newRequest(request.type() | HitTestRequest::IgnoreClipping | HitTestRequest::DisallowShadowContent);
</del><ins>+    RenderLayer* resultLayer = 0;
+    for (int i = fragments.size() - 1; i &gt;= 0; --i) {
+        const LayerFragment&amp; fragment = fragments.at(i);
</ins><span class="cx"> 
</span><del>-    // Make a new temporary HitTestLocation in the new region.
-    HitTestLocation newHitTestLocation(hitTestLocation, hitTestOffset, region);
</del><ins>+        if (!fragment.backgroundRect.intersects(hitTestLocation))
+            continue;
</ins><span class="cx"> 
</span><del>-    // Expand the hit-test rect to the flow thread's coordinate system.
-    LayoutRect hitTestRectInFlowThread = hitTestRect;
-    hitTestRectInFlowThread.move(hitTestOffset.width(), hitTestOffset.height());
-    hitTestRectInFlowThread.expand(LayoutSize(fabs((double)hitTestOffset.width()), fabs((double)hitTestOffset.height())));
</del><ins>+        LayoutSize hitTestOffset = portionLocation - (fragment.layerBounds.location() + regionContentBox.location());
</ins><span class="cx"> 
</span><del>-    return flowThread-&gt;layer()-&gt;hitTestLayer(flowThread-&gt;layer(), 0, newRequest, result, hitTestRectInFlowThread, newHitTestLocation, false, transformState, zOffsetForDescendants);
</del><ins>+        // Always ignore clipping, since the RenderFlowThread has nothing to do with the bounds of the FrameView.
+        HitTestRequest newRequest(request.type() | HitTestRequest::IgnoreClipping | HitTestRequest::DisallowShadowContent);
+
+        // Make a new temporary HitTestLocation in the new region.
+        HitTestLocation newHitTestLocation(hitTestLocation, hitTestOffset, region);
+
+        // Expand the hit-test rect to the flow thread's coordinate system.
+        LayoutRect hitTestRectInFlowThread = hitTestRect;
+        hitTestRectInFlowThread.move(hitTestOffset.width(), hitTestOffset.height());
+        hitTestRectInFlowThread.expand(LayoutSize(fabs((double)hitTestOffset.width()), fabs((double)hitTestOffset.height())));
+
+        resultLayer = flowThread-&gt;layer()-&gt;hitTestLayer(flowThread-&gt;layer(), 0, newRequest, result, hitTestRectInFlowThread, newHitTestLocation, false, transformState, zOffsetForDescendants);
+        if (!resultLayer)
+            continue;
+    }
+
+    return resultLayer;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> } // namespace WebCore
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderLayerh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderLayer.h (164480 => 164481)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderLayer.h        2014-02-21 09:19:16 UTC (rev 164480)
+++ trunk/Source/WebCore/rendering/RenderLayer.h        2014-02-21 11:26:44 UTC (rev 164481)
</span><span class="lines">@@ -1151,10 +1151,10 @@
</span><span class="cx"> 
</span><span class="cx">     bool overflowControlsIntersectRect(const IntRect&amp; localRect) const;
</span><span class="cx"> 
</span><del>-    RenderLayer* hitTestFlowThreadIfRegion(RenderLayer*, const HitTestRequest&amp;, HitTestResult&amp;,
</del><ins>+    RenderLayer* hitTestFlowThreadIfRegionForFragments(const LayerFragments&amp;, RenderLayer*, const HitTestRequest&amp;, HitTestResult&amp;,
</ins><span class="cx">         const LayoutRect&amp;, const HitTestLocation&amp;,
</span><span class="cx">         const HitTestingTransformState*, double*);
</span><del>-    void paintFlowThreadIfRegion(GraphicsContext*, const LayerPaintingInfo&amp;, PaintLayerFlags, LayoutPoint, LayoutRect, bool);
</del><ins>+    void paintFlowThreadIfRegionForFragments(const LayerFragments&amp;, GraphicsContext*, const LayerPaintingInfo&amp;, PaintLayerFlags);
</ins><span class="cx">     void mapLayerClipRectsToFragmentationLayer(RenderRegion*, ClipRects&amp;) const;
</span><span class="cx"> 
</span><span class="cx"> private:
</span></span></pre>
</div>
</div>

</body>
</html>