1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 04:07:45 +00:00

Tests/LibWeb: Test canvas fillStyle parsing of rgb strings

This commit is contained in:
timmot 2023-11-20 19:44:45 +11:00 committed by Andreas Kling
parent c713445253
commit 9f2ee86e4d
5 changed files with 97 additions and 0 deletions

View file

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

View file

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB