mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-25 19:56:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb: Use efficient background repeat path for either direction

Browse source 
We're able to efficiently draw repeated bitmaps through Skia, but for
backgrounds we only did so if the background was `repeat-x` _and_
`repeat-y`, and not if just one was set. This meant that for backgrounds
that were only repeating in one direction, we were taking the slow path.
Turns out that this slow path also produced graphical artifacts when
zooming in and out, so let's not do that :^)
This commit is contained in:
Jelle Raaijmakers 2025-05-09 14:51:48 +02:00 • committed by Jelle Raaijmakers
commit 70b52e0994
Notes: github-actions[bot] 2025-05-09 19:40:20 +00:00
4 changed files with 23 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Libraries/LibWeb/Painting/BackgroundPainting.cpp
View file

@ -295,7 +295,7 @@ void paint_background(PaintContext& context, PaintableBox const& paintable_box,
fill_rect.unite(image_device_rect); fill_rect.unite(image_device_rect);
}); });
display_list_recorder.fill_rect(fill_rect.to_type<int>(), color.value()); display_list_recorder.fill_rect(fill_rect.to_type<int>(), color.value());
} else if (is<CSS::ImageStyleValue>(image) && repeat_x && repeat_y && !repeat_x_has_gap && !repeat_y_has_gap) { } else if (is<CSS::ImageStyleValue>(image) && (repeat_x || repeat_y) && !repeat_x_has_gap && !repeat_y_has_gap) {
// Use a dedicated painting command for repeated images instead of recording a separate command for each instance // Use a dedicated painting command for repeated images instead of recording a separate command for each instance
// of a repeated background, so the painter has the opportunity to optimize the painting of repeated images. // of a repeated background, so the painter has the opportunity to optimize the painting of repeated images.
auto dest_rect = context.rounded_device_rect(image_rect); auto dest_rect = context.rounded_device_rect(image_rect);

7
Tests/LibWeb/Screenshot/expected/css-background-repeat-x-and-zoomed-ref.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<style>
* {
margin: 0;
}
</style>
<img src="../images/css-background-repeat-x-and-zoomed-ref.png">

BIN
Tests/LibWeb/Screenshot/images/css-background-repeat-x-and-zoomed-ref.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

15
Tests/LibWeb/Screenshot/input/css-background-repeat-x-and-zoomed.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<link rel="match" href="../expected/css-background-repeat-x-and-zoomed-ref.html" />
<style>
#a {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAIAAADITs03AAAAEklEQVQY02P4z8DAxDCKBwsGACnPAcZhKteIAAAAAElFTkSuQmCC) repeat-x;
height: 100px;
width: 100px;
}
</style>
<!-- FIXME: Workaround to ensure CSS background-image is loaded before taking screenshot: https://github.com/LadybirdBrowser/ladybird/issues/3448 -->
<img src="../data/smiley.png"/>
<div id="a"></div>
<script>
internals.setBrowserZoom(1.2);
</script>