From 20313ae8a8848da9a4c605422ab60ed1a37b9620 Mon Sep 17 00:00:00 2001 From: martinfalisse Date: Sun, 1 Jan 2023 14:50:52 +0100 Subject: LibWeb: Use TextTop and TextBottom property for VerticalAlign If text-top or text-bottom are given as values for the vertical-align property, actually use them and calculate the respective position of the element. The actual calculations done (using the font_size, descent, etc.) are not exactly how I imagined them when reading the spec, but the results seem acceptable when compared to other browsers. --- Userland/Libraries/LibWeb/Layout/LayoutState.cpp | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'Userland/Libraries/LibWeb') diff --git a/Userland/Libraries/LibWeb/Layout/LayoutState.cpp b/Userland/Libraries/LibWeb/Layout/LayoutState.cpp index a5245b8275..60a7b52ed8 100644 --- a/Userland/Libraries/LibWeb/Layout/LayoutState.cpp +++ b/Userland/Libraries/LibWeb/Layout/LayoutState.cpp @@ -101,13 +101,22 @@ float box_baseline(LayoutState const& state, Box const& box) { auto const& box_state = state.get(box); + // https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align auto const& vertical_align = box.computed_values().vertical_align(); if (vertical_align.has()) { switch (vertical_align.get()) { case CSS::VerticalAlign::Top: + // Top: Align the top of the aligned subtree with the top of the line box. return box_state.border_box_top(); case CSS::VerticalAlign::Bottom: + // Bottom: Align the bottom of the aligned subtree with the bottom of the line box. return box_state.content_height() + box_state.border_box_bottom(); + case CSS::VerticalAlign::TextTop: + // TextTop: Align the top of the box with the top of the parent's content area (see 10.6.1). + return box.computed_values().font_size(); + case CSS::VerticalAlign::TextBottom: + // TextTop: Align the bottom of the box with the bottom of the parent's content area (see 10.6.1). + return box_state.content_height() - (box.containing_block()->font().pixel_metrics().descent * 2); default: break; } -- cgit v1.2.3