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~yVEh8Y9Bd2>45zQ%?_yx!xa;ZS7*cWT%~eBQ1_vJI
zjbDBi`#F|Woop*O?K_K&;m57X3=BN73<f0(2QDx&IJ1KgoDUU(@L@{Y7pJc8%Vc0k
zkZ22i%D+pb%-^iVhVwx5R8kFMe~|U&s-qwS1J5A?zW<8^4LH43zFhv`tI9yw5$qsG
zL)-;+r2Vlt*~<(J2Ml;tpOP=Jd^0D9qf&_B$08wyhK0-wZF~$8RtyO*KnTHy2toNU
zB?oTaSe-1zz#!3<82YnWujTJ#UPXT<n{ZB8_&_X$1qQl1kiu_A?_MhnCWZz_h9@`e
zzszfsn4(~B%Fu9ukzpY-gA+SL3m=r^kYy0CVt|keB@7NP7$78Asqt}a9;;i)LWEyH
zeusKb!s@`m8>^d@7#Jj45@r6mK2Bhp=J8^Aqqr6$G-#j-Vc~$H7i3q$3y=^fC}W)E
zt4n>D85j;5tkJ5!pt>=A5-5xq_JolfNIML^y_&(sz|fW$5&CaIcjEgL=M$3|YC=dh
zh{5kzoU8~V!vO`J#~<{in2R^KIN9^|hcF?fY#v!qqCv!*GdS`fd~hOy@W0$fNdX<T
z;1s~XPr6w<B$2~u>4xe}icdTn_LC9h?#b)<x)>M|1Q;s6@$cO)%BFh4nin~lFoP2d
zfppcAjGS?0%KShXmm!~YkAX6-Auj_1&*2TL{y2&s`ggKzf_me7GCVd1M_Q^0B{>OL
z7-LIIHo+tt#PIG|ovbh;1Ct{U&yVjsYWtdEIj^Va{oCNnz|h3Uz+uIp@PeUX0rLUv
zu+lRO4013&ND^7TVF5Eph~w9m)5v+)^UX|fDnF1<dWp%`v)5`FBSS-?MA%gO7fCm)
zZwh=;Ip9sYK@Hs-!`V$37z{WX=KOWu-@wbKdP1G_6s3bwIyt_X4K8-=R*+sgokYoW
zt#`qhu0NFY{JVp<7F^ju6X*0J^E|=H{6hfA^~%F*D2{5M3wG28cajZaw2(qB30gPQ
zgGz#m^(5C$3=Iq8QEEDPVj`pZU57O>nUj&2HX|n{`$kSa)f2*`Cnlfk$l2t6;0$m!
g`4EFMxGmURJlUSyzoog0fq{X+)78&qol`;+0F5n%%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>