Diff
Modified: trunk/LayoutTests/ChangeLog (277546 => 277547)
--- trunk/LayoutTests/ChangeLog 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/LayoutTests/ChangeLog 2021-05-15 20:46:56 UTC (rev 277547)
@@ -1,3 +1,20 @@
+2021-05-15 Said Abou-Hallawa <[email protected]>
+
+ Implement CanvasRenderingContext2D.createConicGradient
+ https://bugs.webkit.org/show_bug.cgi?id=225539
+
+ Reviewed by Sam Weinig.
+
+ * fast/canvas/canvas-conic-gradient-angle-expected.html: Added.
+ * fast/canvas/canvas-conic-gradient-angle.html: Added.
+ * fast/canvas/canvas-conic-gradient-center-expected.html: Added.
+ * fast/canvas/canvas-conic-gradient-center.html: Added.
+ * fast/canvas/conicGradient-infinite-values-expected.txt: Added.
+ * fast/canvas/conicGradient-infinite-values.html: Added.
+ * inspector/canvas/recording-html-2d-expected.txt:
+ * inspector/canvas/recording-html-2d.html:
+ * platform/win/TestExpectations:
+
2021-05-15 Antti Koivisto <[email protected]>
Don't allow :visited link style in subtrees that use mix-blend-mode
Added: trunk/LayoutTests/fast/canvas/canvas-conic-gradient-angle-expected.html (0 => 277547)
--- trunk/LayoutTests/fast/canvas/canvas-conic-gradient-angle-expected.html (rev 0)
+++ trunk/LayoutTests/fast/canvas/canvas-conic-gradient-angle-expected.html 2021-05-15 20:46:56 UTC (rev 277547)
@@ -0,0 +1,28 @@
+<style>
+ canvas {
+ border: 1px solid;
+ }
+</style>
+<body>
+ <canvas id="c1" width="100" height="100"></canvas>
+ <canvas id="c2" width="100" height="100"></canvas>
+ <canvas id="c3" width="100" height="100"></canvas>
+ <canvas id="c4" width="100" height="100"></canvas>
+ <script>
+ function fillCanvasWithSolidColor(canvasId, x, y, width, height) {
+ const canvas = document.getElementById(canvasId);
+ const ctx = canvas.getContext('2d');
+ ctx.fillStyle = "black";
+ ctx.fillRect(x, y, width, height);
+ }
+
+ fillCanvasWithSolidColor("c1", 50, 0, 50, 50);
+ fillCanvasWithSolidColor("c1", 0, 50, 50, 50);
+ fillCanvasWithSolidColor("c2", 0, 0, 50, 50);
+ fillCanvasWithSolidColor("c2", 50, 50, 50, 50);
+ fillCanvasWithSolidColor("c3", 0, 50, 50, 50);
+ fillCanvasWithSolidColor("c3", 50, 0, 50, 50);
+ fillCanvasWithSolidColor("c4", 0, 0, 50, 50);
+ fillCanvasWithSolidColor("c4", 50, 50, 50, 50);
+ </script>
+</body>
Added: trunk/LayoutTests/fast/canvas/canvas-conic-gradient-angle.html (0 => 277547)
--- trunk/LayoutTests/fast/canvas/canvas-conic-gradient-angle.html (rev 0)
+++ trunk/LayoutTests/fast/canvas/canvas-conic-gradient-angle.html 2021-05-15 20:46:56 UTC (rev 277547)
@@ -0,0 +1,34 @@
+<style>
+ canvas {
+ border: 1px solid;
+ }
+</style>
+<body>
+ <canvas id="c1" width="100" height="100"></canvas>
+ <canvas id="c2" width="100" height="100"></canvas>
+ <canvas id="c3" width="100" height="100"></canvas>
+ <canvas id="c4" width="100" height="100"></canvas>
+ <script>
+ function fillCanvasWithConicGradient(canvasId, angle, x, y) {
+ const canvas = document.getElementById(canvasId);
+ const ctx = canvas.getContext('2d');
+ const gradient = ctx.createConicGradient(angle, x, y);
+
+ gradient.addColorStop(0, "black");
+ gradient.addColorStop(0.25, "black");
+ gradient.addColorStop(0.25, "transparent");
+ gradient.addColorStop(0.5, "transparent");
+ gradient.addColorStop(0.5, "black");
+ gradient.addColorStop(0.75, "black");
+ gradient.addColorStop(0.75, "transparent");
+
+ ctx.fillStyle = gradient;
+ ctx.fillRect(0, 0, 100, 100);
+ }
+
+ fillCanvasWithConicGradient("c1", 0, 50, 50);
+ fillCanvasWithConicGradient("c2", Math.PI / 2, 50, 50);
+ fillCanvasWithConicGradient("c3", Math.PI, 50, 50);
+ fillCanvasWithConicGradient("c4", Math.PI * 3 / 2, 50, 50);
+ </script>
+</body>
Added: trunk/LayoutTests/fast/canvas/canvas-conic-gradient-center-expected.html (0 => 277547)
--- trunk/LayoutTests/fast/canvas/canvas-conic-gradient-center-expected.html (rev 0)
+++ trunk/LayoutTests/fast/canvas/canvas-conic-gradient-center-expected.html 2021-05-15 20:46:56 UTC (rev 277547)
@@ -0,0 +1,28 @@
+<style>
+ canvas {
+ border: 1px solid;
+ }
+</style>
+<body>
+ <canvas id="c1" width="100" height="100"></canvas>
+ <canvas id="c2" width="100" height="100"></canvas>
+ <canvas id="c3" width="100" height="100"></canvas>
+ <canvas id="c4" width="100" height="100"></canvas>
+ <script>
+ function fillCanvasWithSolidColor(canvasId, x, y, width, height) {
+ const canvas = document.getElementById(canvasId);
+ const ctx = canvas.getContext('2d');
+ ctx.fillStyle = "black";
+ ctx.fillRect(x, y, width, height);
+ }
+
+ fillCanvasWithSolidColor("c1", 20, 0, 80, 20);
+ fillCanvasWithSolidColor("c1", 0, 20, 20, 80);
+ fillCanvasWithSolidColor("c2", 80, 0, 20, 20);
+ fillCanvasWithSolidColor("c2", 0, 20, 80, 80);
+ fillCanvasWithSolidColor("c3", 20, 0, 80, 80);
+ fillCanvasWithSolidColor("c3", 0, 80, 20, 20);
+ fillCanvasWithSolidColor("c4", 80, 0, 20, 80);
+ fillCanvasWithSolidColor("c4", 0, 80, 80, 20);
+ </script>
+</body>
Added: trunk/LayoutTests/fast/canvas/canvas-conic-gradient-center.html (0 => 277547)
--- trunk/LayoutTests/fast/canvas/canvas-conic-gradient-center.html (rev 0)
+++ trunk/LayoutTests/fast/canvas/canvas-conic-gradient-center.html 2021-05-15 20:46:56 UTC (rev 277547)
@@ -0,0 +1,34 @@
+<style>
+ canvas {
+ border: 1px solid;
+ }
+</style>
+<body>
+ <canvas id="c1" width="100" height="100"></canvas>
+ <canvas id="c2" width="100" height="100"></canvas>
+ <canvas id="c3" width="100" height="100"></canvas>
+ <canvas id="c4" width="100" height="100"></canvas>
+ <script>
+ function fillCanvasWithConicGradient(canvasId, angle, x, y) {
+ const canvas = document.getElementById(canvasId);
+ const ctx = canvas.getContext('2d');
+ const gradient = ctx.createConicGradient(angle, x, y);
+
+ gradient.addColorStop(0, "black");
+ gradient.addColorStop(0.25, "black");
+ gradient.addColorStop(0.25, "transparent");
+ gradient.addColorStop(0.5, "transparent");
+ gradient.addColorStop(0.5, "black");
+ gradient.addColorStop(0.75, "black");
+ gradient.addColorStop(0.75, "transparent");
+
+ ctx.fillStyle = gradient;
+ ctx.fillRect(0, 0, 100, 100);
+ }
+
+ fillCanvasWithConicGradient("c1", 0, 20, 20);
+ fillCanvasWithConicGradient("c2", 0, 80, 20);
+ fillCanvasWithConicGradient("c3", 0, 20, 80);
+ fillCanvasWithConicGradient("c4", 0, 80, 80);
+ </script>
+</body>
Added: trunk/LayoutTests/fast/canvas/conicGradient-infinite-values-expected.txt (0 => 277547)
--- trunk/LayoutTests/fast/canvas/conicGradient-infinite-values-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/canvas/conicGradient-infinite-values-expected.txt 2021-05-15 20:46:56 UTC (rev 277547)
@@ -0,0 +1,18 @@
+This test checks createConicGradient with infinite values
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+PASS ctx.createConicGradient(0, 100, NaN) threw exception TypeError: The provided value is non-finite.
+PASS ctx.createConicGradient(0, 100, Infinity) threw exception TypeError: The provided value is non-finite.
+PASS ctx.createConicGradient(0, 100, -Infinity) threw exception TypeError: The provided value is non-finite.
+PASS ctx.createConicGradient(0, NaN, 100) threw exception TypeError: The provided value is non-finite.
+PASS ctx.createConicGradient(0, Infinity, 100) threw exception TypeError: The provided value is non-finite.
+PASS ctx.createConicGradient(0, -Infinity, 100) threw exception TypeError: The provided value is non-finite.
+PASS ctx.createConicGradient(NaN, 100, 100) threw exception TypeError: The provided value is non-finite.
+PASS ctx.createConicGradient(Infinity, 100, 100) threw exception TypeError: The provided value is non-finite.
+PASS ctx.createConicGradient(-Infinity, 100, 100) threw exception TypeError: The provided value is non-finite.
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
Added: trunk/LayoutTests/fast/canvas/conicGradient-infinite-values.html (0 => 277547)
--- trunk/LayoutTests/fast/canvas/conicGradient-infinite-values.html (rev 0)
+++ trunk/LayoutTests/fast/canvas/conicGradient-infinite-values.html 2021-05-15 20:46:56 UTC (rev 277547)
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<html>
+<head>
+<script src=""
+</head>
+<body>
+<script>
+description(
+'This test checks createConicGradient with infinite values'
+);
+
+var ctx = document.createElement('canvas').getContext('2d');
+
+shouldThrow("ctx.createConicGradient(0, 100, NaN)", "'TypeError: The provided value is non-finite'");
+shouldThrow("ctx.createConicGradient(0, 100, Infinity)", "'TypeError: The provided value is non-finite'");
+shouldThrow("ctx.createConicGradient(0, 100, -Infinity)", "'TypeError: The provided value is non-finite'");
+shouldThrow("ctx.createConicGradient(0, NaN, 100)", "'TypeError: The provided value is non-finite'");
+shouldThrow("ctx.createConicGradient(0, Infinity, 100)", "'TypeError: The provided value is non-finite'");
+shouldThrow("ctx.createConicGradient(0, -Infinity, 100)", "'TypeError: The provided value is non-finite'");
+shouldThrow("ctx.createConicGradient(NaN, 100, 100)", "'TypeError: The provided value is non-finite'");
+shouldThrow("ctx.createConicGradient(Infinity, 100, 100)", "'TypeError: The provided value is non-finite'");
+shouldThrow("ctx.createConicGradient(-Infinity, 100, 100)", "'TypeError: The provided value is non-finite'");
+</script>
+<script src=""
+</body>
+</html>
Modified: trunk/LayoutTests/imported/w3c/ChangeLog (277546 => 277547)
--- trunk/LayoutTests/imported/w3c/ChangeLog 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/LayoutTests/imported/w3c/ChangeLog 2021-05-15 20:46:56 UTC (rev 277547)
@@ -1,3 +1,12 @@
+2021-05-15 Said Abou-Hallawa <[email protected]>
+
+ Implement CanvasRenderingContext2D.createConicGradient
+ https://bugs.webkit.org/show_bug.cgi?id=225539
+
+ Reviewed by Sam Weinig.
+
+ * web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic-expected.txt:
+
2021-05-14 Darin Adler <[email protected]>
output element doesn't react properly to node tree mutations
Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic-expected.txt (277546 => 277547)
--- trunk/LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic-expected.txt 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/html/canvas/element/fill-and-stroke-styles/2d.gradient.conic-expected.txt 2021-05-15 20:46:56 UTC (rev 277547)
@@ -4,5 +4,5 @@
Expected output:
-FAIL Conic gradient function exists ctx.createConicGradient is not a function. (In 'ctx.createConicGradient(0, 0, 25)', 'ctx.createConicGradient' is undefined)
+PASS Conic gradient function exists
Modified: trunk/LayoutTests/inspector/canvas/recording-html-2d-expected.txt (277546 => 277547)
--- trunk/LayoutTests/inspector/canvas/recording-html-2d-expected.txt 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/LayoutTests/inspector/canvas/recording-html-2d-expected.txt 2021-05-15 20:46:56 UTC (rev 277547)
@@ -128,6 +128,7 @@
context.fillStyle = objects[4];
context.fillStyle = objects[5];
context.fillStyle = objects[6];
+ context.fillStyle = objects[7];
},
function frame2() {
context.beginPath();
@@ -136,19 +137,19 @@
context.moveTo(1, 2);
},
function frame4() {
- context.drawImage(objects[7], 11, 12);
+ context.drawImage(objects[8], 11, 12);
},
function frame5() {
- context.createImageData(objects[8]);
+ context.createImageData(objects[9]);
},
function frame6() {
- context.drawImage(objects[9], 11, 12);
+ context.drawImage(objects[10], 11, 12);
},
function frame7() {
- context.setTransform(objects[10]);
+ context.setTransform(objects[11]);
},
function frame8() {
- // context.drawFocusIfNeeded(objects[11], "Element");
+ // context.drawFocusIfNeeded(objects[12], "Element");
},
function stopRecording() {
if (typeof console.recordEnd === "function")
@@ -160,8 +161,10 @@
let gradient = null;
if (data.type === "radial-gradient")
gradient = context.createRadialGradient(data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);
+ else if (data.type === "linear-gradient")
+ gradient = context.createLinearGradient(data.points[0], data.points[1], data.points[2], data.points[3]);
else
- gradient = context.createLinearGradient(data.points[0], data.points[1], data.points[2], data.points[3]);
+ gradient = context.createConicGradient(data.points[0], data.points[1], data.points[2]);
for (let stop of data.stops)
gradient.addColorStop(stop.offset, stop.color);
objects[key] = gradient;
@@ -220,12 +223,13 @@
rebuildPath2D(3, "");
rebuildCanvasGradient(4, {"type":"linear-gradient","points":[1,2,3,4],"stops":[{"offset":1,"color":"rgb(255, 0, 0)"},{"offset":1,"color":"rgb(0, 0, 255)"}]});
rebuildCanvasGradient(5, {"type":"radial-gradient","points":[1,2,3,4,5,6],"stops":[]});
-rebuildCanvasPattern(6, {"image":<filtered>,"repeat":"no-repeat"});
-rebuildImage(7, <filtered>);
-rebuildImageData(8, {"data":[0,0,0,0,0,0,0,0],"width":1,"height":2});
-rebuildImageBitmap(9, <filtered>);
-rebuildDOMMatrix(10, "matrix(1, 2, 3, 4, 5, 6)");
-rebuildPath2D(11, "M1 2");
+rebuildCanvasGradient(6, {"type":"conic-gradient","points":[2,3,1],"stops":[{"offset":1,"color":"rgb(0, 128, 0)"}]});
+rebuildCanvasPattern(7, {"image":<filtered>,"repeat":"no-repeat"});
+rebuildImage(8, <filtered>);
+rebuildImageData(9, {"data":[0,0,0,0,0,0,0,0],"width":1,"height":2});
+rebuildImageBitmap(10, <filtered>);
+rebuildDOMMatrix(11, "matrix(1, 2, 3, 4, 5, 6)");
+rebuildPath2D(12, "M1 2");
Promise.all(promises).then(function() {
window.requestAnimationFrame(function executeFrame() {
Modified: trunk/LayoutTests/inspector/canvas/recording-html-2d.html (277546 => 277547)
--- trunk/LayoutTests/inspector/canvas/recording-html-2d.html 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/LayoutTests/inspector/canvas/recording-html-2d.html 2021-05-15 20:46:56 UTC (rev 277547)
@@ -18,6 +18,8 @@
let radialGradient = null;
+let conicGradient = null;
+
let pattern = null;
let path2D = new Path2D("M 1 2");
@@ -35,6 +37,9 @@
radialGradient = context.createRadialGradient(1, 2, 3, 4, 5, 6);
linearGradient.addColorStop(1, "blue");
+ conicGradient = context.createConicGradient(1, 2, 3);
+ conicGradient.addColorStop(1, "green");
+
pattern = context.createPattern(image, "no-repeat");
imageBitmap = await createImageBitmap(image);
@@ -74,6 +79,7 @@
context.fillStyle = "test";
context.fillStyle = linearGradient;
context.fillStyle = radialGradient;
+ context.fillStyle = conicGradient;
context.fillStyle = pattern;
},
() => {
Modified: trunk/LayoutTests/platform/win/TestExpectations (277546 => 277547)
--- trunk/LayoutTests/platform/win/TestExpectations 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/LayoutTests/platform/win/TestExpectations 2021-05-15 20:46:56 UTC (rev 277547)
@@ -287,6 +287,8 @@
fast/gradients/conic-gradient-extended-stops.html [ Skip ]
fast/gradients/conic-gradient.html [ Skip ]
fast/gradients/conic-two-hints.html [ Skip ]
+fast/canvas/canvas-conic-gradient-angle.html [ Skip ]
+fast/canvas/canvas-conic-gradient-center.html [ Skip ]
# TODO Investigate why these mouse scroll tests are failing.
fast/events/scroll-in-scaled-page-with-overflow-hidden.html [ Failure ]
Modified: trunk/Source/WebCore/ChangeLog (277546 => 277547)
--- trunk/Source/WebCore/ChangeLog 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebCore/ChangeLog 2021-05-15 20:46:56 UTC (rev 277547)
@@ -1,3 +1,30 @@
+2021-05-15 Said Abou-Hallawa <[email protected]>
+
+ Implement CanvasRenderingContext2D.createConicGradient
+ https://bugs.webkit.org/show_bug.cgi?id=225539
+
+ Reviewed by Sam Weinig.
+
+ Proposal document:
+ https://github.com/fserb/canvas2D/blob/master/spec/conic-gradient.md
+
+ MDN documentation:
+ https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createConicGradient
+
+ Tests: fast/canvas/canvas-conic-gradient-angle.html
+ fast/canvas/canvas-conic-gradient-center.html
+ fast/canvas/conicGradient-infinite-values.html
+
+ * html/canvas/CanvasFillStrokeStyles.idl:
+ * html/canvas/CanvasGradient.cpp:
+ (WebCore::CanvasGradient::CanvasGradient):
+ (WebCore::m_canvas):
+ (WebCore::CanvasGradient::create):
+ * html/canvas/CanvasGradient.h:
+ * html/canvas/CanvasRenderingContext2DBase.cpp:
+ (WebCore::CanvasRenderingContext2DBase::createConicGradient):
+ * html/canvas/CanvasRenderingContext2DBase.h:
+
2021-05-15 Alan Bujtas <[email protected]>
[LFC] Move table formatting quirks to its own class
Modified: trunk/Source/WebCore/html/canvas/CanvasFillStrokeStyles.idl (277546 => 277547)
--- trunk/Source/WebCore/html/canvas/CanvasFillStrokeStyles.idl 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebCore/html/canvas/CanvasFillStrokeStyles.idl 2021-05-15 20:46:56 UTC (rev 277547)
@@ -42,8 +42,8 @@
attribute (DOMString or CanvasGradient or CanvasPattern) strokeStyle; // (default black)
attribute (DOMString or CanvasGradient or CanvasPattern) fillStyle; // (default black)
- // FIXME: All the float parameters below should be doubles.
- CanvasGradient createLinearGradient(float x0, float y0, float x1, float y1);
- CanvasGradient createRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1);
+ CanvasGradient createLinearGradient(double x0, double y0, double x1, double y1);
+ CanvasGradient createRadialGradient(double x0, double y0, double r0, double x1, double y1, double r1);
+ CanvasGradient createConicGradient(double angle, double x, double y);
CanvasPattern? createPattern(CanvasImageSource image, [LegacyNullToEmptyString] DOMString repetition);
};
Modified: trunk/Source/WebCore/html/canvas/CanvasGradient.cpp (277546 => 277547)
--- trunk/Source/WebCore/html/canvas/CanvasGradient.cpp 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebCore/html/canvas/CanvasGradient.cpp 2021-05-15 20:46:56 UTC (rev 277547)
@@ -45,6 +45,12 @@
{
}
+CanvasGradient::CanvasGradient(const FloatPoint& centerPoint, float angleInRadians, CanvasBase& canvasBase)
+ : m_gradient(Gradient::create(Gradient::ConicData { centerPoint, angleInRadians }))
+ , m_canvas(canvasBase)
+{
+}
+
Ref<CanvasGradient> CanvasGradient::create(const FloatPoint& p0, const FloatPoint& p1, CanvasBase& canvasBase)
{
return adoptRef(*new CanvasGradient(p0, p1, canvasBase));
@@ -55,6 +61,11 @@
return adoptRef(*new CanvasGradient(p0, r0, p1, r1, canvasBase));
}
+Ref<CanvasGradient> CanvasGradient::create(const FloatPoint& centerPoint, float angleInRadians, CanvasBase& canvasBase)
+{
+ return adoptRef(*new CanvasGradient(centerPoint, angleInRadians, canvasBase));
+}
+
CanvasGradient::~CanvasGradient() = default;
ExceptionOr<void> CanvasGradient::addColorStop(float value, const String& colorString)
Modified: trunk/Source/WebCore/html/canvas/CanvasGradient.h (277546 => 277547)
--- trunk/Source/WebCore/html/canvas/CanvasGradient.h 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebCore/html/canvas/CanvasGradient.h 2021-05-15 20:46:56 UTC (rev 277547)
@@ -38,6 +38,7 @@
public:
static Ref<CanvasGradient> create(const FloatPoint& p0, const FloatPoint& p1, CanvasBase&);
static Ref<CanvasGradient> create(const FloatPoint& p0, float r0, const FloatPoint& p1, float r1, CanvasBase&);
+ static Ref<CanvasGradient> create(const FloatPoint& centerPoint, float angleInRadians, CanvasBase&);
~CanvasGradient();
Gradient& gradient() { return m_gradient; }
@@ -48,6 +49,7 @@
private:
CanvasGradient(const FloatPoint& p0, const FloatPoint& p1, CanvasBase&);
CanvasGradient(const FloatPoint& p0, float r0, const FloatPoint& p1, float r1, CanvasBase&);
+ CanvasGradient(const FloatPoint& centerPoint, float angleInRadians, CanvasBase&);
Ref<Gradient> m_gradient;
CanvasBase& m_canvas;
Modified: trunk/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp (277546 => 277547)
--- trunk/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.cpp 2021-05-15 20:46:56 UTC (rev 277547)
@@ -1951,6 +1951,14 @@
return CanvasGradient::create(FloatPoint(x0, y0), r0, FloatPoint(x1, y1), r1, canvasBase());
}
+ExceptionOr<Ref<CanvasGradient>> CanvasRenderingContext2DBase::createConicGradient(float angleInRadians, float x, float y)
+{
+ if (!std::isfinite(angleInRadians) || !std::isfinite(x) || !std::isfinite(y))
+ return Exception { NotSupportedError };
+
+ return CanvasGradient::create(FloatPoint(x, y), angleInRadians, canvasBase());
+}
+
ExceptionOr<RefPtr<CanvasPattern>> CanvasRenderingContext2DBase::createPattern(CanvasImageSource&& image, const String& repetition)
{
bool repeatX, repeatY;
Modified: trunk/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.h (277546 => 277547)
--- trunk/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.h 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebCore/html/canvas/CanvasRenderingContext2DBase.h 2021-05-15 20:46:56 UTC (rev 277547)
@@ -189,6 +189,7 @@
ExceptionOr<Ref<CanvasGradient>> createLinearGradient(float x0, float y0, float x1, float y1);
ExceptionOr<Ref<CanvasGradient>> createRadialGradient(float x0, float y0, float r0, float x1, float y1, float r1);
+ ExceptionOr<Ref<CanvasGradient>> createConicGradient(float angleInRadians, float x, float y);
ExceptionOr<RefPtr<CanvasPattern>> createPattern(CanvasImageSource&&, const String& repetition);
RefPtr<ImageData> createImageData(ImageData&) const;
Modified: trunk/Source/WebInspectorUI/ChangeLog (277546 => 277547)
--- trunk/Source/WebInspectorUI/ChangeLog 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebInspectorUI/ChangeLog 2021-05-15 20:46:56 UTC (rev 277547)
@@ -1,3 +1,16 @@
+2021-05-15 Said Abou-Hallawa <[email protected]>
+
+ Implement CanvasRenderingContext2D.createConicGradient
+ https://bugs.webkit.org/show_bug.cgi?id=225539
+
+ Reviewed by Sam Weinig.
+
+ * UserInterface/Models/NativeFunctionParameters.js:
+ * UserInterface/Models/Recording.js:
+ (WI.Recording.prototype.async swizzle):
+ * UserInterface/Views/RecordingActionTreeElement.js:
+ (WI.RecordingActionTreeElement._classNameForAction):
+
2021-05-10 Devin Rousso <[email protected]>
Web Inspector: Network: rename "XHR" to "XHR/Fetch"
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js (277546 => 277547)
--- trunk/Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/NativeFunctionParameters.js 2021-05-15 20:46:56 UTC (rev 277547)
@@ -646,6 +646,7 @@
clearRect: "x, y, width, height",
clip: "path, [winding]",
createImageData: "imagedata",
+ createConicGradient: "angle, x, y",
createLinearGradient: "x0, y0, x1, y1",
createPattern: "canvas, repetitionType",
createRadialGradient: "x0, y0, r0, x1, y1, r1",
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/Recording.js (277546 => 277547)
--- trunk/Source/WebInspectorUI/UserInterface/Models/Recording.js 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/Recording.js 2021-05-15 20:46:56 UTC (rev 277547)
@@ -408,7 +408,12 @@
points = await Promise.all(points.map((item) => this.swizzle(item, WI.Recording.Swizzle.Number)));
WI.ImageUtilities.scratchCanvasContext2D((context) => {
- this._swizzle[index][type] = gradientType === "radial-gradient" ? context.createRadialGradient(...points) : context.createLinearGradient(...points);
+ if (gradientType == "radial-gradient")
+ this._swizzle[index][type] = context.createRadialGradient(...points);
+ else if (gradientType == "linear-gradient")
+ this._swizzle[index][type] = context.createLinearGradient(...points);
+ else
+ this._swizzle[index][type] = context.createConicGradient(...points);
});
let stops = [];
@@ -663,8 +668,10 @@
lines.push(` let gradient = null;`);
lines.push(` if (data.type === "radial-gradient")`);
lines.push(` gradient = context.createRadialGradient(data.points[0], data.points[1], data.points[2], data.points[3], data.points[4], data.points[5]);`);
+ lines.push(` else if (data.type === "linear-gradient")`);
+ lines.push(` gradient = context.createLinearGradient(data.points[0], data.points[1], data.points[2], data.points[3]);`);
lines.push(` else`);
- lines.push(` gradient = context.createLinearGradient(data.points[0], data.points[1], data.points[2], data.points[3]);`);
+ lines.push(` gradient = context.createConicGradient(data.points[0], data.points[1], data.points[2]);`);
lines.push(` for (let stop of data.stops)`);
lines.push(` gradient.addColorStop(stop.offset, stop.color);`);
lines.push(` objects[key] = gradient;`);
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js (277546 => 277547)
--- trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js 2021-05-15 20:22:37 UTC (rev 277546)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/RecordingActionTreeElement.js 2021-05-15 20:46:56 UTC (rev 277547)
@@ -332,6 +332,7 @@
case "shadowOffsetY":
return "shadow";
+ case "createConicGradient":
case "createLinearGradient":
case "createPattern":
case "createRadialGradient":
