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

LibWeb: Start fleshing out support for relative CSS units

Browse source 
This patch introduces support for more than just "absolute px" units in
our Length class. It now also supports "em" and "rem", which are units
relative to the font-size of the current layout node and the <html>
element's layout node respectively.
This commit is contained in:
Andreas Kling 2020-06-07 17:55:46 +02:00
parent d93bf78346
commit 731685468a
16 changed files with 163 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

10
Libraries/LibWeb/Layout/BoxModelMetrics.cpp
View file

@ -36,13 +36,13 @@ BoxModelMetrics::~BoxModelMetrics()
{
}
BoxModelMetrics::PixelBox BoxModelMetrics::full_margin() const
BoxModelMetrics::PixelBox BoxModelMetrics::full_margin(const LayoutNode& layout_node) const
{
return {
m_margin.top.to_px() + m_border.top.to_px() + m_padding.top.to_px(),
m_margin.right.to_px() + m_border.right.to_px() + m_padding.right.to_px(),
m_margin.bottom.to_px() + m_border.bottom.to_px() + m_padding.bottom.to_px(),
m_margin.left.to_px() + m_border.left.to_px() + m_padding.left.to_px(),
m_margin.top.to_px(layout_node) + m_border.top.to_px(layout_node) + m_padding.top.to_px(layout_node),
m_margin.right.to_px(layout_node) + m_border.right.to_px(layout_node) + m_padding.right.to_px(layout_node),
m_margin.bottom.to_px(layout_node) + m_border.bottom.to_px(layout_node) + m_padding.bottom.to_px(layout_node),
m_margin.left.to_px(layout_node) + m_border.left.to_px(layout_node) + m_padding.left.to_px(layout_node),
};
}

2
Libraries/LibWeb/Layout/BoxModelMetrics.h
View file

@ -53,7 +53,7 @@ public:
float left;
};
PixelBox full_margin() const;
PixelBox full_margin(const LayoutNode&) const;
private:
LengthBox m_margin;

53
Libraries/LibWeb/Layout/LayoutBlock.cpp
View file

@ -86,7 +86,7 @@ void LayoutBlock::layout_block_children(LayoutMode layout_mode)
child_block.layout(layout_mode);
if (!child_block.is_absolutely_positioned())
content_height = child_block.rect().bottom() + child_block.box_model().full_margin().bottom - rect().top();
content_height = child_block.rect().bottom() + child_block.box_model().full_margin(*this).bottom - rect().top();
});
if (layout_mode != LayoutMode::Default) {
float max_width = 0;
@ -112,7 +112,7 @@ void LayoutBlock::layout_inline_children(LayoutMode layout_mode)
line_box.trim_trailing_whitespace();
}
float min_line_height = style().line_height();
float min_line_height = style().line_height(*this);
float line_spacing = min_line_height - style().font().glyph_height();
float content_height = 0;
@ -221,7 +221,7 @@ void LayoutBlock::compute_width()
auto& style = this->style();
auto auto_value = Length();
auto zero_value = Length(0, Length::Type::Absolute);
auto zero_value = Length(0, Length::Type::Px);
Length margin_left;
Length margin_right;
@ -247,7 +247,7 @@ void LayoutBlock::compute_width()
float total_px = 0;
for (auto& value : { margin_left, border_left, padding_left, width, padding_right, border_right, margin_right }) {
total_px += value.to_px();
total_px += value.to_px(*this);
}
#ifdef HTML_DEBUG
@ -273,20 +273,20 @@ void LayoutBlock::compute_width()
if (margin_right.is_auto())
margin_right = zero_value;
if (underflow_px >= 0) {
width = Length(underflow_px, Length::Type::Absolute);
width = Length(underflow_px, Length::Type::Px);
} else {
width = zero_value;
margin_right = Length(margin_right.to_px() + underflow_px, Length::Type::Absolute);
margin_right = Length(margin_right.to_px(*this) + underflow_px, Length::Type::Px);
}
} else {
if (!margin_left.is_auto() && !margin_right.is_auto()) {
margin_right = Length(margin_right.to_px() + underflow_px, Length::Type::Absolute);
margin_right = Length(margin_right.to_px(*this) + underflow_px, Length::Type::Px);
} else if (!margin_left.is_auto() && margin_right.is_auto()) {
margin_right = Length(underflow_px, Length::Type::Absolute);
margin_right = Length(underflow_px, Length::Type::Px);
} else if (margin_left.is_auto() && !margin_right.is_auto()) {
margin_left = Length(underflow_px, Length::Type::Absolute);
margin_left = Length(underflow_px, Length::Type::Px);
} else { // margin_left.is_auto() && margin_right.is_auto()
auto half_of_the_underflow = Length(underflow_px / 2, Length::Type::Absolute);
auto half_of_the_underflow = Length(underflow_px / 2, Length::Type::Px);
margin_left = half_of_the_underflow;
margin_right = half_of_the_underflow;
}
@ -323,8 +323,8 @@ void LayoutBlock::compute_width()
// 'padding-right', 'border-right-width', 'margin-right', and the widths of any relevant scroll bars.
float available_width = containing_block.width()
- margin_left.to_px() - border_left.to_px() - padding_left.to_px()
- padding_right.to_px() - border_right.to_px() - margin_right.to_px();
- margin_left.to_px(*this) - border_left.to_px(*this) - padding_left.to_px(*this)
- padding_right.to_px(*this) - border_right.to_px(*this) - margin_right.to_px(*this);
// Calculate the preferred width by formatting the content without breaking lines
// other than where explicit line breaks occur.
@ -338,7 +338,7 @@ void LayoutBlock::compute_width()
float preferred_minimum_width = greatest_child_width();
// Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
width = Length(min(max(preferred_minimum_width, available_width), preferred_width), Length::Type::Absolute);
width = Length(min(max(preferred_minimum_width, available_width), preferred_width), Length::Type::Px);
}
}
@ -354,7 +354,7 @@ void LayoutBlock::compute_width()
// but this time using the computed value of 'max-width' as the computed value for 'width'.
auto specified_max_width = style.length_or_fallback(CSS::PropertyID::MaxWidth, auto_value, containing_block.width());
if (!specified_max_width.is_auto()) {
if (used_width.to_px() > specified_max_width.to_px()) {
if (used_width.to_px(*this) > specified_max_width.to_px(*this)) {
used_width = try_compute_width(specified_max_width);
}
}
@ -363,12 +363,12 @@ void LayoutBlock::compute_width()
// but this time using the value of 'min-width' as the computed value for 'width'.
auto specified_min_width = style.length_or_fallback(CSS::PropertyID::MinWidth, auto_value, containing_block.width());
if (!specified_min_width.is_auto()) {
if (used_width.to_px() < specified_min_width.to_px()) {
if (used_width.to_px(*this) < specified_min_width.to_px(*this)) {
used_width = try_compute_width(specified_min_width);
}
}
rect().set_width(used_width.to_px());
rect().set_width(used_width.to_px(*this));
box_model().margin().left = margin_left;
box_model().margin().right = margin_right;
box_model().border().left = border_left;
@ -381,13 +381,10 @@ void LayoutBlock::compute_position()
{
auto& style = this->style();
auto auto_value = Length();
auto zero_value = Length(0, Length::Type::Absolute);
auto zero_value = Length(0, Length::Type::Px);
auto& containing_block = *this->containing_block();
auto width = style.length_or_fallback(CSS::PropertyID::Width, auto_value, containing_block.width());
if (style.position() == CSS::Position::Absolute) {
box_model().offset().top = style.length_or_fallback(CSS::PropertyID::Top, zero_value, containing_block.height());
box_model().offset().right = style.length_or_fallback(CSS::PropertyID::Right, zero_value, containing_block.width());
@ -402,18 +399,18 @@ void LayoutBlock::compute_position()
box_model().padding().top = style.length_or_fallback(CSS::PropertyID::PaddingTop, zero_value, containing_block.width());
box_model().padding().bottom = style.length_or_fallback(CSS::PropertyID::PaddingBottom, zero_value, containing_block.width());
float position_x = box_model().margin().left.to_px()
+ box_model().border().left.to_px()
+ box_model().padding().left.to_px()
+ box_model().offset().left.to_px();
float position_x = box_model().margin().left.to_px(*this)
+ box_model().border().left.to_px(*this)
+ box_model().padding().left.to_px(*this)
+ box_model().offset().left.to_px(*this);
if (style.position() != CSS::Position::Absolute || containing_block.style().position() == CSS::Position::Absolute)
position_x += containing_block.x();
rect().set_x(position_x);
float position_y = box_model().full_margin().top
+ box_model().offset().top.to_px();
float position_y = box_model().full_margin(*this).top
+ box_model().offset().top.to_px(*this);
if (style.position() != CSS::Position::Absolute || containing_block.style().position() == CSS::Position::Absolute) {
LayoutBlock* relevant_sibling = previous_sibling();
@ -429,7 +426,7 @@ void LayoutBlock::compute_position()
auto& previous_sibling_rect = relevant_sibling->rect();
auto& previous_sibling_style = relevant_sibling->box_model();
position_y += previous_sibling_rect.y() + previous_sibling_rect.height();
position_y += previous_sibling_style.full_margin().bottom;
position_y += previous_sibling_style.full_margin(*this).bottom;
}
}
@ -441,7 +438,7 @@ void LayoutBlock::compute_height()
auto& style = this->style();
auto height = style.length_or_fallback(CSS::PropertyID::Height, Length(), containing_block()->height());
if (height.is_absolute())
rect().set_height(height.to_px());
rect().set_height(height.to_px(*this));
}
void LayoutBlock::render(RenderingContext& context)

20
Libraries/LibWeb/Layout/LayoutBox.cpp
View file

@ -43,7 +43,7 @@ void LayoutBox::paint_border(RenderingContext& context, Edge edge, const Gfx::Fl
return;
auto border_style = style().property(style_property_id);
float width = border_width.value()->to_length().to_px();
float width = border_width.value()->to_length().to_px(*this);
if (width <= 0)
return;
@ -143,7 +143,7 @@ void LayoutBox::paint_border(RenderingContext& context, Edge edge, const Gfx::Fl
auto width = style().property(property_id);
if (!width.has_value())
return 0;
return width.value()->to_length().to_px();
return width.value()->to_length().to_px(*this);
};
float p1_step = 0;
@ -203,10 +203,10 @@ void LayoutBox::render(RenderingContext& context)
#endif
Gfx::FloatRect padded_rect;
padded_rect.set_x(x() - box_model().padding().left.to_px());
padded_rect.set_width(width() + box_model().padding().left.to_px() + box_model().padding().right.to_px());
padded_rect.set_y(y() - box_model().padding().top.to_px());
padded_rect.set_height(height() + box_model().padding().top.to_px() + box_model().padding().bottom.to_px());
padded_rect.set_x(x() - box_model().padding().left.to_px(*this));
padded_rect.set_width(width() + box_model().padding().left.to_px(*this) + box_model().padding().right.to_px(*this));
padded_rect.set_y(y() - box_model().padding().top.to_px(*this));
padded_rect.set_height(height() + box_model().padding().top.to_px(*this) + box_model().padding().bottom.to_px(*this));
if (!is_body()) {
auto bgcolor = style().property(CSS::PropertyID::BackgroundColor);
@ -224,10 +224,10 @@ void LayoutBox::render(RenderingContext& context)
}
Gfx::FloatRect bordered_rect;
bordered_rect.set_x(padded_rect.x() - box_model().border().left.to_px());
bordered_rect.set_width(padded_rect.width() + box_model().border().left.to_px() + box_model().border().right.to_px());
bordered_rect.set_y(padded_rect.y() - box_model().border().top.to_px());
bordered_rect.set_height(padded_rect.height() + box_model().border().top.to_px() + box_model().border().bottom.to_px());
bordered_rect.set_x(padded_rect.x() - box_model().border().left.to_px(*this));
bordered_rect.set_width(padded_rect.width() + box_model().border().left.to_px(*this) + box_model().border().right.to_px(*this));
bordered_rect.set_y(padded_rect.y() - box_model().border().top.to_px(*this));
bordered_rect.set_height(padded_rect.height() + box_model().border().top.to_px(*this) + box_model().border().bottom.to_px(*this));
paint_border(context, Edge::Left, bordered_rect, CSS::PropertyID::BorderLeftStyle, CSS::PropertyID::BorderLeftColor, CSS::PropertyID::BorderLeftWidth);
paint_border(context, Edge::Right, bordered_rect, CSS::PropertyID::BorderRightStyle, CSS::PropertyID::BorderRightColor, CSS::PropertyID::BorderRightWidth);

7
Libraries/LibWeb/Layout/LayoutNode.cpp
View file

@ -162,6 +162,13 @@ void LayoutNode::set_needs_display()
}
}
float LayoutNode::font_size() const
{
// FIXME: This doesn't work right for relative font-sizes
auto length = style().length_or_fallback(CSS::PropertyID::FontSize, Length(10, Length::Type::Px));
return length.raw_value();
}
Gfx::FloatPoint LayoutNode::box_type_agnostic_position() const
{
if (is_box())

2
Libraries/LibWeb/Layout/LayoutNode.h
View file

@ -158,6 +158,8 @@ public:
Gfx::FloatPoint box_type_agnostic_position() const;
float font_size() const;
protected:
explicit LayoutNode(const Node*);

25
Libraries/LibWeb/Layout/LayoutReplaced.cpp
View file

@ -47,7 +47,7 @@ float LayoutReplaced::calculate_width() const
auto& style = this->style();
auto auto_value = Length();
auto zero_value = Length(0, Length::Type::Absolute);
auto zero_value = Length(0, Length::Type::Px);
auto& containing_block = *this->containing_block();
auto margin_left = style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
@ -65,7 +65,7 @@ float LayoutReplaced::calculate_width() const
// FIXME: Actually compute 'width'
auto computed_width = specified_width;
float used_width = specified_width.to_px();
float used_width = specified_width.to_px(*this);
// If 'height' and 'width' both have computed values of 'auto' and the element also has an intrinsic width,
// then that intrinsic width is the used value of 'width'.
@ -100,16 +100,12 @@ float LayoutReplaced::calculate_height() const
// 'inline-block' replaced elements in normal flow and floating replaced elements
auto& style = this->style();
auto auto_value = Length();
auto zero_value = Length(0, Length::Type::Absolute);
auto& containing_block = *this->containing_block();
auto margin_top = style.length_or_fallback(CSS::PropertyID::MarginTop, zero_value, containing_block.width());
auto margin_bottom = style.length_or_fallback(CSS::PropertyID::MarginBottom, zero_value, containing_block.width());
auto specified_width = style.length_or_fallback(CSS::PropertyID::Width, auto_value, containing_block.width());
auto specified_height = style.length_or_fallback(CSS::PropertyID::Height, auto_value, containing_block.height());
float used_height = specified_height.to_px();
float used_height = specified_height.to_px(*this);
// If 'height' and 'width' both have computed values of 'auto' and the element also has
// an intrinsic height, then that intrinsic height is the used value of 'height'.
@ -128,12 +124,9 @@ float LayoutReplaced::calculate_height() const
Gfx::FloatPoint LayoutReplaced::calculate_position()
{
auto& style = this->style();
auto auto_value = Length();
auto zero_value = Length(0, Length::Type::Absolute);
auto zero_value = Length(0, Length::Type::Px);
auto& containing_block = *this->containing_block();
auto width = style.length_or_fallback(CSS::PropertyID::Width, auto_value, containing_block.width());
if (style.position() == CSS::Position::Absolute) {
box_model().offset().top = style.length_or_fallback(CSS::PropertyID::Top, zero_value, containing_block.height());
box_model().offset().right = style.length_or_fallback(CSS::PropertyID::Right, zero_value, containing_block.width());
@ -148,15 +141,15 @@ Gfx::FloatPoint LayoutReplaced::calculate_position()
box_model().padding().top = style.length_or_fallback(CSS::PropertyID::PaddingTop, zero_value, containing_block.width());
box_model().padding().bottom = style.length_or_fallback(CSS::PropertyID::PaddingBottom, zero_value, containing_block.width());
float position_x = box_model().margin().left.to_px()
+ box_model().border().left.to_px()
+ box_model().padding().left.to_px()
+ box_model().offset().left.to_px();
float position_x = box_model().margin().left.to_px(*this)
+ box_model().border().left.to_px(*this)
+ box_model().padding().left.to_px(*this)
+ box_model().offset().left.to_px(*this);
if (style.position() != CSS::Position::Absolute || containing_block.style().position() == CSS::Position::Absolute)
position_x += containing_block.x();
float position_y = box_model().full_margin().top + box_model().offset().top.to_px();
float position_y = box_model().full_margin(*this).top + box_model().offset().top.to_px(*this);
return { position_x, position_y };
}