LibWeb: Allow <input type="button/submit/reset"> to be styled

Previously we used a native ui button to draw the buttons.
These buttons can however not be styled with css.
To allow these to be styled with css, we create a button with
the UA stylesheet that resembles the system ui button.

3 files changed, 16 insertions, 9 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css
index d60d0f4d53..ad0cdc49ba 100644
--- a/Userland/Libraries/LibWeb/CSS/Default.css
+++ b/Userland/Libraries/LibWeb/CSS/Default.css
@@ -237,6 +237,15 @@ input[type=submit], input[type=button], input[type=reset], input[type=checkbox],
     cursor: unset;
 }
 
+input[type=submit], input[type=button], input[type=reset] {
+    padding: 4px 8px;
+    background-color: -libweb-palette-button;
+    border: 1px solid -libweb-palette-threed-shadow1;
+}
+input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover {
+    background-color: -libweb-palette-hover-highlight;
+}
+
 option {
     display: none;
 }
diff --git a/Userland/Libraries/LibWeb/Layout/ButtonBox.cpp b/Userland/Libraries/LibWeb/Layout/ButtonBox.cpp
index 150b4e7c53..53dd25794e 100644
--- a/Userland/Libraries/LibWeb/Layout/ButtonBox.cpp
+++ b/Userland/Libraries/LibWeb/Layout/ButtonBox.cpp
@@ -26,8 +26,8 @@ ButtonBox::~ButtonBox()
 
 void ButtonBox::prepare_for_replaced_layout()
 {
-    set_intrinsic_width(font().width(dom_node().value()) + 20);
-    set_intrinsic_height(20);
+    set_intrinsic_width(font().width(dom_node().value()));
+    set_intrinsic_height(font().glyph_height());
 }
 
 void ButtonBox::paint(PaintContext& context, PaintPhase phase)
@@ -38,16 +38,10 @@ void ButtonBox::paint(PaintContext& context, PaintPhase phase)
     LabelableNode::paint(context, phase);
 
     if (phase == PaintPhase::Foreground) {
-        bool hovered = document().hovered_node() == &dom_node();
-        if (!hovered)
-            hovered = Label::is_associated_label_hovered(*this);
-
-        Gfx::StylePainter::paint_button(context.painter(), enclosing_int_rect(absolute_rect()), context.palette(), Gfx::ButtonStyle::Normal, m_being_pressed, hovered, dom_node().checked(), dom_node().enabled());
-
         auto text_rect = enclosing_int_rect(absolute_rect());
         if (m_being_pressed)
             text_rect.translate_by(1, 1);
-        context.painter().draw_text(text_rect, dom_node().value(), font(), Gfx::TextAlignment::Center, context.palette().button_text());
+        context.painter().draw_text(text_rect, dom_node().value(), font(), Gfx::TextAlignment::Center, computed_values().color());
     }
 }
 
diff --git a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
index 3e4f0dd285..6fa30bbf02 100644
--- a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp
@@ -117,6 +117,10 @@ void InlineFormattingContext::dimension_box_on_line(Box const& box, LayoutMode l
     box_state.margin_right = computed_values.margin().right.resolved(box, width_of_containing_block).to_px(box);
     box_state.border_right = computed_values.border_right().width;
     box_state.padding_right = computed_values.padding().right.resolved(box, width_of_containing_block).to_px(box);
+    box_state.padding_top = computed_values.padding().top.resolved(box, width_of_containing_block).to_px(box);
+    box_state.padding_bottom = computed_values.padding().bottom.resolved(box, width_of_containing_block).to_px(box);
+    box_state.margin_top = computed_values.margin().top.resolved(box, width_of_containing_block).to_px(box);
+    box_state.margin_bottom = computed_values.margin().bottom.resolved(box, width_of_containing_block).to_px(box);
 
     if (is<ReplacedBox>(box)) {
         auto& replaced = verify_cast<ReplacedBox>(box);