fixed support for box-sizing: border-box

tordex · tordex · commit 714d234090a6 · 2023-04-24T00:20:26.000+03:00
diff --git a/include/litehtml/render_item.h b/include/litehtml/render_item.h
@@ -221,6 +221,36 @@ namespace litehtml
             return content_offset_top() + content_offset_bottom();
         }
 
+		int box_sizing_left() const
+		{
+			return m_padding.left + m_borders.left;
+		}
+
+		int box_sizing_right() const
+		{
+			return m_padding.right + m_borders.right;
+		}
+
+		int box_sizing_width() const
+		{
+			return box_sizing_left() + border_right();
+		}
+
+		int box_sizing_top() const
+		{
+			return m_padding.top + m_borders.top;
+		}
+
+		int box_sizing_bottom() const
+		{
+			return m_padding.bottom + m_borders.bottom;
+		}
+
+		int box_sizing_height() const
+		{
+			return box_sizing_top() + border_bottom();
+		}
+
         void parent(const std::shared_ptr<render_item>& par)
         {
             m_parent = par;
diff --git a/src/render_block.cpp b/src/render_block.cpp
@@ -676,58 +676,70 @@ int litehtml::render_item_block::_render(int x, int y, int max_width, const cont
 
 	containing_block_context cb_size = calculate_containing_block_context(containing_block_size);
 
-	max_width -= content_offset_left() + content_offset_right();
-	if(max_width < 0) max_width = 0;
-	max_width = std::min(max_width, cb_size.width);
+	if(cb_size.width_type != containing_block_context::cbc_value_type_auto)
+	{
+		// If width is absolute value, we render into cb_size.width size
+		max_width = cb_size.width;
+		if(src_el()->css().get_box_sizing() == box_sizing_border_box)
+		{
+			// for style "box-sizing: border-box" we have to decrease rendering width for borders + paddings
+			max_width -= box_sizing_width();
+		}
+	} else
+	{
+		// for "width: auto" we render with max_width minus content offset
+		max_width -= content_offset_width();
+		if (max_width < 0) max_width = 0;
+	}
 
     //*****************************************
     // Render content
     //*****************************************
     ret_width = _render_content(x, y, max_width, second_pass, ret_width, cb_size);
     //*****************************************
 
-	bool requires_rerender = false;
+	bool requires_rerender = false;		// when true, the second pass for content rendering is required
 
 	// Set block width
-	if(cb_size.width_type == containing_block_context::cbc_value_type_auto &&
-		(src_el()->is_inline_box() ||
-		 src_el()->css().get_float() != float_none ||
-		 src_el()->css().get_display() == display_table_cell ||
-		 src_el()->css().get_display() == display_table_caption ||
-		 src_el()->css().get_position() > element_position_relative
-		 ))
+	if(cb_size.width_type == containing_block_context::cbc_value_type_absolute)
 	{
-		m_pos.width = ret_width;
-		if(ret_width < cb_size.width)
+		m_pos.width = cb_size.width;
+		ret_width = cb_size.width;
+		if(src_el()->css().get_box_sizing() == box_sizing_border_box)
 		{
-			// We have to render content again with new max_width
-			requires_rerender = true;
+			m_pos.width -= box_sizing_width();
 		}
-	} else
+	} else if(cb_size.width_type == containing_block_context::cbc_value_type_percentage)
 	{
 		m_pos.width = cb_size.width;
-		if(cb_size.width_type == containing_block_context::cbc_value_type_absolute)
+		if(src_el()->css().get_box_sizing() == box_sizing_border_box)
 		{
-			ret_width = cb_size.width;
+			m_pos.width -= box_sizing_width();
 		}
-	}
-
-	// Set block height
-	if (cb_size.height_type != containing_block_context::cbc_value_type_auto)
+	} else
 	{
-		m_pos.height = cb_size.height;
+		if(src_el()->is_inline_box() ||
+			src_el()->css().get_float() != float_none ||
+			src_el()->css().get_display() == display_table_cell ||
+			src_el()->css().get_display() == display_table_caption ||
+			src_el()->css().get_position() > element_position_relative)
+		{
+			m_pos.width = ret_width;
+			if(ret_width < cb_size.width)
+			{
+				// We have to render content again with new max_width
+				requires_rerender = true;
+			}
+		} else
+		{
+			m_pos.width = cb_size.width;
+			if(src_el()->css().get_box_sizing() == box_sizing_border_box)
+			{
+				m_pos.width -= box_sizing_width();
+			}
+		}
 	}
 
-    // add the floats' height to the block height
-    if (src_el()->is_floats_holder())
-    {
-        int floats_height = get_floats_height();
-        if (floats_height > m_pos.height)
-        {
-            m_pos.height = floats_height;
-        }
-    }
-
 	calc_auto_margins(containing_block_size.width);
 
 	// Fix width with min-width attribute
@@ -750,6 +762,26 @@ int litehtml::render_item_block::_render(int x, int y, int max_width, const cont
 		}
 	}
 
+	// Set block height
+	if (cb_size.height_type != containing_block_context::cbc_value_type_auto)
+	{
+		m_pos.height = cb_size.height;
+		if(src_el()->css().get_box_sizing() == box_sizing_border_box)
+		{
+			m_pos.height -= box_sizing_height();
+		}
+	}
+
+    // add the floats' height to the block height
+    if (src_el()->is_floats_holder())
+    {
+        int floats_height = get_floats_height();
+        if (floats_height > m_pos.height)
+        {
+            m_pos.height = floats_height;
+        }
+    }
+
 	// Fix height with min-height attribute
 	if(cb_size.min_height_type != containing_block_context::cbc_value_type_none)
 	{
diff --git a/test/render/test25.htm b/test/render/test25.htm
@@ -0,0 +1,15 @@
+<div style="position: relative; width: 100px; height: 100px; padding: 5px; background-color: red">
+    <span style="display: block; border: 5px solid green; background-color: lightgreen; width: 100%; height: 100%; box-sizing: border-box">Lorem ipsum dolor sit amets, consectetur.</span>
+</div>
+
+<div style="position: relative; height: 100px; padding: 5px; background-color: red">
+    <span style="display: block; border: 5px solid green; background-color: lightgreen; width: 100%; height: 100%; box-sizing: border-box">Lorem ipsum dolor sit amets, consectetur.</span>
+</div>
+
+<div style="position: relative; width: 100px; height: 100px; padding: 5px; background-color: red">
+    <span style="display: block; border: 5px solid green; background-color: lightgreen; width: 105px; height: 105px; box-sizing: border-box">Lorem ipsum dolor sit amets, consectetur.</span>
+</div>
+
+<div style="position: relative; width: 100px; height: 100px; padding: 5px; background-color: blue">
+    <span style="display: block; border: 5px solid red; background-color: lightgreen; width: 100%; height: 100%; box-sizing: border-box; margin: 10px">Lorem ipsum dolor sit amets, consectetur.</span>
+</div>
diff --git a/test/render/test25.htm.png b/test/render/test25.htm.png
