RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-10-31 08:32:43 +00:00
Code Issues Activity Actions

LibWeb: Support more CSS image-rendering values

Browse source 
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.
This commit is contained in:
Andreas Kling 2022-03-06 18:17:50 +01:00
parent fe52ee2f8e
commit 6d1a9672a4
7 changed files with 42 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Userland/Libraries/LibWeb/CSS/Identifiers.json
View file

@ -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",

5
Userland/Libraries/LibWeb/CSS/Properties.json
View file

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

6
Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
View file

@ -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();
}

6
Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
View file

@ -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 {};
}

21
Userland/Libraries/LibWeb/CSS/StyleValue.h
View file

@ -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,

6
Userland/Libraries/LibWeb/Layout/CanvasBox.cpp
View file

@ -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()));
}
}

4
Userland/Libraries/LibWeb/Layout/ImageBox.cpp
View file

@ -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()));
}
}
}