RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 12:57:34 +00:00
Code Issues Activity Actions

LibWeb: Implement CSS color parsing from Tokens

Browse source 
This was broken when we switched away from using StringStyleValues.
While I was at it, I have implemented hsl/a() and the percentage
syntax for rgb/a().

As a bonus, added `colors.html` as a test page for the various CSS
color syntaxes, since nothing was testing rgb() or rgba() before.

Much of the parsing code in LibGFX/Color.h seems to be centered
around CSS color values, but this is not used by the new Parser.
(And can't be used, because it requires a String value and we have
a list of Tokens of some kind instead.) Maybe that should be removed
from there when the new CSS parser is operational.
This commit is contained in:
Sam Atkins 2021-07-18 21:20:40 +01:00 • committed by Andreas Kling
parent fabbd06de4
commit 7abfb18656
4 changed files with 195 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

29
Base/res/html/misc/colors.html Normal file
View file

@ -0,0 +1,29 @@
<html>
<head>
<title>CSS test</title>
<style type="text/css">
#a { background-color: lime; }
#b { background-color: #0F0; }
#c { background-color: #00ff00; }
#d { background-color: rgb(0, 255, 0); }
#e { background-color: rgb(0%, 100%, 0%); }
#e2 { background-color: rgb(-5%, 120%, -42%); }
#f { background-color: rgba(0, 255, 0, 1); }
#g { background-color: rgba(0%, 100%, 0%, 1); }
#h { background-color: hsl(120, 100%, 50%); }
#i { background-color: hsla(120, 100%, 50%, 1); }
</style>
</head>
<body>
<div id="a">This is green, using a named color.</div>
<div id="b">This is green, using #0F0.</div>
<div id="c">This is green, using #00ff00.</div>
<div id="d">This is green, using rgb(0, 255, 0).</div>
<div id="e">This is green, using rgb(0%, 100%, 0%).</div>
<div id="e2">This is green, using rgb(-5%, 120%, -42%).</div>
<div id="f">This is green, using rgba(0, 255, 0, 1).</div>
<div id="g">This is green, using rgba(0%, 100%, 0%, 1).</div>
<div id="h">This is green, using hsl(120, 100%, 50%).</div>
<div id="i">This is green, using hsla(120, 100%, 50%, 1).</div>
</body>
</html>

1
Base/res/html/misc/welcome.html
View file

@ -114,6 +114,7 @@
<li><a href="form.html">form</a></li>
<li><a href="borders.html">borders</a></li>
<li><a href="css.html">css</a></li>
<li><a href="colors.html">css colors</a></li>
<li><a href="acid1.html">acid1</a></li>
<li><a href="acid2.html">acid2</a></li>
<li><a href="attrselectors.html">attribute selectors</a></li>