Display -webkit-filter objects in any column (instead of only in the first one).

mstensho · Commit bot · commit 17e31b897205 · 2016-01-27T17:13:30.000Z
Most of our painting-related operations take place after fragmentation, i.e. via PaintLayerPainter::paintFragmentWithPhase(). All such operations can just sit back and relax and not worry about fragmentation, since translation and clipping for a given fragmentainer (column) has already taken place. This is not the case for filters, though. They are set up before fragmentation. Therefore, we need to make the bounding box of the layer visual (convert out of the flow thread coordinate space) on our own. We now do this specifically for filters, or we'd upset other parts of the code, such as clip path. BUG=530074 R=wangxianzhu@chromium.org Review URL: https://codereview.chromium.org/1645583002 Cr-Commit-Position: refs/heads/master@{#371808}
diff --git a/third_party/WebKit/LayoutTests/fast/multicol/filter-in-second-column-expected.html b/third_party/WebKit/LayoutTests/fast/multicol/filter-in-second-column-expected.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<p>The word "PASS" should be seen below.</p>
+<div style="margin-left:5em; -webkit-filter:grayscale(90%);">PASS</div>
diff --git a/third_party/WebKit/LayoutTests/fast/multicol/filter-in-second-column.html b/third_party/WebKit/LayoutTests/fast/multicol/filter-in-second-column.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<p>The word "PASS" should be seen below.</p>
+<div style="-webkit-columns:2; -webkit-column-gap:0; width:10em;">
+    <br>
+    <div style="-webkit-filter:grayscale(90%);">PASS</div>
+</div>
diff --git a/third_party/WebKit/Source/core/paint/FilterPainter.cpp b/third_party/WebKit/Source/core/paint/FilterPainter.cpp
@@ -69,7 +69,13 @@ FilterPainter::FilterPainter(PaintLayer& layer, GraphicsContext& context, const
         // the layer's filter. See crbug.com/502026.
         if (webFilterOperations->isEmpty())
             return;
-        context.paintController().createAndAppend<BeginFilterDisplayItem>(*m_layoutObject, imageFilter, FloatRect(rootRelativeBounds), webFilterOperations.release());
+        LayoutRect visualBounds(rootRelativeBounds);
+        if (layer.enclosingPaginationLayer()) {
+            // Filters are set up before pagination, so we need to make the bounding box visual on our own.
+            visualBounds.moveBy(-offsetFromRoot);
+            layer.convertFromFlowThreadToVisualBoundingBoxInAncestor(paintingInfo.rootLayer, visualBounds);
+        }
+        context.paintController().createAndAppend<BeginFilterDisplayItem>(*m_layoutObject, imageFilter, FloatRect(visualBounds), webFilterOperations.release());
     }
 
     m_filterInProgress = true;
diff --git a/third_party/WebKit/Source/core/paint/PaintLayer.cpp b/third_party/WebKit/Source/core/paint/PaintLayer.cpp
@@ -436,17 +436,15 @@ TransformationMatrix PaintLayer::renderableTransform(GlobalPaintFlags globalPain
     return *m_transform;
 }
 
-// Convert a bounding box from flow thread coordinates, relative to |layer|, to visual coordinates, relative to |ancestorLayer|.
-// See http://www.chromium.org/developers/design-documents/multi-column-layout for more info on these coordinate types.
-static void convertFromFlowThreadToVisualBoundingBoxInAncestor(const PaintLayer* layer, const PaintLayer* ancestorLayer, LayoutRect& rect)
+void PaintLayer::convertFromFlowThreadToVisualBoundingBoxInAncestor(const PaintLayer* ancestorLayer, LayoutRect& rect) const
 {
-    PaintLayer* paginationLayer = layer->enclosingPaginationLayer();
+    PaintLayer* paginationLayer = enclosingPaginationLayer();
     ASSERT(paginationLayer);
     LayoutFlowThread* flowThread = toLayoutFlowThread(paginationLayer->layoutObject());
 
     // First make the flow thread rectangle relative to the flow thread, not to |layer|.
     LayoutPoint offsetWithinPaginationLayer;
-    layer->convertToLayerCoords(paginationLayer, offsetWithinPaginationLayer);
+    convertToLayerCoords(paginationLayer, offsetWithinPaginationLayer);
     rect.moveBy(offsetWithinPaginationLayer);
 
     // Then make the rectangle visual, relative to the fragmentation context. Split our box up into
@@ -2155,7 +2153,7 @@ LayoutRect PaintLayer::fragmentsBoundingBox(const PaintLayer* ancestorLayer) con
         return physicalBoundingBox(ancestorLayer);
 
     LayoutRect result = flippedLogicalBoundingBox(logicalBoundingBox(), layoutObject());
-    convertFromFlowThreadToVisualBoundingBoxInAncestor(this, ancestorLayer, result);
+    convertFromFlowThreadToVisualBoundingBoxInAncestor(ancestorLayer, result);
     return result;
 }
 
@@ -2255,7 +2253,7 @@ LayoutRect PaintLayer::boundingBoxForCompositing(const PaintLayer* ancestorLayer
         result = transform()->mapRect(result);
 
     if (enclosingPaginationLayer()) {
-        convertFromFlowThreadToVisualBoundingBoxInAncestor(this, ancestorLayer, result);
+        convertFromFlowThreadToVisualBoundingBoxInAncestor(ancestorLayer, result);
         return result;
     }
     LayoutPoint delta;
diff --git a/third_party/WebKit/Source/core/paint/PaintLayer.h b/third_party/WebKit/Source/core/paint/PaintLayer.h
@@ -300,6 +300,11 @@ class CORE_EXPORT PaintLayer : public DisplayItemClient {
     // http://www.chromium.org/developers/design-documents/multi-column-layout for more info.
     LayoutPoint visualOffsetFromAncestor(const PaintLayer* ancestorLayer) const;
 
+    // Convert a bounding box from flow thread coordinates, relative to |this|, to visual coordinates, relative to |ancestorLayer|.
+    // See http://www.chromium.org/developers/design-documents/multi-column-layout for more info on these coordinate types.
+    // This method requires this layer to be paginated; i.e. it must have an enclosingPaginationLayer().
+    void convertFromFlowThreadToVisualBoundingBoxInAncestor(const PaintLayer* ancestorLayer, LayoutRect&) const;
+
     // The hitTest() method looks for mouse events by walking layers that intersect the point from front to back.
     bool hitTest(HitTestResult&);
 

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<p>The word "PASS" should be seen below.</p>`
	`3`	`+<div style="margin-left:5em; -webkit-filter:grayscale(90%);">PASS</div>`