Merge branch 'matthiasc/for-main' into 'main'

css: Move the color space enums to a better place

See merge request GNOME/gtk!7363
This commit is contained in:
Matthias Clasen 2024-06-16 18:14:01 +00:00
commit 153b8399f7
24 changed files with 570 additions and 125 deletions

View File

@ -994,6 +994,11 @@ parse_hue_interpolation (GtkCssParser *parser,
gtk_css_parser_consume_token (parser);
*interp = GTK_CSS_HUE_INTERPOLATION_DECREASING;
}
else if (gtk_css_token_is_ident (token, "hue"))
{
gtk_css_parser_error_syntax (parser, "'hue' goes after the interpolation method");
return FALSE;
}
else
{
*interp = GTK_CSS_HUE_INTERPOLATION_SHORTER;
@ -1009,6 +1014,12 @@ parse_hue_interpolation (GtkCssParser *parser,
return TRUE;
}
gboolean
gtk_css_color_interpolation_method_can_parse (GtkCssParser *parser)
{
return gtk_css_token_is_ident (gtk_css_parser_get_token (parser), "in");
}
gboolean
gtk_css_color_interpolation_method_parse (GtkCssParser *parser,
GtkCssColorSpace *in,
@ -1044,19 +1055,39 @@ gtk_css_color_interpolation_method_parse (GtkCssParser *parser,
gtk_css_parser_consume_token (parser);
*in = GTK_CSS_COLOR_SPACE_HWB;
}
else if (gtk_css_token_is_ident (token, "oklch"))
{
gtk_css_parser_consume_token (parser);
*in = GTK_CSS_COLOR_SPACE_OKLCH;
}
else if (gtk_css_token_is_ident (token, "oklab"))
{
gtk_css_parser_consume_token (parser);
*in = GTK_CSS_COLOR_SPACE_OKLAB;
}
else if (gtk_css_token_is_ident (token, "oklch"))
{
gtk_css_parser_consume_token (parser);
*in = GTK_CSS_COLOR_SPACE_OKLCH;
}
else if (gtk_css_token_is_ident (token, "display-p3"))
{
gtk_css_parser_consume_token (parser);
*in = GTK_CSS_COLOR_SPACE_DISPLAY_P3;
}
else if (gtk_css_token_is_ident (token, "xyz"))
{
gtk_css_parser_consume_token (parser);
*in = GTK_CSS_COLOR_SPACE_XYZ;
}
else if (gtk_css_token_is_ident (token, "rec2020"))
{
gtk_css_parser_consume_token (parser);
*in = GTK_CSS_COLOR_SPACE_REC2020;
}
else if (gtk_css_token_is_ident (token, "rec2100-pq"))
{
gtk_css_parser_consume_token (parser);
*in = GTK_CSS_COLOR_SPACE_REC2100_PQ;
}
else
{
gtk_css_parser_error_syntax (parser, "Invalid color space");
gtk_css_parser_error_syntax (parser, "Invalid color space: %s", gtk_css_token_to_string (token));
return FALSE;
}

View File

@ -21,21 +21,10 @@
#include <math.h>
#include "gtk/css/gtkcssparserprivate.h"
#include "gtkcsstypesprivate.h"
G_BEGIN_DECLS
typedef enum {
GTK_CSS_COLOR_SPACE_SRGB,
GTK_CSS_COLOR_SPACE_SRGB_LINEAR,
GTK_CSS_COLOR_SPACE_HSL,
GTK_CSS_COLOR_SPACE_HWB,
GTK_CSS_COLOR_SPACE_OKLAB,
GTK_CSS_COLOR_SPACE_OKLCH,
GTK_CSS_COLOR_SPACE_DISPLAY_P3,
GTK_CSS_COLOR_SPACE_XYZ,
GTK_CSS_COLOR_SPACE_REC2020,
GTK_CSS_COLOR_SPACE_REC2100_PQ,
} GtkCssColorSpace;
typedef struct
{
@ -100,14 +89,6 @@ void gtk_css_color_convert (const GtkCssColor *input,
GtkCssColorSpace dest,
GtkCssColor *output);
typedef enum
{
GTK_CSS_HUE_INTERPOLATION_SHORTER,
GTK_CSS_HUE_INTERPOLATION_LONGER,
GTK_CSS_HUE_INTERPOLATION_INCREASING,
GTK_CSS_HUE_INTERPOLATION_DECREASING,
} GtkCssHueInterpolation;
void gtk_css_color_interpolate (const GtkCssColor *from,
const GtkCssColor *to,
float progress,
@ -124,6 +105,8 @@ void gtk_css_color_space_get_coord_range (GtkCssColorSpace color_space,
float *lower,
float *upper);
gboolean gtk_css_color_interpolation_method_can_parse (GtkCssParser *parser);
gboolean gtk_css_color_interpolation_method_parse (GtkCssParser *parser,
GtkCssColorSpace *in,
GtkCssHueInterpolation *interp);

View File

@ -1651,6 +1651,8 @@ parse_color_color_channel (GtkCssParser *parser,
ParseData *data,
guint arg)
{
const GtkCssToken *token;
switch (arg)
{
case 0:
@ -1690,7 +1692,11 @@ parse_color_color_channel (GtkCssParser *parser,
return 1;
}
gtk_css_parser_error_syntax (parser, "Invalid color space in color()");
token = gtk_css_parser_get_token (parser);
gtk_css_parser_error_syntax (parser,
"Invalid color space in color(): %s",
gtk_css_token_to_string (token));
return 0;
case 1:

View File

@ -81,7 +81,10 @@ gtk_css_image_conic_snapshot (GtkCssImage *image,
last = i;
}
gtk_snapshot_append_conic_gradient (
if (self->color_space != GTK_CSS_COLOR_SPACE_SRGB)
g_warning_once ("Gradient interpolation color spaces are not supported yet");
gtk_snapshot_append_conic_gradient (
snapshot,
&GRAPHENE_RECT_INIT (0, 0, width, height),
&GRAPHENE_POINT_INIT (_gtk_css_position_value_get_x (self->center, width),
@ -172,37 +175,57 @@ gtk_css_image_conic_parse_first_arg (GtkCssImageConic *self,
GtkCssParser *parser,
GArray *stop_array)
{
gboolean nothing_parsed = TRUE;
gboolean has_rotation = FALSE;
gboolean has_center = FALSE;
gboolean has_colorspace = FALSE;
int retval = 1;
if (gtk_css_parser_try_ident (parser, "from"))
do
{
self->rotation = gtk_css_number_value_parse (parser, GTK_CSS_PARSE_ANGLE);
if (self->rotation == NULL)
return 0;
nothing_parsed = FALSE;
}
else
{
self->rotation = gtk_css_number_value_new (0, GTK_CSS_DEG);
if (!has_colorspace && gtk_css_color_interpolation_method_can_parse (parser))
{
if (!gtk_css_color_interpolation_method_parse (parser, &self->color_space, &self->hue_interp))
return 0;
has_colorspace = TRUE;
}
else if (!has_rotation && gtk_css_parser_try_ident (parser, "from"))
{
self->rotation = gtk_css_number_value_parse (parser, GTK_CSS_PARSE_ANGLE);
if (self->rotation == NULL)
return 0;
has_rotation = TRUE;
}
else if (!has_center && gtk_css_parser_try_ident (parser, "at"))
{
self->center = _gtk_css_position_value_parse (parser);
if (self->center == NULL)
return 0;
has_center = TRUE;
}
else if (gtk_css_token_is (gtk_css_parser_get_token (parser), GTK_CSS_TOKEN_COMMA))
{
retval = 1;
break;
}
else
{
if (gtk_css_image_conic_parse_color_stop (self, parser, stop_array))
{
retval = 2;
break;
}
}
}
while (!(has_colorspace && has_rotation && has_center));
if (gtk_css_parser_try_ident (parser, "at"))
{
self->center = _gtk_css_position_value_parse (parser);
if (self->center == NULL)
return 0;
nothing_parsed = FALSE;
}
else
{
self->center = _gtk_css_position_value_new (gtk_css_number_value_new (50, GTK_CSS_PERCENT),
gtk_css_number_value_new (50, GTK_CSS_PERCENT));
}
if (!has_rotation)
self->rotation = gtk_css_number_value_new (0, GTK_CSS_DEG);
if (!nothing_parsed)
return 1;
if (!has_center)
self->center = _gtk_css_position_value_new (gtk_css_number_value_new (50, GTK_CSS_PERCENT),
gtk_css_number_value_new (50, GTK_CSS_PERCENT));
return 1 + gtk_css_image_conic_parse_color_stop (self, parser, stop_array);
return retval;
}
typedef struct
@ -265,7 +288,7 @@ gtk_css_image_conic_print (GtkCssImage *image,
gboolean written = FALSE;
guint i;
g_string_append (string, "self-gradient(");
g_string_append (string, "conic-gradient(");
if (self->center)
{
@ -274,7 +297,7 @@ gtk_css_image_conic_print (GtkCssImage *image,
if (!gtk_css_value_equal (self->center, compare))
{
g_string_append (string, "from ");
g_string_append (string, "at ");
gtk_css_value_print (self->center, string);
written = TRUE;
}
@ -286,8 +309,19 @@ gtk_css_image_conic_print (GtkCssImage *image,
{
if (written)
g_string_append_c (string, ' ');
g_string_append (string, "at ");
g_string_append (string, "from ");
gtk_css_value_print (self->rotation, string);
written = TRUE;
}
if (self->color_space != GTK_CSS_COLOR_SPACE_SRGB)
{
if (written)
g_string_append_c (string, ' ');
gtk_css_color_interpolation_method_print (self->color_space,
self->hue_interp,
string);
written = TRUE;
}
if (written)
@ -325,6 +359,8 @@ gtk_css_image_conic_compute (GtkCssImage *image,
copy->center = gtk_css_value_compute (self->center, property_id, context);
copy->rotation = gtk_css_value_compute (self->rotation, property_id, context);
copy->color_space = self->color_space;
copy->hue_interp = self->hue_interp;
copy->n_stops = self->n_stops;
copy->color_stops = g_malloc (sizeof (GtkCssImageConicColorStop) * copy->n_stops);
@ -380,6 +416,9 @@ gtk_css_image_conic_transition (GtkCssImage *start_image,
if (result->rotation == NULL)
goto fail;
result->color_space = start->color_space;
result->hue_interp = start->hue_interp;
result->color_stops = g_malloc (sizeof (GtkCssImageConicColorStop) * start->n_stops);
result->n_stops = 0;
for (i = 0; i < start->n_stops; i++)
@ -435,7 +474,9 @@ gtk_css_image_conic_equal (GtkCssImage *image1,
guint i;
if (!gtk_css_value_equal (conic1->center, conic2->center) ||
!gtk_css_value_equal (conic1->rotation, conic2->rotation))
!gtk_css_value_equal (conic1->rotation, conic2->rotation) ||
conic1->color_space != conic2->color_space ||
conic1->hue_interp != conic2->hue_interp)
return FALSE;
for (i = 0; i < conic1->n_stops; i++)

View File

@ -47,6 +47,9 @@ struct _GtkCssImageConic
GtkCssValue *center;
GtkCssValue *rotation;
GtkCssColorSpace color_space;
GtkCssHueInterpolation hue_interp;
guint n_stops;
GtkCssImageConicColorStop *color_stops;
};

View File

@ -244,6 +244,9 @@ gtk_css_image_linear_snapshot (GtkCssImage *image,
last = i;
}
if (linear->color_space != GTK_CSS_COLOR_SPACE_SRGB)
g_warning_once ("Gradient interpolation color spaces are not supported yet");
if (linear->repeating)
{
gtk_snapshot_append_repeating_linear_gradient (
@ -304,75 +307,102 @@ gtk_css_image_linear_parse_first_arg (GtkCssImageLinear *linear,
GArray *stop_array)
{
guint i;
gboolean has_colorspace = FALSE;
gboolean has_side_or_angle = FALSE;
guint retval = 1;
if (gtk_css_parser_try_ident (parser, "to"))
do
{
for (i = 0; i < 2; i++)
if (!has_colorspace &&gtk_css_color_interpolation_method_can_parse (parser))
{
if (gtk_css_parser_try_ident (parser, "left"))
{
if (linear->side & ((1 << GTK_CSS_LEFT) | (1 << GTK_CSS_RIGHT)))
{
gtk_css_parser_error_syntax (parser, "Expected 'top', 'bottom' or comma");
return 0;
}
linear->side |= (1 << GTK_CSS_LEFT);
}
else if (gtk_css_parser_try_ident (parser, "right"))
{
if (linear->side & ((1 << GTK_CSS_LEFT) | (1 << GTK_CSS_RIGHT)))
{
gtk_css_parser_error_syntax (parser, "Expected 'top', 'bottom' or comma");
return 0;
}
linear->side |= (1 << GTK_CSS_RIGHT);
}
else if (gtk_css_parser_try_ident (parser, "top"))
{
if (linear->side & ((1 << GTK_CSS_TOP) | (1 << GTK_CSS_BOTTOM)))
{
gtk_css_parser_error_syntax (parser, "Expected 'left', 'right' or comma");
return 0;
}
linear->side |= (1 << GTK_CSS_TOP);
}
else if (gtk_css_parser_try_ident (parser, "bottom"))
{
if (linear->side & ((1 << GTK_CSS_TOP) | (1 << GTK_CSS_BOTTOM)))
{
gtk_css_parser_error_syntax (parser, "Expected 'left', 'right' or comma");
return 0;
}
linear->side |= (1 << GTK_CSS_BOTTOM);
}
else
break;
if (!gtk_css_color_interpolation_method_parse (parser, &linear->color_space, &linear->hue_interp))
return 0;
has_colorspace = TRUE;
}
if (linear->side == 0)
else if (!has_side_or_angle && gtk_css_parser_try_ident (parser, "to"))
{
gtk_css_parser_error_syntax (parser, "Expected side that gradient should go to");
gtk_css_parser_consume_token (parser);
for (i = 0; i < 2; i++)
{
if (gtk_css_parser_try_ident (parser, "left"))
{
if (linear->side & ((1 << GTK_CSS_LEFT) | (1 << GTK_CSS_RIGHT)))
{
gtk_css_parser_error_syntax (parser, "Expected 'top', 'bottom' or comma");
return 0;
}
linear->side |= (1 << GTK_CSS_LEFT);
}
else if (gtk_css_parser_try_ident (parser, "right"))
{
if (linear->side & ((1 << GTK_CSS_LEFT) | (1 << GTK_CSS_RIGHT)))
{
gtk_css_parser_error_syntax (parser, "Expected 'top', 'bottom' or comma");
return 0;
}
linear->side |= (1 << GTK_CSS_RIGHT);
}
else if (gtk_css_parser_try_ident (parser, "top"))
{
if (linear->side & ((1 << GTK_CSS_TOP) | (1 << GTK_CSS_BOTTOM)))
{
gtk_css_parser_error_syntax (parser, "Expected 'left', 'right' or comma");
return 0;
}
linear->side |= (1 << GTK_CSS_TOP);
}
else if (gtk_css_parser_try_ident (parser, "bottom"))
{
if (linear->side & ((1 << GTK_CSS_TOP) | (1 << GTK_CSS_BOTTOM)))
{
gtk_css_parser_error_syntax (parser, "Expected 'left', 'right' or comma");
return 0;
}
linear->side |= (1 << GTK_CSS_BOTTOM);
}
else
break;
}
if (linear->side == 0)
{
gtk_css_parser_error_syntax (parser, "Expected side that gradient should go to");
return 0;
}
has_side_or_angle = TRUE;
}
else if (!has_side_or_angle && gtk_css_number_value_can_parse (parser))
{
linear->angle = gtk_css_number_value_parse (parser, GTK_CSS_PARSE_ANGLE);
if (linear->angle == NULL)
return 0;
has_side_or_angle = TRUE;
}
else if (gtk_css_token_is (gtk_css_parser_get_token (parser), GTK_CSS_TOKEN_COMMA))
{
retval = 1;
break;
}
else
{
if (gtk_css_image_linear_parse_color_stop (linear, parser, stop_array))
{
retval = 2;
break;
}
return 0;
}
return 1;
}
else if (gtk_css_number_value_can_parse (parser))
{
linear->angle = gtk_css_number_value_parse (parser, GTK_CSS_PARSE_ANGLE);
if (linear->angle == NULL)
return 0;
while (!(has_colorspace && has_side_or_angle));
return 1;
}
else
{
linear->side = 1 << GTK_CSS_BOTTOM;
if (!gtk_css_image_linear_parse_color_stop (linear, parser, stop_array))
return 0;
if (linear->angle == NULL && linear->side == 0)
linear->side = (1 << GTK_CSS_BOTTOM);
return 2;
}
return retval;
}
typedef struct
@ -437,6 +467,7 @@ gtk_css_image_linear_print (GtkCssImage *image,
{
GtkCssImageLinear *linear = GTK_CSS_IMAGE_LINEAR (image);
guint i;
gboolean has_printed = FALSE;
if (linear->repeating)
g_string_append (string, "repeating-linear-gradient(");
@ -459,15 +490,29 @@ gtk_css_image_linear_print (GtkCssImage *image,
else if (linear->side & (1 << GTK_CSS_RIGHT))
g_string_append (string, " right");
g_string_append (string, ", ");
has_printed = TRUE;
}
}
else
{
gtk_css_value_print (linear->angle, string);
g_string_append (string, ", ");
has_printed = TRUE;
}
if (linear->color_space != GTK_CSS_COLOR_SPACE_SRGB)
{
if (has_printed)
g_string_append_c (string, ' ');
gtk_css_color_interpolation_method_print (linear->color_space,
linear->hue_interp,
string);
has_printed = TRUE;
}
if (has_printed)
g_string_append (string, ", ");
for (i = 0; i < linear->n_stops; i++)
{
const GtkCssImageLinearColorStop *stop = &linear->color_stops[i];
@ -499,6 +544,8 @@ gtk_css_image_linear_compute (GtkCssImage *image,
copy = g_object_new (GTK_TYPE_CSS_IMAGE_LINEAR, NULL);
copy->repeating = linear->repeating;
copy->side = linear->side;
copy->color_space = linear->color_space;
copy->hue_interp = linear->hue_interp;
if (linear->angle)
copy->angle = gtk_css_value_compute (linear->angle, property_id, context);
@ -545,11 +592,15 @@ gtk_css_image_linear_transition (GtkCssImage *start_image,
end = GTK_CSS_IMAGE_LINEAR (end_image);
if ((start->repeating != end->repeating)
|| (start->n_stops != end->n_stops))
|| (start->n_stops != end->n_stops)
|| (start->color_space != end->color_space)
|| (start->hue_interp != end->hue_interp))
return GTK_CSS_IMAGE_CLASS (_gtk_css_image_linear_parent_class)->transition (start_image, end_image, property_id, progress);
result = g_object_new (GTK_TYPE_CSS_IMAGE_LINEAR, NULL);
result->repeating = start->repeating;
result->color_space = start->color_space;
result->hue_interp = start->hue_interp;
if (start->side != end->side)
goto fail;
@ -618,7 +669,9 @@ gtk_css_image_linear_equal (GtkCssImage *image1,
if (linear1->repeating != linear2->repeating ||
linear1->side != linear2->side ||
(linear1->side == 0 && !gtk_css_value_equal (linear1->angle, linear2->angle)) ||
linear1->n_stops != linear2->n_stops)
linear1->n_stops != linear2->n_stops ||
linear1->color_space != linear2->color_space ||
linear1->hue_interp != linear2->hue_interp)
return FALSE;
for (i = 0; i < linear1->n_stops; i++)

View File

@ -48,6 +48,9 @@ struct _GtkCssImageLinear
guint repeating :1;
GtkCssValue *angle;
GtkCssColorSpace color_space;
GtkCssHueInterpolation hue_interp;
guint n_stops;
GtkCssImageLinearColorStop *color_stops;
};

View File

@ -194,6 +194,9 @@ gtk_css_image_radial_snapshot (GtkCssImage *image,
last = i;
}
if (radial->color_space != GTK_CSS_COLOR_SPACE_SRGB)
g_warning_once ("Gradient interpolation color spaces are not supported yet");
if (radial->repeating)
gtk_snapshot_append_repeating_radial_gradient (snapshot,
&GRAPHENE_RECT_INIT (0, 0, width, height),
@ -255,6 +258,7 @@ gtk_css_image_radial_parse_first_arg (GtkCssImageRadial *radial,
{
gboolean has_shape = FALSE;
gboolean has_size = FALSE;
gboolean has_colorspace = FALSE;
gboolean found_one = FALSE;
guint i;
static struct {
@ -270,7 +274,13 @@ gtk_css_image_radial_parse_first_arg (GtkCssImageRadial *radial,
found_one = FALSE;
do {
if (!has_shape && gtk_css_parser_try_ident (parser, "circle"))
if (!has_colorspace && gtk_css_color_interpolation_method_can_parse (parser))
{
if (!gtk_css_color_interpolation_method_parse (parser, &radial->color_space, &radial->hue_interp))
return 0;
has_colorspace = TRUE;
}
else if (!has_shape && gtk_css_parser_try_ident (parser, "circle"))
{
radial->circle = TRUE;
found_one = has_shape = TRUE;
@ -467,6 +477,14 @@ gtk_css_image_radial_print (GtkCssImage *image,
g_string_append (string, " at ");
gtk_css_value_print (radial->position, string);
if (radial->color_space != GTK_CSS_COLOR_SPACE_SRGB)
{
g_string_append_c (string, ' ');
gtk_css_color_interpolation_method_print (radial->color_space,
radial->hue_interp,
string);
}
g_string_append (string, ", ");
for (i = 0; i < radial->n_stops; i++)
@ -501,6 +519,8 @@ gtk_css_image_radial_compute (GtkCssImage *image,
copy->repeating = radial->repeating;
copy->circle = radial->circle;
copy->size = radial->size;
copy->color_space = radial->color_space;
copy->hue_interp = radial->hue_interp;
copy->position = gtk_css_value_compute (radial->position, property_id, context);
@ -554,7 +574,9 @@ gtk_css_image_radial_transition (GtkCssImage *start_image,
if (start->repeating != end->repeating ||
start->n_stops != end->n_stops ||
start->size != end->size ||
start->circle != end->circle)
start->circle != end->circle ||
start->color_space != end->color_space ||
start->hue_interp != end->hue_interp)
return GTK_CSS_IMAGE_CLASS (_gtk_css_image_radial_parent_class)->transition (start_image, end_image, property_id, progress);
result = g_object_new (GTK_TYPE_CSS_IMAGE_RADIAL, NULL);
@ -645,7 +667,9 @@ gtk_css_image_radial_equal (GtkCssImage *image1,
(radial1->sizes[0] && radial2->sizes[0] && !gtk_css_value_equal (radial1->sizes[0], radial2->sizes[0])) ||
((radial1->sizes[1] == NULL) != (radial2->sizes[1] == NULL)) ||
(radial1->sizes[1] && radial2->sizes[1] && !gtk_css_value_equal (radial1->sizes[1], radial2->sizes[1])) ||
radial1->n_stops != radial2->n_stops)
radial1->n_stops != radial2->n_stops ||
radial1->color_space != radial2->color_space ||
radial1->hue_interp != radial2->hue_interp)
return FALSE;
for (i = 0; i < radial1->n_stops; i++)

View File

@ -54,8 +54,13 @@ struct _GtkCssImageRadial
GtkCssValue *position;
GtkCssValue *sizes[2];
GtkCssColorSpace color_space;
GtkCssHueInterpolation hue_interp;
guint n_stops;
GtkCssImageRadialColorStop *color_stops;
GtkCssRadialSize size;
guint circle : 1;
guint repeating :1;

View File

@ -573,5 +573,26 @@ gtk_css_hash_id (GQuark id)
return id * 11;
}
G_END_DECLS
typedef enum {
GTK_CSS_COLOR_SPACE_SRGB,
GTK_CSS_COLOR_SPACE_SRGB_LINEAR,
GTK_CSS_COLOR_SPACE_HSL,
GTK_CSS_COLOR_SPACE_HWB,
GTK_CSS_COLOR_SPACE_OKLAB,
GTK_CSS_COLOR_SPACE_OKLCH,
GTK_CSS_COLOR_SPACE_DISPLAY_P3,
GTK_CSS_COLOR_SPACE_XYZ,
GTK_CSS_COLOR_SPACE_REC2020,
GTK_CSS_COLOR_SPACE_REC2100_PQ,
} GtkCssColorSpace;
typedef enum
{
GTK_CSS_HUE_INTERPOLATION_SHORTER,
GTK_CSS_HUE_INTERPOLATION_LONGER,
GTK_CSS_HUE_INTERPOLATION_INCREASING,
GTK_CSS_HUE_INTERPOLATION_DECREASING,
} GtkCssHueInterpolation;
G_END_DECLS

View File

@ -125,3 +125,19 @@ ae {
af {
color: color-mix(in srgb, 30% red, 70% blue);
}
ag {
color: color-mix(in display-p3, 30% red, 70% blue);
}
ah {
color: color-mix(in xyz, 30% red, 70% blue);
}
ai {
color: color-mix(in rec2020, 30% red, 70% blue);
}
aj {
color: color-mix(in rec2100-pq, 30% red, 70% blue);
}

View File

@ -101,3 +101,19 @@ ae {
af {
color: color(srgb 0.3 0 0.7);
}
ag {
color: color(display-p3 0.275246 0.0600861 0.71328);
}
ah {
color: color(xyz 0.250054 0.114326 0.671172);
}
ai {
color: color(rec2020 0.355452 0.105084 0.684877);
}
aj {
color: color(rec2100-pq 0.362517 0.235874 0.464457);
}

View File

@ -131,3 +131,19 @@ af {
ag {
color: oklab(100% 100% 100% / 100%);
}
ah {
color: color(display-p3 0.5 0.5 0.5);
}
ai {
color: color(xyz 0.5 0.5 0.5);
}
aj {
color: color(rec2020 0.5 0.5 0.5);
}
ak {
color: color(rec2100-pq 0.5 0.5 0.5);
}

View File

@ -131,3 +131,19 @@ af {
ag {
color: oklab(1 0.4 0.4);
}
ah {
color: color(display-p3 0.5 0.5 0.5);
}
ai {
color: color(xyz 0.5 0.5 0.5);
}
aj {
color: color(rec2020 0.5 0.5 0.5);
}
ak {
color: color(rec2100-pq 0.5 0.5 0.5);
}

View File

@ -0,0 +1,43 @@
a {
background-image: conic-gradient(yellow, green);
}
b {
background-image: conic-gradient(at center, yellow 0%, green 100%);
}
c {
background-image: conic-gradient(at 50% 50%, yellow, green);
}
d {
background-image: conic-gradient(at left top, yellow, green);
}
e {
background-image: conic-gradient(at 25% bottom, red, yellow, green);
}
f {
background-image: conic-gradient(from 20deg, red, yellow 50%, green);
}
g {
background-image: conic-gradient(from 0.25turn at 20px 20px, red, yellow, green);
}
h {
background-image: conic-gradient(from 20deg in oklab, red, yellow, green);
}
i {
background-image: conic-gradient(in rec2020 at center, red, yellow, green);
}
j {
background-image: conic-gradient(in hsl longer hue from 10deg, red, yellow, green);
}
k {
background-image: conic-gradient(in srgb from -10deg at 20px 20px, red, yellow);
}

View File

@ -0,0 +1,43 @@
a {
background-image: conic-gradient(rgb(255,255,0), rgb(0,128,0));
}
b {
background-image: conic-gradient(rgb(255,255,0) 0, rgb(0,128,0) 100%);
}
c {
background-image: conic-gradient(rgb(255,255,0), rgb(0,128,0));
}
d {
background-image: conic-gradient(at left top, rgb(255,255,0), rgb(0,128,0));
}
e {
background-image: conic-gradient(at 25% bottom, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
}
f {
background-image: conic-gradient(from 20deg, rgb(255,0,0), rgb(255,255,0) 50%, rgb(0,128,0));
}
g {
background-image: conic-gradient(at 20px 20px from 0.25turn, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
}
h {
background-image: conic-gradient(from 20deg in oklab, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
}
i {
background-image: conic-gradient(in rec2020, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
}
j {
background-image: conic-gradient(from 10deg in hsl longer hue, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
}
k {
background-image: conic-gradient(at 20px 20px from -10deg, rgb(255,0,0), rgb(255,255,0));
}

View File

@ -0,0 +1,39 @@
a {
background-image: linear-gradient(to top bottom, red 0% blue 100%);
border-image-source: repeating-linear-gradient(to top bottom, red 0% blue 100%);
}
b {
background-image: linear-gradient(to top left bottom, red 0% blue 100%);
border-image-source: repeating-linear-gradient(to top left bottom, red 0% blue 100%);
}
c {
background-image: linear-gradient(to top top, red 0% blue 100%);
border-image-source: repeating-linear-gradient(to top top, red 0% blue 100%);
}
d {
background-image: linear-gradient(to top to left, red 0% blue 100%);
border-image-source: repeating-linear-gradient(to top to left, red 0% blue 100%);
}
e {
background-image: linear-gradient(to top left 0turn, red 0% blue 100%);
border-image-source: repeating-linear-gradient(to top left 0turn, red 0% blue 100%);
}
f {
background-image: linear-gradient(in swishy, red 0% blue 100%);
border-image-source: repeating-linear-gradient(in swishy, red 0% blue 100%);
}
g {
background-image: linear-gradient(in srgb longer hue, red 0% blue 100%);
border-image-source: repeating-linear-gradient(in srgb longer hue, red 0% blue 100%);
}
h {
background-image: linear-gradient(in srgb in srgb, red 0% blue 100%);
border-image-source: repeating-linear-gradient(in srgb in srgb, red 0% blue 100%);
}

View File

@ -0,0 +1,16 @@
linear-gradient-invalid.css:2:44-50: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:3:57-63: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:7:49-55: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:8:62-68: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:12:44-47: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:13:57-60: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:17:44-46: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:18:57-59: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:22:49-54: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:23:62-67: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:27:40-46: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:28:53-59: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:32:45-51: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:33:58-64: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:37:45-47: error: GTK_CSS_PARSER_ERROR_SYNTAX
linear-gradient-invalid.css:38:58-60: error: GTK_CSS_PARSER_ERROR_SYNTAX

View File

@ -102,3 +102,23 @@ u {
background-image: linear-gradient(red -5px, green 20em, blue, purple -42%, pink 3pt);
border-image-source: repeating-linear-gradient(red -5px, green 20em, blue, purple -42%, pink 3pt);
}
v {
background-image: linear-gradient(to left top in srgb, red 0, green 100%);
border-image-source: repeating-linear-gradient(to left top in srgb, red 0, green 100%);
}
w {
background-image: linear-gradient(to left top in hsl longer hue, red 0, green 100%);
border-image-source: repeating-linear-gradient(to left top in hsl longer hue, red 0, green 100%);
}
x {
background-image: linear-gradient(25deg in rec2020, red 0, green 100%);
border-image-source: repeating-linear-gradient(25deg in rec2020, red 0, green 100%);
}
y {
background-image: linear-gradient(in hwb to bottom, red 0, green 100%);
border-image-source: repeating-linear-gradient(in hwb to bottom, red 0, green 100%);
}

View File

@ -102,3 +102,23 @@ u {
background-image: linear-gradient(rgb(255,0,0) -5px, rgb(0,128,0) 20em, rgb(0,0,255), rgb(128,0,128) -42%, rgb(255,192,203) 3pt);
border-image-source: repeating-linear-gradient(rgb(255,0,0) -5px, rgb(0,128,0) 20em, rgb(0,0,255), rgb(128,0,128) -42%, rgb(255,192,203) 3pt);
}
v {
background-image: linear-gradient(to top left, rgb(255,0,0) 0, rgb(0,128,0) 100%);
border-image-source: repeating-linear-gradient(to top left, rgb(255,0,0) 0, rgb(0,128,0) 100%);
}
w {
background-image: linear-gradient(to top left in hsl longer hue, rgb(255,0,0) 0, rgb(0,128,0) 100%);
border-image-source: repeating-linear-gradient(to top left in hsl longer hue, rgb(255,0,0) 0, rgb(0,128,0) 100%);
}
x {
background-image: linear-gradient(25deg in rec2020, rgb(255,0,0) 0, rgb(0,128,0) 100%);
border-image-source: repeating-linear-gradient(25deg in rec2020, rgb(255,0,0) 0, rgb(0,128,0) 100%);
}
y {
background-image: linear-gradient(in hwb, rgb(255,0,0) 0, rgb(0,128,0) 100%);
border-image-source: repeating-linear-gradient(in hwb, rgb(255,0,0) 0, rgb(0,128,0) 100%);
}

View File

@ -37,3 +37,18 @@ i {
j {
background-image: radial-gradient(20px 20px at 20px 30px, red, yellow, green);
}
k {
background-image: radial-gradient(in srgb 20px 20px, red, yellow);
border-image-source: repeating-radial-gradient(in srgb 20px 20px, red, yellow);
}
l {
background-image: radial-gradient(in oklch 20px 20px, red, yellow);
border-image-source: repeating-radial-gradient(in oklch 20px 20px, red, yellow);
}
m {
background-image: radial-gradient(circle in hsl longer hue, red, yellow);
border-image-source: repeating-radial-gradient(circle in hsl longer hue, red, yellow);
}

View File

@ -37,3 +37,18 @@ i {
j {
background-image: radial-gradient(ellipse 20px 20px at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
}
k {
background-image: radial-gradient(ellipse 20px 20px at center, rgb(255,0,0), rgb(255,255,0));
border-image-source: repeating-radial-gradient(ellipse 20px 20px at center, rgb(255,0,0), rgb(255,255,0));
}
l {
background-image: radial-gradient(ellipse 20px 20px at center in oklch, rgb(255,0,0), rgb(255,255,0));
border-image-source: repeating-radial-gradient(ellipse 20px 20px at center in oklch, rgb(255,0,0), rgb(255,255,0));
}
m {
background-image: radial-gradient(circle farthest-corner at center in hsl longer hue, rgb(255,0,0), rgb(255,255,0));
border-image-source: repeating-radial-gradient(circle farthest-corner at center in hsl longer hue, rgb(255,0,0), rgb(255,255,0));
}

View File

@ -7,4 +7,4 @@ window.background:dir(ltr)
label:dir(ltr)
background-image: radial-gradient(ellipse farthest-corner at center 30px, rgb(255,255,0), rgb(255,0,0) 30%, rgb(0,0,255)); /* gradient.css:10:3-89 */
image:dir(ltr)
background-image: self-gradient(from center 30px at 25deg, rgb(255,255,0), rgb(255,0,0) 30%, rgb(0,0,255)); /* gradient.css:14:3-83 */
background-image: conic-gradient(at center 30px from 25deg, rgb(255,255,0), rgb(255,0,0) 30%, rgb(0,0,255)); /* gradient.css:14:3-83 */