LibGfx: Change PNGLoader to always return premultiplied color data

Although the PNG format inherently works with unpremultiplied color data, we are seeing issues with Skia trying to blend unpremultiplied colors and producing the typical erroneous darker color bands. Our LibWeb tests actually had a couple of screenshot tests that exposed these graphical glitches; see the big smiley faces in the CSS backgrounds tests for example. The failing tests are now updated to accommodate PNGLoader's new behavior. Chromium seems to apply the same behavior; i.e. it actively decodes PNGs to a premultiplied bitmap instead, citing the same shortcoming in Skia. Fixes LadybirdBrowser#3691.
gmta · Feb 26, 2025 · dd308bd · dd308bd
1 parent f2916cb
commit dd308bd
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 0 deletions.
diff --git a/Libraries/LibGfx/Bitmap.cpp b/Libraries/LibGfx/Bitmap.cpp
@@ -245,4 +245,26 @@ bool Bitmap::visually_equals(Bitmap const& other) const
     return true;
 }
 
+void Bitmap::set_alpha_type_destructive(AlphaType alpha_type)
+{
+    if (alpha_type == m_alpha_type)
+        return;
+
+    if (m_alpha_type == AlphaType::Unpremultiplied) {
+        for (auto y = 0; y < height(); ++y) {
+            for (auto x = 0; x < width(); ++x)
+                set_pixel(x, y, get_pixel(x, y).to_premultiplied());
+        }
+    } else if (m_alpha_type == AlphaType::Premultiplied) {
+        for (auto y = 0; y < height(); ++y) {
+            for (auto x = 0; x < width(); ++x)
+                set_pixel(x, y, get_pixel(x, y).to_unpremultiplied());
+        }
+    } else {
+        VERIFY_NOT_REACHED();
+    }
+
+    m_alpha_type = alpha_type;
+}
+
 }
diff --git a/Libraries/LibGfx/Bitmap.h b/Libraries/LibGfx/Bitmap.h
@@ -145,6 +145,7 @@ class Bitmap : public RefCounted<Bitmap> {
     [[nodiscard]] bool visually_equals(Bitmap const&) const;
 
     [[nodiscard]] AlphaType alpha_type() const { return m_alpha_type; }
+    void set_alpha_type_destructive(AlphaType);
 
 private:
     Bitmap(BitmapFormat, AlphaType, IntSize, BackingStore const&);

diff --git a/Libraries/LibGfx/Color.h b/Libraries/LibGfx/Color.h
@@ -253,6 +253,15 @@ class Color {
         return color_with_alpha;
     }
 
+    constexpr Color to_premultiplied() const
+    {
+        return Color(
+            red() * alpha() / 255,
+            green() * alpha() / 255,
+            blue() * alpha() / 255,
+            alpha());
+    }
+
     constexpr Color to_unpremultiplied() const
     {
         if (alpha() == 0 || alpha() == 255)

diff --git a/Libraries/LibGfx/ImageFormats/PNGLoader.cpp b/Libraries/LibGfx/ImageFormats/PNGLoader.cpp
@@ -257,6 +257,12 @@ ErrorOr<size_t> PNGLoadingContext::read_frames(png_structp png_ptr, png_infop in
             row_pointers[i] = frame_bitmap->scanline_u8(i);
 
         png_read_image(png_ptr, row_pointers.data());
+
+        // Convert the frame to premultiplied alpha. Apart from the fact that it's theoretically a bit faster to blend
+        // premultiplied pixels, Skia eventually runs into issues when trying to blend unpremultiplied pixels when
+        // scaling up and using linear interpolation.
+        frame_bitmap->set_alpha_type_destructive(AlphaType::Premultiplied);
+
         return frame_bitmap;
     };
 

diff --git a/Tests/LibWeb/Screenshot/expected/image-unpremultiplied-data-ref.html b/Tests/LibWeb/Screenshot/expected/image-unpremultiplied-data-ref.html
@@ -0,0 +1,15 @@
+<style>
+  * {
+    margin: 0;
+  }
+  body {
+    background-color: cyan;
+  }
+</style>
+<!-- To rebase:
+  1. Open image-unpremultiplied-data.html in Ladybird
+  2. Resize the window just above the width of the largest element
+  3. Right click > "Take Full Screenshot"
+  4. Update the image below:
+-->
+<img src="../images/image-unpremultiplied-data-ref.png">
diff --git a/Tests/LibWeb/Screenshot/images/border-radius-ref.png b/Tests/LibWeb/Screenshot/images/border-radius-ref.png
diff --git a/Tests/LibWeb/Screenshot/images/canvas-filters.png b/Tests/LibWeb/Screenshot/images/canvas-filters.png
diff --git a/Tests/LibWeb/Screenshot/images/css-backgrounds-ref.png b/Tests/LibWeb/Screenshot/images/css-backgrounds-ref.png
diff --git a/Tests/LibWeb/Screenshot/images/image-unpremultiplied-data-ref.png b/Tests/LibWeb/Screenshot/images/image-unpremultiplied-data-ref.png
diff --git a/Tests/LibWeb/Screenshot/input/image-unpremultiplied-data.html b/Tests/LibWeb/Screenshot/input/image-unpremultiplied-data.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<link rel="match" href="../expected/image-unpremultiplied-data-ref.html" />
+<img style="width: 200px; height: 200px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAxUlEQVRoge2Z0Q6EIAwEwf//Z+5pE0P0BCxlLTvvKOOSqm1KQghhRSmpzL5HtrzYyIZzttmDyUUsnvhboVeLZxyZUaGhRS5nvlOoW8RDAvTIdIl4SoBWmWaRFRKgRaZJZKUEeJI5vDYym8dEGNIA/1LZIxGmNMBdKvETYUwDXKUSJhGJsCERNi6rFnPFAnXlUvllQyJsSIQNfcazoV9dNtQOYmOvTiMI0fsFIbrxIMR85MznJ1Y1n58h1qyc6rrA8EIVYnd+9SZLMlMCtbAAAAAASUVORK5CYII=">