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.

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;
 }

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());
  }
 }
 

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);