Added VH and VW units

Include/RmlUi/Core/Context.h

@@ -80,6 +80,9 @@ class RMLUICORE_API Context : public ScriptInterface
 	/// Returns the size ratio of 'dp' unit to 'px' unit
 	/// @return The current density-independent pixel ratio of the context.
 	float GetDensityIndependentPixelRatio() const;
+	/// Returns the ratop of 'vw' and 'vh' units in percent of viewport size
+	/// @return The current viewport-size percentage of the context.
+	Vector2f GetViewportSizePercentages() const;
 
 	/// Updates all elements in the context's documents. 
 	/// This must be called before Context::Render, but after any elements have been changed, added or removed.

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_ratio);
 	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/ElementUtilities.h

@@ -80,6 +80,10 @@ class RMLUICORE_API ElementUtilities
 	/// @param[in] element The element to determine the density-independent pixel ratio for.
 	/// @return The density-independent pixel ratio of the context, or 1.0 if no context assigned.
 	static float GetDensityIndependentPixelRatio(Element* element);
+	/// Returns an element's viewport-width and -height percentage sizes, defined by it's context
+	/// @param[in] element The element to viewport-width and -height percentage sizes for.
+	/// @return The viewport-width and -height percentage sizes of the context, or [1.0, 1.0] if no context assigned.
+	static Vector2f GetViewportSizePercentages(Element* element);
 	/// Returns the width of a string rendered within the context of the given element.
 	/// @param[in] element The element to measure the string from.
 	/// @param[in] string The string to measure.

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 'vh'; fetch as < float >
+        VH = 1 << 10,               // viewport-height percentage; number suffixed by 'dp'; 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
 	};
 

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_ratio)
 {
 	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_ratio.x;
+	case Property::VH:
+		return value * vp_ratio.y;
 
 	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_ratio)
 {
 	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_ratio.x;
+	case Property::VH:
+		return property.value.Get< float >()* vp_ratio.y;
 	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_ratio)
 {
 	// 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_ratio);
 }
 
 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_ratio)
 {
 	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_ratio);
 		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_ratio)
 {
 	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_ratio);
 		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_ratio)
 {
 	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_ratio));
 }
 
 
-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_ratio)
 {
 	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_ratio));
 }
 
-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_ratio)
 {
 	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_ratio));
 }
 
 

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_ratio);
 
-float ComputeAbsoluteLength(const Property& property, float dp_ratio);
+float ComputeAbsoluteLength(const Property& property, float dp_ratio, Vector2f vp_ratio);
 
 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_ratio);
 
 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_ratio);
 
-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_ratio);
 
-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_ratio);
 
-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_ratio);
 
-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_ratio);
 
 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());
@@ -163,6 +164,11 @@ float Context::GetDensityIndependentPixelRatio() const
 	return density_independent_pixel_ratio;
 }
 
+Vector2f Context::GetViewportSizePercentages() const
+{
+	return Vector2f(dimensions.x * 0.01f, dimensions.y * 0.01f);
+}
+
 // Updates all elements in the element tree.
 bool Context::Update()
 {
@@ -172,7 +178,9 @@ bool Context::Update()
 	for (auto& data_model : data_models)
 		data_model.second->Update(true);
 
-	root->Update(density_independent_pixel_ratio);
+	Vector2f vp_ratio = GetViewportSizePercentages();
+
+	root->Update(density_independent_pixel_ratio, vp_ratio);
 
 	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_ratio)
 {
 #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_ratio);
 }
 
 
@@ -188,15 +188,19 @@ void Element::UpdateProperties()
 
 		const ComputedValues* document_values = nullptr;
 		float dp_ratio = 1.0f;
+		Vector2f vp_ratio(1.0f);
 		if (auto doc = GetOwnerDocument())
 		{
 			document_values = &doc->GetComputedValues();
 			if (Context * context = doc->GetContext())
+			{
 				dp_ratio = context->GetDensityIndependentPixelRatio();
+				vp_ratio = context->GetViewportSizePercentages();
+			}
 		}
 
 		// 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_ratio);
 
 		computed_values_are_default_initialized = false;
 

Source/Core/ElementDocument.cpp

@@ -397,7 +397,8 @@ 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 Vector2f vp_ratio = (context ? context->GetViewportSizePercentages() : Vector2f(1.0f));
+	Update(dp_ratio, vp_ratio);
 	UpdateLayout();
 	UpdatePosition();
 }
@@ -483,6 +484,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 Vector2f vp_ratio = (context ? context->GetViewportSizePercentages() : Vector2f(1.0f));
+
+	child->Update(dp_ratio, vp_ratio);
 
 	return true;
 }