Media queries

CMake/FileList.cmake

@@ -45,9 +45,9 @@ set(Core_HDR_FILES
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/WidgetTextInputSingleLine.h
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/WidgetTextInputSingleLinePassword.h
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerDataGrid.h
+    ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerInclude.h
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerTabSet.h
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerTextArea.h
-    ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerInclude.h
     ${PROJECT_SOURCE_DIR}/Source/Core/ElementStyle.h
     ${PROJECT_SOURCE_DIR}/Source/Core/EventDispatcher.h
     ${PROJECT_SOURCE_DIR}/Source/Core/EventInstancerDefault.h
@@ -74,6 +74,7 @@ set(Core_HDR_FILES
     ${PROJECT_SOURCE_DIR}/Source/Core/precompiled.h
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertiesIterator.h
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserAnimation.h
+    ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserAspectRatio.h
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserColour.h
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserKeyword.h
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserNumber.h
@@ -203,6 +204,7 @@ set(Core_PUB_HDR_FILES
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/StreamMemory.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/StringUtilities.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/StyleSheet.h
+    ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/StyleSheetContainer.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/StyleSheetSpecification.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/SystemInterface.h
     ${PROJECT_SOURCE_DIR}/Include/RmlUi/Core/Texture.h
@@ -303,9 +305,9 @@ set(Core_SRC_FILES
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/WidgetTextInputSingleLine.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/WidgetTextInputSingleLinePassword.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerDataGrid.cpp
+    ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerInclude.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerTabSet.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerTextArea.cpp
-    ${PROJECT_SOURCE_DIR}/Source/Core/Elements/XMLNodeHandlerInclude.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/ElementScroll.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/ElementStyle.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/ElementText.cpp
@@ -350,6 +352,7 @@ set(Core_SRC_FILES
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyDefinition.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyDictionary.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserAnimation.cpp
+    ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserAspectRatio.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserColour.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserKeyword.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/PropertyParserNumber.cpp
@@ -363,6 +366,7 @@ set(Core_SRC_FILES
     ${PROJECT_SOURCE_DIR}/Source/Core/StreamMemory.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/StringUtilities.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/StyleSheet.cpp
+    ${PROJECT_SOURCE_DIR}/Source/Core/StyleSheetContainer.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/StyleSheetFactory.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/StyleSheetNode.cpp
     ${PROJECT_SOURCE_DIR}/Source/Core/StyleSheetNodeSelector.cpp

Include/RmlUi/Core.h

@@ -79,6 +79,7 @@
 #include "Core/Spritesheet.h"
 #include "Core/StringUtilities.h"
 #include "Core/StyleSheet.h"
+#include "Core/StyleSheetContainer.h"
 #include "Core/StyleSheetSpecification.h"
 #include "Core/SystemInterface.h"
 #include "Core/Texture.h"

Include/RmlUi/Core/Element.h

@@ -60,6 +60,7 @@ class PropertiesIteratorView;
 class PropertyDictionary;
 class RenderInterface;
 class StyleSheet;
+class StyleSheetContainer;
 class TransformState;
 struct ElementMeta;
 struct StackingOrderedChild;
@@ -104,7 +105,10 @@ class RMLUICORE_API Element : public ScriptInterface, public EnableObserverPtr<E
 
 	/// Returns the active style sheet for this element. This may be nullptr.
 	/// @return The element's style sheet.
-	virtual const SharedPtr<StyleSheet>& GetStyleSheet() const;
+	virtual const StyleSheet* GetStyleSheet() const;
+	/// Returns the active style sheet container for this element.
+	/// @return The element's style sheet.
+	virtual const SharedPtr<StyleSheetContainer>& GetStyleSheetContainer() const;
 
 	/// Returns the element's definition.
 	/// @return The element's definition.

Include/RmlUi/Core/ElementDocument.h

@@ -38,6 +38,7 @@ class Stream;
 class DocumentHeader;
 class ElementText;
 class StyleSheet;
+class StyleSheetContainer;
 
 /**
 	 ModalFlag used for controlling the modal state of the document.
@@ -83,10 +84,12 @@ class RMLUICORE_API ElementDocument : public Element
 	/// Returns the source address of this document.
 	const String& GetSourceURL() const;
 
-	/// Sets the style sheet this document, and all of its children, uses.
-	void SetStyleSheet(SharedPtr<StyleSheet> style_sheet);
 	/// Returns the document's style sheet.
-	const SharedPtr<StyleSheet>& GetStyleSheet() const override;
+	const StyleSheet* GetStyleSheet() const override;
+	/// Sets the style sheet this document, and all of its children, uses.
+	void SetStyleSheetContainer(SharedPtr<StyleSheetContainer> style_sheet);
+	/// Returns the document's style sheet container.
+	const SharedPtr<StyleSheetContainer>& GetStyleSheetContainer() const override;
 	/// Reload the document's style sheet from source files.
 	/// Styles will be reloaded from <style> tags and external style sheets, but not inline 'style' attributes.
 	/// @note The source url originally used to load the document must still be a valid RML document.
@@ -175,8 +178,8 @@ class RMLUICORE_API ElementDocument : public Element
 	// The original path this document came from
 	String source_url;
 
-	// The document's style sheet.
-	SharedPtr<StyleSheet> style_sheet;
+	// The document's style sheet container.
+	SharedPtr<StyleSheetContainer> style_sheet_container;
 
 	Context* context;
 

Include/RmlUi/Core/Factory.h

@@ -49,7 +49,7 @@ class EventListener;
 class EventListenerInstancer;
 class FontEffect;
 class FontEffectInstancer;
-class StyleSheet;
+class StyleSheetContainer;
 class PropertyDictionary;
 class PropertySpecification;
 class DecoratorInstancerInterface;
@@ -141,15 +141,15 @@ class RMLUICORE_API Factory
 	/// Creates a style sheet from a user-generated string.
 	/// @param[in] string The contents of the style sheet.
 	/// @return A pointer to the newly created style sheet.
-	static SharedPtr<StyleSheet> InstanceStyleSheetString(const String& string);
+	static SharedPtr<StyleSheetContainer> InstanceStyleSheetString(const String& string);
 	/// Creates a style sheet from a file.
 	/// @param[in] file_name The location of the style sheet file.
 	/// @return A pointer to the newly created style sheet.
-	static SharedPtr<StyleSheet> InstanceStyleSheetFile(const String& file_name);
+	static SharedPtr<StyleSheetContainer> InstanceStyleSheetFile(const String& file_name);
 	/// Creates a style sheet from an Stream.
 	/// @param[in] stream A pointer to the stream containing the style sheet's contents.
 	/// @return A pointer to the newly created style sheet.
-	static SharedPtr<StyleSheet> InstanceStyleSheetStream(Stream* stream);
+	static SharedPtr<StyleSheetContainer> InstanceStyleSheetStream(Stream* stream);
 	/// Clears the style sheet cache. This will force style sheets to be reloaded.
 	static void ClearStyleSheetCache();
 	/// Clears the template cache. This will force template to be reloaded.

Include/RmlUi/Core/ID.h

@@ -159,6 +159,14 @@ enum class PropertyId : uint8_t
 
 	FillImage,
 
+	AspectRatio,
+	MinAspectRatio,
+	MaxAspectRatio,
+	Resolution,
+	MinResolution,
+	MaxResolution,
+	Orientation,
+
 	NumDefinedIds,
 	FirstCustomId = NumDefinedIds,
 

Include/RmlUi/Core/Property.h

@@ -68,29 +68,30 @@ 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 >
-		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,
+		DPI = 1 << 9,               // dots per inch, density resolution; number suffixed by 'dpi'; fetch as < float >
+		VW = 1 << 10,               // viewport-width percentage; number suffixed by 'vw'; fetch as < float >
+		VH = 1 << 11,               // viewport-height percentage; number suffixed by 'vh'; fetch as < float >
+		ABSOLUTE_UNIT = NUMBER | PX | DP | DPI | DEG | RAD | COLOUR | VW | VH,
 
 		// Relative values.
-		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 >
+		EM = 1 << 12,               // number suffixed by 'em'; fetch as < float >
+		PERCENT = 1 << 13,          // number suffixed by '%'; fetch as < float >
+		REM = 1 << 14,              // number suffixed by 'rem'; fetch as < float >
 		RELATIVE_UNIT = EM | REM | PERCENT,
 
 		// Values based on pixels-per-inch.
-		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 >
+		INCH = 1 << 15,             // number suffixed by 'in'; fetch as < float >
+		CM = 1 << 16,               // number suffixed by 'cm'; fetch as < float >
+		MM = 1 << 17,               // number suffixed by 'mm'; fetch as < float >
+		PT = 1 << 18,               // number suffixed by 'pt'; fetch as < float >
+		PC = 1 << 19,               // number suffixed by 'pc'; fetch as < float >
 		PPI_UNIT = INCH | CM | MM | PT | PC,
 
-		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 >
+		TRANSFORM = 1 << 20,        // transform; fetch as < TransformPtr >, may be empty
+		TRANSITION = 1 << 21,       // transition; fetch as < TransitionList >
+		ANIMATION = 1 << 22,        // animation; fetch as < AnimationList >
+		DECORATOR = 1 << 23,        // decorator; fetch as < DecoratorsPtr >
+		FONTEFFECT = 1 << 24,       // font-effect; fetch as < FontEffectsPtr >
 
 		LENGTH = PX | DP | PPI_UNIT | EM | REM | VW | VH,
 		LENGTH_PERCENT = LENGTH | PERCENT,

Include/RmlUi/Core/StyleSheet.h

@@ -42,6 +42,7 @@ class Decorator;
 class FontEffect;
 class SpritesheetList;
 class Stream;
+class StyleSheetParser;
 struct Sprite;
 struct Spritesheet;
 
@@ -79,11 +80,8 @@ class RMLUICORE_API StyleSheet : public NonCopyMoveable
 	StyleSheet();
 	virtual ~StyleSheet();
 
-	/// Loads a style from a CSS definition.
-	bool LoadStyleSheet(Stream* stream, int begin_line_number = 1);
-
 	/// Combines this style sheet with another one, producing a new sheet.
-	SharedPtr<StyleSheet> CombineStyleSheet(const StyleSheet& sheet) const;
+	UniquePtr<StyleSheet> CombineStyleSheet(const StyleSheet& sheet) const;
 	/// Builds the node index for a combined style sheet.
 	void BuildNodeIndex();
 	/// Optimizes some properties for faster retrieval.
@@ -138,6 +136,8 @@ class RMLUICORE_API StyleSheet : public NonCopyMoveable
 	using ElementDefinitionCache = UnorderedMap< size_t, SharedPtr<ElementDefinition> >;
 	// Index of node sets to element definitions.
 	mutable ElementDefinitionCache node_cache;
+
+	friend StyleSheetParser;
 };
 
 } // namespace Rml

Include/RmlUi/Core/StyleSheetContainer.h

@@ -0,0 +1,76 @@
+/*
+ * This source file is part of RmlUi, the HTML/CSS Interface Middleware
+ *
+ * For the latest information, see http://github.com/mikke89/RmlUi
+ *
+ * Copyright (c) 2008-2010 CodePoint Ltd, Shift Technology Ltd
+ * Copyright (c) 2019 The RmlUi Team, and contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+#ifndef RMLUI_CORE_STYLESHEETCONTAINER_H
+#define RMLUI_CORE_STYLESHEETCONTAINER_H
+
+#include "Traits.h"
+#include "Property.h"
+
+namespace Rml {
+
+class PropertyDictionary;
+class Stream;
+class StyleSheet;
+
+/**
+	StyleSheetContainer contains a list of media blocks and creates a combined style sheet when getting
+	properties of the current context regarding the available media features.
+
+	@author Maximilian Stark
+ */
+
+class RMLUICORE_API StyleSheetContainer : public NonCopyMoveable
+{
+public:
+	StyleSheetContainer();
+	virtual ~StyleSheetContainer();
+
+	/// Loads a style from a CSS definition.
+	bool LoadStyleSheetContainer(Stream* stream, int begin_line_number = 1);
+
+	/// Returns the currently compiled style sheet that has been merged from incorporating all matching media blocks
+	/// or creates it ad-hoc if the given properties differ from the currently stored values.
+	/// @param[in] dimensions The current context viewport dimensions
+	/// @param[in] density_ratio The current context ratio of 'dp' units to 'px' units
+	StyleSheet* GetCompiledStyleSheet(Vector2i dimensions, float density_ratio);
+
+	/// Combines this style sheet container with another one, producing a new sheet container.
+	SharedPtr<StyleSheetContainer> CombineStyleSheetContainer(const StyleSheetContainer& container) const;
+
+private:
+	Vector<Pair<PropertyDictionary, UniquePtr<StyleSheet>>> media_blocks;
+
+	UniquePtr<StyleSheet> compiled_style_sheet;
+
+	Vector2i current_dimensions;
+	float current_density_ratio;
+};
+
+} // namespace Rml
+#endif

Samples/basic/demo/src/main.cpp

@@ -102,8 +102,8 @@ class DemoWindow : public Rml::EventListener
 				Rml::StreamMemory stream((Rml::byte*)style_sheet_content.data(), style_sheet_content.size());
 				stream.SetSourceURL("sandbox://default_rcss");
 
-				rml_basic_style_sheet = MakeShared<Rml::StyleSheet>();
-				rml_basic_style_sheet->LoadStyleSheet(&stream);
+				rml_basic_style_sheet = MakeShared<Rml::StyleSheetContainer>();
+				rml_basic_style_sheet->LoadStyleSheetContainer(&stream);
 			}
 
 			// Add sandbox style sheet text.
@@ -224,13 +224,13 @@ class DemoWindow : public Rml::EventListener
 	{
 		if (iframe && rml_basic_style_sheet)
 		{
-			auto style = Rml::MakeShared<Rml::StyleSheet>();
+			auto style = Rml::MakeShared<Rml::StyleSheetContainer>();
 			Rml::StreamMemory stream((const Rml::byte*)string.data(), string.size());
 			stream.SetSourceURL("sandbox://rcss");
 
-			style->LoadStyleSheet(&stream);
-			style = rml_basic_style_sheet->CombineStyleSheet(*style);
-			iframe->SetStyleSheet(style);
+			style->LoadStyleSheetContainer(&stream);
+			style = rml_basic_style_sheet->CombineStyleSheetContainer(*style);
+			iframe->SetStyleSheetContainer(style);
 		}
 	}
 
@@ -246,7 +246,7 @@ class DemoWindow : public Rml::EventListener
 	Rml::ElementDocument *document = nullptr;
 	Rml::ElementDocument *iframe = nullptr;
 	Rml::Element *gauge = nullptr, *progress_horizontal = nullptr;
-	Rml::SharedPtr<Rml::StyleSheet> rml_basic_style_sheet;
+	Rml::SharedPtr<Rml::StyleSheetContainer> rml_basic_style_sheet;
 
 	bool submitting = false;
 	double submitting_start_time = 0;

Source/Core/Context.cpp

@@ -39,6 +39,7 @@
 #include "../../Include/RmlUi/Core/SystemInterface.h"
 #include "../../Include/RmlUi/Core/StreamMemory.h"
 #include "DataModel.h"
+#include "ElementStyle.h"
 #include "EventDispatcher.h"
 #include "PluginRegistry.h"
 #include "StreamFile.h"
@@ -125,6 +126,9 @@ void Context::SetDimensions(const Vector2i _dimensions)
 			ElementDocument* document = root->GetChild(i)->GetOwnerDocument();
 			if (document != nullptr)
 			{
+				// Invalidate definition to force stylesheet recompilation
+				document->GetStyle()->DirtyDefinition();
+
 				document->DirtyVwAndVhProperties();
 				document->DirtyLayout();
 				document->DirtyPosition();
@@ -153,6 +157,9 @@ void Context::SetDensityIndependentPixelRatio(float _density_independent_pixel_r
 			ElementDocument* document = root->GetChild(i)->GetOwnerDocument();
 			if (document != nullptr)
 			{
+				// Invalidate definition to force stylesheet recompilation
+				document->GetStyle()->DirtyDefinition();
+
 				document->DirtyDpProperties();
 			}
 		}
@@ -1199,7 +1206,7 @@ void Context::CreateDragClone(Element* element)
 	cursor_proxy->AppendChild(std::move(element_drag_clone));
 
 	// Set the style sheet on the cursor proxy.
-	static_cast<ElementDocument&>(*cursor_proxy).SetStyleSheet(element->GetStyleSheet());
+	static_cast<ElementDocument&>(*cursor_proxy).SetStyleSheetContainer(element->GetOwnerDocument()->GetStyleSheetContainer());
 
 	// Set all the required properties and pseudo-classes on the clone.
 	drag_clone->SetPseudoClass("drag", true);