LibWeb: Support more CSS image-rendering values

This patch adds support for "crisp-edges", "high-quality" and "smooth"
for the CSS image-rendering property.

"crisp-edges" maps to nearest-neighbor scaling for <canvas> and <img>
elements, while "high-quality" and "smooth" both use bilinear blending.

Userland/Libraries/LibWeb/CSS/Identifiers.json

@@ -86,6 +86,7 @@
   "context-menu",
   "copy",
   "cover",
+  "crisp-edges",
   "crosshair",
   "currentcolor",
   "cursive",
@@ -114,6 +115,7 @@
   "groove",
   "help",
   "hidden",
+  "high-quality",
   "inline",
   "inline-block",
   "inline-flex",
@@ -187,6 +189,7 @@
   "small",
   "small-caps",
   "smaller",
+  "smooth",
   "solid",
   "space",
   "space-around",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -765,7 +765,10 @@
     "initial": "auto",
     "valid-identifiers": [
       "auto",
-      "pixelated"
+      "crisp-edges",
+      "high-quality",
+      "pixelated",
+      "smooth"
     ]
   },
   "justify-content": {

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -363,8 +363,14 @@ static CSS::ValueID to_css_value_id(CSS::ImageRendering value)
     switch (value) {
     case ImageRendering::Auto:
         return CSS::ValueID::Auto;
+    case ImageRendering::CrispEdges:
+        return CSS::ValueID::CrispEdges;
+    case ImageRendering::HighQuality:
+        return CSS::ValueID::HighQuality;
     case ImageRendering::Pixelated:
         return CSS::ValueID::Pixelated;
+    case ImageRendering::Smooth:
+        return CSS::ValueID::Smooth;
     }
     VERIFY_NOT_REACHED();
 }

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -277,8 +277,14 @@ Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
     switch (value.value()->to_identifier()) {
     case CSS::ValueID::Auto:
         return CSS::ImageRendering::Auto;
+    case CSS::ValueID::CrispEdges:
+        return CSS::ImageRendering::CrispEdges;
+    case CSS::ValueID::HighQuality:
+        return CSS::ImageRendering::HighQuality;
     case CSS::ValueID::Pixelated:
         return CSS::ImageRendering::Pixelated;
+    case CSS::ValueID::Smooth:
+        return CSS::ImageRendering::Smooth;
     default:
         return {};
     }

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -22,6 +22,7 @@
 #include <AK/WeakPtr.h>
 #include <LibGfx/Bitmap.h>
 #include <LibGfx/Color.h>
+#include <LibGfx/Painter.h>
 #include <LibWeb/CSS/Angle.h>
 #include <LibWeb/CSS/Display.h>
 #include <LibWeb/CSS/Frequency.h>
@@ -146,9 +147,27 @@ enum class Float {
 
 enum class ImageRendering {
     Auto,
-    Pixelated
+    CrispEdges,
+    HighQuality,
+    Pixelated,
+    Smooth,
 };
 
+// FIXME: Find a better place for this helper.
+inline Gfx::Painter::ScalingMode to_gfx_scaling_mode(CSS::ImageRendering css_value)
+{
+    switch (css_value) {
+    case CSS::ImageRendering::Auto:
+    case CSS::ImageRendering::HighQuality:
+    case CSS::ImageRendering::Smooth:
+        return Gfx::Painter::ScalingMode::BilinearBlend;
+    case CSS::ImageRendering::CrispEdges:
+    case CSS::ImageRendering::Pixelated:
+        return Gfx::Painter::ScalingMode::NearestNeighbor;
+    }
+    VERIFY_NOT_REACHED();
+}
+
 enum class JustifyContent {
     FlexStart,
     FlexEnd,

Userland/Libraries/LibWeb/Layout/CanvasBox.cpp

@@ -36,10 +36,8 @@ void CanvasBox::paint(PaintContext& context, PaintPhase phase)
         if (!context.viewport_rect().intersects(enclosing_int_rect(absolute_rect())))
             return;
 
-        if (dom_node().bitmap()) {
+        if (dom_node().bitmap())
-            auto scaling_mode = computed_values().image_rendering() == CSS::ImageRendering::Pixelated ? Gfx::Painter::ScalingMode::NearestNeighbor : Gfx::Painter::ScalingMode::BilinearBlend;
+            context.painter().draw_scaled_bitmap(rounded_int_rect(absolute_rect()), *dom_node().bitmap(), dom_node().bitmap()->rect(), 1.0f, to_gfx_scaling_mode(computed_values().image_rendering()));
-            context.painter().draw_scaled_bitmap(rounded_int_rect(absolute_rect()), *dom_node().bitmap(), dom_node().bitmap()->rect(), 1.0f, scaling_mode);
-        }
     }
 }
 

Userland/Libraries/LibWeb/Layout/ImageBox.cpp

@@ -93,9 +93,7 @@ void ImageBox::paint(PaintContext& context, PaintPhase phase)
                 alt = image_element.src();
             context.painter().draw_text(enclosing_int_rect(absolute_rect()), alt, Gfx::TextAlignment::Center, computed_values().color(), Gfx::TextElision::Right);
         } else if (auto bitmap = m_image_loader.bitmap(m_image_loader.current_frame_index())) {
-            // FIXME: Support 'crisp-edges', 'smooth' and 'high-quality'
+            context.painter().draw_scaled_bitmap(rounded_int_rect(absolute_rect()), *bitmap, bitmap->rect(), 1.0f, to_gfx_scaling_mode(computed_values().image_rendering()));
-            auto scaling_mode = computed_values().image_rendering() == CSS::ImageRendering::Pixelated ? Gfx::Painter::ScalingMode::NearestNeighbor : Gfx::Painter::ScalingMode::BilinearBlend;
-            context.painter().draw_scaled_bitmap(rounded_int_rect(absolute_rect()), *bitmap, bitmap->rect(), 1.0f, scaling_mode);
         }
     }
 }