LibWeb: Convert BorderData::width to CSSPixels

The `clip_shrink` optimization in `paint_background()` now also
correctly uses DevicePixels, instead of reducing a DevicePixel rect by
a CSSPixels amount.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -155,7 +155,7 @@ struct BorderData {
 public:
     Color color { Color::Transparent };
     CSS::LineStyle line_style { CSS::LineStyle::None };
-    double width { 0 };
+    CSSPixels width { 0 };
 
     bool operator==(BorderData const&) const = default;
 };

Userland/Libraries/LibWeb/DOM/Element.cpp

@@ -753,7 +753,7 @@ int Element::client_top() const
     // 2. Return the computed value of the border-top-width property
     //    plus the height of any scrollbar rendered between the top padding edge and the top border edge,
     //    ignoring any transforms that apply to the element and its ancestors.
-    return static_cast<Layout::Box const&>(*layout_node()).computed_values().border_top().width;
+    return static_cast<Layout::Box const&>(*layout_node()).computed_values().border_top().width.to_int();
 }
 
 // https://drafts.csswg.org/cssom-view/#dom-element-clientleft
@@ -769,7 +769,7 @@ int Element::client_left() const
     // 2. Return the computed value of the border-left-width property
     //    plus the width of any scrollbar rendered between the left padding edge and the left border edge,
     //    ignoring any transforms that apply to the element and its ancestors.
-    return static_cast<Layout::Box const&>(*layout_node()).computed_values().border_left().width;
+    return static_cast<Layout::Box const&>(*layout_node()).computed_values().border_left().width.to_int();
 }
 
 // https://drafts.csswg.org/cssom-view/#dom-element-clientwidth

Userland/Libraries/LibWeb/Layout/LayoutState.cpp

@@ -224,14 +224,14 @@ void LayoutState::UsedValues::set_node(NodeWithStyleAndBoxModelMetrics& node, Us
         CSSPixels border_and_padding;
 
         if (width) {
-            border_and_padding = CSSPixels(computed_values.border_left().width)
+            border_and_padding = computed_values.border_left().width
                 + computed_values.padding().left().to_px(*m_node, containing_block_used_values->content_width())
-                + CSSPixels(computed_values.border_right().width)
+                + computed_values.border_right().width
                 + computed_values.padding().right().to_px(*m_node, containing_block_used_values->content_width());
         } else {
-            border_and_padding = CSSPixels(computed_values.border_top().width)
+            border_and_padding = computed_values.border_top().width
                 + computed_values.padding().top().to_px(*m_node, containing_block_used_values->content_width())
-                + CSSPixels(computed_values.border_bottom().width)
+                + computed_values.border_bottom().width
                 + computed_values.padding().bottom().to_px(*m_node, containing_block_used_values->content_width());
         }
 

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -654,12 +654,12 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
         if (border.line_style == CSS::LineStyle::None || border.line_style == CSS::LineStyle::Hidden) {
             border.width = 0;
         } else {
-            auto resolve_border_width = [&]() -> double {
+            auto resolve_border_width = [&]() -> CSSPixels {
                 auto value = computed_style.property(width_property);
                 if (value->is_calculated())
-                    return value->as_calculated().resolve_length(*this)->to_px(*this).to_double();
+                    return value->as_calculated().resolve_length(*this)->to_px(*this);
                 if (value->is_length())
-                    return value->as_length().length().to_px(*this).to_double();
+                    return value->as_length().length().to_px(*this);
                 if (value->is_identifier()) {
                     // https://www.w3.org/TR/css-backgrounds-3/#valdef-line-width-thin
                     switch (value->to_identifier()) {

Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp

@@ -83,10 +83,10 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
         return;
 
     struct {
-        int top { 0 };
-        int bottom { 0 };
-        int left { 0 };
-        int right { 0 };
+        DevicePixels top { 0 };
+        DevicePixels bottom { 0 };
+        DevicePixels left { 0 };
+        DevicePixels right { 0 };
     } clip_shrink;
 
     auto border_top = layout_node.computed_values().border_top();
@@ -96,10 +96,10 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
 
     if (border_top.color.alpha() == 255 && border_bottom.color.alpha() == 255
         && border_left.color.alpha() == 255 && border_right.color.alpha() == 255) {
-        clip_shrink.top = border_top.width;
-        clip_shrink.bottom = border_bottom.width;
-        clip_shrink.left = border_left.width;
-        clip_shrink.right = border_right.width;
+        clip_shrink.top = context.rounded_device_pixels(border_top.width);
+        clip_shrink.bottom = context.rounded_device_pixels(border_bottom.width);
+        clip_shrink.left = context.rounded_device_pixels(border_left.width);
+        clip_shrink.right = context.rounded_device_pixels(border_right.width);
     }
 
     // Note: Background layers are ordered front-to-back, so we paint them in reverse

Userland/Libraries/LibWeb/Painting/BorderPainting.cpp

@@ -106,7 +106,7 @@ void paint_border(PaintContext& context, BorderEdge edge, DevicePixelRect const&
 
     auto color = border_color(edge, borders_data);
     auto border_style = border_data.line_style;
-    auto device_pixel_width = context.enclosing_device_pixels(width);
+    auto device_pixel_width = context.rounded_device_pixels(width);
 
     struct Points {
         DevicePixelPoint p1;

Userland/Libraries/LibWeb/Painting/PaintableBox.cpp

@@ -278,7 +278,7 @@ void PaintableBox::paint_background(PaintContext& context) const
 
     // HACK: If the Box has a border, use the bordered_rect to paint the background.
     //       This way if we have a border-radius there will be no gap between the filling and actual border.
-    if (computed_values().border_top().width || computed_values().border_right().width || computed_values().border_bottom().width || computed_values().border_left().width)
+    if (computed_values().border_top().width != 0 || computed_values().border_right().width != 0 || computed_values().border_bottom().width != 0 || computed_values().border_left().width != 0)
         background_rect = absolute_border_box_rect();
 
     Painting::paint_background(context, layout_box(), background_rect, background_color, computed_values().image_rendering(), background_layers, normalized_border_radii_data());