reftests: Add a test demonstrating unfortunate headerbar behavior

When centering a widget with a size between minimum and natural size,
the headerbar will always expand it as much as possible instead of
keeping it centered.

testsuite/reftests/headerbar-centering.ref.ui

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="type">popup</property>
+    <property name="default-width">400</property>
+    <child>
+      <object class="GtkHeaderBar">
+        <property name="title" translatable="yes">Join Chat Room</property>
+        <child type="start">
+          <object class="GtkButton">
+            <property name="label" translatable="yes">Hello World</property>
+            <property name="opacity">0</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton" id="back_button">
+            <property name="visible">0</property>
+            <property name="can_focus">1</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="image-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="back_icon"/>
+            </child>
+          </object>
+        </child>
+        <child type="title">
+          <object class="GtkLabel">
+            <property name="label" translatable="yes">This is a very long label that should be centered in the headerbar but unfortunately the headerbar scres this up and gives it all the available space instead and there's nothing we can do about it and now we're sad developers.</property>
+            <property name="ellipsize">end</property>
+          </object>
+        </child>
+        <child type="end">
+          <object class="GtkButton">
+            <property name="label" translatable="yes">Hello World</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

testsuite/reftests/headerbar-centering.ui

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <object class="GtkWindow">
+    <property name="type">popup</property>
+    <property name="default-width">400</property>
+    <child>
+      <object class="GtkHeaderBar">
+        <property name="title" translatable="yes">Join Chat Room</property>
+        <child>
+          <object class="GtkButton" id="back_button">
+            <property name="visible">0</property>
+            <property name="can_focus">1</property>
+            <property name="valign">center</property>
+            <style>
+              <class name="image-button"/>
+            </style>
+            <child>
+              <object class="GtkImage" id="back_icon"/>
+            </child>
+          </object>
+        </child>
+        <child type="title">
+          <object class="GtkLabel">
+            <property name="label" translatable="yes">This is a very long label that should be centered in the headerbar but unfortunately the headerbar scres this up and gives it all the available space instead and there's nothing we can do about it and now we're sad developers.</property>
+            <property name="ellipsize">end</property>
+          </object>
+        </child>
+        <child type="end">
+          <object class="GtkButton">
+            <property name="label" translatable="yes">Hello World</property>
+          </object>
+        </child>
+      </object>
+    </child>
+  </object>
+</interface>

testsuite/reftests/meson.build

@@ -225,6 +225,8 @@ testdata = [
   'gtk-icontheme-sizing.css',
   'gtk-icontheme-sizing.ref.ui',
   'gtk-icontheme-sizing.ui',
+  'headerbar-centering.ui',
+  'headerbar-centering.ref.ui',
   'icon-effect-missing.css',
   'icon-effect-missing.ref.ui',
   'icon-effect-missing.ui',