RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 22:38:13 +00:00
Code Issues Activity Actions

LibWeb: Use TextTop and TextBottom property for VerticalAlign

Browse source 
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.
This commit is contained in:
martinfalisse 2023-01-01 14:50:52 +01:00 • committed by Andreas Kling
parent d3b4a5fbdb
commit 20313ae8a8
1 changed files with 9 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Userland/Libraries/LibWeb/Layout/LayoutState.cpp
View file

@ -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<CSS::VerticalAlign>()) {
switch (vertical_align.get<CSS::VerticalAlign>()) {
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;
}