LibWeb: Paint text decorations from each decorating box

Previously, decoration lines reached descendants by treating
`text-decoration-line` as an inherited property. Descendants painted
the lines with their own color, style, thickness, underline offset, and
underline position rather than the values specified on the decorating
box, and derived the line geometry from their own font, so one
decoration changed appearance wherever its text changed font size or
was shifted by `vertical-align`.

Now each text fragment walks its ancestor chain and paints the
decorations of every decorating box that applies to it, using that
box's computed values and font. Lines are anchored at the decorating
box's own baseline, so vertical alignment moves a box's decorations
together with it but never with its descendants. Decorations that
propagate into a block container derive their geometry from that
block.

Author: tcl3

Libraries/LibWeb/CSS/Properties.json

@@ -4330,8 +4330,7 @@
   "text-decoration-line": {
     "affects-layout": false,
     "animation-type": "discrete",
-    "__comment": "FIXME: This property is not supposed to be inherited, but we currently rely on inheritance to propagate decorations into line boxes.",
-    "inherited": true,
+    "inherited": false,
     "initial": "none",
     "requires-computation": "never",
     "valid-types": [

Libraries/LibWeb/Layout/InlineFormattingContext.cpp

@@ -265,7 +265,6 @@ void InlineFormattingContext::compute_inline_box_pieces()
 
     struct StagedPiece {
         Painting::InlineBoxPiece piece;
-        u32 line_index { 0 };
         u32 depth { 0 };
         size_t discovery_index { 0 };
     };
@@ -330,17 +329,21 @@ void InlineFormattingContext::compute_inline_box_pieces()
         }
 
         for (auto& line : per_node.lines) {
+            auto const& line_box = line_boxes[line.line_index];
+            auto line_box_top = line_box.bottom() - line_box.block_length();
+            auto inline_box_baseline = line_box.inline_box_baseline(node).value_or(line_box_top + line_box.baseline());
             if (!line.has_contributions) {
                 if (line.interrupting_block_position.has_value()) {
                     staged_pieces.append({ .piece = {
                                                .node = node,
                                                .first_fragment_index = line.first_fragment_index.value_or(0),
                                                .fragment_count = line.fragment_count,
+                                               .line_index = static_cast<u32>(line.line_index),
                                                .border_box_rect = { *line.interrupting_block_position, {} },
+                                               .baseline = inline_box_baseline,
                                                .present_edges = edge_bits(true, true),
                                                .is_geometry_only_placeholder = true,
                                            },
-                        .line_index = static_cast<u32>(line.line_index),
                         .depth = per_node.depth,
                         .discovery_index = node_index });
                 }
@@ -369,10 +372,11 @@ void InlineFormattingContext::compute_inline_box_pieces()
                                        .node = node,
                                        .first_fragment_index = line.first_fragment_index.value_or(0),
                                        .fragment_count = line.fragment_count,
+                                       .line_index = static_cast<u32>(line.line_index),
                                        .border_box_rect = border_box_rect,
+                                       .baseline = inline_box_baseline,
                                        .present_edges = edge_bits(has_low_edge, has_high_edge),
                                    },
-                .line_index = static_cast<u32>(line.line_index),
                 .depth = per_node.depth,
                 .discovery_index = node_index });
 
@@ -399,14 +403,13 @@ void InlineFormattingContext::compute_inline_box_pieces()
                                    .present_edges = edge_bits(true, true),
                                    .is_geometry_only_placeholder = true,
                                },
-            .line_index = 0,
             .depth = fragmented_inline_nesting_depth(node),
             .discovery_index = per_node_data.size() + i });
     }
 
     quick_sort(staged_pieces, [](auto const& a, auto const& b) {
-        if (a.line_index != b.line_index)
-            return a.line_index < b.line_index;
+        if (a.piece.line_index != b.piece.line_index)
+            return a.piece.line_index < b.piece.line_index;
         if (a.depth != b.depth)
             return a.depth < b.depth;
         return a.discovery_index < b.discovery_index;

Libraries/LibWeb/Layout/LayoutState.cpp

@@ -222,8 +222,10 @@ void LayoutState::resolve_relative_positions()
             auto offset = accumulated_offset_per_node.ensure(piece_node, [&] {
                 return accumulated_relative_insets_from_inline_ancestor_chain(piece_node, nullptr).offset;
             });
-            if (!offset.is_zero())
+            if (!offset.is_zero()) {
                 piece.border_box_rect.translate_by(offset);
+                piece.baseline += offset.y();
+            }
         }
     });
 }
@@ -385,6 +387,7 @@ void LayoutState::commit_used_values_and_build_paint_tree(Box& root, RefPtr<Pain
 
                     lines.append({
                         .rect = rect_for_line_box(line_box, used_values.content_width()),
+                        .baseline = line_box.bottom() - line_box.block_length() + line_box.baseline(),
                         .fragment_count = static_cast<u32>(paintable_with_lines->fragments().size() - first_fragment_index),
                     });
                 }

Libraries/LibWeb/Layout/LineBox.cpp

@@ -37,6 +37,21 @@ CSSPixels LineBox::bottom() const
     return m_bottom;
 }
 
+void LineBox::set_inline_box_baseline(NodeWithStyleAndBoxModelMetrics const& box, CSSPixels baseline)
+{
+    if (any_of(m_inline_box_baselines, [&](auto const& entry) { return entry.box == &box; }))
+        return;
+    m_inline_box_baselines.append({ &box, baseline });
+}
+
+Optional<CSSPixels> LineBox::inline_box_baseline(NodeWithStyleAndBoxModelMetrics const& box) const
+{
+    auto entry = m_inline_box_baselines.first_matching([&](auto const& entry) { return entry.box == &box; });
+    if (!entry.has_value())
+        return {};
+    return entry->baseline;
+}
+
 void LineBox::add_fragment(Node const& layout_node, size_t start, size_t length, CSSPixels leading_size,
     CSSPixels trailing_size, CSSPixels leading_margin, CSSPixels trailing_margin, CSSPixels content_width,
     CSSPixels content_height, CSSPixels border_box_top, CSSPixels border_box_bottom, RefPtr<Gfx::GlyphRun> glyph_run)

Libraries/LibWeb/Layout/LineBox.h

@@ -12,6 +12,7 @@
 namespace Web::Layout {
 
 class Box;
+class NodeWithStyleAndBoxModelMetrics;
 
 class LineBox {
 public:
@@ -44,6 +45,9 @@ class LineBox {
     CSSPixels block_length() const { return m_block_length; }
     CSSPixels baseline() const { return m_baseline; }
 
+    void set_inline_box_baseline(NodeWithStyleAndBoxModelMetrics const&, CSSPixels);
+    Optional<CSSPixels> inline_box_baseline(NodeWithStyleAndBoxModelMetrics const&) const;
+
     void add_fragment(Node const& layout_node, size_t start, size_t length, CSSPixels leading_size, CSSPixels trailing_size, CSSPixels leading_margin, CSSPixels trailing_margin, CSSPixels content_width, CSSPixels content_height, CSSPixels border_box_top, CSSPixels border_box_bottom, RefPtr<Gfx::GlyphRun> glyph_run = {});
     void add_static_position_marker(Box const&, bool preceded_by_inline_box_start_edges);
 
@@ -78,6 +82,11 @@ class LineBox {
 
     Vector<LineBoxFragment> m_fragments;
     Vector<StaticPositionMarker> m_static_position_markers;
+    struct InlineBoxBaseline {
+        NodeWithStyleAndBoxModelMetrics const* box { nullptr };
+        CSSPixels baseline { 0 };
+    };
+    Vector<InlineBoxBaseline> m_inline_box_baselines;
     CSSPixels m_inline_length { 0 };
     CSSPixels m_block_length { 0 };
     CSSPixels m_bottom { 0 };

Libraries/LibWeb/Layout/LineBuilder.cpp

@@ -455,6 +455,11 @@ void LineBuilder::update_last_line()
 
     Optional<CSSPixels> first_unshifted_text_baseline;
 
+    struct InlineBoxAlignment {
+        NodeWithStyleAndBoxModelMetrics const* box { nullptr };
+        CSSPixels vertical_shift { 0 };
+    };
+
     for (auto& fragment : line_box.fragments()) {
         CSSPixels new_fragment_inline_offset = inline_offset + fragment.inline_offset();
 
@@ -476,29 +481,41 @@ void LineBuilder::update_last_line()
         CSSPixels new_fragment_block_offset = block_offset_value_for_alignment(own_vertical_align, fragment_metrics);
         auto baseline_aligned_fragment_block_offset = block_offset_value_for_alignment(CSS::VerticalAlign::Baseline, fragment_metrics);
 
+        Vector<InlineBoxAlignment, 4> inline_box_alignments;
+
         // A 'top'- or 'bottom'-aligned box forms the root of its own aligned subtree and is positioned relative to the
         // line box, so it must ignore the vertical-align of its ancestors.
         auto* own_alignment = own_vertical_align.get_pointer<CSS::VerticalAlign>();
         bool own_alignment_is_line_relative = own_alignment && first_is_one_of(*own_alignment, CSS::VerticalAlign::Top, CSS::VerticalAlign::Bottom);
 
         auto const& node = fragment.style_source();
         auto const* containing_block = &m_context.containing_block();
+        if (&node != containing_block && node.is_fragmented_inline()) {
+            inline_box_alignments.append({
+                .box = &as<NodeWithStyleAndBoxModelMetrics>(node),
+                .vertical_shift = new_fragment_block_offset - baseline_aligned_fragment_block_offset,
+            });
+        }
         auto const* first_ancestor = &node == containing_block ? nullptr : node.parent();
         for (auto const* ancestor = first_ancestor;
             !own_alignment_is_line_relative && ancestor && ancestor->is_fragmented_inline() && ancestor != containing_block;
             ancestor = ancestor->parent()) {
             auto const& ancestor_vertical_align = ancestor->computed_values().vertical_align();
             if (ancestor_vertical_align.has<CSS::VerticalAlign>()) {
                 auto keyword = ancestor_vertical_align.get<CSS::VerticalAlign>();
-                if (keyword == CSS::VerticalAlign::Baseline)
+                if (keyword == CSS::VerticalAlign::Baseline) {
+                    inline_box_alignments.append({ &as<NodeWithStyleAndBoxModelMetrics>(*ancestor), 0 });
                     continue;
+                }
                 // FIXME: Implement aligning a 'top'- or 'bottom'-aligned ancestor's aligned subtree to the line box
                 if (first_is_one_of(keyword, CSS::VerticalAlign::Top, CSS::VerticalAlign::Bottom))
                     break;
             }
             auto ancestor_metrics = inline_box_alignment_metrics(*ancestor);
-            new_fragment_block_offset += block_offset_value_for_alignment(ancestor_vertical_align, ancestor_metrics)
+            auto ancestor_vertical_shift = block_offset_value_for_alignment(ancestor_vertical_align, ancestor_metrics)
                 - block_offset_value_for_alignment(CSS::VerticalAlign::Baseline, ancestor_metrics);
+            new_fragment_block_offset += ancestor_vertical_shift;
+            inline_box_alignments.append({ &as<NodeWithStyleAndBoxModelMetrics>(*ancestor), ancestor_vertical_shift });
         }
 
         fragment.set_inline_offset(new_fragment_inline_offset);
@@ -546,6 +563,21 @@ void LineBuilder::update_last_line()
         if (!first_unshifted_text_baseline.has_value() && fragment_is_unshifted
             && fragment.layout_node().is_text_node() && !fragment.is_fully_truncated())
             first_unshifted_text_baseline = fragment.block_offset() + fragment.baseline() - m_current_block_offset;
+
+        // https://drafts.csswg.org/css-text-decor-4/#text-line-constancy
+        // UAs must adjust line positions to match the shifted metrics of decorating boxes shifted with
+        // vertical-align values other than baseline [CSS2] or subscripted/superscripted via
+        // font-variant-position [CSS-FONTS-3], but must not adjust the line position or thickness in response to
+        // descendants of a decorating box that are so styled.
+        // NB: Walk from the innermost box outward, removing each box's shift before recording its parent's
+        //     baseline.
+        if (fragment.layout_node().is_text_node() && !fragment.is_fully_truncated()) {
+            auto inline_box_baseline = fragment.block_offset() + fragment.baseline();
+            for (auto const& alignment : inline_box_alignments) {
+                line_box.set_inline_box_baseline(*alignment.box, inline_box_baseline);
+                inline_box_baseline -= alignment.vertical_shift;
+            }
+        }
     }
 
     for (auto& marker : line_box.static_position_markers()) {

Libraries/LibWeb/Layout/Node.cpp

@@ -85,6 +85,12 @@ Node* Node::topmost_layout_node_of_top_layer_placement()
     return direct_viewport_child_candidate;
 }
 
+bool Node::is_pseudo_element_principal_box() const
+{
+    auto pseudo_element = generated_for_pseudo_element();
+    return pseudo_element.has_value() && pseudo_element_generator()->pseudo_element_unsafe_layout_node(*pseudo_element) == this;
+}
+
 // https://www.w3.org/TR/css-display-3/#out-of-flow
 bool Node::is_out_of_flow(FormattingContext const& formatting_context) const
 {
@@ -588,6 +594,20 @@ bool NodeWithStyle::is_sticky_position() const
     return position == CSS::Positioning::Sticky;
 }
 
+bool NodeWithStyle::is_text_decoration_propagation_boundary() const
+{
+    // NB: Anonymous wrappers must stay transparent to propagation so an element's own decorations still reach
+    //     its text. The principal box of a pseudo-element is not a wrapper and must be checked like any other
+    //     element.
+    if (is_anonymous() && !is_pseudo_element_principal_box())
+        return false;
+
+    // https://drafts.csswg.org/css-text-decor-4/#decorating-box
+    // NOTE: Note that text decorations are not propagated to any out-of-flow descendants, nor to the contents
+    //       of atomic inline-level descendants such as inline blocks and inline tables.
+    return is_out_of_flow() || is_atomic_inline();
+}
+
 NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, NonnullRefPtr<CSS::ComputedValues const> computed_values)
     : Node(document, node)
     , m_computed_values(move(computed_values))
@@ -725,15 +745,6 @@ CSS::StyleScope const& NodeWithStyle::style_scope() const
     return document().style_scope();
 }
 
-void NodeWithStyle::propagate_non_inherit_values(CSS::ComputedValues::Builder& builder) const
-{
-    // NOTE: These properties are not inherited, but we still have to propagate them to anonymous wrappers.
-    builder->set_text_decoration_line(computed_values().text_decoration_line());
-    builder->set_text_decoration_thickness(computed_values().text_decoration_thickness());
-    builder->set_text_decoration_color(computed_values().text_decoration_color());
-    builder->set_text_decoration_style(computed_values().text_decoration_style());
-}
-
 void NodeWithStyle::propagate_style_to_anonymous_wrappers()
 {
     // Update the style of any anonymous wrappers that inherit from this node.
@@ -752,16 +763,13 @@ void NodeWithStyle::propagate_style_to_anonymous_wrappers()
     // Propagate style to all anonymous children (except table wrappers!)
     for_each_child_of_type<NodeWithStyle>([&](NodeWithStyle& child) {
         if (child.is_anonymous() && !is<TableWrapper>(child)) {
-            // NB: The principal box of a pseudo-element (::before, ::after, ::marker, etc) is anonymous in the
-            //     sense that it has no DOM node, but it's not an anonymous wrapper: it has its own computed style,
-            //     which is applied to it separately. Don't clobber that style with inherited values from this node.
-            if (auto pseudo_element = child.generated_for_pseudo_element(); pseudo_element.has_value()
-                && child.pseudo_element_generator()->pseudo_element_unsafe_layout_node(*pseudo_element) == &child) {
+            // NB: The principal box of a pseudo-element (::before, ::after, ::marker, etc) has its own computed
+            //     style, which is applied to it separately. Don't clobber that style with inherited values from
+            //     this node.
+            if (child.is_pseudo_element_principal_box())
                 return IterationDecision::Continue;
-            }
             CSS::ComputedValues::Builder builder(child.computed_values());
             builder->inherit_from(computed_values());
-            propagate_non_inherit_values(builder);
             child.set_computed_values(move(builder).build());
             child.propagate_style_to_anonymous_wrappers();
         }
@@ -901,7 +909,6 @@ NonnullRefPtr<NodeWithStyle> NodeWithStyle::create_anonymous_wrapper() const
 {
     auto builder = CSS::ComputedValues::Builder::create_inheriting_from(computed_values());
     builder->set_display(CSS::Display(CSS::DisplayOutside::Block, CSS::DisplayInside::Flow));
-    propagate_non_inherit_values(builder);
     // CSS 2.2 9.2.1.1 creates anonymous block boxes, but 9.4.1 states inline-block creates a BFC.
     // Set wrapper to inline-block to participate correctly in the IFC within the parent inline-block.
     if (display().is_inline_block() && !has_children())

Libraries/LibWeb/Layout/Node.h

@@ -87,6 +87,9 @@ class WEB_API Node
 
     bool is_generated_for_pseudo_element() const { return m_generated_for.has_value(); }
     Optional<CSS::PseudoElement> generated_for_pseudo_element() const { return m_generated_for; }
+    // The principal box of a pseudo-element has no DOM node, but unlike an anonymous wrapper it has its own
+    // computed style.
+    bool is_pseudo_element_principal_box() const;
     bool is_generated_for_before_pseudo_element() const { return m_generated_for == CSS::PseudoElement::Before; }
     bool is_generated_for_after_pseudo_element() const { return m_generated_for == CSS::PseudoElement::After; }
     bool is_generated_for_backdrop_pseudo_element() const { return m_generated_for == CSS::PseudoElement::Backdrop; }
@@ -322,6 +325,8 @@ class WEB_API NodeWithStyle : public Node {
     bool is_fixed_position() const;
     bool is_sticky_position() const;
 
+    bool is_text_decoration_propagation_boundary() const;
+
     // https://www.w3.org/TR/css-display-3/#out-of-flow
     bool is_out_of_flow(FormattingContext const&) const;
 
@@ -389,7 +394,6 @@ class WEB_API NodeWithStyle : public Node {
     virtual bool is_node_with_style() const final { return true; }
 
     void reset_table_box_computed_values_used_by_wrapper_to_init_values();
-    void propagate_non_inherit_values(CSS::ComputedValues::Builder&) const;
     void propagate_style_to_anonymous_wrappers();
 
     void rebuild_image_observers();

Libraries/LibWeb/Painting/PaintableTypes.h

@@ -32,19 +32,20 @@ enum class SelectionState : u8 {
 };
 
 // One record per line box of a block container with inline children, including lines without
-// fragments (e.g. blank lines between consecutive forced breaks in a textarea). The rect is
-// relative to the containing block's content-box origin, and fragment_count only counts
-// committed fragments (fully truncated ones are never committed).
+// fragments (e.g. blank lines between consecutive forced breaks in a textarea). The rect and
+// baseline are relative to the containing block's content-box origin, and fragment_count only
+// counts committed fragments (fully truncated ones are never committed).
 struct LineRecord {
     CSSPixelRect rect;
+    CSSPixels baseline;
     u32 fragment_count { 0 };
 };
 
 // One line's slice of an inline box (InlineNode or inline-flow ListItemBox) fragmented across
 // lines; box edges cut at a line boundary are absent, per box-decoration-break: slice. Fragment
-// indexes point into the containing block paintable's fragment list, and border_box_rect is
-// relative to that block's content-box origin. The committed piece list is ordered by (line,
-// nesting depth), so outer boxes' pieces precede nested ones on the same line.
+// indexes point into the containing block paintable's fragment list, and border_box_rect and
+// baseline are relative to that block's content-box origin. The committed piece list is ordered
+// by (line_index, nesting depth), so outer boxes' pieces precede nested ones on the same line.
 struct InlineBoxPiece {
     enum class Edge : u8 {
         Top = 1 << 0,
@@ -56,7 +57,9 @@ struct InlineBoxPiece {
     WeakPtr<Layout::Node const> node;
     u32 first_fragment_index { 0 };
     u32 fragment_count { 0 };
+    u32 line_index { 0 };
     CSSPixelRect border_box_rect;
+    CSSPixels baseline { 0 };
     u8 present_edges { 0 };
     bool is_geometry_only_placeholder { false };