From b821f7b283d23a52c28fb6ca4e910e26c987963a Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Thu, 15 Feb 2024 21:12:50 +0100 Subject: [PATCH] LibWeb: Implement scrollbar painting Introduces the rendering of scroll thumbs in vertical and horizontal directions. Currently, the thumbs are purely graphical elements that do not respond to mouse events. Nevertheless, this is beneficial as it makes it easier to identify elements that should respond to scrolling events. Painting of scrollbars uncovers numerous bugs in the calculation of scrollable overflow rectangles highlighting all the places where elements are made scrollable whey they shouldn't be. Positively, this issue might motivate us to pay more attention to this problem to eliminate unnecessary scrollbars. Currently, the scrollbar style is uniform across all platforms: a semi-transparent gray rectangle with rounded corners. Also here we add `scrollbar-width: none` to all existing scrolling ref-tests, so they keep working with this change. --- .../Ref/abspos-escapes-scroll-container.html | 1 + .../Ref/button-inside-scroll-container.html | 4 ++ Tests/LibWeb/Ref/css-backgrounds.html | 1 + Tests/LibWeb/Ref/overflow-hidden-7.html | 1 + ...-box-with-nested-stacking-context-ref.html | 4 ++ ...ains-boxes-with-hidden-overflow-1-ref.html | 3 + ...ains-boxes-with-hidden-overflow-2-ref.html | 3 + ...-with-hidden-overflow-and-opacity-ref.html | 3 + .../Ref/scroll-using-mousewheel-event.html | 1 + ...able-box-with-nested-stacking-context.html | 4 ++ ...contains-boxes-with-hidden-overflow-1.html | 3 + ...contains-boxes-with-hidden-overflow-2.html | 3 + ...oxes-with-hidden-overflow-and-opacity.html | 4 ++ .../Ref/svg-inside-scroll-container.html | 4 ++ .../LibWeb/Painting/PaintableBox.cpp | 58 +++++++++++++++++++ .../Libraries/LibWeb/Painting/PaintableBox.h | 7 +++ 16 files changed, 104 insertions(+) diff --git a/Tests/LibWeb/Ref/abspos-escapes-scroll-container.html b/Tests/LibWeb/Ref/abspos-escapes-scroll-container.html index 34a373b62a..92a87e0200 100644 --- a/Tests/LibWeb/Ref/abspos-escapes-scroll-container.html +++ b/Tests/LibWeb/Ref/abspos-escapes-scroll-container.html @@ -6,6 +6,7 @@ height: 200px; overflow: auto; border: 1px solid black; + scrollbar-width: none; } .content { height: 600px; diff --git a/Tests/LibWeb/Ref/button-inside-scroll-container.html b/Tests/LibWeb/Ref/button-inside-scroll-container.html index 8a39ef8730..06f9bfdd4d 100644 --- a/Tests/LibWeb/Ref/button-inside-scroll-container.html +++ b/Tests/LibWeb/Ref/button-inside-scroll-container.html @@ -1,6 +1,10 @@