mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 20:29:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Allow stacking context to only be created by PaintableBox

Browse source 
For a while we used the wider Paintable type for stacking context,
because it was allowed to be created by InlinePaintable and
PaintableBox. Now, when InlinePaintable type is gone, we can use more
specific PaintableBox type for a stacking context.
This commit is contained in:
Aliaksandr Kalenik 2024-11-18 16:05:22 +01:00 • committed by Andreas Kling
commit 9f541c363d
Notes: github-actions[bot] 2024-11-18 19:08:27 +00:00
7 changed files with 103 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

144
Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -1,6 +1,7 @@
/*
* Copyright (c) 2020-2022, Andreas Kling <andreas@ladybird.org>
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
* Copyright (c) 2024, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@ -27,7 +28,7 @@ static void paint_node(Paintable const& paintable, PaintContext& context, PaintP
paintable.after_paint(context, phase);
}
StackingContext::StackingContext(Paintable& paintable, StackingContext* parent, size_t index_in_tree_order)
StackingContext::StackingContext(PaintableBox& paintable, StackingContext* parent, size_t index_in_tree_order)
: m_paintable(paintable)
, m_parent(parent)
, m_index_in_tree_order(index_in_tree_order)
@ -40,8 +41,8 @@ StackingContext::StackingContext(Paintable& paintable, StackingContext* parent,
void StackingContext::sort()
{
quick_sort(m_children, [](auto& a, auto& b) {
auto a_z_index = a->paintable().computed_values().z_index().value_or(0);
auto b_z_index = b->paintable().computed_values().z_index().value_or(0);
auto a_z_index = a->paintable_box().computed_values().z_index().value_or(0);
auto b_z_index = b->paintable_box().computed_values().z_index().value_or(0);
if (a_z_index == b_z_index)
return a->m_index_in_tree_order < b->m_index_in_tree_order;
return a_z_index < b_z_index;
@ -112,7 +113,6 @@ void StackingContext::paint_descendants(PaintContext& context, Paintable const&
paintable.before_children_paint(context, to_paint_phase(phase));
paintable.for_each_child([&context, phase](auto& child) {
auto* stacking_context = child.stacking_context();
auto const& z_index = child.computed_values().z_index();
if (child.layout_node().is_svg_svg_box()) {
@ -120,7 +120,7 @@ void StackingContext::paint_descendants(PaintContext& context, Paintable const&
return IterationDecision::Continue;
}
if (stacking_context)
if (child.has_stacking_context())
return IterationDecision::Continue;
// NOTE: Grid specification https://www.w3.org/TR/css-grid-2/#z-order says that grid items should be treated
@ -185,12 +185,12 @@ void StackingContext::paint_descendants(PaintContext& context, Paintable const&
void StackingContext::paint_child(PaintContext& context, StackingContext const& child)
{
VERIFY(!child.paintable().layout_node().is_svg_box());
VERIFY(!child.paintable().layout_node().is_svg_svg_box());
VERIFY(!child.paintable_box().layout_node().is_svg_box());
VERIFY(!child.paintable_box().layout_node().is_svg_svg_box());
const_cast<StackingContext&>(child).set_last_paint_generation_id(context.paint_generation_id());
auto parent_paintable = child.paintable().parent();
auto parent_paintable = child.paintable_box().parent();
if (parent_paintable)
parent_paintable->before_children_paint(context, PaintPhase::Foreground);
@ -202,16 +202,16 @@ void StackingContext::paint_child(PaintContext& context, StackingContext const&
void StackingContext::paint_internal(PaintContext& context) const
{
VERIFY(!paintable().layout_node().is_svg_box());
if (paintable().layout_node().is_svg_svg_box()) {
VERIFY(!paintable_box().layout_node().is_svg_box());
if (paintable_box().layout_node().is_svg_svg_box()) {
paint_svg(context, paintable_box(), PaintPhase::Foreground);
return;
}
// For a more elaborate description of the algorithm, see CSS 2.1 Appendix E
// Draw the background and borders for the context root (steps 1, 2)
paint_node(paintable(), context, PaintPhase::Background);
paint_node(paintable(), context, PaintPhase::Border);
paint_node(paintable_box(), context, PaintPhase::Background);
paint_node(paintable_box(), context, PaintPhase::Border);
// Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order
// (most negative first) then tree order. (step 3)
@ -219,18 +219,18 @@ void StackingContext::paint_internal(PaintContext& context) const
// account for new properties like `transform` and `opacity` that can create stacking contexts.
// https://github.com/w3c/csswg-drafts/issues/2717
for (auto* child : m_children) {
if (child->paintable().computed_values().z_index().has_value() && child->paintable().computed_values().z_index().value() < 0)
if (child->paintable_box().computed_values().z_index().has_value() && child->paintable_box().computed_values().z_index().value() < 0)
paint_child(context, *child);
}
// Draw the background and borders for block-level children (step 4)
paint_descendants(context, paintable(), StackingContextPaintPhase::BackgroundAndBorders);
paint_descendants(context, paintable_box(), StackingContextPaintPhase::BackgroundAndBorders);
// Draw the non-positioned floats (step 5)
paint_descendants(context, paintable(), StackingContextPaintPhase::Floats);
paint_descendants(context, paintable_box(), StackingContextPaintPhase::Floats);
// Draw inline content, replaced content, etc. (steps 6, 7)
paint_descendants(context, paintable(), StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
paint_node(paintable(), context, PaintPhase::Foreground);
paint_descendants(context, paintable(), StackingContextPaintPhase::Foreground);
paint_descendants(context, paintable_box(), StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
paint_node(paintable_box(), context, PaintPhase::Foreground);
paint_descendants(context, paintable_box(), StackingContextPaintPhase::Foreground);
// Draw positioned descendants with z-index `0` or `auto` in tree order. (step 8)
// Here, we treat non-positioned stacking contexts as if they were positioned, because CSS 2.0 spec does not
@ -257,15 +257,15 @@ void StackingContext::paint_internal(PaintContext& context) const
// account for new properties like `transform` and `opacity` that can create stacking contexts.
// https://github.com/w3c/csswg-drafts/issues/2717
for (auto* child : m_children) {
if (child->paintable().computed_values().z_index().has_value() && child->paintable().computed_values().z_index().value() >= 1)
if (child->paintable_box().computed_values().z_index().has_value() && child->paintable_box().computed_values().z_index().value() >= 1)
paint_child(context, *child);
}
paint_node(paintable(), context, PaintPhase::Outline);
paint_node(paintable_box(), context, PaintPhase::Outline);
if (context.should_paint_overlay()) {
paint_node(paintable(), context, PaintPhase::Overlay);
paint_descendants(context, paintable(), StackingContextPaintPhase::FocusAndOverlay);
paint_node(paintable_box(), context, PaintPhase::Overlay);
paint_descendants(context, paintable_box(), StackingContextPaintPhase::FocusAndOverlay);
}
}
@ -273,9 +273,7 @@ void StackingContext::paint_internal(PaintContext& context) const
// Use the whole matrix when we get better transformation support in LibGfx or use LibGL for drawing the bitmap
Gfx::AffineTransform StackingContext::affine_transform_matrix() const
{
if (paintable().is_paintable_box())
return Gfx::extract_2d_affine_transform(paintable_box().transform());
return Gfx::AffineTransform {};
return Gfx::extract_2d_affine_transform(paintable_box().transform());
}
static Gfx::FloatMatrix4x4 matrix_with_scaled_translation(Gfx::FloatMatrix4x4 matrix, float scale)
@ -289,31 +287,22 @@ static Gfx::FloatMatrix4x4 matrix_with_scaled_translation(Gfx::FloatMatrix4x4 ma
void StackingContext::paint(PaintContext& context) const
{
auto opacity = paintable().computed_values().opacity();
auto opacity = paintable_box().computed_values().opacity();
if (opacity == 0.0f)
return;
DisplayListRecorderStateSaver saver(context.display_list_recorder());
auto to_device_pixels_scale = float(context.device_pixels_per_css_pixel());
Gfx::IntRect source_paintable_rect;
if (paintable().is_paintable_box()) {
source_paintable_rect = context.enclosing_device_rect(paintable_box().absolute_paint_rect()).to_type<int>();
} else {
VERIFY_NOT_REACHED();
}
auto source_paintable_rect = context.enclosing_device_rect(paintable_box().absolute_paint_rect()).to_type<int>();
auto transform_matrix = Gfx::FloatMatrix4x4::identity();
Gfx::FloatPoint transform_origin;
if (paintable().is_paintable_box()) {
transform_matrix = paintable_box().transform();
transform_origin = paintable_box().transform_origin().to_type<float>();
}
auto transform_matrix = paintable_box().transform();
auto transform_origin = paintable_box().transform_origin().to_type<float>();
DisplayListRecorder::PushStackingContextParams push_stacking_context_params {
.opacity = opacity,
.filter = paintable().computed_values().filter(),
.is_fixed_position = paintable().is_fixed_position(),
.filter = paintable_box().computed_values().filter(),
.is_fixed_position = paintable_box().is_fixed_position(),
.source_paintable_rect = source_paintable_rect,
.transform = {
.origin = transform_origin.scaled(to_device_pixels_scale),
@ -321,40 +310,38 @@ void StackingContext::paint(PaintContext& context) const
},
};
auto const& computed_values = paintable().computed_values();
auto const& computed_values = paintable_box().computed_values();
if (auto clip_path = computed_values.clip_path(); clip_path.has_value() && clip_path->is_basic_shape()) {
auto const& masking_area = paintable_box().get_masking_area();
auto const& basic_shape = computed_values.clip_path()->basic_shape();
auto path = basic_shape.to_path(*masking_area, paintable().layout_node());
auto path = basic_shape.to_path(*masking_area, paintable_box().layout_node());
auto device_pixel_scale = context.device_pixels_per_css_pixel();
push_stacking_context_params.clip_path = path.copy_transformed(Gfx::AffineTransform {}.set_scale(device_pixel_scale, device_pixel_scale).set_translation(source_paintable_rect.location().to_type<float>()));
}
auto has_css_transform = paintable().is_paintable_box() && paintable_box().has_css_transform();
auto has_css_transform = paintable_box().has_css_transform();
context.display_list_recorder().save();
if (has_css_transform) {
paintable_box().apply_clip_overflow_rect(context, PaintPhase::Foreground);
}
if (paintable().is_paintable_box() && paintable_box().scroll_frame_id().has_value()) {
if (paintable_box().scroll_frame_id().has_value()) {
context.display_list_recorder().push_scroll_frame_id(*paintable_box().scroll_frame_id());
}
context.display_list_recorder().push_stacking_context(push_stacking_context_params);
if (paintable().is_paintable_box()) {
if (auto masking_area = paintable_box().get_masking_area(); masking_area.has_value()) {
if (masking_area->is_empty())
return;
auto mask_bitmap = paintable_box().calculate_mask(context, *masking_area);
if (mask_bitmap) {
auto masking_area_rect = context.enclosing_device_rect(*masking_area).to_type<int>();
context.display_list_recorder().apply_mask_bitmap(masking_area_rect.location(), mask_bitmap.release_nonnull(), *paintable_box().get_mask_type());
}
if (auto masking_area = paintable_box().get_masking_area(); masking_area.has_value()) {
if (masking_area->is_empty())
return;
auto mask_bitmap = paintable_box().calculate_mask(context, *masking_area);
if (mask_bitmap) {
auto masking_area_rect = context.enclosing_device_rect(*masking_area).to_type<int>();
context.display_list_recorder().apply_mask_bitmap(masking_area_rect.location(), mask_bitmap.release_nonnull(), *paintable_box().get_mask_type());
}
}
paint_internal(context);
context.display_list_recorder().pop_stacking_context();
if (paintable().is_paintable_box() && paintable_box().scroll_frame_id().has_value()) {
if (paintable_box().scroll_frame_id().has_value()) {
context.display_list_recorder().pop_scroll_frame_id();
}
if (has_css_transform)
@ -364,12 +351,10 @@ void StackingContext::paint(PaintContext& context) const
TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType type, Function<TraversalDecision(HitTestResult)> const& callback) const
{
if (!paintable().is_visible())
if (!paintable_box().is_visible())
return TraversalDecision::Continue;
CSSPixelPoint transform_origin { 0, 0 };
if (paintable().is_paintable_box())
transform_origin = paintable_box().transform_origin();
CSSPixelPoint transform_origin = paintable_box().transform_origin();
// NOTE: This CSSPixels -> Float -> CSSPixels conversion is because we can't AffineTransform::map() a CSSPixelPoint.
Gfx::FloatPoint offset_position {
(position.x() - transform_origin.x()).to_float(),
@ -384,7 +369,7 @@ TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType
// NOTE: Hit testing follows reverse painting order, that's why the conditions here are reversed.
for (ssize_t i = m_children.size() - 1; i >= 0; --i) {
auto const& child = *m_children[i];
if (child.paintable().computed_values().z_index().value_or(0) <= 0)
if (child.paintable_box().computed_values().z_index().value_or(0) <= 0)
break;
if (child.hit_test(transformed_position, type, callback) == TraversalDecision::Break)
return TraversalDecision::Break;
@ -402,9 +387,9 @@ TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType
}
// 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
if (paintable().layout_node().children_are_inline() && is<Layout::BlockContainer>(paintable().layout_node())) {
for (auto const* child = paintable().last_child(); child; child = child->previous_sibling()) {
if (child->is_inline() && !child->is_absolutely_positioned() && !child->stacking_context()) {
if (paintable_box().layout_node().children_are_inline() && is<Layout::BlockContainer>(paintable_box().layout_node())) {
for (auto const* child = paintable_box().last_child(); child; child = child->previous_sibling()) {
if (child->is_inline() && !child->is_absolutely_positioned() && !child->has_stacking_context()) {
if (child->hit_test(transformed_position, type, callback) == TraversalDecision::Break)
return TraversalDecision::Break;
}
@ -418,8 +403,8 @@ TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType
}
// 3. the in-flow, non-inline-level, non-positioned descendants.
if (!paintable().layout_node().children_are_inline()) {
for (auto const* child = paintable().last_child(); child; child = child->previous_sibling()) {
if (!paintable_box().layout_node().children_are_inline()) {
for (auto const* child = paintable_box().last_child(); child; child = child->previous_sibling()) {
if (!child->is_paintable_box())
continue;
@ -435,28 +420,22 @@ TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType
// NOTE: Hit testing follows reverse painting order, that's why the conditions here are reversed.
for (ssize_t i = m_children.size() - 1; i >= 0; --i) {
auto const& child = *m_children[i];
if (child.paintable().computed_values().z_index().value_or(0) >= 0)
if (child.paintable_box().computed_values().z_index().value_or(0) >= 0)
break;
if (child.hit_test(transformed_position, type, callback) == TraversalDecision::Break)
return TraversalDecision::Break;
}
CSSPixelPoint enclosing_scroll_offset;
if (is<PaintableBox>(paintable())) {
auto const& paintable_box = static_cast<PaintableBox const&>(paintable());
enclosing_scroll_offset = paintable_box.cumulative_offset_of_enclosing_scroll_frame();
}
CSSPixelPoint enclosing_scroll_offset = paintable_box().cumulative_offset_of_enclosing_scroll_frame();
auto position_adjusted_by_scroll_offset = transformed_position;
position_adjusted_by_scroll_offset.translate_by(-enclosing_scroll_offset);
// 1. the background and borders of the element forming the stacking context.
if (paintable().is_paintable_box()) {
if (paintable_box().absolute_border_box_rect().contains(position_adjusted_by_scroll_offset.x(), position_adjusted_by_scroll_offset.y())) {
auto hit_test_result = HitTestResult { .paintable = const_cast<PaintableBox&>(paintable_box()) };
if (callback(hit_test_result) == TraversalDecision::Break)
return TraversalDecision::Break;
}
if (paintable_box().absolute_border_box_rect().contains(position_adjusted_by_scroll_offset.x(), position_adjusted_by_scroll_offset.y())) {
auto hit_test_result = HitTestResult { .paintable = const_cast<PaintableBox&>(paintable_box()) };
if (callback(hit_test_result) == TraversalDecision::Break)
return TraversalDecision::Break;
}
return TraversalDecision::Continue;
@ -467,16 +446,11 @@ void StackingContext::dump(int indent) const
StringBuilder builder;
for (int i = 0; i < indent; ++i)
builder.append(' ');
CSSPixelRect rect;
if (paintable().is_paintable_box()) {
rect = paintable_box().absolute_rect();
} else {
VERIFY_NOT_REACHED();
}
builder.appendff("SC for {} {} [children: {}] (z-index: ", paintable().layout_node().debug_description(), rect, m_children.size());
CSSPixelRect rect = paintable_box().absolute_rect();
builder.appendff("SC for {} {} [children: {}] (z-index: ", paintable_box().layout_node().debug_description(), rect, m_children.size());
if (paintable().computed_values().z_index().has_value())
builder.appendff("{}", paintable().computed_values().z_index().value());
if (paintable_box().computed_values().z_index().has_value())
builder.appendff("{}", paintable_box().computed_values().z_index().value());
else
builder.append("auto"sv);
builder.append(')');