mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-22 02:26:11 +00:00
Tests/LibWeb: Test canvas fillStyle parsing of rgb strings
This commit is contained in:
parent
c713445253
commit
9f2ee86e4d
35
Tests/LibWeb/Ref/canvas-fillstyle-rgb.html
Normal file
35
Tests/LibWeb/Ref/canvas-fillstyle-rgb.html
Normal 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>
|
15
Tests/LibWeb/Ref/reference/canvas-fillstyle-rgb.html
Normal file
15
Tests/LibWeb/Ref/reference/canvas-fillstyle-rgb.html
Normal 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">
|
BIN
Tests/LibWeb/Ref/reference/images/canvas-fillstyle-rgb.png
Normal file
BIN
Tests/LibWeb/Ref/reference/images/canvas-fillstyle-rgb.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
5
Tests/LibWeb/Text/expected/canvas/fillstyle.txt
Normal file
5
Tests/LibWeb/Text/expected/canvas/fillstyle.txt
Normal file
|
@ -0,0 +1,5 @@
|
|||
1. "#00ff00ff"
|
||||
2. "#00ff00ff"
|
||||
3. "#00ff00ff"
|
||||
4. "#000000ff"
|
||||
5. "#000000ff"
|
42
Tests/LibWeb/Text/input/canvas/fillstyle.html
Normal file
42
Tests/LibWeb/Text/input/canvas/fillstyle.html
Normal file
|
@ -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>
|
Loading…
Reference in a new issue