diff --git a/Userland/Libraries/LibWeb/CSS/Identifiers.json b/Userland/Libraries/LibWeb/CSS/Identifiers.json index 5a2451a5af..7fe992bc29 100644 --- a/Userland/Libraries/LibWeb/CSS/Identifiers.json +++ b/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", diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json index 4d72137c9c..9e81881500 100644 --- a/Userland/Libraries/LibWeb/CSS/Properties.json +++ b/Userland/Libraries/LibWeb/CSS/Properties.json @@ -765,7 +765,10 @@ "initial": "auto", "valid-identifiers": [ "auto", - "pixelated" + "crisp-edges", + "high-quality", + "pixelated", + "smooth" ] }, "justify-content": { diff --git a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp index 7e3d741d5b..88b255fb65 100644 --- a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp +++ b/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(); } diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp index 6dc10cd3de..584d775603 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -277,8 +277,14 @@ Optional 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 {}; } diff --git a/Userland/Libraries/LibWeb/CSS/StyleValue.h b/Userland/Libraries/LibWeb/CSS/StyleValue.h index e94aa54160..180c5a4e2c 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleValue.h +++ b/Userland/Libraries/LibWeb/CSS/StyleValue.h @@ -22,6 +22,7 @@ #include #include #include +#include #include #include #include @@ -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, diff --git a/Userland/Libraries/LibWeb/Layout/CanvasBox.cpp b/Userland/Libraries/LibWeb/Layout/CanvasBox.cpp index 7841d1c514..7721c9dc1a 100644 --- a/Userland/Libraries/LibWeb/Layout/CanvasBox.cpp +++ b/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()) { - 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, scaling_mode); - } + if (dom_node().bitmap()) + 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())); } } diff --git a/Userland/Libraries/LibWeb/Layout/ImageBox.cpp b/Userland/Libraries/LibWeb/Layout/ImageBox.cpp index e9dc183fd7..cdfea15454 100644 --- a/Userland/Libraries/LibWeb/Layout/ImageBox.cpp +++ b/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' - 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); + context.painter().draw_scaled_bitmap(rounded_int_rect(absolute_rect()), *bitmap, bitmap->rect(), 1.0f, to_gfx_scaling_mode(computed_values().image_rendering())); } } }