From c6899b79b609f99e8fd1091eb80ed5b2f430dde7 Mon Sep 17 00:00:00 2001
From: MacDue <macdue@dueutil.tech>
Date: Sun, 24 Mar 2024 15:17:50 +0000
Subject: [PATCH] LibWeb: Normalize the angle delta in `CanvasPath::ellipse()`

This fixes both the incorrect arc and ellipse from #22817.
---
 .../LibWeb/Ref/canvas-arcs-and-ellipses.html  |  22 ++++++++++++++++++
 .../canvas-arcs-and-ellipses-ref.html         |   9 +++++++
 .../images/canvas-arcs-and-ellipses-ref.png   | Bin 0 -> 999 bytes
 .../LibWeb/HTML/Canvas/CanvasPath.cpp         |   2 ++
 4 files changed, 33 insertions(+)
 create mode 100644 Tests/LibWeb/Ref/canvas-arcs-and-ellipses.html
 create mode 100644 Tests/LibWeb/Ref/reference/canvas-arcs-and-ellipses-ref.html
 create mode 100644 Tests/LibWeb/Ref/reference/images/canvas-arcs-and-ellipses-ref.png

diff --git a/Tests/LibWeb/Ref/canvas-arcs-and-ellipses.html b/Tests/LibWeb/Ref/canvas-arcs-and-ellipses.html
new file mode 100644
index 0000000000..b942d944b1
--- /dev/null
+++ b/Tests/LibWeb/Ref/canvas-arcs-and-ellipses.html
@@ -0,0 +1,22 @@
+<link rel="match" href="reference/canvas-arcs-and-ellipses-ref.html" />
+<style>
+  canvas {
+    border: 1px solid black;
+    image-rendering: pixelated;
+  }
+</style>
+<canvas id="canvas" width="125" height="125"></canvas>
+<script>
+  const canvas = document.getElementById("canvas")
+
+  const context = canvas.getContext("2d");
+  context.beginPath();
+  context.arc(59, 55, 38, 5.3849570248895775, 2.9421639085067177);
+  context.stroke();
+  context.fill();
+
+  context.beginPath();
+  context.ellipse(20,20,15,8,1.2273132071162383,4.1926143018618225,2.8853539230051624);
+  context.stroke();
+  context.fill();
+</script>
diff --git a/Tests/LibWeb/Ref/reference/canvas-arcs-and-ellipses-ref.html b/Tests/LibWeb/Ref/reference/canvas-arcs-and-ellipses-ref.html
new file mode 100644
index 0000000000..2602175022
--- /dev/null
+++ b/Tests/LibWeb/Ref/reference/canvas-arcs-and-ellipses-ref.html
@@ -0,0 +1,9 @@
+<style>
+  * {
+    margin: 0;
+  }
+  body {
+    background-color: white;
+  }
+</style>
+<img src="./images/canvas-arcs-and-ellipses-ref.png">
diff --git a/Tests/LibWeb/Ref/reference/images/canvas-arcs-and-ellipses-ref.png b/Tests/LibWeb/Ref/reference/images/canvas-arcs-and-ellipses-ref.png
new file mode 100644
index 0000000000000000000000000000000000000000..d5cfd94dd7007f224ce204fdad6fa254ccc1d9ac
GIT binary patch
literal 999
zcmV<D0~q{?P)<h;3K|Lk000e1NJLTq0052v0052%00000!j^B;000B7Nkl<Zc-rmT
zy=xmW7zf}RY;(EzzT(7WYnMWyLlfHKWC$(Bgn%JKppZ=N6hfe-*)qi7(M!Rjhd?uQ
z@Q}gK#p8`0J>KZ?MvvOmx($haKH2(sbvlUNe;^OCq~Gb4V&F`bp*fnPInRh=sI3J~
zCPqbbG)HruD<^26EOGV??=;8^XHuMQ+uIjGHaLCnAxO3_h8f^=ou_EqX-7ygr<I=z
z+ZTPcoU2&)@2cfAV;pa!l+#&{dFo0zgHnuBoT%i4UX0`PRC16V|B^jc8WQz5XHzMs
z=fpTxq>?i+W1Lc;l7p);j^9<v3H*6ZuFdl|5EKW$iVaVbLlb?tf#US$ho{IsI_S<b
zyav>_^1(cZc^@3^{acZT2!<26vmBdoWlb&~*5>*?&`IKUHn@DY(CTeJ?O10(2b;#s
zURYznj6Tf{tlNg+;KpNgc>{(id>z|EH|~LsediC$%fF)6^j|J?lFDPCQ)sVjO%vjP
z8Z$mk>TJD(IuxVs@tfL!c6UW>GqKTT-KsdF2Ro$3-^Ms~PV|M`hs>X)%$Y{Qk}8F%
za{fmGxe7-qavmdrTz;4uXC@NJv*&9{obZUMt6oBBa26tgR4a~ZFr0))AXQyDCpi*G
zvqv%qbxf8kndNN|VGcPG2&2=I$XON%gsMs7tcZl<vSe{qMM84rkQ5F@BqY{aB!fc}
z35n$f@EpoWNKDZ#GzYazZjE6<bNa7EuBL%GOpzd)!x#yYIjoV8#JPjwa72Q{h0YTR
z2_Ik~2xqisfD}kbpzkJ(#_#|l^lS_4Nz6U~r<sS+m>mGl(1qf-LjVq1gW^~qpYBIc
zoR1)!Uk;4M8Gvx0el4g&@j1xa%6|iD8HA4XgkTDZ3Iu1>)i*t7xB)P80Gn~g!kWSf
zV5>5+ML9lbBlkuy)SV7!n;Y$laVi*;gCn8E4t7QI6cxU}s``zgIrx%$I@8@gv7WO&
zTQW85$G*b?*N*cZOW|O2z~S*LND>F5lcJ<winD`p&A7g{=<iUu`a3_%EYqfZkL7Z3
z_?G$yb1P#kn}czSZh#8*52ijfcdIh2Q|ySFCycMN1p3NhZ8<3KRhge*3U%GXhD-cJ
z^zBQIH=&|eB>igM&n=9LV^@1z?}-8Kvx08LD%y^1{;hS-&bc3&Bi^^oK$nkEIJoOf
zs~-xzvey46p*fnPIhvz6nxi?IqdA(RIhvz6nxi?IBg!$=Rwf38I7*tMIhq4me*k!L
VQtzbZ67T>3002ovPDHLkV1npj*rEUc

literal 0
HcmV?d00001

diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasPath.cpp b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasPath.cpp
index 77eaefa2c7..14c88b1767 100644
--- a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasPath.cpp
+++ b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasPath.cpp
@@ -157,6 +157,8 @@ WebIDL::ExceptionOr<void> CanvasPath::ellipse(float x, float y, float radius_x,
     auto end_point = resolve_point_with_angle(end_angle);
 
     auto delta_theta = end_angle - start_angle;
+    if (delta_theta < 0)
+        delta_theta += AK::Pi<float> * 2;
 
     auto transform = active_transform();