mirror of
https://github.com/SerenityOS/serenity.git
synced 2025-01-22 17:31:58 -05:00
b65ccb4dc6
Instead of CSSColorValue holding a Gfx::Color, make it an abstract class with subclasses for each different color function, to match the Typed-OM spec. This means moving the color calculations from the parsing code to the `to_color()` method on the style value. This lets us have calc() inside a color function, instead of having to fully resolve the color at parse time. The canvas fillStyle tests have been updated to reflect this. The other test change is Screenshot/css-color-functions.html: previously we produced slightly different colors for an alpha of 0.5 and one of 50%, and this incorrect behavior was baked into the test. So now it's more correct. :^) (cherry picked from commit 3af6a69f1e13803c64466a9b24b7bd7d75d459df; amended to: * resolve a minor conflict in Parser.cpp due to upstream not having https://github.com/LadybirdBrowser/ladybird/pull/385#issuecomment-2227130015 * rebaseline canvas-fillstyle-rgb.png since the diff didn't apply due to us not having https://github.com/LadybirdBrowser/ladybird/pull/999 * remove css-color-functions-ref.png and instead update css-color-functions-ref.html since that file is still a reftest due to us not having https://github.com/LadybirdBrowser/ladybird/pull/736 Makes it much easier to see what actually changed. )
35 lines
908 B
HTML
35 lines
908 B
HTML
<link rel="match" href="reference/canvas-fillstyle-rgb-ref.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(254.56022744510793,0.28813966673057,0.2973971574794)";
|
|
ctx.fillRect(0, 100, 500, 100);
|
|
|
|
// Numbers below 0 and above 255 should be clamped
|
|
ctx.fillStyle = "rgba(-50,-50,500,1)";
|
|
ctx.fillRect(0, 200, 500, 100);
|
|
|
|
// Percentages
|
|
ctx.fillStyle = "rgb(0%, 100%, 0%)";
|
|
ctx.fillRect(0, 300, 500, 100);
|
|
|
|
// Calc
|
|
ctx.fillStyle = "rgb(calc(infinity), 0, 0)";
|
|
ctx.fillRect(0, 400, 500, 100);
|
|
</script>
|