mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 08:37:45 +00:00
LibWeb: Extract border-radius normalization code from Box
This is going to be needed by InlineNodes too! `BorderPainting.{h,cpp}` might not be the best place for it, but it works for now.
This commit is contained in:
parent
b88641e44b
commit
aaf12929d5
4 changed files with 39 additions and 29 deletions
|
@ -299,28 +299,13 @@ void Box::paint_box_shadow(PaintContext& context)
|
||||||
context.painter().blit(rect.location() + blur_rect_position, *new_bitmap, rect);
|
context.painter().blit(rect.location() + blur_rect_position, *new_bitmap, rect);
|
||||||
}
|
}
|
||||||
|
|
||||||
Box::BorderRadiusData Box::normalized_border_radius_data()
|
Painting::BorderRadiusData Box::normalized_border_radius_data()
|
||||||
{
|
{
|
||||||
// FIXME: some values should be relative to the height() if specified, but which? For now, all relative values are relative to the width.
|
return Painting::normalized_border_radius_data(*this, bordered_rect(),
|
||||||
auto bottom_left_radius = computed_values().border_bottom_left_radius().resolved_or_zero(*this, width()).to_px(*this);
|
computed_values().border_top_left_radius(),
|
||||||
auto bottom_right_radius = computed_values().border_bottom_right_radius().resolved_or_zero(*this, width()).to_px(*this);
|
computed_values().border_top_right_radius(),
|
||||||
auto top_left_radius = computed_values().border_top_left_radius().resolved_or_zero(*this, width()).to_px(*this);
|
computed_values().border_bottom_right_radius(),
|
||||||
auto top_right_radius = computed_values().border_top_right_radius().resolved_or_zero(*this, width()).to_px(*this);
|
computed_values().border_bottom_left_radius());
|
||||||
|
|
||||||
// Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
|
|
||||||
auto bordered_rect = this->bordered_rect();
|
|
||||||
auto f = 1.0f;
|
|
||||||
f = min(f, bordered_rect.width() / (float)(top_left_radius + top_right_radius));
|
|
||||||
f = min(f, bordered_rect.height() / (float)(top_right_radius + bottom_right_radius));
|
|
||||||
f = min(f, bordered_rect.width() / (float)(bottom_left_radius + bottom_right_radius));
|
|
||||||
f = min(f, bordered_rect.height() / (float)(top_left_radius + bottom_left_radius));
|
|
||||||
|
|
||||||
top_left_radius = (int)(top_left_radius * f);
|
|
||||||
top_right_radius = (int)(top_right_radius * f);
|
|
||||||
bottom_right_radius = (int)(bottom_right_radius * f);
|
|
||||||
bottom_left_radius = (int)(bottom_left_radius * f);
|
|
||||||
|
|
||||||
return { top_left_radius, top_right_radius, bottom_right_radius, bottom_left_radius };
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://www.w3.org/TR/css-display-3/#out-of-flow
|
// https://www.w3.org/TR/css-display-3/#out-of-flow
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
#include <LibGfx/Rect.h>
|
#include <LibGfx/Rect.h>
|
||||||
#include <LibWeb/Layout/LineBox.h>
|
#include <LibWeb/Layout/LineBox.h>
|
||||||
#include <LibWeb/Layout/Node.h>
|
#include <LibWeb/Layout/Node.h>
|
||||||
|
#include <LibWeb/Painting/BorderPainting.h>
|
||||||
#include <LibWeb/Painting/StackingContext.h>
|
#include <LibWeb/Painting/StackingContext.h>
|
||||||
|
|
||||||
namespace Web::Layout {
|
namespace Web::Layout {
|
||||||
|
@ -125,14 +126,7 @@ public:
|
||||||
|
|
||||||
virtual float width_of_logical_containing_block() const;
|
virtual float width_of_logical_containing_block() const;
|
||||||
|
|
||||||
struct BorderRadiusData {
|
Painting::BorderRadiusData normalized_border_radius_data();
|
||||||
float top_left { 0 };
|
|
||||||
float top_right { 0 };
|
|
||||||
float bottom_right { 0 };
|
|
||||||
float bottom_left { 0 };
|
|
||||||
};
|
|
||||||
|
|
||||||
BorderRadiusData normalized_border_radius_data();
|
|
||||||
|
|
||||||
protected:
|
protected:
|
||||||
Box(DOM::Document& document, DOM::Node* node, NonnullRefPtr<CSS::StyleProperties> style)
|
Box(DOM::Document& document, DOM::Node* node, NonnullRefPtr<CSS::StyleProperties> style)
|
||||||
|
|
|
@ -10,6 +10,29 @@
|
||||||
|
|
||||||
namespace Web::Painting {
|
namespace Web::Painting {
|
||||||
|
|
||||||
|
BorderRadiusData normalized_border_radius_data(Layout::Node const& node, Gfx::FloatRect const& rect, CSS::Length top_left_radius, CSS::Length top_right_radius, CSS::Length bottom_right_radius, CSS::Length bottom_left_radius)
|
||||||
|
{
|
||||||
|
// FIXME: some values should be relative to the height() if specified, but which? For now, all relative values are relative to the width.
|
||||||
|
auto bottom_left_radius_px = bottom_left_radius.resolved_or_zero(node, rect.width()).to_px(node);
|
||||||
|
auto bottom_right_radius_px = bottom_right_radius.resolved_or_zero(node, rect.width()).to_px(node);
|
||||||
|
auto top_left_radius_px = top_left_radius.resolved_or_zero(node, rect.width()).to_px(node);
|
||||||
|
auto top_right_radius_px = top_right_radius.resolved_or_zero(node, rect.width()).to_px(node);
|
||||||
|
|
||||||
|
// Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
|
||||||
|
auto f = 1.0f;
|
||||||
|
f = min(f, rect.width() / (float)(top_left_radius_px + top_right_radius_px));
|
||||||
|
f = min(f, rect.height() / (float)(top_right_radius_px + bottom_right_radius_px));
|
||||||
|
f = min(f, rect.width() / (float)(bottom_left_radius_px + bottom_right_radius_px));
|
||||||
|
f = min(f, rect.height() / (float)(top_left_radius_px + bottom_left_radius_px));
|
||||||
|
|
||||||
|
top_left_radius_px = (int)(top_left_radius_px * f);
|
||||||
|
top_right_radius_px = (int)(top_right_radius_px * f);
|
||||||
|
bottom_right_radius_px = (int)(bottom_right_radius_px * f);
|
||||||
|
bottom_left_radius_px = (int)(bottom_left_radius_px * f);
|
||||||
|
|
||||||
|
return BorderRadiusData { top_left_radius_px, top_right_radius_px, bottom_right_radius_px, bottom_left_radius_px };
|
||||||
|
}
|
||||||
|
|
||||||
void paint_border(PaintContext& context, BorderEdge edge, const Gfx::FloatRect& rect, const CSS::ComputedValues& style)
|
void paint_border(PaintContext& context, BorderEdge edge, const Gfx::FloatRect& rect, const CSS::ComputedValues& style)
|
||||||
{
|
{
|
||||||
const auto& border_data = [&] {
|
const auto& border_data = [&] {
|
||||||
|
|
|
@ -11,6 +11,14 @@
|
||||||
|
|
||||||
namespace Web::Painting {
|
namespace Web::Painting {
|
||||||
|
|
||||||
|
struct BorderRadiusData {
|
||||||
|
float top_left { 0 };
|
||||||
|
float top_right { 0 };
|
||||||
|
float bottom_right { 0 };
|
||||||
|
float bottom_left { 0 };
|
||||||
|
};
|
||||||
|
BorderRadiusData normalized_border_radius_data(Layout::Node const&, Gfx::FloatRect const&, CSS::Length top_left_radius, CSS::Length top_right_radius, CSS::Length bottom_right_radius, CSS::Length bottom_left_radius);
|
||||||
|
|
||||||
enum class BorderEdge {
|
enum class BorderEdge {
|
||||||
Top,
|
Top,
|
||||||
Right,
|
Right,
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue