From 9f2ee86e4dd49c177224b53afdf34a47376b39c5 Mon Sep 17 00:00:00 2001
From: timmot <timmot@users.noreply.github.com>
Date: Mon, 20 Nov 2023 19:44:45 +1100
Subject: [PATCH] Tests/LibWeb: Test canvas fillStyle parsing of rgb strings

---
 Tests/LibWeb/Ref/canvas-fillstyle-rgb.html    |  35 +++++++++++++++
 .../Ref/reference/canvas-fillstyle-rgb.html   |  15 +++++++
 .../reference/images/canvas-fillstyle-rgb.png | Bin 0 -> 2326 bytes
 .../LibWeb/Text/expected/canvas/fillstyle.txt |   5 +++
 Tests/LibWeb/Text/input/canvas/fillstyle.html |  42 ++++++++++++++++++
 5 files changed, 97 insertions(+)
 create mode 100644 Tests/LibWeb/Ref/canvas-fillstyle-rgb.html
 create mode 100644 Tests/LibWeb/Ref/reference/canvas-fillstyle-rgb.html
 create mode 100644 Tests/LibWeb/Ref/reference/images/canvas-fillstyle-rgb.png
 create mode 100644 Tests/LibWeb/Text/expected/canvas/fillstyle.txt
 create mode 100644 Tests/LibWeb/Text/input/canvas/fillstyle.html

diff --git a/Tests/LibWeb/Ref/canvas-fillstyle-rgb.html b/Tests/LibWeb/Ref/canvas-fillstyle-rgb.html
new file mode 100644
index 0000000000..a87790597e
--- /dev/null
+++ b/Tests/LibWeb/Ref/canvas-fillstyle-rgb.html
@@ -0,0 +1,35 @@
+<link rel="match" href="reference/canvas-fillstyle-rgb.html" />
+<style>
+    * {
+        margin: 0;
+    }
+
+    body {
+        background-color: white;
+    }
+</style>
+<canvas width=500 height=500></canvas>
+<script type="text/javascript">
+    const canvas = document.querySelector("canvas");
+    const ctx = canvas.getContext("2d");
+
+    // Integer numbers
+    ctx.fillStyle = "rgb(0,255,0)";
+    ctx.fillRect(0, 0, 500, 100);
+
+    // Decimal numbers
+    ctx.fillStyle = "rgb(0.28813966673057,254.56022744510793,0.2973971574794)";
+    ctx.fillRect(0, 100, 500, 100);
+
+    // Numbers below 0 and above 255 should be clamped
+    ctx.fillStyle = "rgba(-50,500,-50,1)";
+    ctx.fillRect(0, 200, 500, 100);
+
+    // Percentages
+    ctx.fillStyle = "rgb(0%, 100%, 0%)";
+    ctx.fillRect(0, 300, 500, 100);
+
+    // Calc
+    ctx.fillStyle = "rgb(0, calc(infinity), 0)";
+    ctx.fillRect(0, 400, 500, 100);
+</script>
diff --git a/Tests/LibWeb/Ref/reference/canvas-fillstyle-rgb.html b/Tests/LibWeb/Ref/reference/canvas-fillstyle-rgb.html
new file mode 100644
index 0000000000..77abca5d00
--- /dev/null
+++ b/Tests/LibWeb/Ref/reference/canvas-fillstyle-rgb.html
@@ -0,0 +1,15 @@
+<style>
+    * {
+      margin: 0;
+    }
+    body {
+      background-color: white;
+    }
+  </style>
+  <!-- To rebase:
+    1. Open canvas-fillstyle-rgb.html in Ladybird
+    2. Resize the window just above the width of the canvas
+    3. Right click > "Take Full Screenshot"
+    4. Update the image below:
+  -->
+  <img src="./images/canvas-fillstyle-rgb.png">
diff --git a/Tests/LibWeb/Ref/reference/images/canvas-fillstyle-rgb.png b/Tests/LibWeb/Ref/reference/images/canvas-fillstyle-rgb.png
new file mode 100644
index 0000000000000000000000000000000000000000..f67fb52fb0d7de0dbebe0ea4ed34061608bad85e
GIT binary patch
literal 2326
zcmeAS@N?(olHy`uVBq!ia0y~yVEh8Y9Be?5)7S2IF)(o4^>lFzskrs#sv$3f0}u1Y
zFF%X@980QBwiTTAoyErR<JM#b1|C@kgA#@V7Z@3w*+B@-hYCUXFeUAaQ`h%pGB6}a
zw1qz9-z8G!Z`NYNc_4Z!sRpq>$a-_tQ4px@kOANSMS=#L-YQ=%fACdhAnXXRBjN63
zaJD}dCwrNJ;eY|p>QnM1mT%_da8wF0{8%K!(6Er1p^cA0!ipi`1qdPd5FscZrsTlQ
z8>^G07#Jkl5<`DB>$Uuy%&X|nWE0K_3m??LKz9dH`0eQ3Yo)=&(BR1M<fi?Xd2JF?
z6zokI8i1h;bdeJ~Lkl02<d9_$uwsCa3MC8<FBl*sSgG-GY#ysy$wGu*Kz@aL_rSp$
ztDBX89&1UI`RDpLfo+<{i{*{tT8z-3K??^Iy{JJK<1AlY>ch;yaM)mtR{aIljp>s>
zVZ^W}jO0MtVeswM3}9+)ON<Epx1c-meTwsm$qY3iBpbxw2TTAWj0^`9cpiVymtrp7
z;NoP@+aJP&l(K;_hm>NFVhWhdky84X+bAiZqZXV382CvyYlkFqI4#{!y-D$jXTyFn
zg4{iMJs&VPCkQZ9e&gS}UzAPtgf%a6GGQhrUG*d*XIz;wKTyVH$S2)npo|MFPZ)R(
zZ&>xmQT))qlWh~!8{d=Ru{k)>QcWnyNx;GwTUxRSCfOi{cgN~vg&7%`9C>(teCJWy
z*A&ZnJw@-|244n-CO!rZD+UE%F|vU9fOc5v83qP97#}2wEDuxy=KtDq8aWSpzL^P5
z<p=UfFEROg_F64tWN1i~2%BpEBI$<pO@U7;2fRr)sG)mfIJ*f0g8@gwoWIWd8+iFt
zPpFfgqI6J7C&xFl!NsoK3eroblPH<4^)5Km^@oz4e|PZKA}7x2N9K8gllg}LlIxX+
z*H9eQJ{Rn$5AGxz#AqRfToSZys0Wn<73)c^oq(lsJW5RmPfTP~zw59jCUY_p(`Mwv
zWZ%dMOiaS0Cnlfk$l2t6;0$m!`4EFMxGmURJlUSyzooeg*xq6AboFyt=akR{0F5n%
A%K!iX

literal 0
HcmV?d00001

diff --git a/Tests/LibWeb/Text/expected/canvas/fillstyle.txt b/Tests/LibWeb/Text/expected/canvas/fillstyle.txt
new file mode 100644
index 0000000000..2e68da87ee
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/canvas/fillstyle.txt
@@ -0,0 +1,5 @@
+1. "#00ff00ff"
+2. "#00ff00ff"
+3. "#00ff00ff"
+4. "#000000ff"
+5. "#000000ff"
diff --git a/Tests/LibWeb/Text/input/canvas/fillstyle.html b/Tests/LibWeb/Text/input/canvas/fillstyle.html
new file mode 100644
index 0000000000..26124ce422
--- /dev/null
+++ b/Tests/LibWeb/Text/input/canvas/fillstyle.html
@@ -0,0 +1,42 @@
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        let testCounter = 1;
+        function testPart(part) {
+            println(`${testCounter++}. ${JSON.stringify(part())}`);
+        }
+
+        const canvas = document.createElement("canvas");
+        const context = canvas.getContext("2d");
+
+        // 1. Integers
+        testPart(() => {
+            context.fillStyle = "rgb(0,255,0)";
+            return context.fillStyle;
+        });
+
+        // 2. Decimals
+        testPart(() => {
+            context.fillStyle = "rgb(0.28813966673057,254.56022744510793,0.2973971574794)";
+            return context.fillStyle;
+        });
+
+        // 3. Clamp numbers between 0-255
+        testPart(() => {
+            context.fillStyle = "rgba(-50,500,-50,1)";
+            return context.fillStyle;
+        });
+
+        // 4. Percentages
+        testPart(() => {
+            context.fillStyle = "rgb(0%,100%,0%)";
+            return context.fillStyle;
+        });
+
+        // 5. Percentages
+        testPart(() => {
+            context.fillStyle = "rgb(0,calc(infinity),0)";
+            return context.fillStyle;
+        });
+    });
+</script>