-webkit-clip-path clips incorrectly if the element bounds go beyond the top edge...
authorsimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 22 Jun 2015 23:32:30 +0000 (23:32 +0000)
committersimon.fraser@apple.com <simon.fraser@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 22 Jun 2015 23:32:30 +0000 (23:32 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@185851 268f45cc-cd09-0410-ab3c-d52691b4dbfc

LayoutTests/ChangeLog
LayoutTests/compositing/masks/compositing-clip-path-origin-expected.html [new file with mode: 0644]
LayoutTests/compositing/masks/compositing-clip-path-origin.html [new file with mode: 0644]
Source/WebCore/ChangeLog
Source/WebCore/rendering/RenderLayerBacking.cpp

index 8cf04cc..4a004b7 100644 (file)
@@ -1,3 +1,17 @@
+2015-06-22  Simon Fraser  <simon.fraser@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  <ddkilzer@apple.com>
 
         fast/text/justify-ideograph-{complex,simple,vertical}.html tests are flaky on El Capitan Debug builds
diff --git a/LayoutTests/compositing/masks/compositing-clip-path-origin-expected.html b/LayoutTests/compositing/masks/compositing-clip-path-origin-expected.html
new file mode 100644 (file)
index 0000000..cbd1cea
--- /dev/null
@@ -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>
diff --git a/LayoutTests/compositing/masks/compositing-clip-path-origin.html b/LayoutTests/compositing/masks/compositing-clip-path-origin.html
new file mode 100644 (file)
index 0000000..48a3d95
--- /dev/null
@@ -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>
index f82f302..b8ba274 100644 (file)
@@ -1,3 +1,19 @@
+2015-06-22  Simon Fraser  <simon.fraser@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  <mcatanzaro@igalia.com>
 
         Web sockets should be treated as active mixed content
index 85a40db..609d6a2 100644 (file)
@@ -1061,6 +1061,10 @@ void RenderLayerBacking::updateMaskingLayerGeometry()
             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);
         }