diff --git a/Tests/LibWeb/Layout/expected/atomic-inline-with-percentage-vertical-align.txt b/Tests/LibWeb/Layout/expected/atomic-inline-with-percentage-vertical-align.txt new file mode 100644 index 0000000000..5424b971cb --- /dev/null +++ b/Tests/LibWeb/Layout/expected/atomic-inline-with-percentage-vertical-align.txt @@ -0,0 +1,10 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (1,1) content-size 798x62.506248 children: not-inline + BlockContainer at (2,2) content-size 796x60.506248 children: inline + line 0 width: 34, height: 28.50625, bottom: 28.50625, baseline: 28.50625 + frag 0 from BlockContainer start: 0, length: 0, rect: [4,3 30x30] + line 1 width: 32, height: 28.506248, bottom: 60.506248, baseline: 28.50625 + frag 0 from BlockContainer start: 0, length: 0, rect: [3,35 30x30] + BlockContainer at (4,3) content-size 30x30 inline-block children: not-inline + BreakNode
+ BlockContainer at (3,35) content-size 30x30 inline-block children: not-inline diff --git a/Tests/LibWeb/Layout/input/atomic-inline-with-percentage-vertical-align.html b/Tests/LibWeb/Layout/input/atomic-inline-with-percentage-vertical-align.html new file mode 100644 index 0000000000..d7d80e0525 --- /dev/null +++ b/Tests/LibWeb/Layout/input/atomic-inline-with-percentage-vertical-align.html @@ -0,0 +1,14 @@ +

\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp b/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp index f02278b1a9..9be5355c45 100644 --- a/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp +++ b/Userland/Libraries/LibWeb/Layout/LineBuilder.cpp @@ -216,8 +216,12 @@ void LineBuilder::update_last_line() // NOTE: For fragments with a vertical-align, shift the line box baseline down by the length. // This ensures that we make enough vertical space on the line for any manually-aligned fragments. - if (auto length_percentage = fragment.layout_node().computed_values().vertical_align().template get_pointer(); length_percentage && length_percentage->is_length()) - fragment_baseline += length_percentage->length().to_px(fragment.layout_node()); + if (auto const* length_percentage = fragment.layout_node().computed_values().vertical_align().get_pointer()) { + if (length_percentage->is_length()) + fragment_baseline += length_percentage->length().to_px(fragment.layout_node()); + else if (length_percentage->is_percentage()) + fragment_baseline += length_percentage->percentage().as_fraction() * line_height; + } line_box_baseline = max(line_box_baseline, fragment_baseline); } @@ -265,9 +269,14 @@ void LineBuilder::update_last_line() if (vertical_align.has()) { new_fragment_y = y_value_for_alignment(vertical_align.get()); } else { - if (auto length_percentage = vertical_align.get_pointer(); length_percentage && length_percentage->is_length()) { - auto vertical_align_amount = length_percentage->length().to_px(fragment.layout_node()); - new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount; + if (auto const* length_percentage = vertical_align.get_pointer()) { + if (length_percentage->is_length()) { + auto vertical_align_amount = length_percentage->length().to_px(fragment.layout_node()); + new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount; + } else if (length_percentage->is_percentage()) { + auto vertical_align_amount = length_percentage->percentage().as_fraction() * m_context.containing_block().line_height(); + new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount; + } } } @@ -289,8 +298,12 @@ void LineBuilder::update_last_line() top_of_inline_box = (fragment.offset().y() + fragment.baseline() - font_metrics.ascent - half_leading); bottom_of_inline_box = (fragment.offset().y() + fragment.baseline() + font_metrics.descent + half_leading); } - if (auto length_percentage = fragment.layout_node().computed_values().vertical_align().template get_pointer(); length_percentage && length_percentage->is_length()) - bottom_of_inline_box += length_percentage->length().to_px(fragment.layout_node()); + if (auto const* length_percentage = fragment.layout_node().computed_values().vertical_align().get_pointer()) { + if (length_percentage->is_length()) + bottom_of_inline_box += length_percentage->length().to_px(fragment.layout_node()); + else if (length_percentage->is_percentage()) + bottom_of_inline_box += length_percentage->percentage().as_fraction() * m_context.containing_block().line_height(); + } } uppermost_box_top = min(uppermost_box_top, top_of_inline_box);