LibWeb: Stop clipping the root element's background

Author: https://github.com/Psychpsyo
Commit: 93ae57114d
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/4978
Reviewed-by: https://github.com/AtkinsSJ ✅

Libraries/LibWeb/Painting/BackgroundPainting.cpp

@@ -91,7 +91,8 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
     }
 
     DisplayListRecorderStateSaver state { display_list_recorder };
-    if (resolved_background.needs_text_clip) {
+    bool is_root_element = paintable_box.layout_node().is_root_element();
+    if (resolved_background.needs_text_clip && !is_root_element) {
         auto display_list = compute_text_clip_paths(context, paintable_box, resolved_background.background_rect.location());
         auto rect = context.rounded_device_rect(resolved_background.background_rect);
         display_list_recorder.add_mask(move(display_list), rect.to_type<int>());
@@ -104,13 +105,19 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
 
     auto const& color_box = resolved_background.color_box;
 
-    display_list_recorder.fill_rect_with_rounded_corners(
+    if (is_root_element) {
-        context.rounded_device_rect(color_box.rect).to_type<int>(),
+        display_list_recorder.fill_rect(
-        resolved_background.color,
+            context.enclosing_device_rect(color_box.rect).to_type<int>(),
-        color_box.radii.top_left.as_corner(context),
+            resolved_background.color);
-        color_box.radii.top_right.as_corner(context),
+    } else {
-        color_box.radii.bottom_right.as_corner(context),
+        display_list_recorder.fill_rect_with_rounded_corners(
-        color_box.radii.bottom_left.as_corner(context));
+            context.rounded_device_rect(color_box.rect).to_type<int>(),
+            resolved_background.color,
+            color_box.radii.top_left.as_corner(context),
+            color_box.radii.top_right.as_corner(context),
+            color_box.radii.bottom_right.as_corner(context),
+            color_box.radii.bottom_left.as_corner(context));
+    }
 
     struct {
         DevicePixels top { 0 };
@@ -141,13 +148,15 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
 
         CSSPixelRect const& css_clip_rect = clip_box.rect;
         auto clip_rect = context.rounded_device_rect(css_clip_rect);
-        display_list_recorder.add_clip_rect(clip_rect.to_type<int>());
+        ScopedCornerRadiusClip corner_clip { context, context.rounded_device_rect(css_clip_rect), clip_box.radii, CornerClip::Outside, !is_root_element };
-        ScopedCornerRadiusClip corner_clip { context, context.rounded_device_rect(css_clip_rect), clip_box.radii };
+        if (!is_root_element) {
+            display_list_recorder.add_clip_rect(clip_rect.to_type<int>());
 
-        if (layer.clip == CSS::BackgroundBox::BorderBox) {
+            if (layer.clip == CSS::BackgroundBox::BorderBox) {
-            // Shrink the effective clip rect if to account for the bits the borders will definitely paint over
+                // Shrink the effective clip rect if to account for the bits the borders will definitely paint over
-            // (if they all have alpha == 255).
+                // (if they all have alpha == 255).
-            clip_rect.shrink(clip_shrink.top, clip_shrink.right, clip_shrink.bottom, clip_shrink.left);
+                clip_rect.shrink(clip_shrink.top, clip_shrink.right, clip_shrink.bottom, clip_shrink.left);
+            }
         }
 
         auto const& image = *layer.background_image;

Libraries/LibWeb/Painting/BorderRadiusCornerClipper.cpp

@@ -10,9 +10,12 @@
 
 namespace Web::Painting {
 
-ScopedCornerRadiusClip::ScopedCornerRadiusClip(PaintContext& context, DevicePixelRect const& border_rect, BorderRadiiData const& border_radii, CornerClip corner_clip)
+ScopedCornerRadiusClip::ScopedCornerRadiusClip(PaintContext& context, DevicePixelRect const& border_rect, BorderRadiiData const& border_radii, CornerClip corner_clip, bool do_apply)
     : m_context(context)
 {
+    m_do_apply = do_apply;
+    if (!do_apply)
+        return;
     CornerRadii const corner_radii {
         .top_left = border_radii.top_left.as_corner(context),
         .top_right = border_radii.top_right.as_corner(context),
@@ -28,7 +31,7 @@ ScopedCornerRadiusClip::ScopedCornerRadiusClip(PaintContext& context, DevicePixe
 
 ScopedCornerRadiusClip::~ScopedCornerRadiusClip()
 {
-    if (!m_has_radius)
+    if (!m_has_radius && m_do_apply)
         return;
     m_context.display_list_recorder().restore();
 }

Libraries/LibWeb/Painting/BorderRadiusCornerClipper.h

@@ -16,7 +16,7 @@ enum class CornerClip {
 };
 
 struct ScopedCornerRadiusClip {
-    ScopedCornerRadiusClip(PaintContext& context, DevicePixelRect const& border_rect, BorderRadiiData const& border_radii, CornerClip corner_clip = CornerClip::Outside);
+    ScopedCornerRadiusClip(PaintContext& context, DevicePixelRect const& border_rect, BorderRadiiData const& border_radii, CornerClip corner_clip = CornerClip::Outside, bool do_apply = true);
 
     ~ScopedCornerRadiusClip();
 
@@ -26,6 +26,7 @@ struct ScopedCornerRadiusClip {
 private:
     PaintContext& m_context;
     bool m_has_radius { false };
+    bool m_do_apply;
 };
 
 }

Tests/LibWeb/Ref/expected/css/backgrounds/black.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<style>
+  html {
+    background-color: black;
+  }
+</style>

Tests/LibWeb/Ref/input/css/backgrounds/root-element-background-clip.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<link rel="match" href="../../../expected/css/backgrounds/black.html" />
+<style>
+  html {
+    /* black square */
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA1LjEuOBtp6qgAAAC2ZVhJZklJKgAIAAAABQAaAQUAAQAAAEoAAAAbAQUAAQAAAFIAAAAoAQMAAQAAAAMAAAAxAQIAEAAAAFoAAABphwQAAQAAAGoAAAAAAAAAo5MAAOgDAACjkwAA6AMAAFBhaW50Lk5FVCA1LjEuOAADAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAWgBAABAAAAlAAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAAC6HzhD+YwuiQAAAA5JREFUKFNjGAUkAwYGAAE2AAFjw6IYAAAAAElFTkSuQmCC);
+    background-clip: text;
+  }
+</style>
+THIS SHOULD NOT BE VISIBLE
+<!-- to force the background-image to load -->
+<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCA1LjEuOBtp6qgAAAC2ZVhJZklJKgAIAAAABQAaAQUAAQAAAEoAAAAbAQUAAQAAAFIAAAAoAQMAAQAAAAMAAAAxAQIAEAAAAFoAAABphwQAAQAAAGoAAAAAAAAAo5MAAOgDAACjkwAA6AMAAFBhaW50Lk5FVCA1LjEuOAADAACQBwAEAAAAMDIzMAGgAwABAAAAAQAAAAWgBAABAAAAlAAAAAAAAAACAAEAAgAEAAAAUjk4AAIABwAEAAAAMDEwMAAAAAC6HzhD+YwuiQAAAA5JREFUKFNjGAUkAwYGAAE2AAFjw6IYAAAAAElFTkSuQmCC" alt="">

Tests/LibWeb/Ref/input/css/backgrounds/root-element-border-radius.html

@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<link rel="match" href="../../../expected/css/backgrounds/black.html" />
+<style>
+  html {
+    background-color: black;
+    border-radius: 100px;
+  }
+</style>