Title: [185851] trunk
Revision
185851
Author
simon.fra...@apple.com
Date
2015-06-22 16:32:30 -0700 (Mon, 22 Jun 2015)

Log Message

-webkit-clip-path clips incorrectly if the element bounds go beyond the top edge of the page
https://bugs.webkit.org/show_bug.cgi?id=146218
rdar://problem/21127840

Reviewed by Zalan Bujtas.
Source/WebCore:

The clip path is computed using the RenderLayer's bounding box, so needs to be offset
by the offsetFromRenderer when set on the mask layer.

Test: compositing/masks/compositing-clip-path-origin.html

* rendering/RenderLayerBacking.cpp:
(WebCore::RenderLayerBacking::updateMaskingLayerGeometry):

LayoutTests:

Test clip path on layers with non-zero bounds offsetFromRenderer because of box shadow,
or vertical writing mode.

* compositing/masks/compositing-clip-path-origin-expected.html: Added.
* compositing/masks/compositing-clip-path-origin.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (185850 => 185851)


--- trunk/LayoutTests/ChangeLog	2015-06-22 23:02:04 UTC (rev 185850)
+++ trunk/LayoutTests/ChangeLog	2015-06-22 23:32:30 UTC (rev 185851)
@@ -1,3 +1,17 @@
+2015-06-22  Simon Fraser  <simon.fra...@apple.com>
+
+        -webkit-clip-path clips incorrectly if the element bounds go beyond the top edge of the page
+        https://bugs.webkit.org/show_bug.cgi?id=146218
+        rdar://problem/21127840
+
+        Reviewed by Zalan Bujtas.
+        
+        Test clip path on layers with non-zero bounds offsetFromRenderer because of box shadow,
+        or vertical writing mode.
+
+        * compositing/masks/compositing-clip-path-origin-expected.html: Added.
+        * compositing/masks/compositing-clip-path-origin.html: Added.
+
 2015-06-22  David Kilzer  <ddkil...@apple.com>
 
         fast/text/justify-ideograph-{complex,simple,vertical}.html tests are flaky on El Capitan Debug builds

Added: trunk/LayoutTests/compositing/masks/compositing-clip-path-origin-expected.html (0 => 185851)


--- trunk/LayoutTests/compositing/masks/compositing-clip-path-origin-expected.html	                        (rev 0)
+++ trunk/LayoutTests/compositing/masks/compositing-clip-path-origin-expected.html	2015-06-22 23:32:30 UTC (rev 185851)
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <style>
+        .box {
+            height: 100px;
+            width: 200px;
+            margin: 10px;
+            background-color: green;
+            -webkit-clip-path: inset(20px 2px 0px 0px);
+        }
+
+        .second {
+            box-shadow: 0 0 20px black;
+        }
+        
+        .third {
+            -webkit-writing-mode: vertical-rl;
+        }
+        
+        .blob {
+            height: 40px;
+            width: 40px;
+        }
+        
+        .composited {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            width: 50px;
+            height: 400px;
+            border: 1px solid blue;
+        }
+        
+        .composited:hover {
+            -webkit-transform: none;
+        }
+    </style>
+</head>
+<body>
+
+<div class="composited">
+</div>
+
+<div class="box" style="top: 50px;">
+    <div class="blob" style="background-color: orange"></div>
+    <div class="blob" style="background-color: blue"></div>
+</div>
+<div class="second box" style="top: 150px;">
+    <div class="blob" style="background-color: orange"></div>
+    <div class="blob" style="background-color: blue"></div>
+</div>
+
+<div class="third box" style="top: 250px;">
+    <div class="blob" style="background-color: orange"></div>
+    <div class="blob" style="background-color: blue"></div>
+</div>
+
+
+</body>
+</html>

Added: trunk/LayoutTests/compositing/masks/compositing-clip-path-origin.html (0 => 185851)


--- trunk/LayoutTests/compositing/masks/compositing-clip-path-origin.html	                        (rev 0)
+++ trunk/LayoutTests/compositing/masks/compositing-clip-path-origin.html	2015-06-22 23:32:30 UTC (rev 185851)
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+    <style>
+        .box {
+            height: 100px;
+            width: 200px;
+            margin: 10px;
+            background-color: green;
+            -webkit-clip-path: inset(20px 2px 0px 0px);
+        }
+
+        .second {
+            box-shadow: 0 0 20px black;
+        }
+        
+        .third {
+            -webkit-writing-mode: vertical-rl;
+        }
+        
+        .blob {
+            height: 40px;
+            width: 40px;
+        }
+        
+        .composited {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            width: 50px;
+            height: 400px;
+            border: 1px solid blue;
+            -webkit-transform: translateZ(0);
+        }
+        
+        .composited:hover {
+            -webkit-transform: none;
+        }
+    </style>
+</head>
+<body>
+
+<div class="composited">
+</div>
+
+<div class="box" style="top: 50px;">
+    <div class="blob" style="background-color: orange"></div>
+    <div class="blob" style="background-color: blue"></div>
+</div>
+<div class="second box" style="top: 150px;">
+    <div class="blob" style="background-color: orange"></div>
+    <div class="blob" style="background-color: blue"></div>
+</div>
+
+<div class="third box" style="top: 250px;">
+    <div class="blob" style="background-color: orange"></div>
+    <div class="blob" style="background-color: blue"></div>
+</div>
+
+
+</body>
+</html>

Modified: trunk/Source/WebCore/ChangeLog (185850 => 185851)


--- trunk/Source/WebCore/ChangeLog	2015-06-22 23:02:04 UTC (rev 185850)
+++ trunk/Source/WebCore/ChangeLog	2015-06-22 23:32:30 UTC (rev 185851)
@@ -1,3 +1,19 @@
+2015-06-22  Simon Fraser  <simon.fra...@apple.com>
+
+        -webkit-clip-path clips incorrectly if the element bounds go beyond the top edge of the page
+        https://bugs.webkit.org/show_bug.cgi?id=146218
+        rdar://problem/21127840
+
+        Reviewed by Zalan Bujtas.
+
+        The clip path is computed using the RenderLayer's bounding box, so needs to be offset
+        by the offsetFromRenderer when set on the mask layer.
+
+        Test: compositing/masks/compositing-clip-path-origin.html
+
+        * rendering/RenderLayerBacking.cpp:
+        (WebCore::RenderLayerBacking::updateMaskingLayerGeometry):
+
 2015-06-22  Michael Catanzaro  <mcatanz...@igalia.com>
 
         Web sockets should be treated as active mixed content

Modified: trunk/Source/WebCore/rendering/RenderLayerBacking.cpp (185850 => 185851)


--- trunk/Source/WebCore/rendering/RenderLayerBacking.cpp	2015-06-22 23:02:04 UTC (rev 185850)
+++ trunk/Source/WebCore/rendering/RenderLayerBacking.cpp	2015-06-22 23:32:30 UTC (rev 185851)
@@ -1061,6 +1061,10 @@
             LayoutSize offset = LayoutSize(snapSizeToDevicePixel(m_devicePixelFractionFromRenderer, LayoutPoint(), deviceScaleFactor()));
             Path clipPath = m_owningLayer.computeClipPath(offset, referenceBoxForClippedInline, windRule);
 
+            FloatSize pathOffset = m_maskLayer->offsetFromRenderer();
+            if (!pathOffset.isZero())
+                clipPath.translate(-pathOffset);
+            
             m_maskLayer->setShapeLayerPath(clipPath);
             m_maskLayer->setShapeLayerWindRule(windRule);
         }
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to