mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 17:07:34 +00:00
LibWeb: Implement CSS color parsing from Tokens
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:
parent
fabbd06de4
commit
7abfb18656
4 changed files with 195 additions and 9 deletions
29
Base/res/html/misc/colors.html
Normal file
29
Base/res/html/misc/colors.html
Normal 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>
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue