Browse Source

Make text decorators update when the color or font is changed, fixes #817

Michael Ragazzon 3 months ago
parent
commit
3a1bd2829b
2 changed files with 26 additions and 0 deletions
  1. 6 0
      Source/Core/Element.cpp
  2. 20 0
      Tests/Data/VisualTests/text_decorator.rml

+ 6 - 0
Source/Core/Element.cpp

@@ -1916,9 +1916,15 @@ void Element::OnPropertyChange(const PropertyIdSet& changed_properties)
 		meta->effects.DirtyEffects();
 	}
 
+	const bool font_changed = (changed_properties.Contains(PropertyId::FontFamily) || changed_properties.Contains(PropertyId::FontStyle) ||
+		changed_properties.Contains(PropertyId::FontWeight) || changed_properties.Contains(PropertyId::FontSize) ||
+		changed_properties.Contains(PropertyId::LetterSpacing));
+
 	// Dirty the effects data when their visual looks may have changed.
 	if (border_radius_changed ||                            //
+		font_changed ||                                     //
 		changed_properties.Contains(PropertyId::Opacity) || //
+		changed_properties.Contains(PropertyId::Color) ||   //
 		changed_properties.Contains(PropertyId::ImageColor))
 	{
 		meta->effects.DirtyEffectsData();

+ 20 - 0
Tests/Data/VisualTests/text_decorator.rml

@@ -47,6 +47,15 @@
 		.misc > :nth-child(4) { decorator: text("Hello 🌎 world!" fuchsia 20px 20%); }
 		.misc > :nth-child(5) { decorator: text("Hello 🌎 world!" fuchsia 20px 20%); opacity: 0.5; }
 
+		group.hover > :nth-child(n) { decorator: text("Hello 🌎 world!"); }
+		.hover > :nth-child(1):hover { color: red; }
+		.hover > :nth-child(2):hover { opacity: 0.5; }
+		.hover > :nth-child(3):hover { font-style: italic; }
+		.hover > :nth-child(4):hover { font-weight: bold; }
+		.hover > :nth-child(5):hover { letter-spacing: 3dp; }
+		.hover > :nth-child(6):hover { font-family: "rmlui-debugger-font"; }
+		.hover > :nth-child(7):hover { font-size: 18dp; }
+
 	</style>
 </head>
 
@@ -83,5 +92,16 @@ Miscellaneous
 	<div/>
 	<div/>
 </group>
+
+Inherit font change on hover
+<group id="hover" class="hover">
+	<div/>
+	<div/>
+	<div/>
+	<div/>
+	<div/>
+	<div/>
+	<div/>
+</group>
 </body>
 </rml>