summaryrefslogtreecommitdiff
path: root/Userland/Libraries/LibWeb/Layout
diff options
context:
space:
mode:
Diffstat (limited to 'Userland/Libraries/LibWeb/Layout')
-rw-r--r--Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp40
-rw-r--r--Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp56
-rw-r--r--Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h18
-rw-r--r--Userland/Libraries/LibWeb/Layout/FormattingContext.cpp32
-rw-r--r--Userland/Libraries/LibWeb/Layout/FormattingContext.h4
-rw-r--r--Userland/Libraries/LibWeb/Layout/LayoutState.cpp4
-rw-r--r--Userland/Libraries/LibWeb/Layout/Node.cpp20
7 files changed, 95 insertions, 79 deletions
diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
index 9c717308c2..773f352d75 100644
--- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp
@@ -212,19 +212,19 @@ void BlockFormattingContext::compute_width(Box const& box, LayoutMode layout_mod
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
// but this time using the computed value of 'max-width' as the computed value for 'width'.
- auto specified_max_width = computed_values.max_width().resolved(box, width_of_containing_block_as_length).resolved(box);
- if (!specified_max_width.is_auto()) {
- if (used_width.to_px(box) > specified_max_width.to_px(box)) {
- used_width = try_compute_width(specified_max_width);
+ if (!computed_values.max_width().is_none()) {
+ auto max_width = computed_values.max_width().resolved(box, width_of_containing_block_as_length).resolved(box);
+ if (used_width.to_px(box) > max_width.to_px(box)) {
+ used_width = try_compute_width(max_width);
}
}
// 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
// but this time using the value of 'min-width' as the computed value for 'width'.
- auto specified_min_width = computed_values.min_width().resolved(box, width_of_containing_block_as_length).resolved(box);
- if (!specified_min_width.is_auto()) {
- if (used_width.to_px(box) < specified_min_width.to_px(box)) {
- used_width = try_compute_width(specified_min_width);
+ if (!computed_values.min_width().is_auto()) {
+ auto min_width = computed_values.min_width().resolved(box, width_of_containing_block_as_length).resolved(box);
+ if (used_width.to_px(box) < min_width.to_px(box)) {
+ used_width = try_compute_width(min_width);
}
}
@@ -292,18 +292,18 @@ void BlockFormattingContext::compute_width_for_floating_box(Box const& box, Layo
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
// but this time using the computed value of 'max-width' as the computed value for 'width'.
- auto specified_max_width = computed_values.max_width().resolved(box, width_of_containing_block_as_length).resolved(box);
- if (!specified_max_width.is_auto()) {
- if (width.to_px(box) > specified_max_width.to_px(box))
- width = compute_width(specified_max_width);
+ if (!computed_values.max_width().is_none()) {
+ auto max_width = computed_values.max_width().resolved(box, width_of_containing_block_as_length).resolved(box);
+ if (width.to_px(box) > max_width.to_px(box))
+ width = compute_width(max_width);
}
// 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
// but this time using the value of 'min-width' as the computed value for 'width'.
- auto specified_min_width = computed_values.min_width().resolved(box, width_of_containing_block_as_length).resolved(box);
- if (!specified_min_width.is_auto()) {
- if (width.to_px(box) < specified_min_width.to_px(box))
- width = compute_width(specified_min_width);
+ if (!computed_values.min_width().is_auto()) {
+ auto min_width = computed_values.min_width().resolved(box, width_of_containing_block_as_length).resolved(box);
+ if (width.to_px(box) < min_width.to_px(box))
+ width = compute_width(min_width);
}
auto& box_state = m_state.get_mutable(box);
@@ -340,9 +340,11 @@ void BlockFormattingContext::compute_height(Box const& box, LayoutState& state)
}
}
- auto specified_max_height = computed_values.max_height().resolved(box, containing_block_height).resolved(box);
- if (!specified_max_height.is_auto())
- height = min(height, specified_max_height.to_px(box));
+ if (!computed_values.max_height().is_none()) {
+ auto max_height = computed_values.max_height().resolved(box, containing_block_height).resolved(box);
+ if (!max_height.is_auto())
+ height = min(height, max_height.to_px(box));
+ }
auto specified_min_height = computed_values.min_height().resolved(box, containing_block_height).resolved(box);
if (!specified_min_height.is_auto())
height = max(height, specified_min_height.to_px(box));
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
index 3ec2d70baa..de329ee8f0 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -27,15 +27,25 @@ template<typename T>
return ::max(min, ::min(value, max));
}
-float FlexFormattingContext::get_pixel_width(Box const& box, Optional<CSS::LengthPercentage> const& length_percentage) const
+// FIXME: This is a hack helper, remove it when no longer needed.
+static CSS::Size to_css_size(CSS::LengthPercentage const& length_percentage)
{
- if (!length_percentage.has_value())
+ if (length_percentage.is_auto())
+ return CSS::Size::make_auto();
+ if (length_percentage.is_length())
+ return CSS::Size::make_length(length_percentage.length());
+ return CSS::Size::make_percentage(length_percentage.percentage());
+}
+
+float FlexFormattingContext::get_pixel_width(Box const& box, Optional<CSS::Size> const& size) const
+{
+ if (!size.has_value())
return 0;
auto inner_width = CSS::Length::make_px(containing_block_width_for(box));
- return length_percentage->resolved(box, inner_width).to_px(box);
+ return size->resolved(box, inner_width).to_px(box);
}
-float FlexFormattingContext::get_pixel_height(Box const& box, Optional<CSS::LengthPercentage> const& length_percentage) const
+float FlexFormattingContext::get_pixel_height(Box const& box, Optional<CSS::Size> const& length_percentage) const
{
if (!length_percentage.has_value())
return 0;
@@ -407,13 +417,13 @@ float FlexFormattingContext::specified_cross_min_size(Box const& box) const
bool FlexFormattingContext::has_main_max_size(Box const& box) const
{
auto const& value = is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
- return !value.is_auto();
+ return !value.is_none();
}
bool FlexFormattingContext::has_cross_max_size(Box const& box) const
{
auto const& value = !is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
- return !value.is_auto();
+ return !value.is_none();
}
float FlexFormattingContext::specified_main_max_size(Box const& box) const
@@ -648,7 +658,15 @@ CSS::FlexBasisData FlexFormattingContext::used_flex_basis_for_item(FlexItem cons
flex_basis.type = CSS::FlexBasis::Content;
} else {
flex_basis.type = CSS::FlexBasis::LengthPercentage;
- flex_basis.length_percentage = main_size;
+ if (main_size.is_length()) {
+ flex_basis.length_percentage = main_size.length();
+ } else if (main_size.is_percentage()) {
+ flex_basis.length_percentage = main_size.percentage();
+ } else {
+ // FIXME: Support other size values!
+ dbgln("FIXME: Unsupported main size for flex-basis!");
+ flex_basis.type = CSS::FlexBasis::Content;
+ }
}
}
@@ -682,8 +700,8 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
// A. If the item has a definite used flex basis, thatโ€™s the flex base size.
if (flex_item.used_flex_basis_is_definite) {
if (is_row_layout())
- return get_pixel_width(child_box, flex_item.used_flex_basis.length_percentage.value());
- return get_pixel_height(child_box, flex_item.used_flex_basis.length_percentage.value());
+ return get_pixel_width(child_box, to_css_size(flex_item.used_flex_basis.length_percentage.value()));
+ return get_pixel_height(child_box, to_css_size(flex_item.used_flex_basis.length_percentage.value()));
}
// B. If the flex item has ...
@@ -1049,7 +1067,7 @@ void FlexFormattingContext::determine_hypothetical_cross_size_of_item(FlexItem&
auto const& computed_max_size = this->computed_cross_max_size(item.box);
auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
- auto clamp_max = (!computed_max_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
+ auto clamp_max = (!computed_max_size.is_none() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
// If we have a definite cross size, this is easy! No need to perform layout, we can just use it as-is.
if (has_definite_cross_size(item.box)) {
@@ -1539,7 +1557,7 @@ float FlexFormattingContext::calculate_intrinsic_main_size_of_flex_container(Lay
auto const& computed_max_size = this->computed_main_max_size(flex_item->box);
auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_main_min_size(flex_item->box) : automatic_minimum_size(*flex_item);
- auto clamp_max = (!computed_max_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_main_max_size(flex_item->box) : NumericLimits<float>::max();
+ auto clamp_max = (!computed_max_size.is_none() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_main_max_size(flex_item->box) : NumericLimits<float>::max();
result = css_clamp(result, clamp_min, clamp_max);
@@ -1656,7 +1674,7 @@ float FlexFormattingContext::calculate_cross_min_content_contribution(FlexItem c
auto const& computed_max_size = this->computed_cross_max_size(item.box);
auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
- auto clamp_max = (!computed_max_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
+ auto clamp_max = (!computed_max_size.is_none() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);
@@ -1677,7 +1695,7 @@ float FlexFormattingContext::calculate_cross_max_content_contribution(FlexItem c
auto const& computed_max_size = this->computed_cross_max_size(item.box);
auto clamp_min = (!computed_min_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_min_size.contains_percentage())) ? specified_cross_min_size(item.box) : 0;
- auto clamp_max = (!computed_max_size.is_auto() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
+ auto clamp_max = (!computed_max_size.is_none() && (resolve_percentage_min_max_sizes || !computed_max_size.contains_percentage())) ? specified_cross_max_size(item.box) : NumericLimits<float>::max();
auto clamped_inner_size = css_clamp(larger_size, clamp_min, clamp_max);
@@ -1737,32 +1755,32 @@ bool FlexFormattingContext::flex_item_is_stretched(FlexItem const& item) const
return computed_cross_size.is_auto() && !item.margins.cross_before_is_auto && !item.margins.cross_after_is_auto;
}
-CSS::LengthPercentage const& FlexFormattingContext::computed_main_size(Box const& box) const
+CSS::Size const& FlexFormattingContext::computed_main_size(Box const& box) const
{
return is_row_layout() ? box.computed_values().width() : box.computed_values().height();
}
-CSS::LengthPercentage const& FlexFormattingContext::computed_main_min_size(Box const& box) const
+CSS::Size const& FlexFormattingContext::computed_main_min_size(Box const& box) const
{
return is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
}
-CSS::LengthPercentage const& FlexFormattingContext::computed_main_max_size(Box const& box) const
+CSS::Size const& FlexFormattingContext::computed_main_max_size(Box const& box) const
{
return is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
}
-CSS::LengthPercentage const& FlexFormattingContext::computed_cross_size(Box const& box) const
+CSS::Size const& FlexFormattingContext::computed_cross_size(Box const& box) const
{
return !is_row_layout() ? box.computed_values().width() : box.computed_values().height();
}
-CSS::LengthPercentage const& FlexFormattingContext::computed_cross_min_size(Box const& box) const
+CSS::Size const& FlexFormattingContext::computed_cross_min_size(Box const& box) const
{
return !is_row_layout() ? box.computed_values().min_width() : box.computed_values().min_height();
}
-CSS::LengthPercentage const& FlexFormattingContext::computed_cross_max_size(Box const& box) const
+CSS::Size const& FlexFormattingContext::computed_cross_max_size(Box const& box) const
{
return !is_row_layout() ? box.computed_values().max_width() : box.computed_values().max_height();
}
diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
index 87458d240e..4a95aa77ad 100644
--- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
@@ -107,15 +107,15 @@ private:
Optional<float> specified_size_suggestion(FlexItem const&) const;
Optional<float> transferred_size_suggestion(FlexItem const&) const;
float content_size_suggestion(FlexItem const&) const;
- CSS::LengthPercentage const& computed_main_size(Box const&) const;
- CSS::LengthPercentage const& computed_main_min_size(Box const&) const;
- CSS::LengthPercentage const& computed_main_max_size(Box const&) const;
- CSS::LengthPercentage const& computed_cross_size(Box const&) const;
- CSS::LengthPercentage const& computed_cross_min_size(Box const&) const;
- CSS::LengthPercentage const& computed_cross_max_size(Box const&) const;
-
- float get_pixel_width(Box const& box, Optional<CSS::LengthPercentage> const& length_percentage) const;
- float get_pixel_height(Box const& box, Optional<CSS::LengthPercentage> const& length_percentage) const;
+ CSS::Size const& computed_main_size(Box const&) const;
+ CSS::Size const& computed_main_min_size(Box const&) const;
+ CSS::Size const& computed_main_max_size(Box const&) const;
+ CSS::Size const& computed_cross_size(Box const&) const;
+ CSS::Size const& computed_cross_min_size(Box const&) const;
+ CSS::Size const& computed_cross_max_size(Box const&) const;
+
+ float get_pixel_width(Box const& box, Optional<CSS::Size> const& length_percentage) const;
+ float get_pixel_height(Box const& box, Optional<CSS::Size> const& length_percentage) const;
bool flex_item_is_stretched(FlexItem const&) const;
diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
index c81c07cffe..870e6c4183 100644
--- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
+++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp
@@ -217,9 +217,9 @@ static Gfx::FloatSize solve_replaced_size_constraint(LayoutState const& state, f
auto height_of_containing_block = CSS::Length::make_px(containing_block_state.content_height());
auto specified_min_width = box.computed_values().min_width().is_auto() ? 0 : box.computed_values().min_width().resolved(box, width_of_containing_block).to_px(box);
- auto specified_max_width = box.computed_values().max_width().is_auto() ? w : box.computed_values().max_width().resolved(box, width_of_containing_block).to_px(box);
+ auto specified_max_width = box.computed_values().max_width().is_none() ? w : box.computed_values().max_width().resolved(box, width_of_containing_block).to_px(box);
auto specified_min_height = box.computed_values().min_height().is_auto() ? 0 : box.computed_values().min_height().resolved(box, height_of_containing_block).to_px(box);
- auto specified_max_height = box.computed_values().max_height().is_auto() ? h : box.computed_values().max_height().resolved(box, height_of_containing_block).to_px(box);
+ auto specified_max_height = box.computed_values().max_height().is_none() ? h : box.computed_values().max_height().resolved(box, height_of_containing_block).to_px(box);
auto min_width = min(specified_min_width, specified_max_width);
auto max_width = max(specified_min_width, specified_max_width);
@@ -357,14 +357,14 @@ float FormattingContext::compute_auto_height_for_block_formatting_context_root(L
}
// 10.3.2 Inline, replaced elements, https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-width
-float FormattingContext::tentative_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::LengthPercentage const& computed_width)
+float FormattingContext::tentative_width_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_width)
{
// Treat percentages of indefinite containing block widths as 0 (the initial width).
if (computed_width.is_percentage() && !state.get(*box.containing_block()).has_definite_width())
return 0;
auto height_of_containing_block = CSS::Length::make_px(containing_block_height_for(box, state));
- auto computed_height = box.computed_values().height().resolved(box, height_of_containing_block).resolved(box);
+ auto const& computed_height = box.computed_values().height();
float used_width = computed_width.resolved(box, CSS::Length::make_px(containing_block_width_for(box, state))).to_px(box);
@@ -442,7 +442,7 @@ float FormattingContext::compute_width_for_replaced_element(LayoutState const& s
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
// but this time using the computed value of 'max-width' as the computed value for 'width'.
auto computed_max_width = box.computed_values().max_width();
- if (!computed_max_width.is_auto()) {
+ if (!computed_max_width.is_none()) {
if (used_width > computed_max_width.resolved(box, width_of_containing_block_as_length).to_px(box)) {
used_width = tentative_width_for_replaced_element(state, box, computed_max_width);
}
@@ -462,13 +462,13 @@ float FormattingContext::compute_width_for_replaced_element(LayoutState const& s
// 10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements
// https://www.w3.org/TR/CSS22/visudet.html#inline-replaced-height
-float FormattingContext::tentative_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::LengthPercentage const& computed_height)
+float FormattingContext::tentative_height_for_replaced_element(LayoutState const& state, ReplacedBox const& box, CSS::Size const& computed_height)
{
// Treat percentages of indefinite containing block heights as 0 (the initial height).
if (computed_height.is_percentage() && !state.get(*box.containing_block()).has_definite_height())
return 0;
- auto computed_width = box.computed_values().width();
+ auto const& computed_width = box.computed_values().width();
// 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'.
@@ -630,19 +630,19 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele
// 2. The tentative used width is greater than 'max-width', the rules above are applied again,
// but this time using the computed value of 'max-width' as the computed value for 'width'.
- auto specified_max_width = computed_values.max_width().resolved(box, width_of_containing_block_as_length).resolved(box);
- if (!specified_max_width.is_auto()) {
- if (used_width.to_px(box) > specified_max_width.to_px(box)) {
- used_width = try_compute_width(specified_max_width);
+ if (!computed_values.max_width().is_none()) {
+ auto max_width = computed_values.max_width().resolved(box, width_of_containing_block_as_length).resolved(box);
+ if (used_width.to_px(box) > max_width.to_px(box)) {
+ used_width = try_compute_width(max_width);
}
}
// 3. If the resulting width is smaller than 'min-width', the rules above are applied again,
// but this time using the value of 'min-width' as the computed value for 'width'.
- auto specified_min_width = computed_values.min_width().resolved(box, width_of_containing_block_as_length).resolved(box);
- if (!specified_min_width.is_auto()) {
- if (used_width.to_px(box) < specified_min_width.to_px(box)) {
- used_width = try_compute_width(specified_min_width);
+ if (!computed_values.min_width().is_auto()) {
+ auto min_width = computed_values.min_width().resolved(box, width_of_containing_block_as_length).resolved(box);
+ if (used_width.to_px(box) < min_width.to_px(box)) {
+ used_width = try_compute_width(min_width);
}
}
@@ -714,7 +714,7 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el
}
float used_height = tentative_height.to_px(box);
- if (!computed_max_height.is_auto())
+ if (!computed_max_height.is_none())
used_height = min(used_height, computed_max_height.resolved(box, height_of_containing_block_as_length).resolved(box).to_px(box));
if (!computed_min_height.is_auto())
used_height = max(used_height, computed_min_height.resolved(box, height_of_containing_block_as_length).resolved(box).to_px(box));
diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.h b/Userland/Libraries/LibWeb/Layout/FormattingContext.h
index 7f2feb902c..e091d31c7d 100644
--- a/Userland/Libraries/LibWeb/Layout/FormattingContext.h
+++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.h
@@ -86,8 +86,8 @@ protected:
float preferred_minimum_width { 0 };
};
- static float tentative_width_for_replaced_element(LayoutState const&, ReplacedBox const&, CSS::LengthPercentage const& computed_width);
- static float tentative_height_for_replaced_element(LayoutState const&, ReplacedBox const&, CSS::LengthPercentage const& computed_height);
+ static float tentative_width_for_replaced_element(LayoutState const&, ReplacedBox const&, CSS::Size const& computed_width);
+ static float tentative_height_for_replaced_element(LayoutState const&, ReplacedBox const&, CSS::Size const& computed_height);
static float compute_auto_height_for_block_formatting_context_root(LayoutState const&, BlockContainer const&);
static float compute_auto_height_for_block_level_element(LayoutState const&, Box const&);
diff --git a/Userland/Libraries/LibWeb/Layout/LayoutState.cpp b/Userland/Libraries/LibWeb/Layout/LayoutState.cpp
index 085294650a..940059baf7 100644
--- a/Userland/Libraries/LibWeb/Layout/LayoutState.cpp
+++ b/Userland/Libraries/LibWeb/Layout/LayoutState.cpp
@@ -184,7 +184,7 @@ void LayoutState::UsedValues::set_node(NodeWithStyleAndBoxModelMetrics& node, Us
auto const& computed_values = node.computed_values();
- auto is_definite_size = [&](CSS::LengthPercentage const& size, float& resolved_definite_size, bool width) {
+ auto is_definite_size = [&](CSS::Size const& size, float& resolved_definite_size, bool width) {
// A size that can be determined without performing layout; that is,
// a <length>,
// a measure of text (without consideration of line-wrapping),
@@ -206,6 +206,8 @@ void LayoutState::UsedValues::set_node(NodeWithStyleAndBoxModelMetrics& node, Us
}
if (size.is_length()) {
+ if (size.length().is_calculated())
+ return false;
resolved_definite_size = size.length().to_px(node);
return true;
}
diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
index 54d2217dcd..e19ad3aa7e 100644
--- a/Userland/Libraries/LibWeb/Layout/Node.cpp
+++ b/Userland/Libraries/LibWeb/Layout/Node.cpp
@@ -489,19 +489,13 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
m_visible = computed_values.opacity() != 0 && computed_values.visibility() == CSS::Visibility::Visible;
- if (auto maybe_length_percentage = computed_style.length_percentage(CSS::PropertyID::Width); maybe_length_percentage.has_value())
- computed_values.set_width(maybe_length_percentage.release_value());
- if (auto maybe_length_percentage = computed_style.length_percentage(CSS::PropertyID::MinWidth); maybe_length_percentage.has_value())
- computed_values.set_min_width(maybe_length_percentage.release_value());
- if (auto maybe_length_percentage = computed_style.length_percentage(CSS::PropertyID::MaxWidth); maybe_length_percentage.has_value())
- computed_values.set_max_width(maybe_length_percentage.release_value());
-
- if (auto maybe_length_percentage = computed_style.length_percentage(CSS::PropertyID::Height); maybe_length_percentage.has_value())
- computed_values.set_height(maybe_length_percentage.release_value());
- if (auto maybe_length_percentage = computed_style.length_percentage(CSS::PropertyID::MinHeight); maybe_length_percentage.has_value())
- computed_values.set_min_height(maybe_length_percentage.release_value());
- if (auto maybe_length_percentage = computed_style.length_percentage(CSS::PropertyID::MaxHeight); maybe_length_percentage.has_value())
- computed_values.set_max_height(maybe_length_percentage.release_value());
+ computed_values.set_width(computed_style.size_value(CSS::PropertyID::Width));
+ computed_values.set_min_width(computed_style.size_value(CSS::PropertyID::MinWidth));
+ computed_values.set_max_width(computed_style.size_value(CSS::PropertyID::MaxWidth));
+
+ computed_values.set_height(computed_style.size_value(CSS::PropertyID::Height));
+ computed_values.set_min_height(computed_style.size_value(CSS::PropertyID::MinHeight));
+ computed_values.set_max_height(computed_style.size_value(CSS::PropertyID::MaxHeight));
computed_values.set_inset(computed_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom, CSS::Length::make_auto()));
computed_values.set_margin(computed_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom, CSS::Length::make_px(0)));