Merge branch 'wip/otte/for-master' into 'master'

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

Closes #4324

See merge request GNOME/gtk!4043

5 files changed, 47 insertions, 11 deletions

diff --git a/gtk/gtkrenderbackground.c b/gtk/gtkrenderbackground.c
index 7630ab704b..92a29ca9fb 100644
--- a/gtk/gtkrenderbackground.c
+++ b/gtk/gtkrenderbackground.c
@@ -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,
diff --git a/testsuite/reftests/background-repeat-clip.css b/testsuite/reftests/background-repeat-clip.css
new file mode 100644
index 0000000000..0ef6141029
--- /dev/null
+++ b/testsuite/reftests/background-repeat-clip.css
@@ -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;
+}
diff --git a/testsuite/reftests/background-repeat-clip.ref.ui b/testsuite/reftests/background-repeat-clip.ref.ui
new file mode 100644
index 0000000000..e1eb6590e0
--- /dev/null
+++ b/testsuite/reftests/background-repeat-clip.ref.ui
@@ -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>
diff --git a/testsuite/reftests/background-repeat-clip.ui b/testsuite/reftests/background-repeat-clip.ui
new file mode 100644
index 0000000000..d60a873d5e
--- /dev/null
+++ b/testsuite/reftests/background-repeat-clip.ui
@@ -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>
diff --git a/testsuite/reftests/meson.build b/testsuite/reftests/meson.build
index 6806ece031..d4322f5c63 100644
--- a/testsuite/reftests/meson.build
+++ b/testsuite/reftests/meson.build
@@ -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',