From 55e0fb973626fd44b67c1d5f42f80fd6e7008d43 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Lucas=20Golini?= <spartanj@gmail.com>
Date: Tue, 26 May 2026 21:57:32 -0300
Subject: [PATCH] float and clear fixes

---
 .../plans/reddit_old_thread_rendering_plan.md |  13 +-
 src/eepp/graphics/richtext.cpp                |   6 +-
 src/eepp/ui/css/stylesheetspecification.cpp   |  18 +-
 src/eepp/ui/uinode.cpp                        |  16 +-
 src/eepp/ui/uirichtext.cpp                    |   7 +-
 src/eepp/ui/uitextspan.cpp                    |   4 +-
 src/eepp/ui/uiwidget.cpp                      |   5 +-
 src/tests/unit_tests/uihtml_float_tests.cpp   |  92 +++++++++
 src/tests/unit_tests/uihtml_tests.cpp         | 181 +++++++++++++++++-
 9 files changed, 320 insertions(+), 22 deletions(-)

diff --git a/.agent/plans/reddit_old_thread_rendering_plan.md b/.agent/plans/reddit_old_thread_rendering_plan.md
index 2bcd562be..a5ad5384e 100644
--- a/.agent/plans/reddit_old_thread_rendering_plan.md
+++ b/.agent/plans/reddit_old_thread_rendering_plan.md
@@ -47,8 +47,12 @@ Current progress:
 - HTML `<button>` is created as an HTML rich-text element with browser-like inline-block defaults so it can participate in CSS display/float layout while still rendering child text. This fixes the top-row placement of old Reddit's `#redesign-beta-optin-btn`.
 - RichText virtual block breaks no longer split a line that contains only floats, allowing a following BFC to remain beside those floats in reduced cases.
 - Collapsed whitespace-only text between floated inline-display boxes no longer creates in-flow line content. This fixes the old Reddit `#sr-header-area .sr-list` placement: it now sits in the top row beside the floated redesign button and subreddit dropdown, instead of landing at `y=18` and overlapping `#header-bottom-left`.
-- The old Reddit subreddit bar now remains a single clipped 18px row under `white-space: nowrap`; the current smoke run reports `srList=(255,0 769x18)`.
-- Remaining visible blockers: the comment form spacing is too large; footer/comments vertical spacing still diverges from Chrome; additional form-control and header sprite details still need visual tightening.
+- The old Reddit subreddit bar now remains a single clipped 18px row under `white-space: nowrap`; the current smoke run reports `srList=(252,0 772x18)`.
+- CSS absolute font-size keywords now use the browser scale (`medium` = 16px, `small` = 13px, `x-small` = 10px) instead of the app theme's 12px UI default. This fixes old Reddit title and metadata sizing rules such as `.link .title { font-size: medium }` and `.tagline { font-size: x-small }`.
+- Floated inline text elements now follow CSS blockification: once `float` is not `none`, inline spans/anchors stop being rebuilt as inline text and enter the atomic float path. This fixes old Reddit's comment form footer links (`.help-toggle` and `a.reddiquette`) so they align to the right under the textarea.
+- `vertical-align` on an inline-block `UITextSpan` now applies to the inline-block box in the parent line, not to its own internal self text. This keeps old Reddit's `.domain a { display:inline-block; vertical-align:middle }` from inflating the anchor's own line box while preserving parent-line alignment semantics.
+- `clear` now ignores external float exclusions inherited from an outer formatting context. This matches the old Reddit `.entry { overflow:hidden }` BFC case: its child `.expando { clear:left }` must not clear the sibling `.midcol` float outside `.entry`. The current smoke run moves `.expando` from `y=126` to `y=119.609` and `.usertext-body .md` from `y=131` to `y=124.609`.
+- Remaining visible blockers: the main selftext and comment form still start lower than the Chrome reference; footer/comments vertical spacing still diverges from Chrome; additional form-control and header sprite details still need visual tightening.
 
 ## Reference Layout Invariants
 
@@ -84,6 +88,7 @@ Important behavior:
 - A block formatting context next to a float must not overlap the float. If there is enough horizontal space, it should sit beside the float; otherwise it moves below.
 - `overflow` values other than `visible` create a block formatting context for block boxes.
 - Floats participate in the current formatting context and must be visible to later sibling line layout until cleared or until their bottom is passed.
+- A `clear` inside a nested block formatting context clears floats from that same formatting context, not external float exclusions inherited only for line avoidance and BFC placement.
 
 Implementation gaps to investigate:
 
@@ -98,6 +103,7 @@ Reduced tests to add before the full-page comparison:
 - Left float plus following `overflow:hidden` block: old Reddit `.midcol` and `.entry` pattern, with `.entry.x >= midcol.right + margin`.
 - Left and right floats on the same line: following inline content uses the remaining middle strip.
 - Clear behavior inside a mixed float context: `.clearleft` lands below left floats but not necessarily right floats.
+- Clear behavior inside a nested BFC: a child with `clear:left` does not jump below an external sibling float from the parent formatting context.
 
 ### 2. Float Width Resolution
 
@@ -237,6 +243,7 @@ The screenshot is text-heavy. Issues here may look like float bugs even when pos
 Needs:
 
 - Old Reddit font sizing: `font-size: x-small`, percentages, and inherited line-height.
+- Inline-block `vertical-align` must align the atomic inline-block box in the parent line without changing the inline-block's own internal text line metrics.
 - Paragraph margin collapse or equivalent spacing close enough for old Reddit.
 - `textarea` dimensions from CSS and attributes: comment box should be large and aligned.
 - `input type=text` shortlink field width/height and border.
@@ -244,6 +251,8 @@ Needs:
 
 Reduced tests:
 
+- Absolute `font-size` keywords use the browser scale, while `smaller`/`larger` remain relative to the parent.
+- Inline-block with `vertical-align: middle` has the same own text line height as the baseline-aligned inline-block, while the parent line still applies the middle alignment.
 - `font-size:x-small` and percentage font-size inheritance.
 - Paragraph margins inside `.md`.
 - `textarea` with CSS width/height and `rows/cols`.
diff --git a/src/eepp/graphics/richtext.cpp b/src/eepp/graphics/richtext.cpp
index fe5b4e61a..f64668522 100644
--- a/src/eepp/graphics/richtext.cpp
+++ b/src/eepp/graphics/richtext.cpp
@@ -1054,7 +1054,8 @@ class RichTextInlineLayouter {
 			bool advanced = false;
 			if ( clearType == RichText::InlineClear::Left ||
 				 clearType == RichText::InlineClear::Both ) {
-				for ( auto& f : leftFloats ) {
+				for ( size_t i = externalLeftFloatCount; i < leftFloats.size(); ++i ) {
+					auto& f = leftFloats[i];
 					if ( f.Bottom > curY ) {
 						curY = f.Bottom;
 						advanced = true;
@@ -1063,7 +1064,8 @@ class RichTextInlineLayouter {
 			}
 			if ( clearType == RichText::InlineClear::Right ||
 				 clearType == RichText::InlineClear::Both ) {
-				for ( auto& f : rightFloats ) {
+				for ( size_t i = externalRightFloatCount; i < rightFloats.size(); ++i ) {
+					auto& f = rightFloats[i];
 					if ( f.Bottom > curY ) {
 						curY = f.Bottom;
 						advanced = true;
diff --git a/src/eepp/ui/css/stylesheetspecification.cpp b/src/eepp/ui/css/stylesheetspecification.cpp
index 9e6667b3f..a24f31da8 100644
--- a/src/eepp/ui/css/stylesheetspecification.cpp
+++ b/src/eepp/ui/css/stylesheetspecification.cpp
@@ -1201,7 +1201,7 @@ void StyleSheetSpecification::registerDefaultShorthandParsers() {
 	mShorthandParsers["border"] = [this]( const ShorthandDefinition* shorthand,
 										  std::string value ) -> std::vector<StyleSheetProperty> {
 		value = String::trim( value );
-		if ( value.empty() || "none" == value )
+		if ( value.empty() )
 			return {};
 
 		std::vector<StyleSheetProperty> properties;
@@ -1212,10 +1212,26 @@ void StyleSheetSpecification::registerDefaultShorthandParsers() {
 			if ( -1 !=
 				 String::valueIndex(
 					 tok, "none;hidden;dotted;dashed;solid;double;groove;ridge;inset;outset" ) ) {
+
+				// small hack to at least hide none borders until border-style is implemented
+				if ( tok == "none" ) {
+					int pos = getIndexEndingWith( propNames, "-width" );
+					if ( pos != -1 ) {
+						const ShorthandDefinition* shorthand = getShorthand( propNames[pos] );
+						if ( NULL != shorthand ) {
+							auto bbVec = mShorthandParsers["border-box"]( shorthand, "0" );
+							for ( auto& bb : bbVec )
+								properties.emplace_back( bb );
+						}
+					}
+					continue;
+				}
+
 				int pos = getIndexEndingWith( propNames, "-style" );
 				// boder-style is not implemented yet
 				if ( pos != -1 )
 					continue;
+
 			} else if ( Color::isColorString( tok ) || String::startsWith( tok, "var(" ) ) {
 				int pos = getIndexEndingWith( propNames, "-color" );
 				if ( pos != -1 ) {
diff --git a/src/eepp/ui/uinode.cpp b/src/eepp/ui/uinode.cpp
index 58752cb23..136a20053 100644
--- a/src/eepp/ui/uinode.cpp
+++ b/src/eepp/ui/uinode.cpp
@@ -1711,21 +1711,21 @@ Float UINode::lengthFromValue( const StyleSheetProperty& property,
 			std::string_view keyword = *it;
 			StyleSheetLength res;
 			if ( keyword == "xx-small" ) {
-				res.setValue( 0.6f, StyleSheetLength::Unit::Rem );
+				res.setValue( 9.f, StyleSheetLength::Unit::Px );
 			} else if ( keyword == "x-small" ) {
-				res.setValue( 0.75f, StyleSheetLength::Unit::Rem );
+				res.setValue( 10.f, StyleSheetLength::Unit::Px );
 			} else if ( keyword == "small" ) {
-				res.setValue( 0.89f, StyleSheetLength::Unit::Rem );
+				res.setValue( 13.f, StyleSheetLength::Unit::Px );
 			} else if ( keyword == "medium" ) {
-				res.setValue( 1.0f, StyleSheetLength::Unit::Rem );
+				res.setValue( 16.f, StyleSheetLength::Unit::Px );
 			} else if ( keyword == "large" ) {
-				res.setValue( 1.2f, StyleSheetLength::Unit::Rem );
+				res.setValue( 18.f, StyleSheetLength::Unit::Px );
 			} else if ( keyword == "x-large" ) {
-				res.setValue( 1.5f, StyleSheetLength::Unit::Rem );
+				res.setValue( 24.f, StyleSheetLength::Unit::Px );
 			} else if ( keyword == "xx-large" ) {
-				res.setValue( 2.0f, StyleSheetLength::Unit::Rem );
+				res.setValue( 32.f, StyleSheetLength::Unit::Px );
 			} else if ( keyword == "xxx-large" ) {
-				res.setValue( 3.0f, StyleSheetLength::Unit::Rem );
+				res.setValue( 48.f, StyleSheetLength::Unit::Px );
 			} else if ( keyword == "smaller" ) {
 				res.setValue( 0.85f, StyleSheetLength::Unit::Em );
 			} else if ( keyword == "larger" ) {
diff --git a/src/eepp/ui/uirichtext.cpp b/src/eepp/ui/uirichtext.cpp
index bd4d036d8..48a3e7697 100644
--- a/src/eepp/ui/uirichtext.cpp
+++ b/src/eepp/ui/uirichtext.cpp
@@ -1158,8 +1158,7 @@ void UIRichText::rebuildRichText( UILayout* container, RichText& richText, Intri
 			}
 			FontStyleConfig style = selfSpan->getFontStyleConfig();
 			style.BackgroundColor = Color::Transparent;
-			richText.addSpan( selfText, style, Rectf::Zero, Rectf::Zero, 0,
-							  toRichTextBaselineAlign( selfSpan->getBaselineAlign() ) );
+			richText.addSpan( selfText, style, Rectf::Zero, Rectf::Zero, 0, {} );
 			if ( shouldCollapse )
 				lastSpanEndsWithSpace = !selfText.empty() && selfText.back() == ' ';
 		}
@@ -1283,7 +1282,9 @@ void UIRichText::rebuildRichText( UILayout* container, RichText& richText, Intri
 
 		bool handled = false;
 
-		if ( widget->isType( UI_TYPE_HTML_WIDGET ) && widget->asType<UIHTMLWidget>()->isInline() ) {
+		if ( widget->isType( UI_TYPE_HTML_WIDGET ) && widget->asType<UIHTMLWidget>()->isInline() &&
+			 widget->asType<UIHTMLWidget>()->getCSSFloat() == CSSFloat::None &&
+			 !widget->asType<UIHTMLWidget>()->isOutOfFlow() ) {
 			UITextSpan* span = widget->asType<UITextSpan>();
 			span->setLayoutCharCount( 0 );
 			Rectf margin = span->getLayoutPixelsMargin();
diff --git a/src/eepp/ui/uitextspan.cpp b/src/eepp/ui/uitextspan.cpp
index 2484f146c..09fd53870 100644
--- a/src/eepp/ui/uitextspan.cpp
+++ b/src/eepp/ui/uitextspan.cpp
@@ -63,11 +63,11 @@ bool UITextSpan::isType( const Uint32& type ) const {
 }
 
 bool UITextSpan::isInline() const {
-	return mDisplay == CSSDisplay::Inline;
+	return mDisplay == CSSDisplay::Inline && getCSSFloat() == CSSFloat::None && !isOutOfFlow();
 }
 
 bool UITextSpan::isInlineBlock() const {
-	return mDisplay == CSSDisplay::InlineBlock;
+	return mDisplay == CSSDisplay::InlineBlock && getCSSFloat() == CSSFloat::None && !isOutOfFlow();
 }
 
 void UITextSpan::draw() {
diff --git a/src/eepp/ui/uiwidget.cpp b/src/eepp/ui/uiwidget.cpp
index 84ef53511..d3964677e 100644
--- a/src/eepp/ui/uiwidget.cpp
+++ b/src/eepp/ui/uiwidget.cpp
@@ -1019,7 +1019,10 @@ bool UIWidget::isInlineDisplay() const {
 	if ( isTextNode() )
 		return true;
 	if ( isType( UI_TYPE_HTML_WIDGET ) ) {
-		CSSDisplay d = static_cast<const UIHTMLWidget*>( this )->getDisplay();
+		auto* htmlWidget = static_cast<const UIHTMLWidget*>( this );
+		if ( htmlWidget->getCSSFloat() != CSSFloat::None || htmlWidget->isOutOfFlow() )
+			return false;
+		CSSDisplay d = htmlWidget->getDisplay();
 		return d == CSSDisplay::Inline || d == CSSDisplay::InlineBlock;
 	}
 	return false;
diff --git a/src/tests/unit_tests/uihtml_float_tests.cpp b/src/tests/unit_tests/uihtml_float_tests.cpp
index b36e9f8b9..887e7fb3b 100644
--- a/src/tests/unit_tests/uihtml_float_tests.cpp
+++ b/src/tests/unit_tests/uihtml_float_tests.cpp
@@ -508,6 +508,50 @@ UTEST( UIHTMLFloat, whitespaceBetweenInlineFloatsDoesNotPushFollowingBfc ) {
 	Engine::destroySingleton();
 }
 
+UTEST( UIHTMLFloat, rightFloatedInlineSpansAlignAtContainerRightAfterBlock ) {
+	init_float_test();
+	UISceneNode* sceneNode = SceneManager::instance()->getUISceneNode();
+
+	sceneNode->loadLayoutFromString( HTMLFormatter::HTMLtoXML( R"html(
+		<body style="margin:0">
+			<div id="editor" style="width:500px">
+				<textarea id="textarea" style="display:block;width:500px;height:100px"></textarea>
+				<div id="bottom" style="overflow:hidden;width:100%">
+					<span id="help" style="float:right;margin-left:10px">formatting help</span>
+					<a id="policy" style="float:right;margin-left:10px">content policy</a>
+				</div>
+			</div>
+		</body>
+	)html" ) );
+	sceneNode->updateDirtyLayouts();
+
+	auto* editor = sceneNode->find<UIWidget>( "editor" );
+	auto* bottom = sceneNode->find<UIWidget>( "bottom" );
+	auto* help = sceneNode->find<UIWidget>( "help" );
+	auto* policy = sceneNode->find<UIWidget>( "policy" );
+	ASSERT_TRUE( editor != nullptr );
+	ASSERT_TRUE( bottom != nullptr );
+	ASSERT_TRUE( help != nullptr );
+	ASSERT_TRUE( policy != nullptr );
+	ASSERT_TRUE( help->isType( UI_TYPE_HTML_WIDGET ) );
+	ASSERT_TRUE( policy->isType( UI_TYPE_HTML_WIDGET ) );
+	EXPECT_EQ( help->asType<UIHTMLWidget>()->getCSSFloat(), CSSFloat::Right );
+	EXPECT_EQ( policy->asType<UIHTMLWidget>()->getCSSFloat(), CSSFloat::Right );
+
+	Vector2f bottomPos = bottom->convertToWorldSpace( { 0, 0 } );
+	Vector2f helpPos = help->convertToWorldSpace( { 0, 0 } );
+	Vector2f policyPos = policy->convertToWorldSpace( { 0, 0 } );
+	Float bottomRight = bottomPos.x + bottom->getPixelsSize().getWidth();
+	Float helpRight = helpPos.x + help->getPixelsSize().getWidth();
+	Float policyRight = policyPos.x + policy->getPixelsSize().getWidth();
+
+	EXPECT_NEAR( helpRight, bottomRight, 1.f );
+	EXPECT_LE( policyRight, helpPos.x - help->getLayoutPixelsMargin().Left + 1.f );
+	EXPECT_NEAR( helpPos.y, policyPos.y, 1.f );
+
+	Engine::destroySingleton();
+}
+
 UTEST( UIHTMLFloat, autoHorizontalMarginsCenterBlockInsideFloat ) {
 	init_float_test();
 	UISceneNode* sceneNode = SceneManager::instance()->getUISceneNode();
@@ -804,6 +848,54 @@ UTEST( UIHTMLFloat, clearRight_RespectsRightFloats ) {
 	Engine::destroySingleton();
 }
 
+UTEST( UIHTMLFloat, clearInsideBlockFormattingContextIgnoresExternalFloat ) {
+	init_float_test();
+	UISceneNode* sceneNode = SceneManager::instance()->getUISceneNode();
+
+	UIRichText* container = UIRichText::New();
+	container->setParent( sceneNode->getRoot() );
+	container->setPixelsSize( 600, 400 );
+	container->setPixelsPosition( 10, 10 );
+	container->setLayoutSizePolicy( SizePolicy::Fixed, SizePolicy::WrapContent );
+
+	UIHTMLWidget* leftFloat = UIHTMLWidget::New();
+	leftFloat->setParent( container );
+	leftFloat->setPixelsSize( 100, 80 );
+	leftFloat->setCSSFloat( CSSFloat::Left );
+	leftFloat->setLayoutSizePolicy( SizePolicy::Fixed, SizePolicy::Fixed );
+
+	UIRichText* bfc = UIRichText::New();
+	bfc->setParent( container );
+	bfc->setDisplay( CSSDisplay::Block );
+	bfc->setLayoutSizePolicy( SizePolicy::MatchParent, SizePolicy::WrapContent );
+	bfc->applyProperty( StyleSheetProperty( "overflow", "hidden" ) );
+
+	UIHTMLWidget* beforeClear = UIHTMLWidget::New();
+	beforeClear->setParent( bfc );
+	beforeClear->setPixelsSize( 120, 20 );
+	beforeClear->setDisplay( CSSDisplay::Block );
+	beforeClear->setLayoutSizePolicy( SizePolicy::Fixed, SizePolicy::Fixed );
+
+	UIHTMLWidget* clearLeft = UIHTMLWidget::New();
+	clearLeft->setParent( bfc );
+	clearLeft->setPixelsSize( 120, 20 );
+	clearLeft->setDisplay( CSSDisplay::Block );
+	clearLeft->setCSSClear( CSSClear::Left );
+	clearLeft->setLayoutSizePolicy( SizePolicy::Fixed, SizePolicy::Fixed );
+
+	sceneNode->updateDirtyLayouts();
+
+	Vector2f floatPos = leftFloat->convertToWorldSpace( { 0, 0 } );
+	Vector2f bfcPos = bfc->convertToWorldSpace( { 0, 0 } );
+	Vector2f clearPos = clearLeft->convertToWorldSpace( { 0, 0 } );
+
+	EXPECT_GE( bfcPos.x, floatPos.x + leftFloat->getPixelsSize().getWidth() - 1.f );
+	EXPECT_LT( clearPos.y, floatPos.y + leftFloat->getPixelsSize().getHeight() - 1.f );
+	EXPECT_NEAR( clearPos.y, bfcPos.y + beforeClear->getPixelsSize().getHeight(), 1.f );
+
+	Engine::destroySingleton();
+}
+
 UTEST( UIHTMLFloat, mixedLeftRight_ContentBetween ) {
 	init_float_test();
 	UISceneNode* sceneNode = SceneManager::instance()->getUISceneNode();
diff --git a/src/tests/unit_tests/uihtml_tests.cpp b/src/tests/unit_tests/uihtml_tests.cpp
index d2c5998ec..6fd5d4927 100644
--- a/src/tests/unit_tests/uihtml_tests.cpp
+++ b/src/tests/unit_tests/uihtml_tests.cpp
@@ -219,6 +219,18 @@ UTEST( UIHTML, redditOldThreadWebViewSmoke ) {
 	auto srFlatList = sceneNode->getRoot()->querySelector( "#sr-header-area .sr-list .flat-list" );
 	auto headerBottomLeft = sceneNode->getRoot()->find( "header-bottom-left" );
 	auto dropChoices = sceneNode->getRoot()->querySelector( ".drop-choices.srdrop" );
+	auto selftextMd = sceneNode->getRoot()->querySelector( ".link .usertext-body .md" );
+	auto selftextFirstP = sceneNode->getRoot()->querySelector( ".link .usertext-body .md p" );
+	auto postTitle = sceneNode->getRoot()->querySelector( ".link .top-matter > p.title" );
+	auto postTagline = sceneNode->getRoot()->querySelector( ".link .top-matter > p.tagline" );
+	auto postExpando = sceneNode->getRoot()->querySelector( ".link .expando" );
+	auto postUsertext = sceneNode->getRoot()->querySelector( ".link .expando > form.usertext" );
+	auto commentArea = sceneNode->getRoot()->querySelector( ".commentarea" );
+	auto commentForm = sceneNode->getRoot()->find( "form-t3_1tk9dgh5ov" );
+	auto commentEdit = sceneNode->getRoot()->querySelector( ".commentarea .usertext-edit" );
+	auto commentTextarea = sceneNode->getRoot()->querySelector( ".commentarea textarea" );
+	auto commentHelpToggle = sceneNode->getRoot()->querySelector( ".commentarea .help-toggle" );
+	auto commentContentPolicy = sceneNode->getRoot()->querySelector( ".commentarea a.reddiquette" );
 
 	ASSERT_TRUE( side != nullptr );
 	ASSERT_TRUE( siteTable != nullptr );
@@ -232,6 +244,18 @@ UTEST( UIHTML, redditOldThreadWebViewSmoke ) {
 	ASSERT_TRUE( srFlatList != nullptr );
 	ASSERT_TRUE( headerBottomLeft != nullptr );
 	ASSERT_TRUE( dropChoices != nullptr );
+	ASSERT_TRUE( selftextMd != nullptr );
+	ASSERT_TRUE( selftextFirstP != nullptr );
+	ASSERT_TRUE( postTitle != nullptr );
+	ASSERT_TRUE( postTagline != nullptr );
+	ASSERT_TRUE( postExpando != nullptr );
+	ASSERT_TRUE( postUsertext != nullptr );
+	ASSERT_TRUE( commentArea != nullptr );
+	ASSERT_TRUE( commentForm != nullptr );
+	ASSERT_TRUE( commentEdit != nullptr );
+	ASSERT_TRUE( commentTextarea != nullptr );
+	ASSERT_TRUE( commentHelpToggle != nullptr );
+	ASSERT_TRUE( commentContentPolicy != nullptr );
 
 	UIWidget* content =
 		siteTable->getParent()->isWidget() ? siteTable->getParent()->asType<UIWidget>() : nullptr;
@@ -251,6 +275,26 @@ UTEST( UIHTML, redditOldThreadWebViewSmoke ) {
 	Vector2f headerBottomLeftPos =
 		headerBottomLeft->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
 	Vector2f dropChoicesPos = dropChoices->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f selftextMdPos = selftextMd->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f selftextFirstPPos =
+		selftextFirstP->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f postTitlePos = postTitle->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f postTaglinePos = postTagline->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f postExpandoPos = postExpando->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f postUsertextPos = postUsertext->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f commentAreaPos = commentArea->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f commentFormPos = commentForm->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f commentEditPos = commentEdit->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f commentTextareaPos =
+		commentTextarea->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f commentHelpTogglePos =
+		commentHelpToggle->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+	Vector2f commentContentPolicyPos =
+		commentContentPolicy->asType<UIWidget>()->convertToWorldSpace( { 0, 0 } );
+
+	auto fontSizeOf = []( Node* node ) -> Uint32 {
+		return node->isType( UI_TYPE_RICHTEXT ) ? node->asType<UIRichText>()->getFontSize() : 0;
+	};
 
 	std::cerr << "old reddit rects: "
 			  << "side=(" << sidePos.x << "," << sidePos.y << " "
@@ -291,7 +335,49 @@ UTEST( UIHTML, redditOldThreadWebViewSmoke ) {
 			  << dropChoices->asType<UIWidget>()->getPixelsSize().getHeight()
 			  << " visible=" << dropChoices->asType<UIWidget>()->isVisible() << " display="
 			  << CSSDisplayHelper::toString( dropChoices->asType<UIHTMLWidget>()->getDisplay() )
-			  << ")" << std::endl;
+			  << ") "
+			  << "selftextMd=(" << selftextMdPos.x << "," << selftextMdPos.y << " "
+			  << selftextMd->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << selftextMd->asType<UIWidget>()->getPixelsSize().getHeight()
+			  << " font=" << fontSizeOf( selftextMd ) << ") "
+			  << "selftextFirstP=(" << selftextFirstPPos.x << "," << selftextFirstPPos.y << " "
+			  << selftextFirstP->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << selftextFirstP->asType<UIWidget>()->getPixelsSize().getHeight()
+			  << " font=" << fontSizeOf( selftextFirstP ) << ") "
+			  << "postTitle=(" << postTitlePos.x << "," << postTitlePos.y << " "
+			  << postTitle->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << postTitle->asType<UIWidget>()->getPixelsSize().getHeight()
+			  << " font=" << fontSizeOf( postTitle ) << ") "
+			  << "postTagline=(" << postTaglinePos.x << "," << postTaglinePos.y << " "
+			  << postTagline->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << postTagline->asType<UIWidget>()->getPixelsSize().getHeight()
+			  << " font=" << fontSizeOf( postTagline ) << ") "
+			  << "postExpando=(" << postExpandoPos.x << "," << postExpandoPos.y << " "
+			  << postExpando->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << postExpando->asType<UIWidget>()->getPixelsSize().getHeight() << ") "
+			  << "postUsertext=(" << postUsertextPos.x << "," << postUsertextPos.y << " "
+			  << postUsertext->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << postUsertext->asType<UIWidget>()->getPixelsSize().getHeight() << ") "
+			  << "commentArea=(" << commentAreaPos.x << "," << commentAreaPos.y << " "
+			  << commentArea->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << commentArea->asType<UIWidget>()->getPixelsSize().getHeight() << ") "
+			  << "commentForm=(" << commentFormPos.x << "," << commentFormPos.y << " "
+			  << commentForm->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << commentForm->asType<UIWidget>()->getPixelsSize().getHeight() << ") "
+			  << "commentEdit=(" << commentEditPos.x << "," << commentEditPos.y << " "
+			  << commentEdit->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << commentEdit->asType<UIWidget>()->getPixelsSize().getHeight() << ") "
+			  << "commentTextarea=(" << commentTextareaPos.x << "," << commentTextareaPos.y << " "
+			  << commentTextarea->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << commentTextarea->asType<UIWidget>()->getPixelsSize().getHeight() << ") "
+			  << "commentContentPolicy=(" << commentContentPolicyPos.x << ","
+			  << commentContentPolicyPos.y << " "
+			  << commentContentPolicy->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << commentContentPolicy->asType<UIWidget>()->getPixelsSize().getHeight() << ") "
+			  << "commentHelpToggle=(" << commentHelpTogglePos.x << "," << commentHelpTogglePos.y
+			  << " " << commentHelpToggle->asType<UIWidget>()->getPixelsSize().getWidth() << "x"
+			  << commentHelpToggle->asType<UIWidget>()->getPixelsSize().getHeight() << ")"
+			  << std::endl;
 
 	const Float midcolCenter =
 		midcolPos.x + midcol->asType<UIWidget>()->getPixelsSize().getWidth() / 2.f;
@@ -305,13 +391,19 @@ UTEST( UIHTML, redditOldThreadWebViewSmoke ) {
 			   win->getWidth() - srListPos.x + 1.f );
 	EXPECT_LE( srList->asType<UIWidget>()->getPixelsSize().getHeight(),
 			   srHeader->asType<UIWidget>()->getPixelsSize().getHeight() + 1.f );
-	EXPECT_EQ( srFlatList->asType<UIRichText>()->getRichTextPtr()->getLines().size(),
-			   (size_t)1 );
+	EXPECT_EQ( srFlatList->asType<UIRichText>()->getRichTextPtr()->getLines().size(), (size_t)1 );
 	EXPECT_NEAR( srFlatListPos.y, srHeaderPos.y, 1.f );
 	EXPECT_GE( headerBottomLeftPos.y,
 			   srHeaderPos.y + srHeader->asType<UIWidget>()->getPixelsSize().getHeight() - 1.f );
 	EXPECT_FALSE( dropChoices->asType<UIWidget>()->isVisible() );
 	EXPECT_EQ( dropChoices->asType<UIHTMLWidget>()->getDisplay(), CSSDisplay::None );
+	EXPECT_NEAR(
+		commentHelpTogglePos.x + commentHelpToggle->asType<UIWidget>()->getPixelsSize().getWidth(),
+		commentEditPos.x + commentEdit->asType<UIWidget>()->getPixelsSize().getWidth(), 1.f );
+	EXPECT_LE( commentContentPolicyPos.x +
+				   commentContentPolicy->asType<UIWidget>()->getPixelsSize().getWidth(),
+			   commentHelpTogglePos.x -
+				   commentHelpToggle->asType<UIWidget>()->getLayoutPixelsMargin().Left + 1.f );
 
 	auto* arrowBackground = arrow->asType<UIWidget>()->getBackground();
 	ASSERT_TRUE( arrowBackground != nullptr );
@@ -348,6 +440,40 @@ UTEST( UIHTML, StrikeElementUsesDefaultLineThrough ) {
 	Engine::destroySingleton();
 }
 
+UTEST( UIHTML, FontSizeAbsoluteKeywordsUseBrowserScale ) {
+	init_ui_test();
+	UISceneNode* sceneNode = SceneManager::instance()->getUISceneNode();
+
+	sceneNode->loadLayoutFromString( HTMLFormatter::HTMLtoXML( R"html(
+		<body>
+			<div id="xsmall" style="font-size: x-small">x-small</div>
+			<div id="small" style="font-size: small">small</div>
+			<div id="medium" style="font-size: medium">medium</div>
+			<div id="large" style="font-size: large">large</div>
+			<div id="parent" style="font-size: 20px">
+				<span id="smaller" style="font-size: smaller">smaller</span>
+				<span id="larger" style="font-size: larger">larger</span>
+			</div>
+		</body>
+	)html" ) );
+	SceneManager::instance()->update();
+
+	auto fontSize = [sceneNode]( const std::string& id ) {
+		auto* node = sceneNode->getRoot()->find( id );
+		return node->isType( UI_TYPE_TEXTSPAN ) ? node->asType<UITextSpan>()->getFontSize()
+												: node->asType<UIRichText>()->getFontSize();
+	};
+
+	EXPECT_EQ( fontSize( "xsmall" ), 10u );
+	EXPECT_EQ( fontSize( "small" ), 13u );
+	EXPECT_EQ( fontSize( "medium" ), 16u );
+	EXPECT_EQ( fontSize( "large" ), 18u );
+	EXPECT_EQ( fontSize( "smaller" ), 17u );
+	EXPECT_EQ( fontSize( "larger" ), 24u );
+
+	Engine::destroySingleton();
+}
+
 UTEST( UIHTML, WhiteSpaceNowrapDisablesSoftWrap ) {
 	init_ui_test();
 	UISceneNode* sceneNode = SceneManager::instance()->getUISceneNode();
@@ -668,6 +794,55 @@ UTEST( UIHTML, InlineBaselineAlignmentProperties ) {
 	Engine::destroySingleton();
 }
 
+UTEST( UIHTML, InlineBlockVerticalAlignDoesNotInflateOwnTextLine ) {
+	Engine::instance()->createWindow( WindowSettings( 800, 600, "Inline Block Vertical Align Test",
+													  WindowStyle::Default, WindowBackend::Default,
+													  32, {}, 1, false, true ),
+									  ContextSettings( false, 0, 0, GLv_default, true, false ) );
+	FileSystem::changeWorkingDirectory( Sys::getProcessPath() );
+
+	FontTrueType* font = FontTrueType::New( "NotoSans-Regular" );
+	font->loadFromFile( "../assets/fonts/NotoSans-Regular.ttf" );
+	ASSERT_TRUE( font != nullptr && font->loaded() );
+	FontFamily::loadFromRegular( font );
+
+	UI::UISceneNode* sceneNode = UI::UISceneNode::New();
+	SceneManager::instance()->add( sceneNode );
+	sceneNode->getUIThemeManager()->setDefaultFont( font );
+	sceneNode->loadLayoutFromString( R"html(
+		<vbox layout_width="wrap_content" layout_height="wrap_content">
+			<RichText id="baseline" font-size="16dp" layout_width="wrap_content" layout_height="wrap_content">
+				A<span id="base_box" display="inline-block" font-size="10dp" vertical-align="baseline">self.cpp</span>
+			</RichText>
+			<RichText id="middle" font-size="16dp" layout_width="wrap_content" layout_height="wrap_content">
+				A<span id="middle_box" display="inline-block" font-size="10dp" vertical-align="middle">self.cpp</span>
+			</RichText>
+		</vbox>
+	)html" );
+	sceneNode->updateDirtyLayouts();
+
+	auto* baseline = sceneNode->getRoot()->find( "baseline" )->asType<UIRichText>();
+	auto* middle = sceneNode->getRoot()->find( "middle" )->asType<UIRichText>();
+	auto* baselineBox = sceneNode->getRoot()->find( "base_box" )->asType<UITextSpan>();
+	auto* middleBox = sceneNode->getRoot()->find( "middle_box" )->asType<UITextSpan>();
+	ASSERT_TRUE( baseline != nullptr );
+	ASSERT_TRUE( middle != nullptr );
+	ASSERT_TRUE( baselineBox != nullptr );
+	ASSERT_TRUE( middleBox != nullptr );
+
+	ASSERT_EQ( baselineBox->getRichTextPtr()->getLines().size(), (size_t)1 );
+	ASSERT_EQ( middleBox->getRichTextPtr()->getLines().size(), (size_t)1 );
+	EXPECT_NEAR( middleBox->getPixelsSize().getHeight(), baselineBox->getPixelsSize().getHeight(),
+				 0.5f );
+	EXPECT_NEAR( middleBox->getRichTextPtr()->getLines().front().height,
+				 baselineBox->getRichTextPtr()->getLines().front().height, 0.5f );
+	EXPECT_EQ( middleBox->getBaselineAlign().type, CSSBaselineAlignment::Middle );
+	EXPECT_GE( middle->getRichTextPtr()->getLines().front().height,
+			   baseline->getRichTextPtr()->getLines().front().height );
+
+	Engine::destroySingleton();
+}
+
 UTEST( UIHTMLTable, complexLayout3 ) {
 	auto win = Engine::instance()->createWindow(
 		WindowSettings( 1024, 650, "HTML Tables Test 3", WindowStyle::Default,