diff --git a/Userland/Libraries/LibWeb/CMakeLists.txt b/Userland/Libraries/LibWeb/CMakeLists.txt index 27541f15d4..4ec37c8ac5 100644 --- a/Userland/Libraries/LibWeb/CMakeLists.txt +++ b/Userland/Libraries/LibWeb/CMakeLists.txt @@ -288,6 +288,7 @@ set(SOURCES Painting/CanvasPaintable.cpp Painting/CheckBoxPaintable.cpp Painting/ImagePaintable.cpp + Painting/InlinePaintable.cpp Painting/MarkerPaintable.cpp Painting/NestedBrowsingContextPaintable.cpp Painting/PaintContext.cpp diff --git a/Userland/Libraries/LibWeb/Layout/InlineNode.cpp b/Userland/Libraries/LibWeb/Layout/InlineNode.cpp index ef90eceb8b..4e757cf50c 100644 --- a/Userland/Libraries/LibWeb/Layout/InlineNode.cpp +++ b/Userland/Libraries/LibWeb/Layout/InlineNode.cpp @@ -11,9 +11,7 @@ #include #include #include -#include -#include -#include +#include namespace Web::Layout { @@ -27,118 +25,9 @@ InlineNode::~InlineNode() { } -void InlineNode::paint_inline(PaintContext& context, Painting::PaintPhase phase) const +OwnPtr InlineNode::create_paintable() const { - auto& painter = context.painter(); - - if (phase == Painting::PaintPhase::Background) { - auto top_left_border_radius = computed_values().border_top_left_radius(); - auto top_right_border_radius = computed_values().border_top_right_radius(); - auto bottom_right_border_radius = computed_values().border_bottom_right_radius(); - auto bottom_left_border_radius = computed_values().border_bottom_left_radius(); - auto containing_block_position_in_absolute_coordinates = containing_block()->paint_box()->absolute_position(); - - for_each_fragment([&](auto const& fragment, bool is_first_fragment, bool is_last_fragment) { - Gfx::FloatRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() }; - - if (is_first_fragment) { - float extra_start_width = box_model().padding.left; - absolute_fragment_rect.translate_by(-extra_start_width, 0); - absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width); - } - - if (is_last_fragment) { - float extra_end_width = box_model().padding.right; - absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width); - } - - auto border_radius_data = Painting::normalized_border_radius_data(*this, absolute_fragment_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius); - Painting::paint_background(context, *this, enclosing_int_rect(absolute_fragment_rect), computed_values().background_color(), &computed_values().background_layers(), border_radius_data); - - if (auto computed_box_shadow = computed_values().box_shadow(); !computed_box_shadow.is_empty()) { - Vector resolved_box_shadow_data; - resolved_box_shadow_data.ensure_capacity(computed_box_shadow.size()); - for (auto const& layer : computed_box_shadow) { - resolved_box_shadow_data.empend( - layer.color, - static_cast(layer.offset_x.to_px(*this)), - static_cast(layer.offset_y.to_px(*this)), - static_cast(layer.blur_radius.to_px(*this)), - static_cast(layer.spread_distance.to_px(*this)), - layer.placement == CSS::BoxShadowPlacement::Outer ? Painting::BoxShadowPlacement::Outer : Painting::BoxShadowPlacement::Inner); - } - Painting::paint_box_shadow(context, enclosing_int_rect(absolute_fragment_rect), resolved_box_shadow_data); - } - - return IterationDecision::Continue; - }); - } - - if (phase == Painting::PaintPhase::Border) { - auto top_left_border_radius = computed_values().border_top_left_radius(); - auto top_right_border_radius = computed_values().border_top_right_radius(); - auto bottom_right_border_radius = computed_values().border_bottom_right_radius(); - auto bottom_left_border_radius = computed_values().border_bottom_left_radius(); - - auto borders_data = Painting::BordersData { - .top = computed_values().border_top(), - .right = computed_values().border_right(), - .bottom = computed_values().border_bottom(), - .left = computed_values().border_left(), - }; - - auto containing_block_position_in_absolute_coordinates = containing_block()->paint_box()->absolute_position(); - - for_each_fragment([&](auto const& fragment, bool is_first_fragment, bool is_last_fragment) { - Gfx::FloatRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() }; - - if (is_first_fragment) { - float extra_start_width = box_model().padding.left; - absolute_fragment_rect.translate_by(-extra_start_width, 0); - absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width); - } - - if (is_last_fragment) { - float extra_end_width = box_model().padding.right; - absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width); - } - - auto bordered_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width); - auto border_radius_data = Painting::normalized_border_radius_data(*this, bordered_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius); - - Painting::paint_all_borders(context, bordered_rect, border_radius_data, borders_data); - - return IterationDecision::Continue; - }); - } - - // FIXME: We check for a non-null dom_node(), since pseudo-elements have a null one and were getting - // highlighted incorrectly. A better solution will be needed if we want to inspect them too. - if (phase == Painting::PaintPhase::Overlay && dom_node() && document().inspected_node() == dom_node()) { - // FIXME: This paints a double-thick border between adjacent fragments, where ideally there - // would be none. Once we implement non-rectangular outlines for the `outline` CSS - // property, we can use that here instead. - for_each_fragment([&](auto& fragment, bool, bool) { - painter.draw_rect(enclosing_int_rect(fragment.absolute_rect()), Color::Magenta); - return IterationDecision::Continue; - }); - } -} - -template -void InlineNode::for_each_fragment(Callback callback) const -{ - // FIXME: This will be slow if the containing block has a lot of fragments! - Vector fragments; - containing_block()->paint_box()->for_each_fragment([&](auto& fragment) { - if (is_inclusive_ancestor_of(fragment.layout_node())) - fragments.append(fragment); - return IterationDecision::Continue; - }); - for (size_t i = 0; i < fragments.size(); ++i) { - auto const& fragment = fragments[i]; - callback(fragment, i == 0, i == fragments.size() - 1); - } + return Painting::InlinePaintable::create(*this); } } diff --git a/Userland/Libraries/LibWeb/Layout/InlineNode.h b/Userland/Libraries/LibWeb/Layout/InlineNode.h index 6bbba32737..687f818bc3 100644 --- a/Userland/Libraries/LibWeb/Layout/InlineNode.h +++ b/Userland/Libraries/LibWeb/Layout/InlineNode.h @@ -15,11 +15,7 @@ public: InlineNode(DOM::Document&, DOM::Element*, NonnullRefPtr); virtual ~InlineNode() override; - void paint_inline(PaintContext&, Painting::PaintPhase) const; - -private: - template - void for_each_fragment(Callback) const; + virtual OwnPtr create_paintable() const override; }; } diff --git a/Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp b/Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp new file mode 100644 index 0000000000..b40c033d2f --- /dev/null +++ b/Userland/Libraries/LibWeb/Painting/InlinePaintable.cpp @@ -0,0 +1,146 @@ +/* + * Copyright (c) 2018-2022, Andreas Kling + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#include +#include +#include +#include +#include +#include +#include + +namespace Web::Painting { + +NonnullOwnPtr InlinePaintable::create(Layout::InlineNode const& layout_node) +{ + return adopt_own(*new InlinePaintable(layout_node)); +} + +InlinePaintable::InlinePaintable(Layout::InlineNode const& layout_node) + : Paintable(layout_node) +{ +} + +Layout::InlineNode const& InlinePaintable::layout_node() const +{ + return static_cast(Paintable::layout_node()); +} + +void InlinePaintable::paint(PaintContext& context, Painting::PaintPhase phase) const +{ + auto& painter = context.painter(); + + if (phase == Painting::PaintPhase::Background) { + auto top_left_border_radius = computed_values().border_top_left_radius(); + auto top_right_border_radius = computed_values().border_top_right_radius(); + auto bottom_right_border_radius = computed_values().border_bottom_right_radius(); + auto bottom_left_border_radius = computed_values().border_bottom_left_radius(); + auto containing_block_position_in_absolute_coordinates = layout_node().containing_block()->paint_box()->absolute_position(); + + for_each_fragment([&](auto const& fragment, bool is_first_fragment, bool is_last_fragment) { + Gfx::FloatRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() }; + + if (is_first_fragment) { + float extra_start_width = box_model().padding.left; + absolute_fragment_rect.translate_by(-extra_start_width, 0); + absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width); + } + + if (is_last_fragment) { + float extra_end_width = box_model().padding.right; + absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width); + } + + auto border_radius_data = Painting::normalized_border_radius_data(layout_node(), absolute_fragment_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius); + Painting::paint_background(context, layout_node(), enclosing_int_rect(absolute_fragment_rect), computed_values().background_color(), &computed_values().background_layers(), border_radius_data); + + if (auto computed_box_shadow = computed_values().box_shadow(); !computed_box_shadow.is_empty()) { + Vector resolved_box_shadow_data; + resolved_box_shadow_data.ensure_capacity(computed_box_shadow.size()); + for (auto const& layer : computed_box_shadow) { + resolved_box_shadow_data.empend( + layer.color, + static_cast(layer.offset_x.to_px(layout_node())), + static_cast(layer.offset_y.to_px(layout_node())), + static_cast(layer.blur_radius.to_px(layout_node())), + static_cast(layer.spread_distance.to_px(layout_node())), + layer.placement == CSS::BoxShadowPlacement::Outer ? Painting::BoxShadowPlacement::Outer : Painting::BoxShadowPlacement::Inner); + } + Painting::paint_box_shadow(context, enclosing_int_rect(absolute_fragment_rect), resolved_box_shadow_data); + } + + return IterationDecision::Continue; + }); + } + + if (phase == Painting::PaintPhase::Border) { + auto top_left_border_radius = computed_values().border_top_left_radius(); + auto top_right_border_radius = computed_values().border_top_right_radius(); + auto bottom_right_border_radius = computed_values().border_bottom_right_radius(); + auto bottom_left_border_radius = computed_values().border_bottom_left_radius(); + + auto borders_data = Painting::BordersData { + .top = computed_values().border_top(), + .right = computed_values().border_right(), + .bottom = computed_values().border_bottom(), + .left = computed_values().border_left(), + }; + + auto containing_block_position_in_absolute_coordinates = layout_node().containing_block()->paint_box()->absolute_position(); + + for_each_fragment([&](auto const& fragment, bool is_first_fragment, bool is_last_fragment) { + Gfx::FloatRect absolute_fragment_rect { containing_block_position_in_absolute_coordinates.translated(fragment.offset()), fragment.size() }; + + if (is_first_fragment) { + float extra_start_width = box_model().padding.left; + absolute_fragment_rect.translate_by(-extra_start_width, 0); + absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width); + } + + if (is_last_fragment) { + float extra_end_width = box_model().padding.right; + absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width); + } + + auto bordered_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width); + auto border_radius_data = Painting::normalized_border_radius_data(layout_node(), bordered_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius); + + Painting::paint_all_borders(context, bordered_rect, border_radius_data, borders_data); + + return IterationDecision::Continue; + }); + } + + // FIXME: We check for a non-null dom_node(), since pseudo-elements have a null one and were getting + // highlighted incorrectly. A better solution will be needed if we want to inspect them too. + if (phase == Painting::PaintPhase::Overlay && layout_node().dom_node() && layout_node().document().inspected_node() == layout_node().dom_node()) { + // FIXME: This paints a double-thick border between adjacent fragments, where ideally there + // would be none. Once we implement non-rectangular outlines for the `outline` CSS + // property, we can use that here instead. + for_each_fragment([&](auto const& fragment, bool, bool) { + painter.draw_rect(enclosing_int_rect(fragment.absolute_rect()), Color::Magenta); + return IterationDecision::Continue; + }); + } +} + +template +void InlinePaintable::for_each_fragment(Callback callback) const +{ + // FIXME: This will be slow if the containing block has a lot of fragments! + Vector fragments; + layout_node().containing_block()->paint_box()->for_each_fragment([&](auto& fragment) { + if (layout_node().is_inclusive_ancestor_of(fragment.layout_node())) + fragments.append(fragment); + return IterationDecision::Continue; + }); + for (size_t i = 0; i < fragments.size(); ++i) { + auto const& fragment = fragments[i]; + callback(fragment, i == 0, i == fragments.size() - 1); + } +} + +} diff --git a/Userland/Libraries/LibWeb/Painting/InlinePaintable.h b/Userland/Libraries/LibWeb/Painting/InlinePaintable.h new file mode 100644 index 0000000000..ddeb74d403 --- /dev/null +++ b/Userland/Libraries/LibWeb/Painting/InlinePaintable.h @@ -0,0 +1,30 @@ +/* + * Copyright (c) 2022, Andreas Kling + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#pragma once + +#include +#include + +namespace Web::Painting { + +class InlinePaintable final : public Paintable { +public: + static NonnullOwnPtr create(Layout::InlineNode const&); + + virtual void paint(PaintContext&, PaintPhase) const override; + + Layout::InlineNode const& layout_node() const; + auto const& box_model() const { return layout_node().box_model(); } + +private: + InlinePaintable(Layout::InlineNode const&); + + template + void for_each_fragment(Callback) const; +}; + +} diff --git a/Userland/Libraries/LibWeb/Painting/Paintable.h b/Userland/Libraries/LibWeb/Painting/Paintable.h index 73cc9d5c1c..f9199bd787 100644 --- a/Userland/Libraries/LibWeb/Painting/Paintable.h +++ b/Userland/Libraries/LibWeb/Painting/Paintable.h @@ -25,6 +25,7 @@ public: virtual void after_children_paint(PaintContext&, PaintPhase) const { } Layout::Node const& layout_node() const { return m_layout_node; } + auto const& computed_values() const { return m_layout_node.computed_values(); } protected: explicit Paintable(Layout::Node const& layout_node) @@ -48,7 +49,6 @@ public: Layout::Box const& layout_box() const { return static_cast(Paintable::layout_node()); } auto const& box_model() const { return layout_box().box_model(); } - auto const& computed_values() const { return layout_box().computed_values(); } struct OverflowData { Gfx::FloatRect scrollable_overflow_rect; diff --git a/Userland/Libraries/LibWeb/Painting/StackingContext.cpp b/Userland/Libraries/LibWeb/Painting/StackingContext.cpp index 67a9bfe01b..2a11aebd94 100644 --- a/Userland/Libraries/LibWeb/Painting/StackingContext.cpp +++ b/Userland/Libraries/LibWeb/Painting/StackingContext.cpp @@ -9,7 +9,6 @@ #include #include #include -#include #include #include #include @@ -18,11 +17,8 @@ namespace Web::Painting { static void paint_node(Layout::Node const& layout_node, PaintContext& context, PaintPhase phase) { - // FIXME: This whole thing is hairy. Find a nicer solution for painting InlineNode. - if (layout_node.is_box()) - static_cast(layout_node).paint_box()->paint(context, phase); - else if (is(layout_node)) - static_cast(layout_node).paint_inline(context, phase); + if (auto const* paintable = layout_node.paintable()) + paintable->paint(context, phase); } StackingContext::StackingContext(Layout::Box& box, StackingContext* parent)