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

LibWeb: Implement clip property

Browse source 
Implement clip when it is defined in the css property 'clip' as a rect
according to spec; only when the div is absolutely positioned.
This commit is contained in:
Tom 2022-08-02 15:08:06 +02:00 • committed by Andreas Kling
parent 8163ee1500
commit 5049a56d96
3 changed files with 33 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -836,6 +836,27 @@ Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcSum::reso
return resolve_sum_type(type, zero_or_more_additional_calc_products); return resolve_sum_type(type, zero_or_more_additional_calc_products);
} }
// https://www.w3.org/TR/CSS2/visufx.html#value-def-shape
Gfx::FloatRect EdgeRect::resolved(Layout::Node const& layout_node, Gfx::FloatRect border_box) const
{
// In CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where
// <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and
// <left> specify offsets from the left border edge of the box.
// The value 'auto' means that a given edge of the clipping region will be the same as the edge
// of the element's generated border box (i.e., 'auto' means the same as '0' for <top> and
// <left>, the same as the used value of the height plus the sum of vertical padding and border
// widths for <bottom>, and the same as the used value of the width plus the sum of the
// horizontal padding and border widths for <right>, such that four 'auto' values result in the
// clipping region being the same as the element's border box).
return Gfx::FloatRect {
left_edge.is_auto() ? 0 : left_edge.to_px(layout_node),
top_edge.is_auto() ? 0 : top_edge.to_px(layout_node),
right_edge.is_auto() ? border_box.width() : right_edge.to_px(layout_node) - left_edge.to_px(layout_node),
bottom_edge.is_auto() ? border_box.height() : bottom_edge.to_px(layout_node) - top_edge.to_px(layout_node)
};
}
Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcNumberSum::resolved_type() const Optional<CalculatedStyleValue::ResolvedType> CalculatedStyleValue::CalcNumberSum::resolved_type() const
{ {
auto maybe_type = first_calc_number_product->resolved_type(); auto maybe_type = first_calc_number_product->resolved_type();

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

@ -89,6 +89,7 @@ struct EdgeRect {
Length right_edge; Length right_edge;
Length bottom_edge; Length bottom_edge;
Length left_edge; Length left_edge;
Gfx::FloatRect resolved(Layout::Node const&, Gfx::FloatRect) const;
}; };
// FIXME: Find a better place for this helper. // FIXME: Find a better place for this helper.

11
Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
View file

@ -113,7 +113,15 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
if (!is_visible()) if (!is_visible())
return; return;
auto clip_rect = computed_values().clip();
auto should_clip_rect = clip_rect.is_rect() && computed_values().position() == CSS::Position::Absolute;
if (phase == PaintPhase::Background) { if (phase == PaintPhase::Background) {
if (should_clip_rect) {
context.painter().save();
auto border_box = absolute_border_box_rect();
context.painter().add_clip_rect(clip_rect.to_rect().resolved(Paintable::layout_node(), border_box).to_rounded<int>());
}
paint_background(context); paint_background(context);
paint_box_shadow(context); paint_box_shadow(context);
} }
@ -122,6 +130,9 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
paint_border(context); paint_border(context);
} }
if (phase == PaintPhase::Overlay && should_clip_rect)
context.painter().restore();
if (phase == PaintPhase::Overlay && layout_box().dom_node() && layout_box().document().inspected_node() == layout_box().dom_node()) { if (phase == PaintPhase::Overlay && layout_box().dom_node() && layout_box().document().inspected_node() == layout_box().dom_node()) {
auto content_rect = absolute_rect(); auto content_rect = absolute_rect();