Added VH and VW units

Include/RmlUi/Core/Element.h

@@ -586,7 +586,7 @@ class RMLUICORE_API Element : public ScriptInterface, public EnableObserverPtr<E
 	const ComputedValues& GetComputedValues() const;
 
 protected:
-	void Update(float dp_ratio);
+	void Update(float dp_ratio, Vector2f vp_dimensions);
 	void Render();
 
 	/// Updates definition, computed values, and runs OnPropertyChange on this element.

Include/RmlUi/Core/ElementDocument.h

@@ -155,9 +155,12 @@ class RMLUICORE_API ElementDocument : public Element
 	/// Returns true if the document has been marked as needing a re-layout.
 	bool IsLayoutDirty() override;
 
-	/// Updates all sizes defined by the 'lp' unit.
+	/// Updates all sizes defined by the 'dp' unit.
 	void DirtyDpProperties();
 
+	/// Updates all sizes defined by the 'vw' and the 'vh' units.
+	void DirtyVwAndVhProperties();
+
 	/// Updates the layout if necessary.
 	void UpdateLayout();
 

Include/RmlUi/Core/ID.h

@@ -121,6 +121,7 @@ enum class PropertyId : uint8_t
 	Visibility,
 	BackgroundColor,
 	Color,
+	CaretColor,
 	ImageColor,
 	FontFamily,
 	FontStyle,

Include/RmlUi/Core/Property.h

@@ -66,32 +66,34 @@ class RMLUICORE_API Property
 		RAD = 1 << 6,               // number suffixed by 'rad'; fetch as < float >
 		COLOUR = 1 << 7,            // colour; fetch as < Colourb >
 		DP = 1 << 8,                // density-independent pixel; number suffixed by 'dp'; fetch as < float >
-		ABSOLUTE_UNIT = NUMBER | PX | DP | DEG | RAD | COLOUR,
+		VW = 1 << 9,                // viewport-width percentage; number suffixed by 'vw'; fetch as < float >
+		VH = 1 << 10,               // viewport-height percentage; number suffixed by 'vh'; fetch as < float >
+		ABSOLUTE_UNIT = NUMBER | PX | DP | DEG | RAD | COLOUR | VW | VH,
 
 		// Relative values.
-		EM = 1 << 9,                // number suffixed by 'em'; fetch as < float >
-		PERCENT = 1 << 10,          // number suffixed by '%'; fetch as < float >
-		REM = 1 << 11,              // number suffixed by 'rem'; fetch as < float >
+		EM = 1 << 11,               // number suffixed by 'em'; fetch as < float >
+		PERCENT = 1 << 12,          // number suffixed by '%'; fetch as < float >
+		REM = 1 << 13,              // number suffixed by 'rem'; fetch as < float >
 		RELATIVE_UNIT = EM | REM | PERCENT,
 
 		// Values based on pixels-per-inch.
-		INCH = 1 << 12,             // number suffixed by 'in'; fetch as < float >
-		CM = 1 << 13,               // number suffixed by 'cm'; fetch as < float >
-		MM = 1 << 14,               // number suffixed by 'mm'; fetch as < float >
-		PT = 1 << 15,               // number suffixed by 'pt'; fetch as < float >
-		PC = 1 << 16,               // number suffixed by 'pc'; fetch as < float >
+		INCH = 1 << 14,             // number suffixed by 'in'; fetch as < float >
+		CM = 1 << 15,               // number suffixed by 'cm'; fetch as < float >
+		MM = 1 << 16,               // number suffixed by 'mm'; fetch as < float >
+		PT = 1 << 17,               // number suffixed by 'pt'; fetch as < float >
+		PC = 1 << 18,               // number suffixed by 'pc'; fetch as < float >
 		PPI_UNIT = INCH | CM | MM | PT | PC,
 
-		TRANSFORM = 1 << 17,        // transform; fetch as < TransformPtr >, may be empty
-		TRANSITION = 1 << 18,       // transition; fetch as < TransitionList >
-		ANIMATION = 1 << 19,        // animation; fetch as < AnimationList >
-		DECORATOR = 1 << 20,        // decorator; fetch as < DecoratorsPtr >
-		FONTEFFECT = 1 << 21,       // font-effect; fetch as < FontEffectsPtr >
+		TRANSFORM = 1 << 19,        // transform; fetch as < TransformPtr >, may be empty
+		TRANSITION = 1 << 20,       // transition; fetch as < TransitionList >
+		ANIMATION = 1 << 21,        // animation; fetch as < AnimationList >
+		DECORATOR = 1 << 22,        // decorator; fetch as < DecoratorsPtr >
+		FONTEFFECT = 1 << 23,       // font-effect; fetch as < FontEffectsPtr >
 
-		LENGTH = PX | DP | PPI_UNIT | EM | REM,
+		LENGTH = PX | DP | PPI_UNIT | EM | REM | VW | VH,
 		LENGTH_PERCENT = LENGTH | PERCENT,
 		NUMBER_LENGTH_PERCENT = NUMBER | LENGTH | PERCENT,
-		ABSOLUTE_LENGTH = PX | DP | PPI_UNIT,
+		ABSOLUTE_LENGTH = PX | DP | PPI_UNIT | VH | VW,
 		ANGLE = DEG | RAD
 	};
 

Samples/basic/animation/data/animation.rml

@@ -153,9 +153,7 @@
 		}
 		/* -- TRANSITION TESTS */
 		#transition_test {
-			/*transition: padding-left 1.6s elastic-in 1.0, background-color 1.2s quadratic-in 1.0, transform 1.3s exponential-in 1.0;*/
-			transition: padding-left background-color transform 1.6s elastic-out 0.0;
-			transform: scale(1.0);
+			transition: all 1.6s elastic-out 0.0;
 		}
 		#transition_test:hover {
 			/*transition: padding-left background-color transform 0.8s quadratic-out 1.0;*/
@@ -164,11 +162,12 @@
 		} 
 		#transition_class {
 			margin-left: 50px;
-			transition: margin-left background-color 0.5s cubic-out;
+			transition: all 0.5s cubic-out;
+			cursor: pointer;
 		}
 		#transition_class.move_me {
 			margin-left: -50px;
-			font-size: 22px;
+			background-color: #dd3;
 		}
 
 		/* -- KEYFRAMES TESTS */

Samples/basic/demo/data/demo.rml

@@ -509,8 +509,9 @@ progressbar {
 #controls textarea 
 {
 	font-size: 18px;
-	font-effect: outline(2px #006600);
+	font-effect: outline(2px #060);
 	color: #ddd;
+	caret-color: #060;
 }
 #controls textarea selection
 {

Source/Core/ComputeProperty.cpp

@@ -56,7 +56,7 @@ float ResolveValue(Style::LengthPercentage length, float base_value)
 }
 
 
-float ComputeLength(const Property* property, float font_size, float document_font_size, float dp_ratio)
+float ComputeLength(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions)
 {
 	RMLUI_ASSERT(property);
 
@@ -75,6 +75,10 @@ float ComputeLength(const Property* property, float font_size, float document_fo
 		return value * document_font_size;
 	case Property::DP:
 		return value * dp_ratio;
+	case Property::VW:
+		return value * vp_dimensions.x * 0.01f;
+	case Property::VH:
+		return value * vp_dimensions.y * 0.01f;
 
 	case Property::DEG:
 		return Math::DegreesToRadians(value);
@@ -108,7 +112,7 @@ float ComputeLength(const Property* property, float font_size, float document_fo
 	return 0.0f;
 }
 
-float ComputeAbsoluteLength(const Property& property, float dp_ratio)
+float ComputeAbsoluteLength(const Property& property, float dp_ratio, Vector2f vp_dimensions)
 {
 	RMLUI_ASSERT(property.unit & Property::ABSOLUTE_LENGTH);
 
@@ -118,6 +122,10 @@ float ComputeAbsoluteLength(const Property& property, float dp_ratio)
 		return property.value.Get< float >();
 	case Property::DP:
 		return property.value.Get< float >()* dp_ratio;
+	case Property::VW:
+		return property.value.Get< float >()* vp_dimensions.x * 0.01f;
+	case Property::VH:
+		return property.value.Get< float >()* vp_dimensions.y * 0.01f;
 	default:
 		// Values based on pixels-per-inch.
 		if (property.unit & Property::PPI_UNIT)
@@ -165,7 +173,7 @@ float ComputeAngle(const Property& property)
 	return 0.0f;
 }
 
-float ComputeFontsize(const Property& property, const Style::ComputedValues& values, const Style::ComputedValues* parent_values, const Style::ComputedValues* document_values, float dp_ratio)
+float ComputeFontsize(const Property& property, const Style::ComputedValues& values, const Style::ComputedValues* parent_values, const Style::ComputedValues* document_values, float dp_ratio, Vector2f vp_dimensions)
 {
 	// The calculated value of the font-size property is inherited, so we need to check if this
 	// is an inherited property. If so, then we return our parent's font size instead.
@@ -196,7 +204,7 @@ float ComputeFontsize(const Property& property, const Style::ComputedValues& val
 		}
 	}
 
-	return ComputeAbsoluteLength(property, dp_ratio);
+	return ComputeAbsoluteLength(property, dp_ratio, vp_dimensions);
 }
 
 Style::Clip ComputeClip(const Property* property)
@@ -210,11 +218,11 @@ Style::Clip ComputeClip(const Property* property)
 	return Style::Clip();
 }
 
-Style::LineHeight ComputeLineHeight(const Property* property, float font_size, float document_font_size, float dp_ratio)
+Style::LineHeight ComputeLineHeight(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions)
 {
 	if (property->unit & Property::LENGTH)
 	{
-		float value = ComputeLength(property, font_size, document_font_size, dp_ratio);
+		float value = ComputeLength(property, font_size, document_font_size, dp_ratio, vp_dimensions);
 		return Style::LineHeight(value, Style::LineHeight::Length, value);
 	}
 
@@ -236,11 +244,11 @@ Style::LineHeight ComputeLineHeight(const Property* property, float font_size, f
 	return Style::LineHeight(value, Style::LineHeight::Number, scale_factor);
 }
 
-Style::VerticalAlign ComputeVerticalAlign(const Property* property, float line_height, float font_size, float document_font_size, float dp_ratio)
+Style::VerticalAlign ComputeVerticalAlign(const Property* property, float line_height, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions)
 {
 	if (property->unit & Property::LENGTH)
 	{
-		float value = ComputeLength(property, font_size, document_font_size, dp_ratio);
+		float value = ComputeLength(property, font_size, document_font_size, dp_ratio, vp_dimensions);
 		return Style::VerticalAlign(value);
 	}
 	else if (property->unit & Property::PERCENT)
@@ -252,17 +260,17 @@ Style::VerticalAlign ComputeVerticalAlign(const Property* property, float line_h
 	return Style::VerticalAlign((Style::VerticalAlign::Type)property->Get<int>());
 }
 
-Style::LengthPercentage ComputeLengthPercentage(const Property* property, float font_size, float document_font_size, float dp_ratio)
+Style::LengthPercentage ComputeLengthPercentage(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions)
 {
 	using namespace Style;
 	if (property->unit & Property::PERCENT)
 		return LengthPercentage(LengthPercentage::Percentage, property->Get<float>());
 
-	return LengthPercentage(LengthPercentage::Length, ComputeLength(property, font_size, document_font_size, dp_ratio));
+	return LengthPercentage(LengthPercentage::Length, ComputeLength(property, font_size, document_font_size, dp_ratio, vp_dimensions));
 }
 
 
-Style::LengthPercentageAuto ComputeLengthPercentageAuto(const Property* property, float font_size, float document_font_size, float dp_ratio)
+Style::LengthPercentageAuto ComputeLengthPercentageAuto(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions)
 {
 	using namespace Style;
 	// Assuming here that 'auto' is the only possible keyword
@@ -271,10 +279,10 @@ Style::LengthPercentageAuto ComputeLengthPercentageAuto(const Property* property
 	else if (property->unit & Property::KEYWORD)
 		return LengthPercentageAuto(LengthPercentageAuto::Auto);
 
-	return LengthPercentageAuto(LengthPercentageAuto::Length, ComputeLength(property, font_size, document_font_size, dp_ratio));
+	return LengthPercentageAuto(LengthPercentageAuto::Length, ComputeLength(property, font_size, document_font_size, dp_ratio, vp_dimensions));
 }
 
-Style::LengthPercentage ComputeOrigin(const Property* property, float font_size, float document_font_size, float dp_ratio)
+Style::LengthPercentage ComputeOrigin(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions)
 {
 	using namespace Style;
 	static_assert((int)OriginX::Left == (int)OriginY::Top && (int)OriginX::Center == (int)OriginY::Center && (int)OriginX::Right == (int)OriginY::Bottom, "");
@@ -294,7 +302,7 @@ Style::LengthPercentage ComputeOrigin(const Property* property, float font_size,
 	else if (property->unit & Property::PERCENT)
 		return LengthPercentage(LengthPercentage::Percentage, property->Get<float>());
 
-	return LengthPercentage(LengthPercentage::Length, ComputeLength(property, font_size, document_font_size, dp_ratio));
+	return LengthPercentage(LengthPercentage::Length, ComputeLength(property, font_size, document_font_size, dp_ratio, vp_dimensions));
 }
 
 

Source/Core/ComputeProperty.h

@@ -36,25 +36,25 @@ namespace Rml {
 class Property;
 
 // Note that percentages are not lengths! They have to be resolved elsewhere.
-float ComputeLength(const Property* property, float font_size, float document_font_size, float dp_ratio);
+float ComputeLength(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions);
 
-float ComputeAbsoluteLength(const Property& property, float dp_ratio);
+float ComputeAbsoluteLength(const Property& property, float dp_ratio, Vector2f vp_dimensions);
 
 float ComputeAngle(const Property& property);
 
-float ComputeFontsize(const Property& property, const Style::ComputedValues& values, const Style::ComputedValues* parent_values, const Style::ComputedValues* document_values, float dp_ratio);
+float ComputeFontsize(const Property& property, const Style::ComputedValues& values, const Style::ComputedValues* parent_values, const Style::ComputedValues* document_values, float dp_ratio, Vector2f vp_dimensions);
 
 Style::Clip ComputeClip(const Property* property);
 
-Style::LineHeight ComputeLineHeight(const Property* property, float font_size, float document_font_size, float dp_ratio);
+Style::LineHeight ComputeLineHeight(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions);
 
-Style::VerticalAlign ComputeVerticalAlign(const Property* property, float line_height, float font_size, float document_font_size, float dp_ratio);
+Style::VerticalAlign ComputeVerticalAlign(const Property* property, float line_height, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions);
 
-Style::LengthPercentage ComputeLengthPercentage(const Property* property, float font_size, float document_font_size, float dp_ratio);
+Style::LengthPercentage ComputeLengthPercentage(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions);
 
-Style::LengthPercentageAuto ComputeLengthPercentageAuto(const Property* property, float font_size, float document_font_size, float dp_ratio);
+Style::LengthPercentageAuto ComputeLengthPercentageAuto(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions);
 
-Style::LengthPercentage ComputeOrigin(const Property* property, float font_size, float document_font_size, float dp_ratio);
+Style::LengthPercentage ComputeOrigin(const Property* property, float font_size, float document_font_size, float dp_ratio, Vector2f vp_dimensions);
 
 extern const Style::ComputedValues DefaultComputedValues;
 

Source/Core/Context.cpp

@@ -125,6 +125,7 @@ void Context::SetDimensions(const Vector2i& _dimensions)
 			ElementDocument* document = root->GetChild(i)->GetOwnerDocument();
 			if (document != nullptr)
 			{
+				document->DirtyVwAndVhProperties();
 				document->DirtyLayout();
 				document->DirtyPosition();
 				document->DispatchEvent(EventId::Resize, Dictionary());
@@ -172,7 +173,9 @@ bool Context::Update()
 	for (auto& data_model : data_models)
 		data_model.second->Update(true);
 
-	root->Update(density_independent_pixel_ratio);
+	Vector2f vp_dimensions((float)dimensions.x, (float)dimensions.y);
+
+	root->Update(density_independent_pixel_ratio, vp_dimensions);
 
 	for (int i = 0; i < root->GetNumChildren(); ++i)
 		if (auto doc = root->GetChild(i)->GetOwnerDocument())

Source/Core/Element.cpp

@@ -143,7 +143,7 @@ Element::~Element()
 	element_meta_chunk_pool.DestroyAndDeallocate(meta);
 }
 
-void Element::Update(float dp_ratio)
+void Element::Update(float dp_ratio, Vector2f vp_dimensions)
 {
 #ifdef RMLUI_ENABLE_PROFILING
 	auto name = GetAddress(false, false);
@@ -172,7 +172,7 @@ void Element::Update(float dp_ratio)
 	}
 
 	for (size_t i = 0; i < children.size(); i++)
-		children[i]->Update(dp_ratio);
+		children[i]->Update(dp_ratio, vp_dimensions);
 }
 
 
@@ -188,15 +188,22 @@ void Element::UpdateProperties()
 
 		const ComputedValues* document_values = nullptr;
 		float dp_ratio = 1.0f;
+		Vector2f vp_dimensions(1.0f);
 		if (auto doc = GetOwnerDocument())
 		{
 			document_values = &doc->GetComputedValues();
 			if (Context * context = doc->GetContext())
+			{
 				dp_ratio = context->GetDensityIndependentPixelRatio();
+				Vector2i dimensions = context->GetDimensions();
+				vp_dimensions.x = (float)dimensions.x;
+				vp_dimensions.y = (float)dimensions.y;
+
+			}
 		}
 
 		// Compute values and clear dirty properties
-		PropertyIdSet dirty_properties = meta->style.ComputeValues(meta->computed_values, parent_values, document_values, computed_values_are_default_initialized, dp_ratio);
+		PropertyIdSet dirty_properties = meta->style.ComputeValues(meta->computed_values, parent_values, document_values, computed_values_are_default_initialized, dp_ratio, vp_dimensions);
 
 		computed_values_are_default_initialized = false;
 

Source/Core/ElementAnimation.cpp

@@ -408,7 +408,7 @@ bool ElementAnimation::InternalAddKey(float time, const Property& in_property, E
 
 	if (!(in_property.unit & valid_properties))
 	{
-		Log::Message(Log::LT_WARNING, "Property '%s' is not a valid target for interpolation.", in_property.ToString().c_str());
+		Log::Message(Log::LT_WARNING, "Property value '%s' is not a valid target for interpolation.", in_property.ToString().c_str());
 		return false;
 	}
 

Source/Core/ElementDocument.cpp

@@ -397,7 +397,9 @@ void ElementDocument::LoadExternalScript(const String& RMLUI_UNUSED_PARAMETER(so
 void ElementDocument::UpdateDocument()
 {
 	const float dp_ratio = (context ? context->GetDensityIndependentPixelRatio() : 1.0f);
-	Update(dp_ratio);
+	const Vector2i dimensions = (context ? context->GetDimensions() : Vector2i(1));
+	const Vector2f vp_dimensions((float)dimensions.x, (float)dimensions.y);
+	Update(dp_ratio, vp_dimensions);
 	UpdateLayout();
 	UpdatePosition();
 }
@@ -483,6 +485,12 @@ void ElementDocument::DirtyDpProperties()
 	GetStyle()->DirtyPropertiesWithUnitRecursive(Property::DP);
 }
 
+void ElementDocument::DirtyVwAndVhProperties()
+{
+	GetStyle()->DirtyPropertiesWithUnitRecursive(Property::VW);
+	GetStyle()->DirtyPropertiesWithUnitRecursive(Property::VH);
+}
+
 // Repositions the document if necessary.
 void ElementDocument::OnPropertyChange(const PropertyIdSet& changed_properties)
 {

Source/Core/ElementScroll.cpp

@@ -228,7 +228,11 @@ bool ElementScroll::CreateScrollbar(Orientation orientation)
 
 	// The construction of scrollbars can occur during layouting, then we need some properties and computed values straight away.
 	Context* context = element->GetContext();
-	child->Update(context ? context->GetDensityIndependentPixelRatio() : 1.0f);
+
+	const float dp_ratio = (context ? context->GetDensityIndependentPixelRatio() : 1.0f);
+	const Vector2i dimensions = (context ? context->GetDimensions() : Vector2i(1));
+	const Vector2f vp_dimensions((float)dimensions.x, (float)dimensions.y);
+	child->Update(dp_ratio, vp_dimensions);
 
 	return true;
 }