Treat width/height px units as dp in HTML environments for better scaling.

.ecode/project_build.json

@@ -604,6 +604,18 @@
         "command": "${project_root}/bin/unit_tests/eepp-unit_tests-debug",
         "name": "eepp-unit_test-debug",
         "working_dir": "${project_root}/bin/"
+      },
+      {
+        "args": "",
+        "command": "${project_root}/bin/eepp-ui-html-debug",
+        "name": "eepp-ui-html-debug",
+        "working_dir": "${project_root}/bin/"
+      },
+      {
+        "args": "",
+        "command": "${project_root}/bin/eepp-ui-markdownview-debug",
+        "name": "eepp-ui-markdownview-debug",
+        "working_dir": "${project_root}/bin/"
       }
     ],
     "var": {

bin/assets/ui/breeze.css

@@ -168,6 +168,10 @@ img {
 	layout-height: wrap_content;
 }
 
+body img {
+	scale-type: expand;
+}
+
 markdownview {
 	background-color: var(--list-back);
 	padding: 4dp;
@@ -179,6 +183,7 @@ markdownview h2 {
 }
 
 markdownview img {
+	scale-type: fit-inside;
 	max-width: 100%;
 	max-height: 100vh;
 }

src/eepp/ui/css/stylesheetlength.cpp

@@ -117,7 +117,7 @@ StyleSheetLength::Unit StyleSheetLength::unitFromString( std::string unitStr ) {
 		case UnitHashes::Dpr:
 			return Unit::Dpr;
 	}
-	return Unit::Px;
+	return Unit::Dp;
 }
 
 std::string StyleSheetLength::unitToString( const StyleSheetLength::Unit& unit ) {

src/eepp/ui/htmlinput.cpp

@@ -14,6 +14,7 @@ HTMLInput* HTMLInput::New() {
 }
 
 HTMLInput::HTMLInput() : UIWidget( "input" ) {
+	mFlags |= UI_HTML_ELEMENT;
 	mWidthPolicy = SizePolicy::WrapContent;
 	mHeightPolicy = SizePolicy::WrapContent;
 	createChildWidget();
@@ -124,6 +125,8 @@ void HTMLInput::createChildWidget() {
 		mChildWidget = HTMLTextInput::New();
 	}
 
+	mChildWidget->setFlags( UI_HTML_ELEMENT );
+
 	if ( mChildWidget ) {
 		mChildWidget->setParent( this );
 		mChildWidget->setLayoutWidthPolicy( SizePolicy::WrapContent );

src/eepp/ui/htmltextarea.cpp

@@ -12,6 +12,7 @@ HTMLTextArea* HTMLTextArea::New() {
 
 HTMLTextArea::HTMLTextArea() : UITextEdit() {
 	setElementTag( "textarea" );
+	mFlags |= UI_HTML_ELEMENT;
 	mWidthPolicy = SizePolicy::WrapContent;
 	mHeightPolicy = SizePolicy::WrapContent;
 	invalidateIntrinsicSize();

src/eepp/ui/uinode.cpp

@@ -1755,8 +1755,13 @@ Float UINode::convertLength( const CSS::StyleSheetLength& length,
 		}
 	}
 
-	return length.asPixels( containerLength, getSceneNode()->getPixelsSize(),
-							getSceneNode()->getDPI(), elFontSize, rootFontSize );
+	auto ret = length.asPixels( containerLength, getSceneNode()->getPixelsSize(),
+								getSceneNode()->getDPI(), elFontSize, rootFontSize );
+
+	if ( ( mFlags & UI_HTML_ELEMENT ) && length.getUnit() == StyleSheetLength::Unit::Px )
+		ret = PixelDensity::dpToPx( ret ); // scale px as if where dp in HTML elements
+
+	return ret;
 }
 
 Float UINode::convertLengthAsDp( const CSS::StyleSheetLength& length,

src/examples/ui_html/ui_html.cpp

@@ -39,6 +39,7 @@ EE_MAIN_FUNC int main( int, char** ) {
 	auto mainContainer = ui->find( "html_doc" );
 	auto backBtn = ui->find( "backbtn" )->asType<UIPushButton>();
 	auto fwdBtn = ui->find( "fwdbtn" )->asType<UIPushButton>();
+	auto scrollView = ui->find( "html_view" )->asType<UIScrollView>();
 	std::vector<URI> history;
 	int historyIndex = -1;
 
@@ -47,15 +48,17 @@ EE_MAIN_FUNC int main( int, char** ) {
 		fwdBtn->setEnabled( historyIndex < static_cast<int>( history.size() ) - 1 );
 	};
 
-	const auto loadDocumentData = [ui, mainContainer, urlBar, &app]( URI url, std::string& data ) {
+	const auto loadDocumentData = [ui, mainContainer, urlBar, &app,
+								   scrollView]( URI url, std::string& data ) {
 		if ( data.empty() )
 			return;
-		ui->ensureMainThread( [url, data, mainContainer, urlBar, ui, &app] {
+		ui->ensureMainThread( [url, data, mainContainer, urlBar, ui, &app, scrollView] {
 			mainContainer->closeAllChildren();
 			ui->getStyleSheet().removeAllWithoutMarker( app.getStyleSheetDefaultMarker() );
 			ui->setURIFromURL( url );
 			auto urlStr = url.toString();
 			auto hash = String::hash( urlStr );
+			scrollView->getVerticalScrollBar()->setValue( 0 );
 			ui->loadLayoutFromString( HTMLFormatter::HTMLtoXML( data ), mainContainer, hash );
 			urlBar->setText( urlStr );
 		} );

src/tests/unit_tests/richtext.cpp

@@ -9,8 +9,8 @@
 #include <eepp/system/filesystem.hpp>
 #include <eepp/system/scopedop.hpp>
 #include <eepp/system/sys.hpp>
-#include <eepp/ui/uihtmltable.hpp>
 #include <eepp/ui/uiapplication.hpp>
+#include <eepp/ui/uihtmltable.hpp>
 #include <eepp/ui/uirichtext.hpp>
 #include <eepp/ui/uiscenenode.hpp>
 #include <eepp/ui/uitextspan.hpp>
@@ -248,8 +248,9 @@ UTEST( RichText, RichTextTest ) {
 	};
 
 	const auto& runTest = [&createRichText, &utest_result]() {
-		auto win =
-			Engine::instance()->createWindow( WindowSettings( 1024, 650, "RichText Example" ) );
+		auto win = Engine::instance()->createWindow(
+			WindowSettings( 1024, 650, "RichText Example", WindowStyle::Default,
+							WindowBackend::Default, 32, "", 1, EE_SCREEN_KEYBOARD_ENABLED, true ) );
 
 		if ( !win->isOpen() )
 			return;
@@ -684,7 +685,8 @@ UTEST( UIRichText, WhitespaceCollapseTest ) {
 
 	// Only 1 text span ("Hello") should be generated,
 	// the whitespace between <span> and <ul>, and after <ul>
-	// should be correctly collapsed into nothing since they aren't adjacent to inline elements on both sides.
+	// should be correctly collapsed into nothing since they aren't adjacent to inline elements on
+	// both sides.
 	EXPECT_EQ( spanCount, 1 );
 
 	eeDelete( sceneNode );
@@ -869,7 +871,8 @@ UTEST( UIRichText, WhitespaceCollapseBRTest ) {
 	// The "ecode" text span should NOT have a leading space.
 	bool foundEcodeWithLeadingSpace = false;
 	auto checkSpansRecursive = [&]( Node* n, auto&& checkSpansRecursiveRef ) -> void {
-		if ( !n ) return;
+		if ( !n )
+			return;
 		if ( n->isWidget() && n->isType( UI_TYPE_TEXTSPAN ) ) {
 			UI::UITextSpan* span = static_cast<UI::UITextSpan*>( n );
 			if ( span->getText().size() > 0 && span->getText()[0] == ' ' &&
@@ -1020,5 +1023,3 @@ UTEST( UIRichText, CustomBRHeight ) {
 	eeDelete( sceneNode );
 	Engine::destroySingleton();
 }
-
-

src/tests/unit_tests/uicodeeditor_test.cpp

@@ -105,7 +105,7 @@ UTEST( UICodeEditor, DocumentViewStressTest ) {
 	UIApplication app(
 		WindowSettings( 800, 600, "eepp - Stress Test", WindowStyle::Default,
 						WindowBackend::Default, 32 ),
-		UIApplication::Settings( Sys::getProcessPath() + ".." + FileSystem::getOSSlash() ) );
+		UIApplication::Settings( Sys::getProcessPath() + ".." + FileSystem::getOSSlash(), 1 ) );
 
 	auto* editor = UICodeEditor::New();
 	editor->setParent( (Node*)app.getUI() );