kirigami/autotests/tst_theme.qml

0001 /*
0002  *  SPDX-FileCopyrightText: 2021 Arjen Hiemstra <ahiemstra@heimr.nl>
0003  *
0004  *  SPDX-License-Identifier: LGPL-2.0-or-later
0005  */
0006
0007 import QtQuick 2.12
0008 import QtQuick.Controls 2.12
0009 import QtTest 1.0
0010 import org.kde.kirigami 2.11 as Kirigami
0011
0012 TestCase {
0013     id: testCase
0014     name: "ThemeTest"
0015
0016     width: 400
0017     height: 400
0018     visible: true
0019
0020     when: windowShown
0021
0022     TextMetrics {
0023         id: textMetrics
0024     }
0025
0026     // Not all properties are updated immediately to avoid having massive storms
0027     // of duplicated signals and to prevent changes from retriggering code that
0028     // changed it. To deal with that, we need to wait a bit before continuiing
0029     // when we change properties. This time shouldn't be too short because on
0030     // some machines it may take a bit longer for things to properly be updated.
0031     function waitForEvents()
0032     {
0033         wait(20)
0034     }
0035
0036     Component {
0037         id: basic
0038
0039         Rectangle {
0040             color: Kirigami.Theme.backgroundColor
0041
0042             property alias text: textItem
0043
0044             Text {
0045                 id: textItem
0046                 color: Kirigami.Theme.textColor
0047                 font: Kirigami.Theme.defaultFont
0048             }
0049         }
0050     }
0051
0052     function test_basic() {
0053         var item = createTemporaryObject(basic, testCase)
0054         verify(item)
0055
0056         compare(item.Kirigami.Theme.colorSet, Kirigami.Theme.Window)
0057         compare(item.Kirigami.Theme.colorGroup, Kirigami.Theme.Active)
0058         verify(item.Kirigami.Theme.inherit)
0059
0060         compare(item.color, "#eff0f1")
0061         compare(item.text.color, "#31363b")
0062         compare(item.text.font.family, textMetrics.font.family)
0063     }
0064
0065     Component {
0066         id: override
0067
0068         Rectangle {
0069             Kirigami.Theme.backgroundColor: "#ff0000"
0070             color: Kirigami.Theme.backgroundColor
0071         }
0072     }
0073
0074     function test_override() {
0075         var item = createTemporaryObject(override, testCase)
0076         verify(item)
0077
0078         compare(item.color, "#ff0000")
0079
0080         item.Kirigami.Theme.backgroundColor = "#00ff00"
0081
0082         // Changes to Theme are not immediately propagated, so give it a few
0083         // moments.
0084         waitForEvents()
0085
0086         compare(item.color, "#00ff00")
0087
0088         // Changing colorSet or colorGroup does not affect local overrides
0089         item.Kirigami.Theme.colorSet = Kirigami.Theme.Complementary
0090         item.Kirigami.Theme.colorGroup = Kirigami.Theme.Disabled
0091
0092         waitForEvents()
0093
0094         compare(item.color, "#00ff00")
0095     }
0096
0097     Component {
0098         id: inherit
0099
0100         Rectangle {
0101             color: Kirigami.Theme.backgroundColor
0102
0103             property alias child1: rect1
0104             property alias child2: rect2
0105
0106             Rectangle {
0107                 id: rect1
0108                 color: Kirigami.Theme.backgroundColor
0109             }
0110             Rectangle {
0111                 id: rect2
0112                 Kirigami.Theme.inherit: false
0113                 color: Kirigami.Theme.backgroundColor
0114             }
0115         }
0116     }
0117
0118     function test_inherit() {
0119         var item = createTemporaryObject(inherit, testCase)
0120         verify(item)
0121
0122         // Default values are all the same
0123         compare(item.color, "#eff0f1")
0124         compare(item.child1.color, "#eff0f1")
0125         compare(item.child2.color, "#eff0f1")
0126
0127         // If we change the colorSet, the item that inherits gets updated, but
0128         // the item that does not stays the same.
0129         item.Kirigami.Theme.colorSet = Kirigami.Theme.View
0130
0131         waitForEvents()
0132
0133         compare(item.color, "#fcfcfc")
0134         compare(item.child1.color, "#fcfcfc")
0135         compare(item.child2.color, "#eff0f1")
0136
0137         // If we override a color, the item that inherits gets that color, while
0138         // the item that does not ignores it.
0139         item.Kirigami.Theme.backgroundColor = "#ff0000"
0140
0141         waitForEvents()
0142
0143         compare(item.color, "#ff0000")
0144         compare(item.child1.color, "#ff0000")
0145         compare(item.child2.color, "#eff0f1")
0146
0147         // If we change the color set again, the overridden color remains the
0148         // same for both the original object and the inherited object.
0149         item.Kirigami.Theme.colorSet = Kirigami.Theme.View
0150
0151         waitForEvents()
0152
0153         compare(item.color, "#ff0000")
0154         compare(item.child1.color, "#ff0000")
0155         compare(item.child2.color, "#eff0f1")
0156
0157         // If we override a color of the item that inherits, it will stay the
0158         // same even if that color changes in the parent.
0159         item.child1.Kirigami.Theme.backgroundColor = "#00ff00"
0160         item.Kirigami.Theme.backgroundColor = "#0000ff"
0161
0162         waitForEvents()
0163
0164         compare(item.color, "#0000ff")
0165         compare(item.child1.color, "#00ff00")
0166         compare(item.child2.color, "#eff0f1")
0167     }
0168
0169     Component {
0170         id: deepInherit
0171
0172         Rectangle {
0173             color: Kirigami.Theme.backgroundColor
0174
0175             property alias child1: rect1
0176             property alias child2: rect2
0177             property alias child3: rect3
0178
0179             Rectangle {
0180                 id: rect1
0181                 color: Kirigami.Theme.backgroundColor
0182
0183                 Rectangle {
0184                     id: rect2
0185                     color: Kirigami.Theme.backgroundColor
0186
0187                     Rectangle {
0188                         id: rect3
0189                         color: Kirigami.Theme.backgroundColor
0190                     }
0191                 }
0192             }
0193         }
0194     }
0195
0196     function test_inherit_deep() {
0197         var item = createTemporaryObject(deepInherit, testCase)
0198         verify(item)
0199
0200         waitForEvents()
0201
0202         compare(item.color, "#eff0f1")
0203         compare(item.child1.color, "#eff0f1")
0204         compare(item.child2.color, "#eff0f1")
0205         compare(item.child3.color, "#eff0f1")
0206
0207         item.Kirigami.Theme.backgroundColor = "#ff0000"
0208
0209         waitForEvents()
0210
0211         compare(item.color, "#ff0000")
0212         compare(item.child1.color, "#ff0000")
0213         compare(item.child2.color, "#ff0000")
0214         compare(item.child3.color, "#ff0000")
0215
0216         item.child2.Kirigami.Theme.inherit = false
0217         item.child2.Kirigami.Theme.backgroundColor = "#00ff00"
0218
0219         waitForEvents()
0220
0221         compare(item.color, "#ff0000")
0222         compare(item.child1.color, "#ff0000")
0223         compare(item.child2.color, "#00ff00")
0224         compare(item.child3.color, "#00ff00")
0225
0226         item.child2.Kirigami.Theme.inherit = true
0227         item.child2.Kirigami.Theme.backgroundColor = undefined
0228
0229         waitForEvents()
0230
0231         compare(item.color, "#ff0000")
0232         compare(item.child1.color, "#ff0000")
0233         compare(item.child2.color, "#ff0000")
0234         compare(item.child3.color, "#ff0000")
0235
0236         item.child2.Kirigami.Theme.colorSet = Kirigami.Theme.Complementary
0237         item.child2.Kirigami.Theme.inherit = false
0238
0239         waitForEvents()
0240
0241         compare(item.color, "#ff0000")
0242         compare(item.child1.color, "#ff0000")
0243         compare(item.child2.color, "#31363b")
0244         compare(item.child3.color, "#31363b")
0245     }
0246
0247     Component {
0248         id: colorSet
0249
0250         Rectangle {
0251             Kirigami.Theme.colorSet: Kirigami.Theme.View
0252             color: Kirigami.Theme.backgroundColor
0253         }
0254     }
0255
0256     function test_colorset() {
0257         var item = createTemporaryObject(colorSet, testCase)
0258         verify(item)
0259
0260         waitForEvents()
0261
0262         compare(item.color, "#fcfcfc")
0263
0264         item.Kirigami.Theme.colorSet = Kirigami.Theme.Complementary
0265
0266         waitForEvents()
0267
0268         compare(item.color, "#31363b")
0269     }
0270
0271     Component {
0272         id: colorGroup
0273
0274         Rectangle {
0275             Kirigami.Theme.colorGroup: Kirigami.Theme.Disabled
0276             color: Kirigami.Theme.backgroundColor
0277         }
0278     }
0279
0280     function test_colorGroup() {
0281         var item = createTemporaryObject(colorGroup, testCase)
0282         verify(item)
0283
0284         waitForEvents()
0285
0286         var color = Qt.tint("#eff0f1", "transparent")
0287
0288         compare(item.color, Qt.hsva(color.hsvHue, color.hsvSaturation * 0.5, color.hsvValue * 0.8))
0289
0290         item.Kirigami.Theme.colorGroup = Kirigami.Theme.Inactive
0291
0292         waitForEvents()
0293
0294         compare(item.color, Qt.hsva(color.hsvHue, color.hsvSaturation * 0.5, color.hsvValue))
0295     }
0296
0297     Component {
0298         id: palette
0299
0300         Rectangle {
0301             color: Kirigami.Theme.backgroundColor
0302
0303             property alias child: button
0304
0305             Button {
0306                 id: button
0307                 palette: Kirigami.Theme.palette
0308             }
0309         }
0310     }
0311
0312     function test_palette() {
0313         var item = createTemporaryObject(palette, testCase)
0314         verify(item)
0315
0316         compare(item.child.background.color, "#eff0f1")
0317         compare(item.child.contentItem.color, "#31363b")
0318
0319         item.Kirigami.Theme.backgroundColor = "#ff0000"
0320
0321         waitForEvents()
0322
0323         compare(item.child.background.color, "#ff0000")
0324     }
0325 }