non-flex div background (padding, corner radius)

Scenes/Styles/TabDefault.tres

@@ -7,3 +7,5 @@ bg_color = Color(0.152476, 0.152476, 0.152476, 1)
 draw_center = false
 corner_radius_top_left = 15
 corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15

Scenes/Styles/TabHover.tres

@@ -6,3 +6,5 @@ content_margin_right = 8.0
 bg_color = Color(0, 0, 0, 1)
 corner_radius_top_left = 15
 corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15

Scenes/Styles/TabHoverDefault.tres

@@ -6,3 +6,5 @@ content_margin_right = 8.0
 bg_color = Color(0.138034, 0.138034, 0.138034, 1)
 corner_radius_top_left = 15
 corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15

Scenes/Styles/TabNormal.tres

@@ -6,3 +6,5 @@ content_margin_right = 8.0
 bg_color = Color(0.109804, 0.109804, 0.109804, 1)
 corner_radius_top_left = 15
 corner_radius_top_right = 15
+corner_radius_bottom_right = 15
+corner_radius_bottom_left = 15

Scenes/Tags/div.tscn

@@ -2,8 +2,6 @@
 
 [ext_resource type="Script" uid="uid://ckks1ccehq6al" path="res://Scripts/Tags/div.gd" id="1_div"]
 
-[node name="Div" type="VBoxContainer"]
+[node name="div" type="VBoxContainer"]
-anchors_preset = 10
+offset_right = 1920.0
-anchor_right = 1.0
-grow_horizontal = 2
 script = ExtResource("1_div")

Scenes/Tags/input.tscn

@@ -66,7 +66,7 @@ SpinBox/styles/down_background_pressed = SubResource("StyleBoxEmpty_xxc4c")
 SpinBox/styles/up_background_hovered = SubResource("StyleBoxEmpty_unki5")
 SpinBox/styles/up_background_pressed = SubResource("StyleBoxEmpty_3wmat")
 
-[node name="Input" type="Control"]
+[node name="input" type="Control"]
 layout_mode = 3
 anchors_preset = 15
 anchor_right = 1.0

Scenes/Tags/li.tscn

@@ -1,22 +1,9 @@
-[gd_scene load_steps=3 format=3 uid="uid://bli1234568aa"]
+[gd_scene load_steps=2 format=3 uid="uid://bli1234568aa"]
 
 [ext_resource type="Script" uid="uid://ps8duq0aw3tu" path="res://Scripts/Tags/li.gd" id="1_li"]
-[ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
 
-[node name="LI" type="VBoxContainer"]
+[node name="li" type="VBoxContainer"]
 anchors_preset = 10
 anchor_right = 1.0
 grow_horizontal = 2
 script = ExtResource("1_li")
-
-[node name="RichTextLabel" type="RichTextLabel" parent="."]
-layout_mode = 2
-size_flags_horizontal = 3
-focus_mode = 2
-mouse_default_cursor_shape = 1
-theme = ExtResource("2_theme")
-theme_override_colors/default_color = Color(0, 0, 0, 1)
-bbcode_enabled = true
-text = "Placeholder"
-fit_content = true
-selection_enabled = true

Scenes/Tags/ol.tscn

@@ -2,7 +2,7 @@
 
 [ext_resource type="Script" uid="uid://bbkebg4aihve3" path="res://Scripts/Tags/ol.gd" id="1_ol"]
 
-[node name="OL" type="VBoxContainer"]
+[node name="ol" type="VBoxContainer"]
 anchors_preset = 10
 anchor_right = 1.0
 grow_horizontal = 2

Scenes/Tags/option.tscn

@@ -3,7 +3,7 @@
 [ext_resource type="Script" uid="uid://ps8duq0aw3tu" path="res://Scripts/Tags/li.gd" id="1_option"]
 [ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
 
-[node name="Option" type="Control"]
+[node name="option" type="Control"]
 layout_mode = 3
 anchors_preset = 10
 anchor_right = 1.0

Scenes/Tags/p.tscn

@@ -3,7 +3,7 @@
 [ext_resource type="Script" uid="uid://cg6kjvlx3an1j" path="res://Scripts/Tags/p.gd" id="1_pnbfg"]
 [ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_1glvj"]
 
-[node name="RichTextLabel" type="RichTextLabel"]
+[node name="p" type="RichTextLabel"]
 anchors_preset = 10
 anchor_right = 1.0
 offset_bottom = 19.0

Scenes/Tags/select.tscn

@@ -3,7 +3,7 @@
 [ext_resource type="Script" uid="uid://bmu8q4rm1wopd" path="res://Scripts/Tags/select.gd" id="1_select"]
 [ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_xq313"]
 
-[node name="Select" type="Control"]
+[node name="select" type="Control"]
 layout_mode = 3
 anchors_preset = 10
 anchor_right = 1.0

Scenes/Tags/textarea.tscn

@@ -4,7 +4,7 @@
 [ext_resource type="Theme" uid="uid://bn6rbmdy60lhr" path="res://Scenes/Styles/BrowserText.tres" id="2_theme"]
 [ext_resource type="Script" uid="uid://c5xpoyqcg1p8k" path="res://Scripts/ResizableTextEdit.gd" id="3_kbdk1"]
 
-[node name="Textarea" type="Control"]
+[node name="textarea" type="Control"]
 layout_mode = 3
 anchors_preset = 10
 anchor_right = 1.0

Scripts/AutoSizingFlexContainer.gd

@@ -5,44 +5,6 @@ extends FlexContainer
 signal flex_resized
 
 var content_size: Vector2 = Vector2.ZERO
-var background_panel: Panel = null
-
-func update_background_panel():
-	var needs_background = has_meta("custom_css_background_color") or has_meta("custom_css_border_radius")
-	
-	if needs_background:
-		if not background_panel:
-			background_panel = Panel.new()
-			background_panel.name = "BackgroundPanel"
-			background_panel.mouse_filter = Control.MOUSE_FILTER_IGNORE
-			add_child(background_panel)
-			move_child(background_panel, 0)  # Ensure it's behind content
-		
-		# Set panel size to match container
-		background_panel.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
-		
-		# Create StyleBoxFlat for background and border radius
-		var style_box = StyleBoxFlat.new()
-		
-		if has_meta("custom_css_background_color"):
-			style_box.bg_color = get_meta("custom_css_background_color")
-		else:
-			style_box.bg_color = Color.TRANSPARENT
-		
-		if has_meta("custom_css_border_radius"):
-			var radius_str = get_meta("custom_css_border_radius")
-			var radius = StyleManager.parse_radius(radius_str)
-			style_box.corner_radius_top_left = radius
-			style_box.corner_radius_top_right = radius
-			style_box.corner_radius_bottom_left = radius
-			style_box.corner_radius_bottom_right = radius
-		
-		background_panel.add_theme_stylebox_override("panel", style_box)
-	
-	elif background_panel:
-		# Remove background panel if no longer needed
-		background_panel.queue_free()
-		background_panel = null
 
 # This is the overridden layout logic for the auto-sizing container
 func _resort() -> void:
@@ -69,7 +31,7 @@ func _resort() -> void:
 			continue
 		
 		# Skip background panel from flex calculations
-		if c.name == "BackgroundPanel":
+		if BackgroundUtils.is_background_panel(c):
 			continue
 
 		var cid = c.get_instance_id()
@@ -183,7 +145,7 @@ func _resort() -> void:
 
 
 	# Update background panel if needed
-	update_background_panel()
+	BackgroundUtils.update_background_panel(self)
 	
 	emit_signal("flex_resized")
 

Scripts/Tags/div.gd

@@ -1,6 +1,5 @@
-# NOTE: some weird warning, wcyd
+class_name HTMLDiv
-@tool
+extends VBoxContainer
-extends FlexContainer
 
 func init(_element: HTMLParser.HTMLElement):
 	pass

Scripts/Utils/BackgroundUtils.gd

@@ -0,0 +1,117 @@
+class_name BackgroundUtils
+extends RefCounted
+
+static func create_stylebox_from_styles(styles: Dictionary = {}, container: Control = null) -> StyleBoxFlat:
+	var style_box = StyleBoxFlat.new()
+	
+	# Background color
+	var bg_color = null
+	if styles.has("background-color"):
+		bg_color = styles["background-color"]
+	elif container and container.has_meta("custom_css_background_color"):
+		bg_color = container.get_meta("custom_css_background_color")
+	
+	if bg_color:
+		style_box.bg_color = bg_color
+	else:
+		style_box.bg_color = Color.TRANSPARENT
+	
+	# Border radius
+	var border_radius = null
+	if styles.has("border-radius"):
+		border_radius = styles["border-radius"]
+	elif container and container.has_meta("custom_css_border_radius"):
+		border_radius = container.get_meta("custom_css_border_radius")
+	
+	if border_radius:
+		var radius = StyleManager.parse_radius(border_radius)
+		style_box.corner_radius_top_left = radius
+		style_box.corner_radius_top_right = radius
+		style_box.corner_radius_bottom_left = radius
+		style_box.corner_radius_bottom_right = radius
+	
+	# Padding as content margins
+	var has_padding = false
+	if styles.size() > 0:
+		has_padding = styles.has("padding") or styles.has("padding-top") or styles.has("padding-right") or styles.has("padding-bottom") or styles.has("padding-left")
+	elif container:
+		has_padding = container.has_meta("padding") or container.has_meta("padding-top") or container.has_meta("padding-right") or container.has_meta("padding-bottom") or container.has_meta("padding-left")
+	
+	if has_padding:
+		# General padding
+		var padding_val = null
+		if styles.has("padding"):
+			padding_val = StyleManager.parse_size(styles["padding"])
+		elif container and container.has_meta("padding"):
+			padding_val = StyleManager.parse_size(container.get_meta("padding"))
+		
+		if padding_val:
+			style_box.content_margin_left = padding_val
+			style_box.content_margin_right = padding_val
+			style_box.content_margin_top = padding_val
+			style_box.content_margin_bottom = padding_val
+		
+		# Individual padding values override general padding
+		var padding_keys = [["padding-left", "content_margin_left"], ["padding-right", "content_margin_right"], ["padding-top", "content_margin_top"], ["padding-bottom", "content_margin_bottom"]]
+		
+		for pair in padding_keys:
+			var key = pair[0]
+			var property = pair[1]
+			var val = null
+			
+			if styles.has(key):
+				val = StyleManager.parse_size(styles[key])
+			elif container and container.has_meta(key):
+				val = StyleManager.parse_size(container.get_meta(key))
+			
+			if val:
+				style_box.set(property, val)
+	
+	return style_box
+
+# for AutoSizingFlexContainer
+static func update_background_panel(container: Control) -> void:
+	var needs_background = container.has_meta("custom_css_background_color") or container.has_meta("custom_css_border_radius")
+	var needs_padding = container.has_meta("padding") or container.has_meta("padding-top") or container.has_meta("padding-right") or container.has_meta("padding-bottom") or container.has_meta("padding-left")
+	var background_panel = get_background_panel(container)
+	
+	if needs_background or needs_padding:
+		if not background_panel:
+			background_panel = Panel.new()
+			background_panel.name = "BackgroundPanel"
+			background_panel.mouse_filter = Control.MOUSE_FILTER_IGNORE
+			background_panel.set_anchors_and_offsets_preset(Control.PRESET_FULL_RECT)
+			container.add_child(background_panel)
+			container.move_child(background_panel, 0) # first child
+		
+		var style_box = create_stylebox_from_styles({}, container)
+		background_panel.add_theme_stylebox_override("panel", style_box)
+	
+	elif background_panel:
+		background_panel.queue_free()
+
+# Helper methods for AutoSizingFlexContainer
+static func get_background_panel(container: Control) -> Panel:
+	for child in container.get_children():
+		if child.name == "BackgroundPanel" and child is Panel:
+			return child
+	return null
+
+static func is_background_panel(node: Node) -> bool:
+	return node.name == "BackgroundPanel" and node is Panel
+
+# for any other tag
+static func create_panel_container_with_background(styles: Dictionary) -> PanelContainer:
+	var panel_container = PanelContainer.new()
+	panel_container.name = "Div"
+	
+	var vbox = VBoxContainer.new()
+	vbox.name = "VBoxContainer"
+	panel_container.add_child(vbox)
+	
+	var style_box = create_stylebox_from_styles(styles)
+	panel_container.add_theme_stylebox_override("panel", style_box)
+	return panel_container
+
+static func needs_background_wrapper(styles: Dictionary) -> bool:
+	return styles.has("background-color") or styles.has("border-radius") or styles.has("padding") or styles.has("padding-top") or styles.has("padding-right") or styles.has("padding-bottom") or styles.has("padding-left")

Scripts/Utils/BackgroundUtils.gd.uid

@@ -0,0 +1 @@
+uid://c2itd75f1j1n0

Scripts/main.gd

@@ -156,8 +156,12 @@ func create_element_node(element: HTMLParser.HTMLElement, parser: HTMLParser) ->
 		final_node = await create_element_node_internal(element, parser)
 		if not final_node:
 			return null # Unsupported tag
-		# Children will be added to this node.
+
-		container_for_children = final_node
+		# If final_node is a PanelContainer, children should go to the VBoxContainer inside
+		if final_node is PanelContainer and final_node.get_child_count() > 0:
+			container_for_children = final_node.get_child(0)  # The VBoxContainer inside
+		else:
+			container_for_children = final_node
 
 	# Applies background, size, etc. to the FlexContainer (top-level node)
 	final_node = StyleManager.apply_element_styles(final_node, element, parser)
@@ -264,8 +268,13 @@ func create_element_node_internal(element: HTMLParser.HTMLElement, parser: HTMLP
 			node = TEXTAREA.instantiate()
 			node.init(element)
 		"div":
-			node = DIV.instantiate()
+			var styles = parser.get_element_styles_with_inheritance(element, "", [])
-			node.init(element)
+		
+			if BackgroundUtils.needs_background_wrapper(styles):
+				node = BackgroundUtils.create_panel_container_with_background(styles)
+			else:
+				node = VBoxContainer.new()
+				node.name = "Div"
 		_:
 			return null