RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 16:17:45 +00:00
Code Issues Activity Actions

LibWeb: Support painting simple linear-gradients

Browse source 
This is just a quick test that everything is working. Currently
it paints the gradients with the existing
painter.fill_rect_with_gradient(). This can only handle two-color
orthogonal gradients.
This commit is contained in:
MacDue 2022-07-12 00:30:35 +01:00 • committed by Sam Atkins
parent ee7e9e7c86
commit cbc04a6285
1 changed files with 52 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

53
Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp
View file

@ -1,6 +1,7 @@
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2022, MacDue <macdue@dueutil.tech>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -15,6 +16,43 @@
namespace Web::Painting {
struct GfxGradient {
Gfx::Orientation orientation;
Gfx::Color color_a;
Gfx::Color color_b;
};
static Optional<GfxGradient> linear_gradient_to_gfx_gradient(CSS::LinearGradientStyleValue const& linear_gradient, Gfx::FloatRect const& background_rect)
{
if (linear_gradient.color_stop_list().size() != 2)
return {};
auto angle = round_to<int>(linear_gradient.angle(background_rect));
auto color_a = linear_gradient.color_stop_list()[0].color_stop.color;
auto color_b = linear_gradient.color_stop_list()[1].color_stop.color;
auto orientation = [&]() -> Optional<Gfx::Orientation> {
switch (angle) {
case 0:
swap(color_a, color_b);
[[fallthrough]];
case 180:
return Gfx::Orientation::Vertical;
case 270:
swap(color_a, color_b);
[[fallthrough]];
case 90:
return Gfx::Orientation::Horizontal;
default:
return {};
}
}();
if (!orientation.has_value())
return {};
return GfxGradient { *orientation, color_a, color_b };
};
// https://www.w3.org/TR/css-backgrounds-3/#backgrounds
void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMetrics const& layout_node, Gfx::FloatRect const& border_rect, Color background_color, Vector<CSS::BackgroundLayerData> const* background_layers, BorderRadiiData const& border_radii)
{
@ -60,7 +98,9 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
color_box = get_box(background_layers->last().clip);
auto layer_is_paintable = [&](auto& layer) {
return layer.background_image && layer.background_image->is_image() && layer.background_image->as_image().bitmap();
return (layer.background_image
&& ((layer.background_image->is_image() && layer.background_image->as_image().bitmap())
|| layer.background_image->is_linear_gradient()));
};
bool has_paintable_layers = false;
@ -93,6 +133,17 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
painter.add_clip_rect(clip_rect);
ScopedCornerRadiusClip corner_clip { painter, clip_rect, clip_box.radii };
if (layer.background_image->is_linear_gradient()) {
// FIXME: Paint non-orthogonal gradients, gradients with > 2 color stops, gradients with custom stop positions ...
// FIXME: Support sizing and positioning rules with gradients.
auto& linear_gradient = layer.background_image->as_linear_gradient();
auto gfx_gradient = linear_gradient_to_gfx_gradient(linear_gradient, border_box.rect);
if (gfx_gradient.has_value()) {
painter.fill_rect_with_gradient(gfx_gradient->orientation, border_box.rect.to_rounded<int>(), gfx_gradient->color_a, gfx_gradient->color_b);
}
continue;
}
auto& image = *layer.background_image->as_image().bitmap();
Gfx::FloatRect background_positioning_area;