flex: added support for align-content property

tordex · tordex · commit ce7d5a16fc4a · 2023-12-23T17:31:09.000+03:00
diff --git a/include/litehtml/types.h b/include/litehtml/types.h
@@ -874,12 +874,14 @@ namespace litehtml
 		flex_align_items_auto // used for align-self property only
 	};
 
-#define flex_align_content_strings		"flex-start;flex-end;center;space-between;space-around;stretch"
+#define flex_align_content_strings		"flex-start;start;flex-end;end;center;space-between;space-around;stretch"
 
 	enum flex_align_content
 	{
 		flex_align_content_flex_start,
+		flex_align_content_start,
 		flex_align_content_flex_end,
+		flex_align_content_end,
 		flex_align_content_center,
 		flex_align_content_space_between,
 		flex_align_content_space_around,
diff --git a/src/render_flex.cpp b/src/render_flex.cpp
@@ -79,6 +79,107 @@ namespace litehtml
 			}
 		}
 	};
+
+	class flex_align_content_spread
+	{
+		flex_align_content m_type;
+		int m_num_lines;
+		int m_free_space;
+		flex_wrap m_wrap;
+	public:
+		flex_align_content_spread(flex_align_content type, flex_wrap wrap, int num_lines, int free_space) :
+				m_type(type), m_num_lines(num_lines), m_free_space(0), m_wrap(wrap)
+		{
+			if(m_wrap == flex_wrap_nowrap)
+			{
+				m_type = flex_align_content_stretch;
+			}
+			set_free_space(free_space);
+		}
+
+		void set_free_space(int free_space)
+		{
+			m_free_space = free_space;
+			switch (m_type)
+			{
+
+				case flex_align_content_space_between:
+					// If the leftover free-space is negative or there is only a single flex line in the flex
+					// container, this value is identical to flex-start.
+					if(m_num_lines == 1 || m_free_space < 0) m_type = flex_align_content_flex_start;
+					break;
+				case flex_align_content_space_around:
+					// If the leftover free-space is negative this value is identical to center.
+					if(m_num_lines == 1 || m_free_space < 0) m_type = flex_align_content_center;
+					break;
+				default:
+					break;
+			}
+		}
+
+		int start()
+		{
+			switch (m_type)
+			{
+				case flex_align_content_flex_end:
+				case flex_align_content_end:
+					return m_free_space;
+				case flex_align_content_center:
+					return m_free_space / 2;
+				case flex_align_content_stretch:
+				case flex_align_content_space_between:
+				case flex_align_content_space_around:
+				default:
+					// using stretch by default
+					return 0;
+			}
+		}
+
+		int add_line_size()
+		{
+			switch (m_type)
+			{
+
+				case flex_align_content_flex_start:
+				case flex_align_content_flex_end:
+				case flex_align_content_start:
+				case flex_align_content_end:
+				case flex_align_content_center:
+				case flex_align_content_space_between:
+				case flex_align_content_space_around:
+					return 0;
+				case flex_align_content_stretch:
+				default:
+					return m_free_space / m_num_lines;
+			}
+		}
+
+		int before_line()
+		{
+			switch (m_type)
+			{
+				case flex_align_content_space_between:
+					return 0;
+				case flex_align_content_space_around:
+					return m_free_space / (m_num_lines * 2);
+				default:
+					return 0;
+			}
+		}
+
+		int after_line()
+		{
+			switch (m_type)
+			{
+				case flex_align_content_space_between:
+					return m_free_space / (m_num_lines - 1);
+				case flex_align_content_space_around:
+					return m_free_space / (m_num_lines * 2);
+				default:
+					return 0;
+			}
+		}
+	};
 }
 
 int litehtml::render_item_flex::_render_content(int x, int y, bool second_pass, const containing_block_context &self_size, formatting_context* fmt_ctx)
@@ -177,59 +278,67 @@ int litehtml::render_item_flex::_render_content(int x, int y, bool second_pass,
 	}
 
 	int free_cross_size = 0;
-	int add_cross_size = 0;
 	if(sum_cross_size)
 	{
 		if (is_row_direction)
 		{
 			if (self_size.height.type != containing_block_context::cbc_value_type_auto)
 			{
-				free_cross_size = self_size.height;
+				int height = self_size.height;
 				if (src_el()->css().get_box_sizing() == box_sizing_border_box)
 				{
-					free_cross_size -= box_sizing_height();
+					height -= box_sizing_height();
 				}
+				free_cross_size = height - sum_cross_size;
 			}
 		} else
 		{
-			free_cross_size = self_size.render_width;
+			free_cross_size = self_size.render_width - sum_cross_size;
 			ret_width = sum_cross_size;
 		}
-		free_cross_size -= sum_cross_size;
-		sum_cross_size += free_cross_size;
-		add_cross_size = (int) ((float) free_cross_size / (float) lines.size());
 	}
 
 	// Find line cross size and align items
 	el_x = el_y = 0;
 	bool is_wrap_reverse = css().get_flex_wrap() == flex_wrap_wrap_reverse;
 
+	flex_align_content_spread lines_spread(css().get_flex_align_content(), css().get_flex_wrap(), (int) lines.size(), free_cross_size);
+
 	if(is_wrap_reverse)
 	{
 		if(is_row_direction)
 		{
-			el_y = sum_cross_size;
+			el_y = sum_cross_size - lines_spread.start();
+		} else
+		{
+			el_x = sum_cross_size - lines_spread.start();
+		}
+	} else
+	{
+		if(is_row_direction)
+		{
+			el_y = lines_spread.start();
 		} else
 		{
-			el_x = sum_cross_size;
+			el_x = lines_spread.start();
 		}
 	}
 
 	for(auto& ln : lines)
 	{
-		if(free_cross_size > 0 && add_cross_size > 0)
-		{
-			ln.cross_size += add_cross_size;
-			free_cross_size -= add_cross_size;
-		}
+		ln.cross_size += lines_spread.add_line_size();
+
 		flex_justify_content_spread content_spread(css().get_flex_justify_content(),
 												   (int) ln.items.size(),
 												   container_main_size - ln.main_size);
 		if(is_row_direction)
 		{
 			if(is_wrap_reverse)
 			{
-				el_y -= ln.cross_size;
+				el_y -= ln.cross_size - lines_spread.before_line();
+			} else
+			{
+				el_y += lines_spread.before_line();
 			}
 			if(reverse)
 			{
@@ -284,7 +393,10 @@ int litehtml::render_item_flex::_render_content(int x, int y, bool second_pass,
 			}
 			if(!is_wrap_reverse)
 			{
-				el_y += ln.cross_size;
+				el_y += ln.cross_size + lines_spread.after_line();
+			} else
+			{
+				el_y -= lines_spread.after_line();
 			}
 		} else
 		{
@@ -306,7 +418,10 @@ int litehtml::render_item_flex::_render_content(int x, int y, bool second_pass,
 			}
 			if(is_wrap_reverse)
 			{
-				el_x -= ln.cross_size;
+				el_x -= ln.cross_size - lines_spread.before_line();
+			} else
+			{
+				el_x += lines_spread.before_line();
 			}
 			for (auto &item: ln.items)
 			{
@@ -359,7 +474,10 @@ int litehtml::render_item_flex::_render_content(int x, int y, bool second_pass,
 			}
 			if(!is_wrap_reverse)
 			{
-				el_x += ln.cross_size;
+				el_x += ln.cross_size + lines_spread.after_line();
+			} else
+			{
+				el_x -= lines_spread.after_line();
 			}
 		}
 	}
diff --git a/test/render_test.cpp b/test/render_test.cpp
@@ -38,13 +38,12 @@ void read_dir(const string& subdir, vector<string>& files)
 		string name = ent->d_name;
 		if (ent->d_type == DT_DIR)
 		{
-			if(name != "." && name != "..")
+			if(name != "." && name != ".." && name[0] != '-')
 			{
 				read_dir(subdir + "/" + name, files);
 			}
-		} else
+		} else if (ent->d_type == DT_REG)
 		{
-			if (ent->d_type != DT_REG) continue; // if not regular file
 			if (name[0] != '-' && name.size() > 4 &&
 				(name.substr(name.size() - 4) == ".htm" || name.substr(name.size() - 5) == ".html"))
 				files.push_back(subdir + "/" + name);

Original file line number	Diff line number	Diff line change
`@@ -38,13 +38,12 @@ void read_dir(const string& subdir, vector<string>& files)`
`38`	`38`	`string name = ent->d_name;`
`39`	`39`	`if (ent->d_type == DT_DIR)`
`40`	`40`	`{`
`41`		`- if(name != "." && name != "..")`
	`41`	`+ if(name != "." && name != ".." && name[0] != '-')`
`42`	`42`	`{`
`43`	`43`	`read_dir(subdir + "/" + name, files);`
`44`	`44`	`}`
`45`		`- } else`
	`45`	`+ } else if (ent->d_type == DT_REG)`
`46`	`46`	`{`
`47`		`- if (ent->d_type != DT_REG) continue; // if not regular file`
`48`	`47`	`if (name[0] != '-' && name.size() > 4 &&`
`49`	`48`	`(name.substr(name.size() - 4) == ".htm" \|\| name.substr(name.size() - 5) == ".html"))`
`50`	`49`	`files.push_back(subdir + "/" + name);`