Skip to content

Commit 60bbef0

Browse files
mattwoodrowmattwoodrow
committed
Instagram.com: story circle borders are black instead of colorful.
https://bugs.webkit.org/show_bug.cgi?id=311780 <rdar://173536875> Reviewed by NOBODY (OOPS!). Stroked arcs with a gradient fill aren't being rendered correctly. Fall back to strokePath if there's a gradient fill, since that requires special handling outside of CG. Match strokePath's behaviour for pattern fills, and explicitly apply it. Tests: imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.gradient.arc-ref.html imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.gradient.arc.html imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.pattern.arc-ref.html imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.pattern.arc.html * LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.gradient.arc-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.gradient.arc-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.gradient.arc.html: Added. * LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.pattern.arc-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.pattern.arc-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.pattern.arc.html: Added. * Source/WebCore/platform/graphics/cg/GraphicsContextCG.cpp: (WebCore::GraphicsContextCG::strokeArc):
1 parent 75bbb1a commit 60bbef0

7 files changed

Lines changed: 152 additions & 4 deletions

File tree

‎LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.gradient.arc-expected.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<title>Canvas test: 2d.strokeStyle.gradient.arc (reference)</title>
3+
<body>
4+
<canvas id="canvas" width="200" height="200"></canvas>
5+
</body>
6+
<script>
7+
var canvas = document.getElementById('canvas');
8+
var ctx = canvas.getContext('2d');
9+
var g = ctx.createLinearGradient(0, 0, 200, 0);
10+
g.addColorStop(0, 'red');
11+
g.addColorStop(1, 'blue');
12+
ctx.fillStyle = g;
13+
// Fill an annulus matching a 20px-wide stroke on a radius-60 arc.
14+
ctx.beginPath();
15+
ctx.arc(100, 100, 70, 0, 2 * Math.PI);
16+
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
17+
ctx.fill();
18+
</script>

‎LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.gradient.arc-ref.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<title>Canvas test: 2d.strokeStyle.gradient.arc (reference)</title>
3+
<body>
4+
<canvas id="canvas" width="200" height="200"></canvas>
5+
</body>
6+
<script>
7+
var canvas = document.getElementById('canvas');
8+
var ctx = canvas.getContext('2d');
9+
var g = ctx.createLinearGradient(0, 0, 200, 0);
10+
g.addColorStop(0, 'red');
11+
g.addColorStop(1, 'blue');
12+
ctx.fillStyle = g;
13+
// Fill an annulus matching a 20px-wide stroke on a radius-60 arc.
14+
ctx.beginPath();
15+
ctx.arc(100, 100, 70, 0, 2 * Math.PI);
16+
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
17+
ctx.fill();
18+
</script>

‎LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.gradient.arc.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<link rel="match" href="2d.strokeStyle.gradient.arc-ref.html">
3+
<meta name="fuzzy" content="maxDifference=0-72; totalPixels=0-752">
4+
<title>Canvas test: 2d.strokeStyle.gradient.arc</title>
5+
<body>
6+
<canvas id="canvas" width="200" height="200"></canvas>
7+
</body>
8+
<script>
9+
var canvas = document.getElementById('canvas');
10+
var ctx = canvas.getContext('2d');
11+
ctx.lineWidth = 20;
12+
var g = ctx.createLinearGradient(0, 0, 200, 0);
13+
g.addColorStop(0, 'red');
14+
g.addColorStop(1, 'blue');
15+
ctx.strokeStyle = g;
16+
ctx.beginPath();
17+
ctx.arc(100, 100, 60, 0, 2 * Math.PI);
18+
ctx.stroke();
19+
</script>

‎LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.pattern.arc-expected.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<title>Canvas test: 2d.strokeStyle.pattern.arc (reference)</title>
3+
<body>
4+
<canvas id="canvas" width="200" height="200"></canvas>
5+
</body>
6+
<script>
7+
var canvas = document.getElementById('canvas');
8+
var ctx = canvas.getContext('2d');
9+
// Create the same checkerboard pattern.
10+
var patternCanvas = document.createElement('canvas');
11+
patternCanvas.width = 20;
12+
patternCanvas.height = 20;
13+
var pctx = patternCanvas.getContext('2d');
14+
pctx.fillStyle = 'red';
15+
pctx.fillRect(0, 0, 10, 10);
16+
pctx.fillStyle = 'blue';
17+
pctx.fillRect(10, 0, 10, 10);
18+
pctx.fillStyle = 'blue';
19+
pctx.fillRect(0, 10, 10, 10);
20+
pctx.fillStyle = 'red';
21+
pctx.fillRect(10, 10, 10, 10);
22+
var pattern = ctx.createPattern(patternCanvas, 'repeat');
23+
ctx.fillStyle = pattern;
24+
// Fill an annulus matching a 20px-wide stroke on a radius-60 arc.
25+
ctx.beginPath();
26+
ctx.arc(100, 100, 70, 0, 2 * Math.PI);
27+
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
28+
ctx.fill();
29+
</script>

‎LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.pattern.arc-ref.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<title>Canvas test: 2d.strokeStyle.pattern.arc (reference)</title>
3+
<body>
4+
<canvas id="canvas" width="200" height="200"></canvas>
5+
</body>
6+
<script>
7+
var canvas = document.getElementById('canvas');
8+
var ctx = canvas.getContext('2d');
9+
// Create the same checkerboard pattern.
10+
var patternCanvas = document.createElement('canvas');
11+
patternCanvas.width = 20;
12+
patternCanvas.height = 20;
13+
var pctx = patternCanvas.getContext('2d');
14+
pctx.fillStyle = 'red';
15+
pctx.fillRect(0, 0, 10, 10);
16+
pctx.fillStyle = 'blue';
17+
pctx.fillRect(10, 0, 10, 10);
18+
pctx.fillStyle = 'blue';
19+
pctx.fillRect(0, 10, 10, 10);
20+
pctx.fillStyle = 'red';
21+
pctx.fillRect(10, 10, 10, 10);
22+
var pattern = ctx.createPattern(patternCanvas, 'repeat');
23+
ctx.fillStyle = pattern;
24+
// Fill an annulus matching a 20px-wide stroke on a radius-60 arc.
25+
ctx.beginPath();
26+
ctx.arc(100, 100, 70, 0, 2 * Math.PI);
27+
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
28+
ctx.fill();
29+
</script>

‎LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.strokeStyle.pattern.arc.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<link rel="match" href="2d.strokeStyle.pattern.arc-ref.html">
3+
<meta name="fuzzy" content="maxDifference=0-72; totalPixels=0-1802">
4+
<title>Canvas test: 2d.strokeStyle.pattern.arc</title>
5+
<body>
6+
<canvas id="canvas" width="200" height="200"></canvas>
7+
</body>
8+
<script>
9+
var canvas = document.getElementById('canvas');
10+
var ctx = canvas.getContext('2d');
11+
// Create a simple checkerboard pattern.
12+
var patternCanvas = document.createElement('canvas');
13+
patternCanvas.width = 20;
14+
patternCanvas.height = 20;
15+
var pctx = patternCanvas.getContext('2d');
16+
pctx.fillStyle = 'red';
17+
pctx.fillRect(0, 0, 10, 10);
18+
pctx.fillStyle = 'blue';
19+
pctx.fillRect(10, 0, 10, 10);
20+
pctx.fillStyle = 'blue';
21+
pctx.fillRect(0, 10, 10, 10);
22+
pctx.fillStyle = 'red';
23+
pctx.fillRect(10, 10, 10, 10);
24+
var pattern = ctx.createPattern(patternCanvas, 'repeat');
25+
ctx.lineWidth = 20;
26+
ctx.strokeStyle = pattern;
27+
ctx.beginPath();
28+
ctx.arc(100, 100, 60, 0, 2 * Math.PI);
29+
ctx.stroke();
30+
</script>

‎Source/WebCore/platform/graphics/cg/GraphicsContextCG.cpp‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1332,11 +1332,16 @@ void GraphicsContextCG::strokeRect(const FloatRect& rect, float lineWidth)
13321332
void GraphicsContextCG::strokeArc(const PathArc& arc)
13331333
{
13341334
#if HAVE(CGCONTEXT_STROKE_ARC)
1335-
CGContextRef context = platformContext();
1336-
CGContextStrokeArc(context, arc.center.x(), arc.center.y(), arc.radius, arc.startAngle, arc.endAngle, arc.direction == RotationDirection::Counterclockwise);
1337-
#else
1338-
GraphicsContext::strokeArc(arc);
1335+
if (!strokeGradient()) {
1336+
if (strokePattern())
1337+
applyStrokePattern();
1338+
1339+
CGContextRef context = platformContext();
1340+
CGContextStrokeArc(context, arc.center.x(), arc.center.y(), arc.radius, arc.startAngle, arc.endAngle, arc.direction == RotationDirection::Counterclockwise);
1341+
return;
1342+
}
13391343
#endif
1344+
GraphicsContext::strokeArc(arc);
13401345
}
13411346

13421347
void GraphicsContextCG::setLineCap(LineCap cap)

0 commit comments

Comments
 (0)