Source/WebCore/ChangeLog

 12018-05-20 Dirk Schulze <krit@webkit.org>
 2
 3 -webkit-clip-path wrong offset for clipPath references
 4 https://bugs.webkit.org/show_bug.cgi?id=129246
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Compute the correct offset for reference clip-paths by reusing
 9 some of the logic from basic shapes.
 10 Makes reference based clip-path interoperable and follows the
 11 spec.
 12
 13 Test: css3/masking/clip-path-reference-2.html
 14
 15 * rendering/RenderLayer.cpp:
 16 (WebCore::computeReferenceBox):
 17 (WebCore::RenderLayer::computeClipPath const):
 18 (WebCore::RenderLayer::setupClipPath):
 19
1202018-05-19 Eric Carlson <eric.carlson@apple.com>
221
322 Improve NowPlaying "title"

Source/WebCore/rendering/RenderLayer.cpp

@@bool RenderLayer::setupFontSubpixelQuantization(GraphicsContext& context, bool&
40834083 return false;
40844084}
40854085
4086 template <class ReferenceBoxClipPathOperation>
4087 static inline LayoutRect computeReferenceBox(const RenderObject& renderer, const ReferenceBoxClipPathOperation& clippingPath, const LayoutSize& offsetFromRoot, const LayoutRect& rootRelativeBounds)
 4086static inline LayoutRect computeReferenceBox(const RenderObject& renderer, const CSSBoxType& boxType, const LayoutSize& offsetFromRoot, const LayoutRect& rootRelativeBounds)
40884087{
40894088 // FIXME: Support different reference boxes for inline content.
40904089 // https://bugs.webkit.org/show_bug.cgi?id=129047

@@static inline LayoutRect computeReferenceBox(const RenderObject& renderer, const
40934092
40944093 LayoutRect referenceBox;
40954094 const auto& box = downcast<RenderBox>(renderer);
4096  switch (clippingPath.referenceBox()) {
 4095 switch (boxType) {
40974096 case ContentBox:
40984097 referenceBox = box.contentBoxRect();
40994098 referenceBox.move(offsetFromRoot);

@@Path RenderLayer::computeClipPath(const LayoutSize& offsetFromRoot, LayoutRect&
41264125
41274126 if (is<ShapeClipPathOperation>(*style.clipPath())) {
41284127 auto& clipPath = downcast<ShapeClipPathOperation>(*style.clipPath());
4129  FloatRect referenceBox = snapRectToDevicePixels(computeReferenceBox(renderer(), clipPath, offsetFromRoot, rootRelativeBounds), deviceSaleFactor);
 4128 FloatRect referenceBox = snapRectToDevicePixels(computeReferenceBox(renderer(), clipPath.referenceBox(), offsetFromRoot, rootRelativeBounds), deviceSaleFactor);
41304129
41314130 windRule = clipPath.windRule();
41324131 return clipPath.pathForReferenceRect(referenceBox);

@@bool RenderLayer::setupClipPath(GraphicsContext& context, const LayerPaintingInf
41574156 }
41584157
41594158 auto& style = renderer().style();
 4159 LayoutSize paintingOffsetFromRoot = LayoutSize(snapSizeToDevicePixel(offsetFromRoot + paintingInfo.subpixelOffset, LayoutPoint(), renderer().document().deviceScaleFactor()));
41604160 ASSERT(style.clipPath());
41614161 if (is<ShapeClipPathOperation>(*style.clipPath()) || (is<BoxClipPathOperation>(*style.clipPath()) && is<RenderBox>(renderer()))) {
41624162 WindRule windRule;
4163  LayoutSize paintingOffsetFromRoot = LayoutSize(snapSizeToDevicePixel(offsetFromRoot + paintingInfo.subpixelOffset, LayoutPoint(), renderer().document().deviceScaleFactor()));
41644163 Path path = computeClipPath(paintingOffsetFromRoot, rootRelativeBounds, windRule);
41654164 context.save();
41664165 context.clipPath(path, windRule);

@@bool RenderLayer::setupClipPath(GraphicsContext& context, const LayerPaintingInf
41724171 Element* element = renderer().document().getElementById(referenceClipPathOperation->fragment());
41734172 if (element && element->hasTagName(SVGNames::clipPathTag) && element->renderer()) {
41744173 context.save();
4175  downcast<RenderSVGResourceClipper>(*element->renderer()).applyClippingToContext(renderer(), rootRelativeBounds, paintingInfo.paintDirtyRect, context);
 4174 float deviceSaleFactor = renderer().document().deviceScaleFactor();
 4175 FloatRect referenceBox = snapRectToDevicePixels(computeReferenceBox(renderer(), ContentBox, paintingOffsetFromRoot, rootRelativeBounds), deviceSaleFactor);
 4176 FloatPoint offset {referenceBox.location()};
 4177 context.translate(offset);
 4178 FloatRect svgReferenceBox {FloatPoint(), referenceBox.size()};
 4179 downcast<RenderSVGResourceClipper>(*element->renderer()).applyClippingToContext(renderer(), svgReferenceBox, paintingInfo.paintDirtyRect, context);
 4180 context.translate(FloatPoint(-offset.x(), -offset.y()));
41764181 return true;
41774182 }
41784183 }

LayoutTests/ChangeLog

 12018-05-20 Dirk Schulze <krit@webkit.org>
 2
 3 -webkit-clip-path wrong offset for clipPath references
 4 https://bugs.webkit.org/show_bug.cgi?id=129246
 5
 6 Reviewed by NOBODY (OOPS!).
 7
 8 Add test for reference clip-path offset. Correct a broken test.
 9 All tests in the repo for references are interoperable between Gecko, Blink
 10 and WebKit now.
 11
 12 * css3/masking/clip-path-reference-2-expected.html: Added.
 13 * css3/masking/clip-path-reference-2.html: Added.
 14 * css3/masking/clip-path-reference-userSpaceOnUse-expected.html:
 15 * css3/masking/clip-path-reference-userSpaceOnUse.html:
 16
1172018-05-18 Commit Queue <commit-queue@webkit.org>
218
319 Unreviewed, rolling out r231982.

LayoutTests/css3/masking/clip-path-reference-2-expected.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4<style>
 5
 6#div1 {
 7 width: 200px;
 8 height: 200px;
 9 -webkit-clip-path: circle();
 10 background-color: green;
 11}
 12#div2 {
 13 width: 200px;
 14 height: 200px;
 15 -webkit-clip-path: ellipse(150px 75px at 150px 75px);
 16 background-color: green;
 17}
 18* {
 19 padding: 0;
 20 margin: 0;
 21}
 22</style>
 23<div id="div1"></div>
 24<div id="div2"></div>
 25<svg>
 26 <clipPath id="clip">
 27 <ellipse cx="100" cy="100" rx="100" ry="100"/>
 28 </clipPath>
 29 <clipPath id="clip2">
 30 <ellipse cx="50%" cy="50%" rx="50%" ry="50%"/>
 31 </clipPath>
 32</svg>
 33</html>

LayoutTests/css3/masking/clip-path-reference-2.html

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4<style>
 5
 6#div1 {
 7 width: 200px;
 8 height: 200px;
 9 -webkit-clip-path: url("#clip");
 10 background-color: green;
 11}
 12#div2 {
 13 width: 200px;
 14 height: 200px;
 15 -webkit-clip-path: url("#clip2");
 16 background-color: green;
 17}
 18* {
 19 padding: 0;
 20 margin: 0;
 21}
 22</style>
 23<div id="div1"></div>
 24<div id="div2"></div>
 25<svg>
 26 <clipPath id="clip">
 27 <ellipse cx="100" cy="100" rx="100" ry="100"/>
 28 </clipPath>
 29 <clipPath id="clip2">
 30 <ellipse cx="50%" cy="50%" rx="50%" ry="50%"/>
 31 </clipPath>
 32</svg>
 33</html>

LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse-expected.html

77 width: 180px;
88 height: 180px;
99 border: 1px solid black;
10  background-color: red;
 10 background-color: blue;
1111 margin-top: 104px;
1212}
1313#clip-ref {
1414 width: 32px;
1515 height: 32px;
16  margin: 74px;
 16 margin: 75px;
1717 background-color: green;
1818}
1919</style>

LayoutTests/css3/masking/clip-path-reference-userSpaceOnUse.html

77 width: 180px;
88 height: 180px;
99 border: 1px solid black;
10  background-color: red;
 10 background-color: blue;
1111}
1212#clip {
1313 width: 160px;

1616 background-color: green;
1717 -webkit-clip-path: url(#c2);
1818}
19 #clip-ref {
20  width: 32px;
21  height: 32px;
22  margin: 74px;
23  background-color: green;
24 }
2519</style>
2620</head>
2721<body>
2822<svg height="100" width="100">
2923<clipPath id="c2" clipPathUnits="userSpaceOnUse">
30  <rect x="75" y="179" width="32" height="32"/>
 24 <rect x="65" y="65" width="32" height="32"/>
3125</clipPath>
3226</svg>
3327<div id="d"><div id="clip"></div></div>