css: Parse hex colors with alpha value

The CSS color spec version 4 introduces this, support has hit Safari,
Chrome and Firefox, so this looks like a feature that's here to stay.

https://drafts.csswg.org/css-color/#hex-notation
This commit is contained in:
Benjamin Otte 2018-03-01 01:08:05 +01:00
parent 67b959f1a7
commit 4ac3f916d0
6 changed files with 60 additions and 33 deletions

View File

@ -831,15 +831,34 @@ _gtk_css_parser_try_hash_color (GtkCssParser *parser,
g_ascii_isxdigit (parser->data[2]) &&
g_ascii_isxdigit (parser->data[3]))
{
if (g_ascii_isxdigit (parser->data[4]) &&
g_ascii_isxdigit (parser->data[5]) &&
g_ascii_isxdigit (parser->data[6]))
{
rgba->red = ((get_xdigit (parser->data[1]) << 4) + get_xdigit (parser->data[2])) / 255.0;
rgba->green = ((get_xdigit (parser->data[3]) << 4) + get_xdigit (parser->data[4])) / 255.0;
rgba->blue = ((get_xdigit (parser->data[5]) << 4) + get_xdigit (parser->data[6])) / 255.0;
rgba->alpha = 1.0;
parser->data += 7;
if (g_ascii_isxdigit (parser->data[4]))
{
if (g_ascii_isxdigit (parser->data[5]) &&
g_ascii_isxdigit (parser->data[6]))
{
rgba->red = ((get_xdigit (parser->data[1]) << 4) + get_xdigit (parser->data[2])) / 255.0;
rgba->green = ((get_xdigit (parser->data[3]) << 4) + get_xdigit (parser->data[4])) / 255.0;
rgba->blue = ((get_xdigit (parser->data[5]) << 4) + get_xdigit (parser->data[6])) / 255.0;
if (g_ascii_isxdigit (parser->data[7]) &&
g_ascii_isxdigit (parser->data[8]))
{
rgba->alpha = ((get_xdigit (parser->data[7]) << 4) + get_xdigit (parser->data[8])) / 255.0;
parser->data += 9;
}
else
{
rgba->alpha = 1.0;
parser->data += 7;
}
}
else
{
rgba->red = get_xdigit (parser->data[1]) / 15.0;
rgba->green = get_xdigit (parser->data[2]) / 15.0;
rgba->blue = get_xdigit (parser->data[3]) / 15.0;
rgba->alpha = get_xdigit (parser->data[4]) / 15.0;
parser->data += 5;
}
}
else
{

View File

@ -37,29 +37,37 @@ i {
}
j {
color: #012345;
color: #0123;
}
k {
color: lighter(red);
color: #012345;
}
l {
color: darker(red);
color: #FFEEDDCC;
}
m {
color: shade(green,0.5);
color: lighter(red);
}
n {
color: alpha(green,0.5);
color: darker(red);
}
o {
color: mix(red,blue,0.25);
color: shade(green,0.5);
}
p {
color: alpha(green,0.5);
}
q {
color: mix(red,blue,0.25);
}
r {
color: @mygreen;
}

View File

@ -37,29 +37,37 @@ i {
}
j {
color: rgb(1,35,69);
color: rgba(0,17,34,0.2);
}
k {
color: shade(rgb(255,0,0), 1.3);
color: rgb(1,35,69);
}
l {
color: shade(rgb(255,0,0), 0.69999999999999996);
color: rgba(255,238,221,0.8);
}
m {
color: shade(rgb(0,128,0), 0.5);
color: shade(rgb(255,0,0), 1.3);
}
n {
color: alpha(rgb(0,128,0), 0.5);
color: shade(rgb(255,0,0), 0.69999999999999996);
}
o {
color: mix(rgb(255,0,0), rgb(0,0,255), 0.25);
color: shade(rgb(0,128,0), 0.5);
}
p {
color: alpha(rgb(0,128,0), 0.5);
}
q {
color: mix(rgb(255,0,0), rgb(0,0,255), 0.25);
}
r {
color: @mygreen;
}

View File

@ -7,25 +7,21 @@ b {
}
c {
color: #1234;
}
d {
color: #12345;
}
e {
d {
color: #1234567;
}
f {
e {
color: notacolorname;
}
g {
f {
color: rgb(1,2,3,4);
}
h {
g {
color: rgba(1,2,3,4,5);
}

View File

@ -5,4 +5,3 @@ colors-errors.css:14: error: GTK_CSS_PROVIDER_ERROR_SYNTAX
colors-errors.css:18: error: GTK_CSS_PROVIDER_ERROR_SYNTAX
colors-errors.css:22: error: GTK_CSS_PROVIDER_ERROR_SYNTAX
colors-errors.css:26: error: GTK_CSS_PROVIDER_ERROR_SYNTAX
colors-errors.css:30: error: GTK_CSS_PROVIDER_ERROR_SYNTAX

View File

@ -18,6 +18,3 @@ f {
g {
}
h {
}