2020-06-15 12:29:35 -03:00
|
|
|
/*
|
2024-10-04 08:19:50 -03:00
|
|
|
* Copyright (c) 2020-2022, Andreas Kling <andreas@ladybird.org>
|
2022-07-19 11:18:20 -03:00
|
|
|
* Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
|
2026-01-17 21:22:11 -03:00
|
|
|
* Copyright (c) 2024-2026, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
|
2025-06-16 11:51:47 -03:00
|
|
|
* Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
|
2020-06-15 12:29:35 -03:00
|
|
|
*
|
2021-04-22 05:24:48 -03:00
|
|
|
* SPDX-License-Identifier: BSD-2-Clause
|
2020-06-15 12:29:35 -03:00
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
#include <AK/QuickSort.h>
|
2025-07-06 13:07:43 -03:00
|
|
|
#include <AK/TemporaryChange.h>
|
2022-03-17 21:29:20 -03:00
|
|
|
#include <LibGfx/Rect.h>
|
2026-02-08 13:19:13 -03:00
|
|
|
#include <LibWeb/DOM/Document.h>
|
2022-02-14 12:39:45 -03:00
|
|
|
#include <LibWeb/Layout/ReplacedBox.h>
|
2023-02-25 07:04:29 -03:00
|
|
|
#include <LibWeb/Layout/Viewport.h>
|
2026-02-25 13:09:59 -03:00
|
|
|
#include <LibWeb/Page/Page.h>
|
2025-07-10 14:24:30 -03:00
|
|
|
#include <LibWeb/Painting/DisplayList.h>
|
2025-02-02 11:55:26 -03:00
|
|
|
#include <LibWeb/Painting/DisplayListRecorder.h>
|
2022-03-10 19:13:37 -03:00
|
|
|
#include <LibWeb/Painting/PaintableBox.h>
|
2026-01-24 19:07:31 -03:00
|
|
|
#include <LibWeb/Painting/PaintableWithLines.h>
|
2024-10-08 21:57:57 -03:00
|
|
|
#include <LibWeb/Painting/SVGSVGPaintable.h>
|
2020-06-18 17:01:05 -03:00
|
|
|
#include <LibWeb/Painting/StackingContext.h>
|
2026-01-13 16:44:09 -03:00
|
|
|
#include <LibWeb/Painting/ViewportPaintable.h>
|
2023-09-10 10:10:55 -03:00
|
|
|
#include <LibWeb/SVG/SVGMaskElement.h>
|
2020-06-15 12:29:35 -03:00
|
|
|
|
2022-03-09 22:13:28 -03:00
|
|
|
namespace Web::Painting {
|
2020-06-15 12:29:35 -03:00
|
|
|
|
2026-01-05 20:36:34 -03:00
|
|
|
GC_DEFINE_ALLOCATOR(StackingContext);
|
|
|
|
|
|
2025-07-31 18:07:26 -03:00
|
|
|
static void paint_node(Paintable const& paintable, DisplayListRecordingContext& context, PaintPhase phase)
|
2022-03-10 10:02:25 -03:00
|
|
|
{
|
2025-07-06 13:07:43 -03:00
|
|
|
TemporaryChange save_nesting_level(context.display_list_recorder().m_save_nesting_level, 0);
|
|
|
|
|
|
2026-03-03 09:30:12 -03:00
|
|
|
auto const* paintable_box = as_if<PaintableBox>(paintable);
|
|
|
|
|
|
|
|
|
|
if (paintable_box) {
|
|
|
|
|
// Text fragments in a PaintableWithLines are content of the block container.
|
|
|
|
|
// They need the descendants' visual context, not the element's own visual context.
|
|
|
|
|
if (is<PaintableWithLines>(paintable) && phase == PaintPhase::Foreground)
|
2026-03-10 20:21:46 -03:00
|
|
|
context.display_list_recorder().set_accumulated_visual_context(paintable_box->accumulated_visual_context_for_descendants_index());
|
2026-03-03 09:30:12 -03:00
|
|
|
else
|
2026-03-10 20:21:46 -03:00
|
|
|
context.display_list_recorder().set_accumulated_visual_context(paintable_box->accumulated_visual_context_index());
|
2026-03-03 09:30:12 -03:00
|
|
|
}
|
|
|
|
|
|
2026-03-03 09:30:31 -03:00
|
|
|
bool const skip_cache = !paintable_box || context.should_show_line_box_borders();
|
|
|
|
|
if (!skip_cache && paintable_box->has_cached_commands(phase)) {
|
|
|
|
|
context.display_list_recorder().replay_cached_commands(paintable_box->cached_commands(phase));
|
|
|
|
|
} else if (!skip_cache) {
|
|
|
|
|
auto capture = context.display_list_recorder().begin_command_capture();
|
|
|
|
|
paintable.paint(context, phase);
|
|
|
|
|
paintable_box->set_cached_commands(phase, capture.take());
|
|
|
|
|
} else {
|
|
|
|
|
paintable.paint(context, phase);
|
|
|
|
|
}
|
|
|
|
|
|
2026-01-13 16:44:09 -03:00
|
|
|
context.display_list_recorder().set_accumulated_visual_context({});
|
2025-07-06 13:07:43 -03:00
|
|
|
|
|
|
|
|
VERIFY(context.display_list_recorder().m_save_nesting_level == 0);
|
2022-03-10 10:02:25 -03:00
|
|
|
}
|
|
|
|
|
|
2024-11-18 12:05:22 -03:00
|
|
|
StackingContext::StackingContext(PaintableBox& paintable, StackingContext* parent, size_t index_in_tree_order)
|
2024-01-02 22:40:31 -03:00
|
|
|
: m_paintable(paintable)
|
2020-06-15 12:29:35 -03:00
|
|
|
, m_parent(parent)
|
2023-06-02 07:01:14 -03:00
|
|
|
, m_index_in_tree_order(index_in_tree_order)
|
2020-06-15 12:29:35 -03:00
|
|
|
{
|
2021-02-23 16:42:32 -03:00
|
|
|
VERIFY(m_parent != this);
|
2022-03-13 12:19:54 -03:00
|
|
|
if (m_parent)
|
2026-01-05 20:36:34 -03:00
|
|
|
m_parent->m_children.append(*this);
|
2022-03-13 12:19:54 -03:00
|
|
|
}
|
2020-06-15 12:29:35 -03:00
|
|
|
|
2022-03-13 12:19:54 -03:00
|
|
|
void StackingContext::sort()
|
|
|
|
|
{
|
|
|
|
|
quick_sort(m_children, [](auto& a, auto& b) {
|
2026-04-03 11:38:45 -03:00
|
|
|
auto a_z_index = a->paintable_box().effective_z_index().value_or(0);
|
|
|
|
|
auto b_z_index = b->paintable_box().effective_z_index().value_or(0);
|
2022-03-13 12:19:54 -03:00
|
|
|
if (a_z_index == b_z_index)
|
2023-06-02 07:01:14 -03:00
|
|
|
return a->m_index_in_tree_order < b->m_index_in_tree_order;
|
2022-03-13 12:19:54 -03:00
|
|
|
return a_z_index < b_z_index;
|
|
|
|
|
});
|
|
|
|
|
|
2026-01-05 20:36:34 -03:00
|
|
|
for (auto child : m_children)
|
2022-03-13 12:19:54 -03:00
|
|
|
child->sort();
|
2020-06-15 12:29:35 -03:00
|
|
|
}
|
|
|
|
|
|
2026-01-05 20:36:34 -03:00
|
|
|
void StackingContext::visit_edges(Visitor& visitor)
|
|
|
|
|
{
|
|
|
|
|
Base::visit_edges(visitor);
|
|
|
|
|
visitor.visit(m_paintable);
|
|
|
|
|
visitor.visit(m_non_positioned_floating_descendants);
|
|
|
|
|
visitor.visit(m_positioned_descendants_and_stacking_contexts_with_stack_level_0);
|
|
|
|
|
visitor.visit(m_parent);
|
|
|
|
|
visitor.visit(m_children);
|
|
|
|
|
}
|
|
|
|
|
|
2024-04-29 12:33:50 -03:00
|
|
|
void StackingContext::set_last_paint_generation_id(u64 generation_id)
|
|
|
|
|
{
|
2024-05-05 12:44:23 -03:00
|
|
|
if (m_last_paint_generation_id.has_value() && m_last_paint_generation_id.value() >= generation_id) {
|
|
|
|
|
dbgln("FIXME: Painting commands are recorded twice for stacking context: {}", m_paintable->layout_node().debug_description());
|
|
|
|
|
}
|
2024-04-29 12:33:50 -03:00
|
|
|
m_last_paint_generation_id = generation_id;
|
|
|
|
|
}
|
|
|
|
|
|
2022-07-19 07:02:56 -03:00
|
|
|
static PaintPhase to_paint_phase(StackingContext::StackingContextPaintPhase phase)
|
2020-06-15 12:29:35 -03:00
|
|
|
{
|
2022-09-09 18:53:53 -03:00
|
|
|
// There are not a fully correct mapping since some stacking context phases are combined.
|
2022-07-19 07:02:56 -03:00
|
|
|
switch (phase) {
|
|
|
|
|
case StackingContext::StackingContextPaintPhase::Floats:
|
|
|
|
|
case StackingContext::StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced:
|
|
|
|
|
case StackingContext::StackingContextPaintPhase::BackgroundAndBorders:
|
|
|
|
|
return PaintPhase::Background;
|
|
|
|
|
case StackingContext::StackingContextPaintPhase::Foreground:
|
|
|
|
|
return PaintPhase::Foreground;
|
|
|
|
|
default:
|
|
|
|
|
VERIFY_NOT_REACHED();
|
2022-03-10 10:02:25 -03:00
|
|
|
}
|
2022-07-19 07:02:56 -03:00
|
|
|
}
|
|
|
|
|
|
2025-07-31 18:07:26 -03:00
|
|
|
void StackingContext::paint_node_as_stacking_context(Paintable const& paintable, DisplayListRecordingContext& context)
|
2023-08-20 14:42:54 -03:00
|
|
|
{
|
2025-10-13 13:02:48 -03:00
|
|
|
if (paintable.is_svg_svg_paintable()) {
|
2024-10-08 21:57:57 -03:00
|
|
|
paint_svg(context, static_cast<PaintableBox const&>(paintable), PaintPhase::Foreground);
|
|
|
|
|
return;
|
|
|
|
|
}
|
2024-10-30 19:47:55 -03:00
|
|
|
|
2023-08-20 14:42:54 -03:00
|
|
|
paint_node(paintable, context, PaintPhase::Background);
|
|
|
|
|
paint_node(paintable, context, PaintPhase::Border);
|
|
|
|
|
paint_descendants(context, paintable, StackingContextPaintPhase::BackgroundAndBorders);
|
|
|
|
|
paint_descendants(context, paintable, StackingContextPaintPhase::Floats);
|
|
|
|
|
paint_descendants(context, paintable, StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
|
|
|
|
|
paint_node(paintable, context, PaintPhase::Foreground);
|
|
|
|
|
paint_descendants(context, paintable, StackingContextPaintPhase::Foreground);
|
|
|
|
|
paint_node(paintable, context, PaintPhase::Outline);
|
2025-03-28 17:08:43 -03:00
|
|
|
paint_node(paintable, context, PaintPhase::Overlay);
|
2023-08-20 14:42:54 -03:00
|
|
|
}
|
|
|
|
|
|
2025-07-31 18:07:26 -03:00
|
|
|
void StackingContext::paint_svg(DisplayListRecordingContext& context, PaintableBox const& paintable, PaintPhase phase)
|
2024-10-08 21:57:57 -03:00
|
|
|
{
|
|
|
|
|
if (phase != PaintPhase::Foreground)
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
|
|
paint_node(paintable, context, PaintPhase::Background);
|
|
|
|
|
paint_node(paintable, context, PaintPhase::Border);
|
2024-11-22 17:04:18 -03:00
|
|
|
SVGSVGPaintable::paint_svg_box(context, paintable, phase);
|
2024-10-08 21:57:57 -03:00
|
|
|
}
|
|
|
|
|
|
2025-07-31 18:07:26 -03:00
|
|
|
void StackingContext::paint_descendants(DisplayListRecordingContext& context, Paintable const& paintable, StackingContextPaintPhase phase)
|
2022-07-19 07:02:56 -03:00
|
|
|
{
|
2023-09-10 09:41:00 -03:00
|
|
|
paintable.for_each_child([&context, phase](auto& child) {
|
LibWeb: Allow `<svg>` to establish a stacking context
83b6bc4 went too far by forbidding SVGSVGElement from establishing a
stacking context. This element type does follow the behavior of CSS
boxes, unlike inner SVG elements like `<rect>`, `<circle>`, etc., which
are not supposed to be aware of concepts like stacking contexts,
overflow clipping, scroll offsets, etc.
This change allows us to delete overrides of `before_paint()` and
`after_paint()` in SVGPaintable and SVGSVGPaintable, because display
list recording code has been rearranged to take care of clipping and
scrolling before recursing into SVGSVGPaintable descendants.
`Screenshot/images/css-transform-box-ref.png` expectation is updated and
fixes a bug where a rectangle at the very bottom of the page was not
clipped correctly.
`Screenshot/images/svg-filters-lb-website-ref.png` has a more subtle
difference, but if you look closely, you’ll see it matches other
browsers more closely now.
2025-07-11 19:17:38 -03:00
|
|
|
if (child.has_stacking_context())
|
|
|
|
|
return IterationDecision::Continue;
|
|
|
|
|
|
2025-10-13 13:02:48 -03:00
|
|
|
if (child.is_svg_svg_paintable()) {
|
2024-10-08 21:57:57 -03:00
|
|
|
paint_svg(context, static_cast<PaintableBox const&>(child), to_paint_phase(phase));
|
|
|
|
|
return IterationDecision::Continue;
|
|
|
|
|
}
|
|
|
|
|
|
2023-08-20 14:42:54 -03:00
|
|
|
// NOTE: Grid specification https://www.w3.org/TR/css-grid-2/#z-order says that grid items should be treated
|
|
|
|
|
// the same way as CSS2 defines for inline-blocks:
|
|
|
|
|
// "For each one of these, treat the element as if it created a new stacking context, but any positioned
|
|
|
|
|
// descendants and descendants which actually create a new stacking context should be considered part of
|
|
|
|
|
// the parent stacking context, not this new one."
|
2025-06-16 11:51:47 -03:00
|
|
|
auto const& z_index = [&] { return child.computed_values().z_index(); };
|
|
|
|
|
if (child.layout_node().is_grid_item() && !z_index().has_value()) {
|
2023-08-20 14:42:54 -03:00
|
|
|
// FIXME: This may not be fully correct with respect to the paint phases.
|
|
|
|
|
if (phase == StackingContextPaintPhase::Foreground)
|
|
|
|
|
paint_node_as_stacking_context(child, context);
|
2024-05-04 10:59:52 -03:00
|
|
|
return IterationDecision::Continue;
|
2023-08-20 14:42:54 -03:00
|
|
|
}
|
|
|
|
|
|
2024-12-22 14:21:31 -03:00
|
|
|
// https://drafts.csswg.org/css2/#painting-order
|
|
|
|
|
// All non-positioned floating descendants, in tree order. For each one of these, treat the
|
|
|
|
|
// element as if it created a new stacking context, but any positioned descendants and
|
|
|
|
|
// descendants which actually create a new stacking context should be considered part of the
|
|
|
|
|
// parent stacking context, not this new one.
|
2025-06-16 11:51:47 -03:00
|
|
|
if (child.is_floating() && !child.is_positioned() && !z_index().has_value()) {
|
2024-12-22 14:21:31 -03:00
|
|
|
if (phase == StackingContextPaintPhase::Floats) {
|
|
|
|
|
paint_node_as_stacking_context(child, context);
|
|
|
|
|
}
|
|
|
|
|
return IterationDecision::Continue;
|
|
|
|
|
}
|
|
|
|
|
|
2025-06-16 11:51:47 -03:00
|
|
|
if (child.is_positioned() && z_index().value_or(0) == 0)
|
2024-05-04 10:59:52 -03:00
|
|
|
return IterationDecision::Continue;
|
2024-01-02 16:05:35 -03:00
|
|
|
|
2024-03-02 05:54:12 -03:00
|
|
|
bool child_is_inline_or_replaced = child.is_inline() || is<Layout::ReplacedBox>(child.layout_node());
|
2021-05-07 13:03:25 -03:00
|
|
|
switch (phase) {
|
|
|
|
|
case StackingContextPaintPhase::BackgroundAndBorders:
|
2022-10-23 13:15:14 -03:00
|
|
|
if (!child_is_inline_or_replaced && !child.is_floating()) {
|
2022-03-10 10:02:25 -03:00
|
|
|
paint_node(child, context, PaintPhase::Background);
|
2024-07-30 07:41:48 -03:00
|
|
|
paint_node(child, context, PaintPhase::Border);
|
2021-05-07 13:03:25 -03:00
|
|
|
paint_descendants(context, child, phase);
|
2024-07-30 07:41:48 -03:00
|
|
|
paint_node(child, context, PaintPhase::TableCollapsedBorder);
|
2021-05-07 13:03:25 -03:00
|
|
|
}
|
|
|
|
|
break;
|
|
|
|
|
case StackingContextPaintPhase::Floats:
|
2022-10-23 13:15:14 -03:00
|
|
|
if (child.is_floating()) {
|
|
|
|
|
paint_node(child, context, PaintPhase::Background);
|
|
|
|
|
paint_node(child, context, PaintPhase::Border);
|
|
|
|
|
paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
|
2021-05-07 13:03:25 -03:00
|
|
|
}
|
2022-10-23 13:15:14 -03:00
|
|
|
paint_descendants(context, child, phase);
|
2021-05-07 13:03:25 -03:00
|
|
|
break;
|
2022-02-14 12:39:45 -03:00
|
|
|
case StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced:
|
2022-10-23 13:15:14 -03:00
|
|
|
if (child_is_inline_or_replaced) {
|
|
|
|
|
paint_node(child, context, PaintPhase::Background);
|
|
|
|
|
paint_node(child, context, PaintPhase::Border);
|
2024-07-30 07:41:48 -03:00
|
|
|
paint_node(child, context, PaintPhase::TableCollapsedBorder);
|
2022-10-23 13:15:14 -03:00
|
|
|
paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
|
2022-02-14 12:39:45 -03:00
|
|
|
}
|
2022-10-23 13:15:14 -03:00
|
|
|
paint_descendants(context, child, phase);
|
2022-02-14 12:39:45 -03:00
|
|
|
break;
|
2021-05-07 13:03:25 -03:00
|
|
|
case StackingContextPaintPhase::Foreground:
|
2022-10-23 13:15:14 -03:00
|
|
|
paint_node(child, context, PaintPhase::Foreground);
|
|
|
|
|
paint_descendants(context, child, phase);
|
2026-01-20 11:20:19 -03:00
|
|
|
paint_node(child, context, PaintPhase::Outline);
|
2025-03-28 17:08:43 -03:00
|
|
|
paint_node(child, context, PaintPhase::Overlay);
|
2021-05-07 13:03:25 -03:00
|
|
|
break;
|
|
|
|
|
}
|
2024-05-04 10:59:52 -03:00
|
|
|
|
|
|
|
|
return IterationDecision::Continue;
|
2021-05-07 13:03:25 -03:00
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2025-07-31 18:07:26 -03:00
|
|
|
void StackingContext::paint_child(DisplayListRecordingContext& context, StackingContext const& child)
|
2023-08-13 14:56:56 -03:00
|
|
|
{
|
2025-10-13 13:02:48 -03:00
|
|
|
VERIFY(!child.paintable_box().is_svg_paintable());
|
2024-04-29 12:33:50 -03:00
|
|
|
const_cast<StackingContext&>(child).set_last_paint_generation_id(context.paint_generation_id());
|
2023-08-13 14:56:56 -03:00
|
|
|
child.paint(context);
|
|
|
|
|
}
|
|
|
|
|
|
2025-07-31 18:07:26 -03:00
|
|
|
void StackingContext::paint_internal(DisplayListRecordingContext& context) const
|
2021-05-07 13:03:25 -03:00
|
|
|
{
|
2025-10-13 13:02:48 -03:00
|
|
|
VERIFY(!paintable_box().is_svg_paintable());
|
|
|
|
|
if (paintable_box().is_svg_svg_paintable()) {
|
LibWeb: Allow `<svg>` to establish a stacking context
83b6bc4 went too far by forbidding SVGSVGElement from establishing a
stacking context. This element type does follow the behavior of CSS
boxes, unlike inner SVG elements like `<rect>`, `<circle>`, etc., which
are not supposed to be aware of concepts like stacking contexts,
overflow clipping, scroll offsets, etc.
This change allows us to delete overrides of `before_paint()` and
`after_paint()` in SVGPaintable and SVGSVGPaintable, because display
list recording code has been rearranged to take care of clipping and
scrolling before recursing into SVGSVGPaintable descendants.
`Screenshot/images/css-transform-box-ref.png` expectation is updated and
fixes a bug where a rectangle at the very bottom of the page was not
clipped correctly.
`Screenshot/images/svg-filters-lb-website-ref.png` has a more subtle
difference, but if you look closely, you’ll see it matches other
browsers more closely now.
2025-07-11 19:17:38 -03:00
|
|
|
auto const& svg_svg_paintable = static_cast<SVGSVGPaintable const&>(paintable_box());
|
|
|
|
|
paint_node(svg_svg_paintable, context, PaintPhase::Background);
|
|
|
|
|
paint_node(svg_svg_paintable, context, PaintPhase::Border);
|
|
|
|
|
|
|
|
|
|
SVGSVGPaintable::paint_descendants(context, svg_svg_paintable, PaintPhase::Foreground);
|
|
|
|
|
|
|
|
|
|
paint_node(svg_svg_paintable, context, PaintPhase::Outline);
|
|
|
|
|
if (context.should_paint_overlay()) {
|
|
|
|
|
paint_node(svg_svg_paintable, context, PaintPhase::Overlay);
|
|
|
|
|
}
|
2024-10-08 21:57:57 -03:00
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2021-05-07 13:03:25 -03:00
|
|
|
// 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)
|
2024-11-18 12:05:22 -03:00
|
|
|
paint_node(paintable_box(), context, PaintPhase::Background);
|
|
|
|
|
paint_node(paintable_box(), context, PaintPhase::Border);
|
2022-07-19 07:06:21 -03:00
|
|
|
|
2023-08-13 14:56:56 -03:00
|
|
|
// Stacking contexts formed by positioned descendants with negative z-indices (excluding 0) in z-index order
|
|
|
|
|
// (most negative first) then tree order. (step 3)
|
2024-10-08 22:49:49 -03:00
|
|
|
// Here, we treat non-positioned stacking contexts as if they were positioned, because CSS 2.0 spec does not
|
|
|
|
|
// account for new properties like `transform` and `opacity` that can create stacking contexts.
|
|
|
|
|
// https://github.com/w3c/csswg-drafts/issues/2717
|
2026-01-05 20:36:34 -03:00
|
|
|
for (auto child : m_children) {
|
2026-04-03 11:38:45 -03:00
|
|
|
if (child->paintable_box().effective_z_index().has_value() && child->paintable_box().effective_z_index().value() < 0)
|
2023-08-13 14:56:56 -03:00
|
|
|
paint_child(context, *child);
|
2020-06-15 12:29:35 -03:00
|
|
|
}
|
2022-07-19 07:06:21 -03:00
|
|
|
|
2021-05-07 13:03:25 -03:00
|
|
|
// Draw the background and borders for block-level children (step 4)
|
2024-11-18 12:05:22 -03:00
|
|
|
paint_descendants(context, paintable_box(), StackingContextPaintPhase::BackgroundAndBorders);
|
2021-05-07 13:03:25 -03:00
|
|
|
// Draw the non-positioned floats (step 5)
|
2024-11-18 12:05:22 -03:00
|
|
|
paint_descendants(context, paintable_box(), StackingContextPaintPhase::Floats);
|
2021-05-07 13:03:25 -03:00
|
|
|
// Draw inline content, replaced content, etc. (steps 6, 7)
|
2024-11-18 12:05:22 -03:00
|
|
|
paint_descendants(context, paintable_box(), StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
|
|
|
|
|
paint_node(paintable_box(), context, PaintPhase::Foreground);
|
|
|
|
|
paint_descendants(context, paintable_box(), StackingContextPaintPhase::Foreground);
|
2022-10-23 13:18:58 -03:00
|
|
|
|
|
|
|
|
// Draw positioned descendants with z-index `0` or `auto` in tree order. (step 8)
|
2024-10-08 22:49:49 -03:00
|
|
|
// Here, we treat non-positioned stacking contexts as if they were positioned, because CSS 2.0 spec does not
|
|
|
|
|
// account for new properties like `transform` and `opacity` that can create stacking contexts.
|
|
|
|
|
// https://github.com/w3c/csswg-drafts/issues/2717
|
|
|
|
|
for (auto const& paintable : m_positioned_descendants_and_stacking_contexts_with_stack_level_0) {
|
2023-08-13 14:56:56 -03:00
|
|
|
// At this point, `paintable_box` is a positioned descendant with z-index: auto.
|
2022-10-23 13:18:58 -03:00
|
|
|
// FIXME: This is basically duplicating logic found elsewhere in this same function. Find a way to make this more elegant.
|
2024-04-05 17:47:48 -03:00
|
|
|
if (auto* child = paintable->stacking_context()) {
|
2023-08-13 14:56:56 -03:00
|
|
|
paint_child(context, *child);
|
|
|
|
|
} else {
|
2023-08-20 14:42:54 -03:00
|
|
|
paint_node_as_stacking_context(paintable, context);
|
2023-08-13 14:56:56 -03:00
|
|
|
}
|
2024-03-02 14:36:52 -03:00
|
|
|
};
|
2022-10-23 13:18:58 -03:00
|
|
|
|
2023-08-13 14:56:56 -03:00
|
|
|
// Stacking contexts formed by positioned descendants with z-indices greater than or equal to 1 in z-index order
|
|
|
|
|
// (smallest first) then tree order. (Step 9)
|
2024-10-08 22:49:49 -03:00
|
|
|
// Here, we treat non-positioned stacking contexts as if they were positioned, because CSS 2.0 spec does not
|
|
|
|
|
// account for new properties like `transform` and `opacity` that can create stacking contexts.
|
|
|
|
|
// https://github.com/w3c/csswg-drafts/issues/2717
|
2026-01-05 20:36:34 -03:00
|
|
|
for (auto child : m_children) {
|
2026-04-03 11:38:45 -03:00
|
|
|
if (child->paintable_box().effective_z_index().has_value() && child->paintable_box().effective_z_index().value() >= 1)
|
2023-08-13 14:56:56 -03:00
|
|
|
paint_child(context, *child);
|
2020-06-15 12:29:35 -03:00
|
|
|
}
|
2021-05-07 13:03:25 -03:00
|
|
|
|
2024-11-18 12:05:22 -03:00
|
|
|
paint_node(paintable_box(), context, PaintPhase::Outline);
|
2023-12-06 13:49:45 -03:00
|
|
|
|
|
|
|
|
if (context.should_paint_overlay()) {
|
2025-03-28 17:08:43 -03:00
|
|
|
paint_node(paintable_box(), context, PaintPhase::Overlay);
|
2023-12-06 13:49:45 -03:00
|
|
|
}
|
2020-06-15 12:29:35 -03:00
|
|
|
}
|
|
|
|
|
|
2025-07-31 18:07:26 -03:00
|
|
|
void StackingContext::paint(DisplayListRecordingContext& context) const
|
LibWeb: Don't encode painting limitations in RecordingPainter API
The current set of stacking context commands do not encode the
information needed to correctly paint the stacking context, instead,
they're based on the limitations of the current CPU renderer.
Stacking contexts should be able to be transformed by an arbitrary
3D transformation matrix, not just scaled from a source to a destination
rect. The `_with_mask()` stacking context also should not be separate
from the regular stacking context.
```c++
push_stacking_context(
bool semitransparent_or_has_non_identity_transform,
float opacity, Gfx::FloatRect const& source_rect,
Gfx::FloatRect const& transformed_destination_rect,
Gfx::IntPoint const& painter_location);
pop_stacking_context(
bool semitransparent_or_has_non_identity_transform,
Gfx::Painter::ScalingMode scaling_mode);
push_stacking_context_with_mask(
Gfx::IntRect const& paint_rect);
pop_stacking_context_with_mask(
Gfx::IntRect const& paint_rect,
RefPtr<Gfx::Bitmap> const& mask_bitmap,
Gfx::Bitmap::MaskKind mask_kind, float opacity);
```
This patch replaces this APIs with just:
```c++
push_stacking_context(
float opacity,
bool is_fixed_position,
Gfx::IntRect const& source_paintable_rect,
Gfx::IntPoint post_transform_translation,
CSS::ImageRendering image_rendering,
StackingContextTransform transform,
Optional<StackingContextMask> mask);
pop_stacking_context()
```
And moves the implementation details into the executor, this should
allow future backends to implement stacking contexts without these
limitations.
2023-11-18 11:23:59 -03:00
|
|
|
{
|
2026-02-19 10:46:17 -03:00
|
|
|
// https://drafts.csswg.org/css-transforms-1/#transform-function-lists
|
|
|
|
|
// If a transform function causes the current transformation matrix of an object to be non-invertible, the object
|
|
|
|
|
// and its content do not get displayed.
|
|
|
|
|
if (paintable_box().has_non_invertible_css_transform())
|
|
|
|
|
return;
|
|
|
|
|
|
2026-01-21 07:08:32 -03:00
|
|
|
if (paintable_box().computed_values().opacity() == 0.0f)
|
2021-07-23 07:19:16 -03:00
|
|
|
return;
|
|
|
|
|
|
2025-07-06 14:41:08 -03:00
|
|
|
TemporaryChange save_nesting_level(context.display_list_recorder().m_save_nesting_level, 0);
|
|
|
|
|
ScopeGuard verify_save_and_restore_are_balanced([&] {
|
|
|
|
|
VERIFY(context.display_list_recorder().m_save_nesting_level == 0);
|
|
|
|
|
});
|
|
|
|
|
|
2024-11-18 12:05:22 -03:00
|
|
|
auto const& computed_values = paintable_box().computed_values();
|
2025-09-23 11:56:43 -03:00
|
|
|
auto mask_image = computed_values.mask_image();
|
|
|
|
|
|
2026-03-03 10:59:21 -03:00
|
|
|
if (mask_image) {
|
|
|
|
|
mask_image->resolve_for_size(paintable_box().layout_node_with_style_and_box_metrics(), paintable_box().absolute_padding_box_rect().size());
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-10 20:21:46 -03:00
|
|
|
auto effective_context_index = paintable_box().accumulated_visual_context_index();
|
|
|
|
|
context.display_list_recorder().set_accumulated_visual_context(effective_context_index);
|
2026-01-13 16:44:09 -03:00
|
|
|
|
2026-01-21 07:08:32 -03:00
|
|
|
// For elements with SVG filters, emit a transparent FillRect to trigger filter application.
|
|
|
|
|
// This ensures content-generating filters (feFlood, feImage) work even with empty source.
|
|
|
|
|
if (auto const& bounds = paintable_box().filter().svg_filter_bounds; bounds.has_value()) {
|
|
|
|
|
auto device_rect = context.enclosing_device_rect(*bounds).to_type<int>();
|
|
|
|
|
context.display_list_recorder().fill_rect_transparent(device_rect);
|
2026-01-13 16:44:09 -03:00
|
|
|
}
|
2025-11-26 09:29:07 -03:00
|
|
|
|
2026-02-23 05:10:30 -03:00
|
|
|
// Collect all masks (CSS mask-image, SVG <mask>, SVG <clipPath>).
|
|
|
|
|
Vector<DisplayListRecorder::MaskInfo> masks;
|
2024-10-08 21:57:57 -03:00
|
|
|
|
2025-09-23 11:56:43 -03:00
|
|
|
if (mask_image) {
|
2026-03-10 20:21:46 -03:00
|
|
|
auto mask_display_list = DisplayList::create(AccumulatedVisualContextTree::create());
|
2024-11-15 21:25:48 -03:00
|
|
|
DisplayListRecorder display_list_recorder(*mask_display_list);
|
|
|
|
|
auto mask_painting_context = context.clone(display_list_recorder);
|
|
|
|
|
auto mask_rect_in_device_pixels = context.enclosing_device_rect(paintable_box().absolute_padding_box_rect());
|
|
|
|
|
mask_image->paint(mask_painting_context, { {}, mask_rect_in_device_pixels.size() }, CSS::ImageRendering::Auto);
|
2026-02-23 05:10:30 -03:00
|
|
|
masks.append({ mask_display_list, mask_rect_in_device_pixels.to_type<int>(), Gfx::MaskKind::Alpha });
|
2024-11-15 21:25:48 -03:00
|
|
|
}
|
|
|
|
|
|
2026-01-17 21:22:11 -03:00
|
|
|
if (auto mask_area = paintable_box().get_mask_area(); mask_area.has_value()) {
|
|
|
|
|
if (auto mask_display_list = paintable_box().calculate_mask(context, *mask_area)) {
|
|
|
|
|
auto rect = context.enclosing_device_rect(*mask_area).to_type<int>();
|
|
|
|
|
auto kind = paintable_box().get_mask_type().value_or(Gfx::MaskKind::Alpha);
|
2026-02-23 05:10:30 -03:00
|
|
|
masks.append({ mask_display_list, rect, kind });
|
2026-01-17 21:22:11 -03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (auto clip_area = paintable_box().get_clip_area(); clip_area.has_value()) {
|
|
|
|
|
if (auto clip_display_list = paintable_box().calculate_clip(context, *clip_area)) {
|
|
|
|
|
auto rect = context.enclosing_device_rect(*clip_area).to_type<int>();
|
2026-02-23 05:10:30 -03:00
|
|
|
masks.append({ clip_display_list, rect, Gfx::MaskKind::Alpha });
|
2024-10-08 21:57:57 -03:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2026-02-23 05:10:30 -03:00
|
|
|
context.display_list_recorder().begin_masks(masks);
|
|
|
|
|
|
2026-01-13 16:44:09 -03:00
|
|
|
auto context_before_children = context.display_list_recorder().accumulated_visual_context();
|
|
|
|
|
|
2024-12-01 16:45:47 -03:00
|
|
|
paint_internal(context);
|
|
|
|
|
|
2026-01-13 16:44:09 -03:00
|
|
|
context.display_list_recorder().set_accumulated_visual_context(context_before_children);
|
2024-12-01 11:26:20 -03:00
|
|
|
|
2026-02-23 05:10:30 -03:00
|
|
|
context.display_list_recorder().end_masks(masks);
|
2021-07-23 07:19:16 -03:00
|
|
|
}
|
|
|
|
|
|
2024-02-13 17:34:07 -03:00
|
|
|
TraversalDecision StackingContext::hit_test(CSSPixelPoint position, HitTestType type, Function<TraversalDecision(HitTestResult)> const& callback) const
|
2020-07-01 14:02:28 -03:00
|
|
|
{
|
2026-02-19 10:46:44 -03:00
|
|
|
// AD-HOC: Elements with non-invertible transforms are not displayed per the spec,
|
|
|
|
|
// so they should not be hit-testable either.
|
|
|
|
|
if (paintable_box().has_non_invertible_css_transform())
|
|
|
|
|
return TraversalDecision::Continue;
|
|
|
|
|
|
2026-01-24 20:07:53 -03:00
|
|
|
auto const is_visible = paintable_box().computed_values().visibility() == CSS::Visibility::Visible;
|
2025-09-08 08:39:52 -03:00
|
|
|
|
2022-03-04 11:02:16 -03:00
|
|
|
// NOTE: Hit testing basically happens in reverse painting order.
|
2026-03-15 23:47:03 -03:00
|
|
|
// https://drafts.csswg.org/css2/#z-index
|
2022-03-04 11:02:16 -03:00
|
|
|
|
|
|
|
|
// 7. the child stacking contexts with positive stack levels (least positive first).
|
2022-10-07 06:51:56 -03:00
|
|
|
// NOTE: Hit testing follows reverse painting order, that's why the conditions here are reversed.
|
2026-01-05 20:36:34 -03:00
|
|
|
for (auto const child : m_children.in_reverse()) {
|
2026-04-03 11:38:45 -03:00
|
|
|
if (child->paintable_box().effective_z_index().value_or(0) <= 0)
|
2022-10-07 06:51:56 -03:00
|
|
|
break;
|
2026-01-13 16:44:09 -03:00
|
|
|
if (child->hit_test(position, type, callback) == TraversalDecision::Break)
|
2024-02-13 17:34:07 -03:00
|
|
|
return TraversalDecision::Break;
|
2022-03-04 11:02:16 -03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
|
2025-07-27 17:23:53 -03:00
|
|
|
for (auto const& paintable_box : m_positioned_descendants_and_stacking_contexts_with_stack_level_0.in_reverse()) {
|
|
|
|
|
if (paintable_box->stacking_context()) {
|
2026-01-13 16:44:09 -03:00
|
|
|
if (paintable_box->stacking_context()->hit_test(position, type, callback) == TraversalDecision::Break)
|
2024-03-01 07:54:44 -03:00
|
|
|
return TraversalDecision::Break;
|
|
|
|
|
} else {
|
2026-01-13 16:44:09 -03:00
|
|
|
if (paintable_box->hit_test(position, type, callback) == TraversalDecision::Break)
|
2023-04-09 07:21:00 -03:00
|
|
|
return TraversalDecision::Break;
|
2022-11-03 15:08:07 -03:00
|
|
|
}
|
2024-03-01 07:54:44 -03:00
|
|
|
}
|
2022-03-04 11:02:16 -03:00
|
|
|
|
|
|
|
|
// 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
|
2024-11-18 12:05:22 -03:00
|
|
|
if (paintable_box().layout_node().children_are_inline() && is<Layout::BlockContainer>(paintable_box().layout_node())) {
|
2025-07-27 17:23:53 -03:00
|
|
|
for (auto const* paintable = paintable_box().last_child(); paintable; paintable = paintable->previous_sibling()) {
|
|
|
|
|
if (paintable->is_inline() && !paintable->is_absolutely_positioned() && !paintable->has_stacking_context()) {
|
2026-01-13 16:44:09 -03:00
|
|
|
if (paintable->hit_test(position, type, callback) == TraversalDecision::Break)
|
2024-02-17 15:53:32 -03:00
|
|
|
return TraversalDecision::Break;
|
|
|
|
|
}
|
|
|
|
|
}
|
2026-01-24 19:07:31 -03:00
|
|
|
|
|
|
|
|
// Hit test the stacking context root's own fragments if it's a PaintableWithLines.
|
|
|
|
|
if (is<PaintableWithLines>(paintable_box())) {
|
|
|
|
|
auto const& paintable_with_lines = as<PaintableWithLines>(paintable_box());
|
2026-03-10 20:59:35 -03:00
|
|
|
auto local_position = paintable_box().transform_point_to_local(position);
|
2026-01-24 19:07:31 -03:00
|
|
|
|
|
|
|
|
if (local_position.has_value()) {
|
|
|
|
|
if (paintable_with_lines.hit_test_fragments(position, local_position.value(), type, callback) == TraversalDecision::Break)
|
|
|
|
|
return TraversalDecision::Break;
|
|
|
|
|
}
|
|
|
|
|
}
|
2020-07-01 14:02:28 -03:00
|
|
|
}
|
|
|
|
|
|
2022-03-04 11:02:16 -03:00
|
|
|
// 4. the non-positioned floats.
|
2025-07-27 17:23:53 -03:00
|
|
|
for (auto const& paintable_box : m_non_positioned_floating_descendants.in_reverse()) {
|
2026-01-13 16:44:09 -03:00
|
|
|
if (paintable_box->hit_test(position, type, callback) == TraversalDecision::Break)
|
2024-03-01 07:54:44 -03:00
|
|
|
return TraversalDecision::Break;
|
|
|
|
|
}
|
2022-03-04 11:02:16 -03:00
|
|
|
|
|
|
|
|
// 3. the in-flow, non-inline-level, non-positioned descendants.
|
2024-11-18 12:05:22 -03:00
|
|
|
if (!paintable_box().layout_node().children_are_inline()) {
|
|
|
|
|
for (auto const* child = paintable_box().last_child(); child; child = child->previous_sibling()) {
|
2024-02-13 17:34:07 -03:00
|
|
|
if (!child->is_paintable_box())
|
|
|
|
|
continue;
|
|
|
|
|
|
2025-01-21 11:12:05 -03:00
|
|
|
auto const& paintable_box = as<PaintableBox>(*child);
|
2024-02-13 17:34:07 -03:00
|
|
|
if (!paintable_box.is_absolutely_positioned() && !paintable_box.is_floating() && !paintable_box.stacking_context()) {
|
2026-01-13 16:44:09 -03:00
|
|
|
if (paintable_box.hit_test(position, type, callback) == TraversalDecision::Break)
|
2022-11-03 15:08:07 -03:00
|
|
|
return TraversalDecision::Break;
|
2022-03-04 11:02:16 -03:00
|
|
|
}
|
2024-02-13 17:34:07 -03:00
|
|
|
}
|
2022-03-04 11:02:16 -03:00
|
|
|
}
|
2021-03-31 11:26:11 -03:00
|
|
|
|
2022-03-04 11:02:16 -03:00
|
|
|
// 2. the child stacking contexts with negative stack levels (most negative first).
|
2026-03-15 23:47:03 -03:00
|
|
|
// NB: Hit testing follows reverse painting order, so we visit the least negative stack levels first.
|
2026-01-05 20:36:34 -03:00
|
|
|
for (auto const child : m_children.in_reverse()) {
|
2026-03-15 23:47:03 -03:00
|
|
|
// Skip positive/ zero index child stacking contexts, which have already been handled above.
|
2026-04-03 11:38:45 -03:00
|
|
|
if (child->paintable_box().effective_z_index().value_or(0) >= 0)
|
2026-03-15 23:47:03 -03:00
|
|
|
continue;
|
2026-01-13 16:44:09 -03:00
|
|
|
if (child->hit_test(position, type, callback) == TraversalDecision::Break)
|
2024-02-13 17:34:07 -03:00
|
|
|
return TraversalDecision::Break;
|
2022-03-04 11:02:16 -03:00
|
|
|
}
|
2021-03-31 11:26:11 -03:00
|
|
|
|
2026-01-24 20:07:53 -03:00
|
|
|
// Hidden elements and elements with pointer-events: none shouldn't be hit.
|
|
|
|
|
if (!is_visible || !paintable_box().visible_for_hit_testing())
|
2025-08-28 19:44:48 -03:00
|
|
|
return TraversalDecision::Continue;
|
|
|
|
|
|
2026-03-10 20:59:35 -03:00
|
|
|
auto local_position = paintable_box().transform_point_to_local(position);
|
2024-08-07 10:24:27 -03:00
|
|
|
|
2026-01-13 16:44:09 -03:00
|
|
|
if (local_position.has_value() && paintable_box().absolute_border_box_rect().contains(local_position.value())) {
|
2026-03-07 23:25:19 -03:00
|
|
|
if (callback({ .paintable = const_cast<PaintableBox&>(paintable_box()) }) == TraversalDecision::Break)
|
2024-11-18 12:05:22 -03:00
|
|
|
return TraversalDecision::Break;
|
2020-07-01 14:02:28 -03:00
|
|
|
}
|
2022-03-04 11:02:16 -03:00
|
|
|
|
2024-02-13 17:34:07 -03:00
|
|
|
return TraversalDecision::Continue;
|
2020-07-01 14:02:28 -03:00
|
|
|
}
|
|
|
|
|
|
2025-07-06 09:45:04 -03:00
|
|
|
void StackingContext::dump(StringBuilder& builder, int indent) const
|
2020-06-15 12:29:35 -03:00
|
|
|
{
|
|
|
|
|
for (int i = 0; i < indent; ++i)
|
2021-01-01 12:42:44 -03:00
|
|
|
builder.append(' ');
|
2024-11-18 12:05:22 -03:00
|
|
|
CSSPixelRect rect = paintable_box().absolute_rect();
|
|
|
|
|
builder.appendff("SC for {} {} [children: {}] (z-index: ", paintable_box().layout_node().debug_description(), rect, m_children.size());
|
2024-01-02 22:40:31 -03:00
|
|
|
|
2026-04-03 11:38:45 -03:00
|
|
|
if (paintable_box().effective_z_index().has_value())
|
|
|
|
|
builder.appendff("{}", paintable_box().effective_z_index().value());
|
2022-03-04 11:03:48 -03:00
|
|
|
else
|
2022-07-11 14:32:29 -03:00
|
|
|
builder.append("auto"sv);
|
2022-03-04 11:03:48 -03:00
|
|
|
builder.append(')');
|
2022-03-17 21:29:20 -03:00
|
|
|
|
2026-01-31 11:57:46 -03:00
|
|
|
if (paintable_box().has_css_transform())
|
|
|
|
|
builder.append(", has_transform"sv);
|
|
|
|
|
|
2025-07-06 09:45:04 -03:00
|
|
|
builder.append('\n');
|
2020-06-15 12:29:35 -03:00
|
|
|
for (auto& child : m_children)
|
2025-07-06 09:45:04 -03:00
|
|
|
child->dump(builder, indent + 1);
|
2020-06-15 12:29:35 -03:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|