RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 10:57:34 +00:00
Code Issues Activity Actions

LibWeb: Support CSS vertical-align values "top" and "bottom"

Browse source
This commit is contained in:
Andreas Kling 2022-03-24 22:56:06 +01:00
parent 195ef5e26f
commit 6cffabef03
3 changed files with 38 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

20
Base/res/html/misc/vertical-align.html Normal file
View file

@ -0,0 +1,20 @@
<style>
div {
display: inline-block;
border: 3px solid black;
padding: 5px;
line-height: 3;
}
</style>
Hello friends: <div style="vertical-align: baseline">baseline</div>
<br>
Hello friends: <div style="vertical-align: top">top</div>
<br>
Hello friends: <div style="vertical-align: middle">middle (TODO)</div>
<br>
Hello friends: <div style="vertical-align: bottom">bottom</div>
<br>
Hello friends: <div style="vertical-align: sub">sub (TODO)</div>
<br>
Hello friends: <div style="vertical-align: text-top">text-top (TODO)</div>
<br>

1
Base/res/html/misc/welcome.html
View file

@ -103,6 +103,7 @@
<li><a href="hover.html">:hover</a></li> <li><a href="hover.html">:hover</a></li>
<li><a href="focus.html">:focus</a></li> <li><a href="focus.html">:focus</a></li>
<li><h3>Properties</h3></li> <li><h3>Properties</h3></li>
<li><a href="vertical-align.html">vertical-align</a></li>
<li><a href="backgrounds.html">Backgrounds</a></li> <li><a href="backgrounds.html">Backgrounds</a></li>
<li><a href="background-repeat-test.html">Background-repeat</a></li> <li><a href="background-repeat-test.html">Background-repeat</a></li>
<li><a href="box-shadow.html">Box-shadow</a></li> <li><a href="box-shadow.html">Box-shadow</a></li>

19
Userland/Libraries/LibWeb/Layout/LineBuilder.cpp
View file

@ -97,6 +97,19 @@ bool LineBuilder::should_break(LayoutMode layout_mode, float next_item_width, bo
static float box_baseline(FormattingState const& state, Box const& box) static float box_baseline(FormattingState const& state, Box const& box)
{ {
auto const& box_state = state.get(box); auto const& box_state = state.get(box);
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:
return box_state.border_box_top();
case CSS::VerticalAlign::Bottom:
return box_state.content_height + box_state.border_box_bottom();
default:
break;
}
}
if (!box_state.line_boxes.is_empty()) if (!box_state.line_boxes.is_empty())
return box_state.border_box_top() + box_state.offset.y() + box_state.line_boxes.last().baseline(); return box_state.border_box_top() + box_state.offset.y() + box_state.line_boxes.last().baseline();
if (box.has_children() && !box.children_are_inline()) { if (box.has_children() && !box.children_are_inline()) {
@ -178,13 +191,15 @@ void LineBuilder::update_last_line()
auto y_value_for_alignment = [&](CSS::VerticalAlign vertical_align) { auto y_value_for_alignment = [&](CSS::VerticalAlign vertical_align) {
switch (vertical_align) { switch (vertical_align) {
case CSS::VerticalAlign::Baseline: case CSS::VerticalAlign::Baseline:
case CSS::VerticalAlign::Bottom: return m_current_y + line_box_baseline - fragment_baseline(fragment) + fragment.border_box_top();
case CSS::VerticalAlign::Top:
return m_current_y + fragment.border_box_top();
case CSS::VerticalAlign::Middle: case CSS::VerticalAlign::Middle:
case CSS::VerticalAlign::Bottom:
case CSS::VerticalAlign::Sub: case CSS::VerticalAlign::Sub:
case CSS::VerticalAlign::Super: case CSS::VerticalAlign::Super:
case CSS::VerticalAlign::TextBottom: case CSS::VerticalAlign::TextBottom:
case CSS::VerticalAlign::TextTop: case CSS::VerticalAlign::TextTop:
case CSS::VerticalAlign::Top:
// FIXME: These are all 'baseline' // FIXME: These are all 'baseline'
return m_current_y + line_box_baseline - fragment_baseline(fragment) + fragment.border_box_top(); return m_current_y + line_box_baseline - fragment_baseline(fragment) + fragment.border_box_top();
} }