Tests/LibWeb: Test canvas fillStyle parsing of rgb strings

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>

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">

Tests/LibWeb/Text/expected/canvas/fillstyle.txt

@@ -0,0 +1,5 @@
+1. "#00ff00ff"
+2. "#00ff00ff"
+3. "#00ff00ff"
+4. "#000000ff"
+5. "#000000ff"

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>