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 00000000000..b942d944b14
--- /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 00000000000..26021750221
--- /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
zcmeAS@N?(olHy`uVBq!ia0y~yVCVy34h9AWhC|cxuP`t$uk&<q45_&F_V(UvX+sJ2
z2huskJAdqZbR;Evy3;~u;aiVVICPJ-G$=YRnBenH#A(6On?^?-T=YJ;xZT0H<imu6
z7mhyem9xF~;-g#ttt-2DJ8SK3{;DXo>bO_0z`tq9{g+dd9{5aMXgO=K<@t`}6>C}j
z)ZAQ)P27v;X{%=}&?)@J``+XPPkPXtyxX_M9nCCi-z$1-({Gb}P%?LU#_ddZ55whC
z=X2i{uiZLlb;OVNtDc%9%j7SaayhcU@|Blmb5Kw4oE1-6;(8u`2`QQ&`+t&cn3T|0
zi}Ya4<<E~;ge{q5Y?wSJXu+iB)rNidLr-!3sq|ZS_OrQw2>bpnUjNC?!nHdZAANb&
zzWjup)r)h+d)TgQ|8&r%y;5H0-QVbm?Hp~wJ2%VBE=={+le_lpm)!-=M`dO^YPMZ?
zm23YtBHe*~_OUZ@5y=O8?9TG7x!v~g!Lj6$O6E4r8rj><=I<K&YM=9;KD~d@^)K;y
zC6i7iF9^<9pW`e1s6oou&i7T$-exP2#qU1OzSU4x?wV`7@nYKDRThict(P3Tf6SuP
z?@Q~Q_A~RBo|)-(Xp&az%A$YnOgp*UHH+kw8)NEbNTsU@o!I<5+iT8;j#aDUoH7f<
zlo~^{`?3t?w0J0l##*Uc3VCdHH)1dKnWjDSX|6ybpQRAT;>(jxM2c~?tnz%krlaM_
zrj)`kSEr(<6GZr2RaCA;sWdwab9O#u`yg}5!^7vIo(cO_pS<2g$Kqe>UDqvZwDg&%
zF#E6s=OoKD6DJ(m+5D)$rRhlPIblvt`2<Cd^eyQPA|4(K-mCQ-`@o>|C5QWs=NUVO
z<ulta&5&g{ccJys4rd0wsOCoz3iIE&2h8bLm=n*}b4;?KU_qVk3g?fOCvKgpXU>vr
z>HE@>z}3mcl7987xo!FmMuTF8*@eds%{s)Hu-a&otEF9r@^?3bD|7iWW=p^AD%6sg
z(yYAjC|{ZDClS$o2Uh*+U1<4ZQnl6PyLKDrZMKUxGJSJ=-(jZfeV^sLA10I>c=%D<
zLx_Fx<V8#3yEZo$p53u;+l%)BJAYZ*pVqm&tfv2IQNfRCzu1ellXYe{7k1}0aDC%n
zW@lQy+GtJin~vG)J?l5K{5qAGYpL-*bmsg-uF|`Q+r0m{e0l5LXTESzxXRzGd*^j~
zx|74JW8QZ%zT4cCcU0?EU+%xPrRUG>l%J)1Z~Iw?>HUEgJ6`*&mgm~L>DqsFaQ>LJ
s7?ev;Naa(8SHslUS}nXl!pxEN3>8H|@0UCi`T)wop00i_>zopr0O(=Zq5uE@

literal 0
HcmV?d00001

diff --git a/Userland/Libraries/LibWeb/HTML/Canvas/CanvasPath.cpp b/Userland/Libraries/LibWeb/HTML/Canvas/CanvasPath.cpp
index 77eaefa2c77..14c88b1767a 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();