beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-30 08:41:15 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Deal with Boxes that have a background, border and -radius

Browse source 
This hack allows for Boxes that have a background to be painted and a
border to accurately paint their border-radii if needed.
For that the box in with the background is drawn is extended to the
bordered_rect. The border is later drawn over this regardless.
Previously when drawing a Box that had all three, background, border
and a border-radius, there could be some white between the filling and
the border.
This commit is contained in:
Tobias Christiansen 2021-05-16 20:03:04 +02:00 committed by Andreas Kling
parent a49812cb07
commit adfdfd6aba
Notes: sideshowbarker 2024-07-18 17:41:05 +09:00 
Author: https://github.com/TobyAsE
Commit: https://github.com/SerenityOS/serenity/commit/adfdfd6aba5
Pull-request: https://github.com/SerenityOS/serenity/pull/7115
Reviewed-by: https://github.com/awesomekling
1 changed files with 6 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
Userland/Libraries/LibWeb/Layout/Box.cpp
View file

@ -179,11 +179,11 @@ void Box::paint_background(PaintContext& context)
if (is_body() && document().html_element()->should_use_body_background_properties())
return;
Gfx::IntRect background_rect;
Color background_color = computed_values().background_color();
const Gfx::Bitmap* background_image = this->background_image() ? this->background_image()->bitmap() : nullptr;
CSS::Repeat background_repeat_x = computed_values().background_repeat_x();
CSS::Repeat background_repeat_y = computed_values().background_repeat_y();
auto background_rect = enclosing_int_rect(padded_rect);
if (is_root_element()) {
// CSS 2.1 Appendix E.2: If the element is a root element, paint the background over the entire canvas.
@ -201,6 +201,11 @@ void Box::paint_background(PaintContext& context)
background_rect = enclosing_int_rect(padded_rect);
}
// 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)
background_rect = enclosing_int_rect(bordered_rect());
// FIXME: some values should be relative to the height() if specified, but which? For now, all relative values are relative to the width.
auto border_radius_data = normalized_border_radius_data();
auto top_left_radius = border_radius_data.top_left;