css: Render the background-clip area, not the background-origin

Testcase included

Fixes #4324
This commit is contained in:
Benjamin Otte 2021-10-07 19:50:02 +02:00
parent 8d9c3920bb
commit 30164d5b46
5 changed files with 47 additions and 11 deletions

View File

@ -210,27 +210,17 @@ gtk_theming_background_snapshot_layer (GtkCssBoxes *bg,
else
repeat_height = round (image_height);
fill_rect = clip->bounds;
if (hrepeat == GTK_CSS_REPEAT_STYLE_NO_REPEAT)
{
fill_rect.origin.x = _gtk_css_position_value_get_x (pos, width - image_width);
fill_rect.size.width = image_width;
}
else
{
fill_rect.origin.x = 0;
fill_rect.size.width = width;
}
if (vrepeat == GTK_CSS_REPEAT_STYLE_NO_REPEAT)
{
fill_rect.origin.y = _gtk_css_position_value_get_y (pos, height - image_height);
fill_rect.size.height = image_height;
}
else
{
fill_rect.origin.y = 0;
fill_rect.size.height = height;
}
gtk_snapshot_push_repeat (snapshot,
&fill_rect,

View File

@ -0,0 +1,21 @@
* {
all: unset;
}
window {
background: pink;
}
grid {
background-image: linear-gradient(rebeccapurple, rebeccapurple);
background-size: 10px 10px;
padding: 10px;
background-repeat: repeat;
background-origin: content-box;
background-clip: border-box;
}
/* reference */
box {
background: rebeccapurple;
}

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">100</property>
<property name="height_request">100</property>
<property name="decorated">0</property>
<property name="child">
<object class="GtkBox" />
</property>
</object>
</interface>

View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">100</property>
<property name="height_request">100</property>
<property name="decorated">0</property>
<property name="child">
<object class="GtkGrid" />
</property>
</object>
</interface>

View File

@ -93,6 +93,9 @@ testdata = [
'background-position-simple.css',
'background-position-simple.ref.ui',
'background-position-simple.ui',
'background-repeat-clip.css',
'background-repeat-clip.ref.ui',
'background-repeat-clip.ui',
'background-size.css',
'background-size.ref.ui',
'background-size.ui',