testsuite: Add lots of reftests for picture sizing

Have square images in the following sizes:
  * 20
  * 100
  * 150
  * 200
  * 300
and place them in a can-shrink Picture allocated at the sizes:
  * 200x100
  * 100x200
and set align to center/center.

That's 10 combinations and they should all do the right thing.
This commit is contained in:
Benjamin Otte 2021-10-21 03:32:32 +02:00
parent 1606a41116
commit 2113a18a18
35 changed files with 510 additions and 0 deletions

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 100px 100px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">100</property>
<property name="height_request">200</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-100x100.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 100px 100px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">200</property>
<property name="height_request">100</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-100x100.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 150px 150px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">100</property>
<property name="height_request">200</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-150x150.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 150px 150px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">200</property>
<property name="height_request">100</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-150x150.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 200px 200px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">100</property>
<property name="height_request">200</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-200x200.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 200px 200px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">200</property>
<property name="height_request">100</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-200x200.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">100</property>
<property name="height_request">200</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-20x20.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">200</property>
<property name="height_request">100</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-20x20.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 300px 300px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">100</property>
<property name="height_request">200</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-300x300.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

View File

@ -0,0 +1,15 @@
* {
all: unset;
background-color: mintcream;
}
picture {
background-color: firebrick;
}
#reference {
background-image: image(lime);
background-repeat: no-repeat;
background-position: center;
background-size: 300px 300px;
}

View File

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

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkWindow">
<property name="width_request">200</property>
<property name="height_request">100</property>
<property name="decorated">0</property>
<child>
<object class="GtkOverlay">
<child type="overlay">
<object class="GtkPicture">
<property name="paintable">green-300x300.png</property>
<property name="keep-aspect-ratio">0</property>
<property name="can-shrink">1</property>
<property name="halign">center</property>
<property name="valign">center</property>
<layout>
<property name="measure">0</property>
</layout>
</object>
</child>
</object>
</child>
</object>
</interface>

Binary file not shown.

After

Width:  |  Height:  |  Size: 215 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 296 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 427 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 687 B

View File

@ -170,6 +170,36 @@ testdata = [
'box-shadow-with-blend-mode.ui',
'button-wrapping.ui',
'button-wrapping.ref.ui',
'center-center-100x100-picture-in-100x200.css',
'center-center-100x100-picture-in-100x200.ref.ui',
'center-center-100x100-picture-in-100x200.ui',
'center-center-100x100-picture-in-200x100.css',
'center-center-100x100-picture-in-200x100.ref.ui',
'center-center-100x100-picture-in-200x100.ui',
'center-center-150x150-picture-in-100x200.css',
'center-center-150x150-picture-in-100x200.ref.ui',
'center-center-150x150-picture-in-100x200.ui',
'center-center-150x150-picture-in-200x100.css',
'center-center-150x150-picture-in-200x100.ref.ui',
'center-center-150x150-picture-in-200x100.ui',
'center-center-200x200-picture-in-100x200.css',
'center-center-200x200-picture-in-100x200.ref.ui',
'center-center-200x200-picture-in-100x200.ui',
'center-center-200x200-picture-in-200x100.css',
'center-center-200x200-picture-in-200x100.ref.ui',
'center-center-200x200-picture-in-200x100.ui',
'center-center-20x20-picture-in-100x200.css',
'center-center-20x20-picture-in-100x200.ref.ui',
'center-center-20x20-picture-in-100x200.ui',
'center-center-20x20-picture-in-200x100.css',
'center-center-20x20-picture-in-200x100.ref.ui',
'center-center-20x20-picture-in-200x100.ui',
'center-center-300x300-picture-in-100x200.css',
'center-center-300x300-picture-in-100x200.ref.ui',
'center-center-300x300-picture-in-100x200.ui',
'center-center-300x300-picture-in-200x100.css',
'center-center-300x300-picture-in-200x100.ref.ui',
'center-center-300x300-picture-in-200x100.ui',
'centerlayout-invisible-child.css',
'centerlayout-invisible-child.ref.ui',
'centerlayout-invisible-child.ui',