Make flex containers and tables with fixed width work in shrink-to-fi…

…t contexts, see #520
mikke89 · Oct 11, 2023 · 8a94ab7 · 8a94ab7
1 parent ee2986e
commit 8a94ab7
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 0 deletions.
diff --git a/Source/Core/Layout/ContainerBox.cpp b/Source/Core/Layout/ContainerBox.cpp
@@ -267,6 +267,16 @@ bool FlexContainer::Close(const Vector2f content_overflow_size, const Box& box,
 	return true;
 }
 
+float FlexContainer::GetShrinkToFitWidth() const
+{
+	// We don't currently support shrink-to-fit layout of flex containers. However, for the trivial case of a fixed
+	// width, we simply return that.
+	if (element->GetComputedValues().width().type == Style::Width::Type::Length)
+		return box.GetSize().x;
+
+	return 0.0f;
+}
+
 String FlexContainer::DebugDumpTree(int depth) const
 {
 	return String(depth * 2, ' ') + "FlexContainer" + " | " + LayoutDetails::GetDebugElementName(element);
@@ -291,6 +301,16 @@ void TableWrapper::Close(const Vector2f content_overflow_size, const Box& box, f
 	SetElementBaseline(element_baseline);
 }
 
+float TableWrapper::GetShrinkToFitWidth() const
+{
+	// We don't currently support shrink-to-fit layout of tables. However, for the trivial case of a fixed width, we
+	// simply return that.
+	if (element->GetComputedValues().width().type == Style::Width::Type::Length)
+		return box.GetSize().x;
+
+	return 0.0f;
+}
+
 String TableWrapper::DebugDumpTree(int depth) const
 {
 	return String(depth * 2, ' ') + "TableWrapper" + " | " + LayoutDetails::GetDebugElementName(element);

diff --git a/Source/Core/Layout/ContainerBox.h b/Source/Core/Layout/ContainerBox.h
@@ -131,6 +131,8 @@ class FlexContainer final : public ContainerBox {
 	// @returns True if it succeeds, otherwise false if it needs to be formatted again because scrollbars were enabled.
 	bool Close(const Vector2f content_overflow_size, const Box& box, float element_baseline);
 
+	float GetShrinkToFitWidth() const override;
+
 	const Box* GetIfBox() const override { return &box; }
 	String DebugDumpTree(int depth) const override;
 
@@ -152,6 +154,8 @@ class TableWrapper final : public ContainerBox {
 	// Submits the formatted box to the table element, and propagates any uncaught overflow to this box.
 	void Close(const Vector2f content_overflow_size, const Box& box, float element_baseline);
 
+	float GetShrinkToFitWidth() const override;
+
 	const Box* GetIfBox() const override { return &box; }
 	String DebugDumpTree(int depth) const override;
 

diff --git a/Tests/Data/VisualTests/shrink_to_fit_04.rml b/Tests/Data/VisualTests/shrink_to_fit_04.rml
@@ -0,0 +1,67 @@
+<rml>
+<head>
+	<title>Shrink-to-fit 4</title>
+	<link type="text/rcss" href="../style.rcss"/>
+	<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float" />
+	<meta name="Description" content="Shrink-to-fit should respect definite widths of inner elements. This also applies to flex containers and tables, even though we don't currently support shrink-to-fit layout for them." />
+	<style>
+		body {
+			background: #ddd;
+			color: #444;
+		}
+		body > div {
+			float: left;
+			clear: left;
+			margin-top: 20dp;
+			color: black;
+		}
+		.wrapper {
+			border: 2dp #888;
+			background: #f00;
+		}
+		.fixed {
+			width: 100dp;
+			padding: 10dp 5dp 10dp 15dp;
+			box-sizing: border-box;
+			background: #ccf;
+		}
+		.flex {
+			display: flex;
+		}
+	</style>
+</head>
+
+<body>
+<p>The following boxes should all appear the same, with a border wrapped all the way around the background and no red visible.</p>
+
+<div>
+	<div class="wrapper">
+		<div class="fixed">Hello</div>
+	</div>
+</div>
+<div>
+	<div class="wrapper">
+		<div>
+			<div class="fixed">Hello</div>
+		</div>
+	</div>
+</div>
+<div>
+	<div class="wrapper">
+		<div class="flex fixed"><div>Hello</div></div>
+	</div>
+</div>
+<div>
+	<div class="wrapper">
+		<div>
+			<div class="flex fixed"><div>Hello</div></div>
+		</div>
+	</div>
+</div>
+<div>
+	<div class="wrapper">
+		<table class="fixed"><td>Hello</td></table>
+	</div>
+</div>
+</body>
+</rml>