Modified: trunk/LayoutTests/ChangeLog (233286 => 233287)
--- trunk/LayoutTests/ChangeLog 2018-06-27 23:22:48 UTC (rev 233286)
+++ trunk/LayoutTests/ChangeLog 2018-06-27 23:28:19 UTC (rev 233287)
@@ -1,3 +1,19 @@
+2018-06-27 Dirk Schulze <k...@webkit.org>
+
+ -webkit-clip-path wrong offset for clipPath references
+ https://bugs.webkit.org/show_bug.cgi?id=129246
+
+ Reviewed by Simon Fraser.
+
+ Add test for reference clip-path offset. Correct a broken test.
+ All tests in the repo for references are interoperable between Gecko, Blink
+ and WebKit now.
+
+ * css3/masking/clip-path-reference-2-expected.html: Added.
+ * css3/masking/clip-path-reference-2.html: Added.
+ * css3/masking/clip-path-reference-userSpaceOnUse-expected.html:
+ * css3/masking/clip-path-reference-userSpaceOnUse.html:
+
2018-06-27 Antti Koivisto <an...@apple.com>
Don't invoke post resolution callbacks when resolving computed style
Added: trunk/LayoutTests/css3/masking/clip-path-reference-2-expected.html (0 => 233287)
--- trunk/LayoutTests/css3/masking/clip-path-reference-2-expected.html (rev 0)
+++ trunk/LayoutTests/css3/masking/clip-path-reference-2-expected.html 2018-06-27 23:28:19 UTC (rev 233287)
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+
+#div1 {
+ width: 200px;
+ height: 200px;
+ -webkit-clip-path: circle();
+ background-color: green;
+}
+#div2 {
+ width: 200px;
+ height: 200px;
+ -webkit-clip-path: ellipse(150px 75px at 150px 75px);
+ background-color: green;
+}
+* {
+ padding: 0;
+ margin: 0;
+}
+</style>
+<div id="div1"></div>
+<div id="div2"></div>
+<svg>
+ <clipPath id="clip">
+ <ellipse cx="100" cy="100" rx="100" ry="100"/>
+ </clipPath>
+ <clipPath id="clip2">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%"/>
+ </clipPath>
+</svg>
+</html>
\ No newline at end of file
Added: trunk/LayoutTests/css3/masking/clip-path-reference-2.html (0 => 233287)
--- trunk/LayoutTests/css3/masking/clip-path-reference-2.html (rev 0)
+++ trunk/LayoutTests/css3/masking/clip-path-reference-2.html 2018-06-27 23:28:19 UTC (rev 233287)
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+
+#div1 {
+ width: 200px;
+ height: 200px;
+ -webkit-clip-path: url("#clip");
+ background-color: green;
+}
+#div2 {
+ width: 200px;
+ height: 200px;
+ -webkit-clip-path: url("#clip2");
+ background-color: green;
+}
+* {
+ padding: 0;
+ margin: 0;
+}
+</style>
+<div id="div1"></div>
+<div id="div2"></div>
+<svg>
+ <clipPath id="clip">
+ <ellipse cx="100" cy="100" rx="100" ry="100"/>
+ </clipPath>
+ <clipPath id="clip2">
+ <ellipse cx="50%" cy="50%" rx="50%" ry="50%"/>
+ </clipPath>
+</svg>
+</html>
\ No newline at end of file
Modified: trunk/LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse-expected.html (233286 => 233287)
--- trunk/LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse-expected.html 2018-06-27 23:22:48 UTC (rev 233286)
+++ trunk/LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse-expected.html 2018-06-27 23:28:19 UTC (rev 233287)
@@ -7,13 +7,13 @@
width: 180px;
height: 180px;
border: 1px solid black;
- background-color: red;
+ background-color: blue;
margin-top: 104px;
}
#clip-ref {
width: 32px;
height: 32px;
- margin: 74px;
+ margin: 75px;
background-color: green;
}
</style>
Modified: trunk/LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse.html (233286 => 233287)
--- trunk/LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse.html 2018-06-27 23:22:48 UTC (rev 233286)
+++ trunk/LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse.html 2018-06-27 23:28:19 UTC (rev 233287)
@@ -7,7 +7,7 @@
width: 180px;
height: 180px;
border: 1px solid black;
- background-color: red;
+ background-color: blue;
}
#clip {
width: 160px;
@@ -16,18 +16,12 @@
background-color: green;
-webkit-clip-path: url(#c2);
}
-#clip-ref {
- width: 32px;
- height: 32px;
- margin: 74px;
- background-color: green;
-}
</style>
</head>
<body>
<svg height="100" width="100">
<clipPath id="c2" clipPathUnits="userSpaceOnUse">
- <rect x="75" y="179" width="32" height="32"/>
+ <rect x="65" y="65" width="32" height="32"/>
</clipPath>
</svg>
<div id="d"><div id="clip"></div></div>
Modified: trunk/Source/WebCore/ChangeLog (233286 => 233287)
--- trunk/Source/WebCore/ChangeLog 2018-06-27 23:22:48 UTC (rev 233286)
+++ trunk/Source/WebCore/ChangeLog 2018-06-27 23:28:19 UTC (rev 233287)
@@ -1,3 +1,22 @@
+2018-06-27 Dirk Schulze <k...@webkit.org>
+
+ -webkit-clip-path wrong offset for clipPath references
+ https://bugs.webkit.org/show_bug.cgi?id=129246
+
+ Reviewed by Simon Fraser.
+
+ Compute the correct offset for reference clip-paths by reusing
+ some of the logic from basic shapes.
+ Makes reference based clip-path interoperable and follows the
+ spec.
+
+ Test: css3/masking/clip-path-reference-2.html
+
+ * rendering/RenderLayer.cpp:
+ (WebCore::computeReferenceBox):
+ (WebCore::RenderLayer::computeClipPath const):
+ (WebCore::RenderLayer::setupClipPath):
+
2018-06-27 Antti Koivisto <an...@apple.com>
Don't invoke post resolution callbacks when resolving computed style
Modified: trunk/Source/WebCore/rendering/RenderLayer.cpp (233286 => 233287)
--- trunk/Source/WebCore/rendering/RenderLayer.cpp 2018-06-27 23:22:48 UTC (rev 233286)
+++ trunk/Source/WebCore/rendering/RenderLayer.cpp 2018-06-27 23:28:19 UTC (rev 233287)
@@ -4083,8 +4083,7 @@
return false;
}
-template <class ReferenceBoxClipPathOperation>
-static inline LayoutRect computeReferenceBox(const RenderObject& renderer, const ReferenceBoxClipPathOperation& clippingPath, const LayoutSize& offsetFromRoot, const LayoutRect& rootRelativeBounds)
+static inline LayoutRect computeReferenceBox(const RenderObject& renderer, const CSSBoxType& boxType, const LayoutSize& offsetFromRoot, const LayoutRect& rootRelativeBounds)
{
// FIXME: Support different reference boxes for inline content.
// https://bugs.webkit.org/show_bug.cgi?id=129047
@@ -4093,7 +4092,7 @@
LayoutRect referenceBox;
const auto& box = downcast<RenderBox>(renderer);
- switch (clippingPath.referenceBox()) {
+ switch (boxType) {
case CSSBoxType::ContentBox:
referenceBox = box.contentBoxRect();
referenceBox.move(offsetFromRoot);
@@ -4126,7 +4125,7 @@
if (is<ShapeClipPathOperation>(*style.clipPath())) {
auto& clipPath = downcast<ShapeClipPathOperation>(*style.clipPath());
- FloatRect referenceBox = snapRectToDevicePixels(computeReferenceBox(renderer(), clipPath, offsetFromRoot, rootRelativeBounds), deviceSaleFactor);
+ FloatRect referenceBox = snapRectToDevicePixels(computeReferenceBox(renderer(), clipPath.referenceBox(), offsetFromRoot, rootRelativeBounds), deviceSaleFactor);
windRule = clipPath.windRule();
return clipPath.pathForReferenceRect(referenceBox);
@@ -4157,10 +4156,10 @@
}
auto& style = renderer().style();
+ LayoutSize paintingOffsetFromRoot = LayoutSize(snapSizeToDevicePixel(offsetFromRoot + paintingInfo.subpixelOffset, LayoutPoint(), renderer().document().deviceScaleFactor()));
ASSERT(style.clipPath());
if (is<ShapeClipPathOperation>(*style.clipPath()) || (is<BoxClipPathOperation>(*style.clipPath()) && is<RenderBox>(renderer()))) {
WindRule windRule;
- LayoutSize paintingOffsetFromRoot = LayoutSize(snapSizeToDevicePixel(offsetFromRoot + paintingInfo.subpixelOffset, LayoutPoint(), renderer().document().deviceScaleFactor()));
Path path = computeClipPath(paintingOffsetFromRoot, rootRelativeBounds, windRule);
context.save();
context.clipPath(path, windRule);
@@ -4170,9 +4169,15 @@
if (style.clipPath()->type() == ClipPathOperation::Reference) {
ReferenceClipPathOperation* referenceClipPathOperation = static_cast<ReferenceClipPathOperation*>(style.clipPath());
Element* element = renderer().document().getElementById(referenceClipPathOperation->fragment());
- if (element && element->hasTagName(SVGNames::clipPathTag) && element->renderer()) {
+ if (element && element->renderer() && is<RenderSVGResourceClipper>(element->renderer())) {
context.save();
- downcast<RenderSVGResourceClipper>(*element->renderer()).applyClippingToContext(renderer(), rootRelativeBounds, paintingInfo.paintDirtyRect, context);
+ float deviceSaleFactor = renderer().document().deviceScaleFactor();
+ FloatRect referenceBox = snapRectToDevicePixels(computeReferenceBox(renderer(), CSSBoxType::ContentBox, paintingOffsetFromRoot, rootRelativeBounds), deviceSaleFactor);
+ FloatPoint offset {referenceBox.location()};
+ context.translate(offset);
+ FloatRect svgReferenceBox {FloatPoint(), referenceBox.size()};
+ downcast<RenderSVGResourceClipper>(*element->renderer()).applyClippingToContext(renderer(), svgReferenceBox, paintingInfo.paintDirtyRect, context);
+ context.translate(FloatPoint(-offset.x(), -offset.y()));
return true;
}
}
