LibWeb: Use anti-aliasing to draw images and painting surfaces

gmta · gmta · commit 2811c75031e4 · 2025-11-12T17:43:02.000+01:00
Fixes the jagged edges on the transformed badge on https://aaronfrancis.com/backstage.
diff --git a/Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp b/Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp
@@ -155,6 +155,7 @@ void DisplayListPlayerSkia::draw_painting_surface(DrawPaintingSurface const& com
     auto& canvas = surface().canvas();
     auto image = sk_surface.makeImageSnapshot();
     SkPaint paint;
+    paint.setAntiAlias(true);
     canvas.drawImageRect(image, src_rect, dst_rect, to_skia_sampling_options(command.scaling_mode), &paint, SkCanvas::kStrict_SrcRectConstraint);
 }
 
@@ -164,6 +165,7 @@ void DisplayListPlayerSkia::draw_scaled_immutable_bitmap(DrawScaledImmutableBitm
     auto clip_rect = to_skia_rect(command.clip_rect);
     auto& canvas = surface().canvas();
     SkPaint paint;
+    paint.setAntiAlias(true);
     canvas.save();
     canvas.clipRect(clip_rect, true);
     canvas.drawImageRect(command.bitmap->sk_image(), dst_rect, to_skia_sampling_options(command.scaling_mode), &paint);
@@ -184,6 +186,7 @@ void DisplayListPlayerSkia::draw_repeated_immutable_bitmap(DrawRepeatedImmutable
     auto shader = command.bitmap->sk_image()->makeShader(tile_mode_x, tile_mode_y, sampling_options, matrix);
 
     SkPaint paint;
+    paint.setAntiAlias(true);
     paint.setShader(shader);
     auto& canvas = surface().canvas();
     canvas.drawPaint(paint);
diff --git a/Tests/LibWeb/Screenshot/expected/image-transformation-anti-aliasing-ref.html b/Tests/LibWeb/Screenshot/expected/image-transformation-anti-aliasing-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+    * {
+        margin: 0;
+    }
+    body {
+        background-color: white;
+    }
+</style>
+<img src="../images/image-transformation-anti-aliasing-ref.png">
diff --git a/Tests/LibWeb/Screenshot/images/image-transformation-anti-aliasing-ref.png b/Tests/LibWeb/Screenshot/images/image-transformation-anti-aliasing-ref.png
diff --git a/Tests/LibWeb/Screenshot/input/image-transformation-anti-aliasing.html b/Tests/LibWeb/Screenshot/input/image-transformation-anti-aliasing.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<link rel="match" href="../expected/image-transformation-anti-aliasing-ref.html" />
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-477">
+<style>
+div {
+    perspective: 900px;
+}
+img {
+    transform: rotateY(45deg);
+}
+</style>
+<div>
+    <img src="../data/car.png">
+</div>
