diff options
11 files changed, 145 insertions, 107 deletions
diff --git a/Userland/Libraries/LibWeb/CMakeLists.txt b/Userland/Libraries/LibWeb/CMakeLists.txt index 1f62f6bccb..f8d7d10cf3 100644 --- a/Userland/Libraries/LibWeb/CMakeLists.txt +++ b/Userland/Libraries/LibWeb/CMakeLists.txt @@ -37,6 +37,7 @@ set(SOURCES CSS/Parser/StyleRules.cpp CSS/Parser/Token.cpp CSS/Parser/Tokenizer.cpp + CSS/Percentage.cpp CSS/PreferredColorScheme.cpp CSS/PropertyID.cpp CSS/PropertyID.h diff --git a/Userland/Libraries/LibWeb/CSS/Percentage.cpp b/Userland/Libraries/LibWeb/CSS/Percentage.cpp new file mode 100644 index 0000000000..1d27326f2a --- /dev/null +++ b/Userland/Libraries/LibWeb/CSS/Percentage.cpp @@ -0,0 +1,17 @@ +/* + * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org> + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#include <LibWeb/CSS/Percentage.h> +#include <LibWeb/CSS/StyleValue.h> + +namespace Web::CSS { + +Length LengthPercentage::resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const& calculated, Layout::Node const& layout_node, Length const& reference_value) const +{ + return calculated->resolve_length_percentage(layout_node, reference_value)->resolved(layout_node, reference_value); +} + +} diff --git a/Userland/Libraries/LibWeb/CSS/Percentage.h b/Userland/Libraries/LibWeb/CSS/Percentage.h index 74ad35989e..2945d306c6 100644 --- a/Userland/Libraries/LibWeb/CSS/Percentage.h +++ b/Userland/Libraries/LibWeb/CSS/Percentage.h @@ -52,6 +52,13 @@ public: { } + PercentageOr(NonnullRefPtr<CalculatedStyleValue> calculated) + : m_value(move(calculated)) + { + } + + virtual ~PercentageOr() { } + PercentageOr<T>& operator=(T t) { m_value = move(t); @@ -65,6 +72,7 @@ public: } bool is_percentage() const { return m_value.template has<Percentage>(); } + bool is_calculated() const { return m_value.template has<NonnullRefPtr<CalculatedStyleValue>>(); } Percentage const& percentage() const { @@ -72,12 +80,23 @@ public: return m_value.template get<Percentage>(); } - T resolved(T const& reference_value) const + virtual T resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, [[maybe_unused]] T const& reference_value) const { - if (is_percentage()) - return reference_value.percentage_of(m_value.template get<Percentage>()); + VERIFY_NOT_REACHED(); + } - return m_value.template get<T>(); + T resolved(Layout::Node const& layout_node, T const& reference_value) const + { + return m_value.visit( + [&](T const& t) { + return t; + }, + [&](Percentage const& percentage) { + return reference_value.percentage_of(percentage); + }, + [&](NonnullRefPtr<CalculatedStyleValue> const& calculated) { + return resolve_calculated(calculated, layout_node, reference_value); + }); } String to_string() const @@ -90,6 +109,8 @@ public: bool operator==(PercentageOr<T> const& other) const { + if (is_calculated()) + return false; if (is_percentage() != other.is_percentage()) return false; if (is_percentage()) @@ -99,11 +120,11 @@ public: bool operator!=(PercentageOr<T> const& other) const { return !(*this == other); } protected: - bool is_non_percentage_value() const { return m_value.template has<T>(); } - T const& non_percentage_value() const { return m_value.template get<T>(); } + bool is_t() const { return m_value.template has<T>(); } + T const& get_t() const { return m_value.template get<T>(); } private: - Variant<T, Percentage> m_value; + Variant<T, Percentage, NonnullRefPtr<CalculatedStyleValue>> m_value; }; template<typename T> @@ -134,8 +155,9 @@ class LengthPercentage : public PercentageOr<Length> { public: using PercentageOr<Length>::PercentageOr; - bool is_length() const { return is_non_percentage_value(); } - Length const& length() const { return non_percentage_value(); } + bool is_length() const { return is_t(); } + Length const& length() const { return get_t(); } + virtual Length resolve_calculated(NonnullRefPtr<CalculatedStyleValue> const&, Layout::Node const&, Length const& reference_value) const override; }; } diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp index 5a76672d0c..bed0d556e8 100644 --- a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp +++ b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp @@ -70,10 +70,8 @@ LengthPercentage StyleProperties::length_percentage_or_fallback(CSS::PropertyID return fallback; auto& value = maybe_value.value(); - if (value->is_calculated()) { - // FIXME: Handle percentages here - return Length::make_calculated(value->as_calculated()); - } + if (value->is_calculated()) + return LengthPercentage { value->as_calculated() }; if (value->is_percentage()) return value->as_percentage().percentage(); diff --git a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index 8b9f36c1d8..acc11d07cc 100644 --- a/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -128,13 +128,13 @@ void BlockFormattingContext::compute_width(Box& box) auto margin_left = CSS::Length::make_auto(); auto margin_right = CSS::Length::make_auto(); - const auto padding_left = computed_values.padding().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box); - const auto padding_right = computed_values.padding().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box); + const auto padding_left = computed_values.padding().left.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); + const auto padding_right = computed_values.padding().right.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); auto try_compute_width = [&](const auto& a_width) { CSS::Length width = a_width; - margin_left = computed_values.margin().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box); - margin_right = computed_values.margin().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box); + margin_left = computed_values.margin().left.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); + margin_right = computed_values.margin().right.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); float total_px = computed_values.border_left().width + computed_values.border_right().width; for (auto& value : { margin_left, padding_left, width, padding_right, margin_right }) { @@ -208,14 +208,14 @@ void BlockFormattingContext::compute_width(Box& box) return width; }; - auto specified_width = computed_values.width().resolved(width_of_containing_block_as_length).resolved_or_auto(box); + auto specified_width = computed_values.width().resolved(box, width_of_containing_block_as_length).resolved_or_auto(box); // 1. The tentative used width is calculated (without 'min-width' and 'max-width') auto used_width = try_compute_width(specified_width); // 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(width_of_containing_block_as_length).resolved_or_auto(box); + auto specified_max_width = computed_values.max_width().resolved(box, width_of_containing_block_as_length).resolved_or_auto(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); @@ -224,7 +224,7 @@ void BlockFormattingContext::compute_width(Box& box) // 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(width_of_containing_block_as_length).resolved_or_auto(box); + auto specified_min_width = computed_values.min_width().resolved(box, width_of_containing_block_as_length).resolved_or_auto(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); @@ -248,10 +248,10 @@ void BlockFormattingContext::compute_width_for_floating_box(Box& box) auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block); auto zero_value = CSS::Length::make_px(0); - auto margin_left = computed_values.margin().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box); - auto margin_right = computed_values.margin().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box); - const auto padding_left = computed_values.padding().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box); - const auto padding_right = computed_values.padding().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box); + auto margin_left = computed_values.margin().left.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); + auto margin_right = computed_values.margin().right.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); + const auto padding_left = computed_values.padding().left.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); + const auto padding_right = computed_values.padding().right.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); // If 'margin-left', or 'margin-right' are computed as 'auto', their used value is '0'. if (margin_left.is_auto()) @@ -259,7 +259,7 @@ void BlockFormattingContext::compute_width_for_floating_box(Box& box) if (margin_right.is_auto()) margin_right = zero_value; - auto width = computed_values.width().resolved(width_of_containing_block_as_length).resolved_or_auto(box); + auto width = computed_values.width().resolved(box, width_of_containing_block_as_length).resolved_or_auto(box); // If 'width' is computed as 'auto', the used value is the "shrink-to-fit" width. if (width.is_auto()) { @@ -311,15 +311,15 @@ float BlockFormattingContext::compute_theoretical_height(Box const& box) || (computed_values.height().is_percentage() && !is_absolute(containing_block.computed_values().height()))) { height = compute_auto_height_for_block_level_element(box, ConsiderFloats::No); } else { - height = computed_values.height().resolved(containing_block_height).resolved_or_auto(box).to_px(box); + height = computed_values.height().resolved(box, containing_block_height).resolved_or_auto(box).to_px(box); } } - auto specified_max_height = computed_values.max_height().resolved(containing_block_height).resolved_or_auto(box); + auto specified_max_height = computed_values.max_height().resolved(box, containing_block_height).resolved_or_auto(box); if (!specified_max_height.is_auto() && !(computed_values.max_height().is_percentage() && !is_absolute(containing_block.computed_values().height()))) height = min(height, specified_max_height.to_px(box)); - auto specified_min_height = computed_values.min_height().resolved(containing_block_height).resolved_or_auto(box); + auto specified_min_height = computed_values.min_height().resolved(box, containing_block_height).resolved_or_auto(box); if (!specified_min_height.is_auto() && !(computed_values.min_height().is_percentage() && !is_absolute(containing_block.computed_values().height()))) height = max(height, specified_min_height.to_px(box)); @@ -335,13 +335,13 @@ void BlockFormattingContext::compute_height(Box& box) // First, resolve the top/bottom parts of the surrounding box model. // FIXME: While negative values are generally allowed for margins, for now just ignore those for height calculation - box.box_model().margin.top = max(computed_values.margin().top.resolved(width_of_containing_block_as_length).resolved_or_zero(box).to_px(box), 0); - box.box_model().margin.bottom = max(computed_values.margin().bottom.resolved(width_of_containing_block_as_length).resolved_or_zero(box).to_px(box), 0); + box.box_model().margin.top = max(computed_values.margin().top.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box).to_px(box), 0); + box.box_model().margin.bottom = max(computed_values.margin().bottom.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box).to_px(box), 0); box.box_model().border.top = computed_values.border_top().width; box.box_model().border.bottom = computed_values.border_bottom().width; - box.box_model().padding.top = computed_values.padding().top.resolved(width_of_containing_block_as_length).resolved_or_zero(box).to_px(box); - box.box_model().padding.bottom = computed_values.padding().bottom.resolved(width_of_containing_block_as_length).resolved_or_zero(box).to_px(box); + box.box_model().padding.top = computed_values.padding().top.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box).to_px(box); + box.box_model().padding.bottom = computed_values.padding().bottom.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box).to_px(box); auto height = compute_theoretical_height(box); box.set_height(height); @@ -357,8 +357,8 @@ void BlockFormattingContext::compute_position(Box& box) float width_of_containing_block = box.containing_block()->width(); auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block); - auto specified_left = computed_values.offset().left.resolved(width_of_containing_block_as_length).resolved_or_zero(box); - auto specified_right = computed_values.offset().right.resolved(width_of_containing_block_as_length).resolved_or_zero(box); + auto specified_left = computed_values.offset().left.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); + auto specified_right = computed_values.offset().right.resolved(box, width_of_containing_block_as_length).resolved_or_zero(box); if (specified_left.is_auto() && specified_right.is_auto()) { // If both 'left' and 'right' are 'auto' (their initial values), the used values are '0' (i.e., the boxes stay in their original position). @@ -441,12 +441,12 @@ void BlockFormattingContext::compute_vertical_box_model_metrics(Box& child_box, auto const& computed_values = child_box.computed_values(); auto width_of_containing_block = CSS::Length::make_px(containing_block.width()); - box_model.margin.top = computed_values.margin().top.resolved(width_of_containing_block).resolved_or_zero(containing_block).to_px(child_box); - box_model.margin.bottom = computed_values.margin().bottom.resolved(width_of_containing_block).resolved_or_zero(containing_block).to_px(child_box); + box_model.margin.top = computed_values.margin().top.resolved(child_box, width_of_containing_block).resolved_or_zero(containing_block).to_px(child_box); + box_model.margin.bottom = computed_values.margin().bottom.resolved(child_box, width_of_containing_block).resolved_or_zero(containing_block).to_px(child_box); box_model.border.top = computed_values.border_top().width; box_model.border.bottom = computed_values.border_bottom().width; - box_model.padding.top = computed_values.padding().top.resolved(width_of_containing_block).resolved_or_zero(containing_block).to_px(child_box); - box_model.padding.bottom = computed_values.padding().bottom.resolved(width_of_containing_block).resolved_or_zero(containing_block).to_px(child_box); + box_model.padding.top = computed_values.padding().top.resolved(child_box, width_of_containing_block).resolved_or_zero(containing_block).to_px(child_box); + box_model.padding.bottom = computed_values.padding().bottom.resolved(child_box, width_of_containing_block).resolved_or_zero(containing_block).to_px(child_box); } void BlockFormattingContext::place_block_level_element_in_normal_flow_vertically(Box& child_box, BlockContainer const& containing_block) diff --git a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 18c5a25af4..1e805980b8 100644 --- a/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -20,7 +20,7 @@ namespace Web::Layout { static float get_pixel_size(Box const& box, CSS::LengthPercentage const& length_percentage) { auto inner_main_size = CSS::Length::make_px(box.containing_block()->width()); - return length_percentage.resolved(inner_main_size) + return length_percentage.resolved(box, inner_main_size) .resolved(CSS::Length::make_px(0), box) .to_px(box); } @@ -118,15 +118,15 @@ void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::Flex auto width_of_containing_block_as_length = CSS::Length::make_px(width_of_containing_block); // FIXME: This should also take reverse-ness into account if (flex_direction == CSS::FlexDirection::Row || flex_direction == CSS::FlexDirection::RowReverse) { - item.margins.main_before = item.box.computed_values().margin().left.resolved(width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); - item.margins.main_after = item.box.computed_values().margin().right.resolved(width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); - item.margins.cross_before = item.box.computed_values().margin().top.resolved(width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); - item.margins.cross_after = item.box.computed_values().margin().bottom.resolved(width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); + item.margins.main_before = item.box.computed_values().margin().left.resolved(item.box, width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); + item.margins.main_after = item.box.computed_values().margin().right.resolved(item.box, width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); + item.margins.cross_before = item.box.computed_values().margin().top.resolved(item.box, width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); + item.margins.cross_after = item.box.computed_values().margin().bottom.resolved(item.box, width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); } else { - item.margins.main_before = item.box.computed_values().margin().top.resolved(width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); - item.margins.main_after = item.box.computed_values().margin().bottom.resolved(width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); - item.margins.cross_before = item.box.computed_values().margin().left.resolved(width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); - item.margins.cross_after = item.box.computed_values().margin().right.resolved(width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); + item.margins.main_before = item.box.computed_values().margin().top.resolved(item.box, width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); + item.margins.main_after = item.box.computed_values().margin().bottom.resolved(item.box, width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); + item.margins.cross_before = item.box.computed_values().margin().left.resolved(item.box, width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); + item.margins.cross_after = item.box.computed_values().margin().right.resolved(item.box, width_of_containing_block_as_length).resolved_or_zero(item.box).to_px(item.box); } }; @@ -143,7 +143,7 @@ void FlexFormattingContext::generate_anonymous_flex_items() flex_container().set_width(flex_container().containing_block()->width()); } else { auto container_width = flex_container().containing_block()->width(); - auto width = flex_container().computed_values().width().resolved(CSS::Length::make_px(container_width)).resolved_or_zero(flex_container()).to_px(flex_container()); + auto width = flex_container().computed_values().width().resolved(flex_container(), CSS::Length::make_px(container_width)).resolved_or_zero(flex_container()).to_px(flex_container()); flex_container().set_width(width); } @@ -151,7 +151,7 @@ void FlexFormattingContext::generate_anonymous_flex_items() flex_container().set_height(flex_container().containing_block()->height()); } else { auto container_height = flex_container().containing_block()->height(); - auto height = flex_container().computed_values().height().resolved(CSS::Length::make_px(container_height)).resolved_or_zero(flex_container()).to_px(flex_container()); + auto height = flex_container().computed_values().height().resolved(flex_container(), CSS::Length::make_px(container_height)).resolved_or_zero(flex_container()).to_px(flex_container()); flex_container().set_height(height); } @@ -238,7 +238,7 @@ float FlexFormattingContext::specified_main_size_of_child_box(Box const& child_b { auto main_size_of_parent = specified_main_size(flex_container()); auto value = is_row_layout() ? child_box.computed_values().width() : child_box.computed_values().height(); - return value.resolved(CSS::Length::make_px(main_size_of_parent)).resolved_or_zero(child_box).to_px(child_box); + return value.resolved(child_box, CSS::Length::make_px(main_size_of_parent)).resolved_or_zero(child_box).to_px(child_box); } float FlexFormattingContext::specified_main_min_size(Box const& box) const diff --git a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp index 5295b35f9b..fad4522d8e 100644 --- a/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -157,10 +157,10 @@ static Gfx::FloatSize solve_replaced_size_constraint(float w, float h, const Rep auto width_of_containing_block = CSS::Length::make_px(containing_block.width()); auto height_of_containing_block = CSS::Length::make_px(containing_block.height()); - auto specified_min_width = box.computed_values().min_width().resolved(width_of_containing_block).resolved_or_zero(box).to_px(box); - auto specified_max_width = box.computed_values().max_width().resolved(width_of_containing_block).resolved(CSS::Length::make_px(w), box).to_px(box); - auto specified_min_height = box.computed_values().min_height().resolved(height_of_containing_block).resolved_or_auto(box).to_px(box); - auto specified_max_height = box.computed_values().max_height().resolved(height_of_containing_block).resolved(CSS::Length::make_px(h), box).to_px(box); + auto specified_min_width = box.computed_values().min_width().resolved(box, width_of_containing_block).resolved_or_zero(box).to_px(box); + auto specified_max_width = box.computed_values().max_width().resolved(box, width_of_containing_block).resolved(CSS::Length::make_px(w), box).to_px(box); + auto specified_min_height = box.computed_values().min_height().resolved(box, height_of_containing_block).resolved_or_auto(box).to_px(box); + auto specified_max_height = box.computed_values().max_height().resolved(box, height_of_containing_block).resolved(CSS::Length::make_px(h), box).to_px(box); auto min_width = min(specified_min_width, specified_max_width); auto max_width = max(specified_min_width, specified_max_width); @@ -252,7 +252,7 @@ float FormattingContext::tentative_width_for_replaced_element(ReplacedBox const& { auto& containing_block = *box.containing_block(); auto height_of_containing_block = CSS::Length::make_px(containing_block.height()); - auto computed_height = box.computed_values().height().resolved(height_of_containing_block).resolved_or_auto(box); + auto computed_height = box.computed_values().height().resolved(box, height_of_containing_block).resolved_or_auto(box); float used_width = computed_width.to_px(box); @@ -314,8 +314,8 @@ float FormattingContext::compute_width_for_replaced_element(const ReplacedBox& b auto& containing_block = *box.containing_block(); auto width_of_containing_block = CSS::Length::make_px(containing_block.width()); - auto margin_left = box.computed_values().margin().left.resolved(width_of_containing_block).resolved_or_zero(box); - auto margin_right = box.computed_values().margin().right.resolved(width_of_containing_block).resolved_or_zero(box); + auto margin_left = box.computed_values().margin().left.resolved(box, width_of_containing_block).resolved_or_zero(box); + auto margin_right = box.computed_values().margin().right.resolved(box, width_of_containing_block).resolved_or_zero(box); // A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'. if (margin_left.is_auto()) @@ -323,14 +323,14 @@ float FormattingContext::compute_width_for_replaced_element(const ReplacedBox& b if (margin_right.is_auto()) margin_right = zero_value; - auto specified_width = box.computed_values().width().resolved(width_of_containing_block).resolved_or_auto(box); + auto specified_width = box.computed_values().width().resolved(box, width_of_containing_block).resolved_or_auto(box); // 1. The tentative used width is calculated (without 'min-width' and 'max-width') auto used_width = tentative_width_for_replaced_element(box, specified_width); // 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 = box.computed_values().max_width().resolved(width_of_containing_block).resolved_or_auto(box); + auto specified_max_width = box.computed_values().max_width().resolved(box, width_of_containing_block).resolved_or_auto(box); if (!specified_max_width.is_auto()) { if (used_width > specified_max_width.to_px(box)) { used_width = tentative_width_for_replaced_element(box, specified_max_width); @@ -339,7 +339,7 @@ float FormattingContext::compute_width_for_replaced_element(const ReplacedBox& b // 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 = box.computed_values().min_width().resolved(width_of_containing_block).resolved_or_auto(box); + auto specified_min_width = box.computed_values().min_width().resolved(box, width_of_containing_block).resolved_or_auto(box); if (!specified_min_width.is_auto()) { if (used_width < specified_min_width.to_px(box)) { used_width = tentative_width_for_replaced_element(box, specified_min_width); @@ -355,7 +355,7 @@ float FormattingContext::tentative_height_for_replaced_element(ReplacedBox const { auto& containing_block = *box.containing_block(); auto width_of_containing_block = CSS::Length::make_px(containing_block.width()); - auto computed_width = box.computed_values().width().resolved(width_of_containing_block).resolved_or_auto(box); + auto computed_width = box.computed_values().width().resolved(box, width_of_containing_block).resolved_or_auto(box); // 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'. @@ -389,8 +389,8 @@ float FormattingContext::compute_height_for_replaced_element(const ReplacedBox& auto& containing_block = *box.containing_block(); auto width_of_containing_block = CSS::Length::make_px(containing_block.width()); auto height_of_containing_block = CSS::Length::make_px(containing_block.height()); - auto specified_width = box.computed_values().width().resolved(width_of_containing_block).resolved_or_auto(box); - auto specified_height = box.computed_values().height().resolved(height_of_containing_block).resolved_or_auto(box); + auto specified_width = box.computed_values().width().resolved(box, width_of_containing_block).resolved_or_auto(box); + auto specified_height = box.computed_values().height().resolved(box, height_of_containing_block).resolved_or_auto(box); float used_height = tentative_height_for_replaced_element(box, specified_height); @@ -414,15 +414,15 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele auto margin_right = CSS::Length::make_auto(); const auto border_left = computed_values.border_left().width; const auto border_right = computed_values.border_right().width; - const auto padding_left = computed_values.padding().left.resolved(width_of_containing_block).resolved_or_zero(box); - const auto padding_right = computed_values.padding().right.resolved(width_of_containing_block).resolved_or_zero(box); + const auto padding_left = computed_values.padding().left.resolved(box, width_of_containing_block).resolved_or_zero(box); + const auto padding_right = computed_values.padding().right.resolved(box, width_of_containing_block).resolved_or_zero(box); auto try_compute_width = [&](const auto& a_width) { - margin_left = computed_values.margin().left.resolved(width_of_containing_block).resolved_or_zero(box); - margin_right = computed_values.margin().right.resolved(width_of_containing_block).resolved_or_zero(box); + margin_left = computed_values.margin().left.resolved(box, width_of_containing_block).resolved_or_zero(box); + margin_right = computed_values.margin().right.resolved(box, width_of_containing_block).resolved_or_zero(box); - auto left = computed_values.offset().left.resolved(width_of_containing_block).resolved_or_auto(box); - auto right = computed_values.offset().right.resolved(width_of_containing_block).resolved_or_auto(box); + auto left = computed_values.offset().left.resolved(box, width_of_containing_block).resolved_or_auto(box); + auto right = computed_values.offset().right.resolved(box, width_of_containing_block).resolved_or_auto(box); auto width = a_width; auto solve_for_left = [&] { @@ -511,14 +511,14 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele return width; }; - auto specified_width = computed_values.width().resolved(width_of_containing_block).resolved_or_auto(box); + auto specified_width = computed_values.width().resolved(box, width_of_containing_block).resolved_or_auto(box); // 1. The tentative used width is calculated (without 'min-width' and 'max-width') auto used_width = try_compute_width(specified_width); // 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(width_of_containing_block).resolved_or_auto(box); + auto specified_max_width = computed_values.max_width().resolved(box, width_of_containing_block).resolved_or_auto(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); @@ -527,7 +527,7 @@ void FormattingContext::compute_width_for_absolutely_positioned_non_replaced_ele // 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(width_of_containing_block).resolved_or_auto(box); + auto specified_min_width = computed_values.min_width().resolved(box, width_of_containing_block).resolved_or_auto(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); @@ -559,25 +559,25 @@ void FormattingContext::compute_height_for_absolutely_positioned_non_replaced_el auto width_of_containing_block = CSS::Length::make_px(containing_block.width()); auto height_of_containing_block = CSS::Length::make_px(containing_block.height()); - CSS::Length specified_top = computed_values.offset().top.resolved(height_of_containing_block).resolved_or_auto(box); - CSS::Length specified_bottom = computed_values.offset().bottom.resolved(height_of_containing_block).resolved_or_auto(box); + CSS::Length specified_top = computed_values.offset().top.resolved(box, height_of_containing_block).resolved_or_auto(box); + CSS::Length specified_bottom = computed_values.offset().bottom.resolved(box, height_of_containing_block).resolved_or_auto(box); CSS::Length specified_height; if (computed_values.height().is_percentage() && !(containing_block.computed_values().height().is_length() && containing_block.computed_values().height().length().is_absolute())) { specified_height = CSS::Length::make_auto(); } else { - specified_height = computed_values.height().resolved(height_of_containing_block).resolved_or_auto(box); + specified_height = computed_values.height().resolved(box, height_of_containing_block).resolved_or_auto(box); } - auto specified_max_height = computed_values.max_height().resolved(height_of_containing_block).resolved_or_auto(box); - auto specified_min_height = computed_values.min_height().resolved(height_of_containing_block).resolved_or_auto(box); + auto specified_max_height = computed_values.max_height().resolved(box, height_of_containing_block).resolved_or_auto(box); + auto specified_min_height = computed_values.min_height().resolved(box, height_of_containing_block).resolved_or_auto(box); - box.box_model().margin.top = computed_values.margin().top.resolved(width_of_containing_block).resolved_or_zero(box).to_px(box); - box.box_model().margin.bottom = computed_values.margin().bottom.resolved(width_of_containing_block).resolved_or_zero(box).to_px(box); + box.box_model().margin.top = computed_values.margin().top.resolved(box, width_of_containing_block).resolved_or_zero(box).to_px(box); + box.box_model().margin.bottom = computed_values.margin().bottom.resolved(box, width_of_containing_block).resolved_or_zero(box).to_px(box); box.box_model().border.top = computed_values.border_top().width; box.box_model().border.bottom = computed_values.border_bottom().width; - box.box_model().padding.top = computed_values.padding().top.resolved(width_of_containing_block).resolved_or_zero(box).to_px(box); - box.box_model().padding.bottom = computed_values.padding().bottom.resolved(width_of_containing_block).resolved_or_zero(box).to_px(box); + box.box_model().padding.top = computed_values.padding().top.resolved(box, width_of_containing_block).resolved_or_zero(box).to_px(box); + box.box_model().padding.bottom = computed_values.padding().bottom.resolved(box, width_of_containing_block).resolved_or_zero(box).to_px(box); if (specified_height.is_auto() && !specified_top.is_auto() && specified_bottom.is_auto()) { const auto& margin = box.box_model().margin; @@ -613,26 +613,26 @@ void FormattingContext::layout_absolutely_positioned_element(Box& box) auto height_of_containing_block = CSS::Length::make_px(containing_block.height()); auto& box_model = box.box_model(); - auto specified_width = box.computed_values().width().resolved(width_of_containing_block).resolved_or_auto(box); + auto specified_width = box.computed_values().width().resolved(box, width_of_containing_block).resolved_or_auto(box); compute_width_for_absolutely_positioned_element(box); (void)layout_inside(box, LayoutMode::Default); compute_height_for_absolutely_positioned_element(box); - box_model.margin.left = box.computed_values().margin().left.resolved(width_of_containing_block).resolved_or_auto(box).to_px(box); - box_model.margin.top = box.computed_values().margin().top.resolved(height_of_containing_block).resolved_or_auto(box).to_px(box); - box_model.margin.right = box.computed_values().margin().right.resolved(width_of_containing_block).resolved_or_auto(box).to_px(box); - box_model.margin.bottom = box.computed_values().margin().bottom.resolved(height_of_containing_block).resolved_or_auto(box).to_px(box); + box_model.margin.left = box.computed_values().margin().left.resolved(box, width_of_containing_block).resolved_or_auto(box).to_px(box); + box_model.margin.top = box.computed_values().margin().top.resolved(box, height_of_containing_block).resolved_or_auto(box).to_px(box); + box_model.margin.right = box.computed_values().margin().right.resolved(box, width_of_containing_block).resolved_or_auto(box).to_px(box); + box_model.margin.bottom = box.computed_values().margin().bottom.resolved(box, height_of_containing_block).resolved_or_auto(box).to_px(box); box_model.border.left = box.computed_values().border_left().width; box_model.border.right = box.computed_values().border_right().width; box_model.border.top = box.computed_values().border_top().width; box_model.border.bottom = box.computed_values().border_bottom().width; - box_model.offset.left = box.computed_values().offset().left.resolved(width_of_containing_block).resolved_or_auto(box).to_px(box); - box_model.offset.top = box.computed_values().offset().top.resolved(height_of_containing_block).resolved_or_auto(box).to_px(box); - box_model.offset.right = box.computed_values().offset().right.resolved(width_of_containing_block).resolved_or_auto(box).to_px(box); - box_model.offset.bottom = box.computed_values().offset().bottom.resolved(height_of_containing_block).resolved_or_auto(box).to_px(box); + box_model.offset.left = box.computed_values().offset().left.resolved(box, width_of_containing_block).resolved_or_auto(box).to_px(box); + box_model.offset.top = box.computed_values().offset().top.resolved(box, height_of_containing_block).resolved_or_auto(box).to_px(box); + box_model.offset.right = box.computed_values().offset().right.resolved(box, width_of_containing_block).resolved_or_auto(box).to_px(box); + box_model.offset.bottom = box.computed_values().offset().bottom.resolved(box, height_of_containing_block).resolved_or_auto(box).to_px(box); auto is_auto = [](auto const& length_percentage) { return length_percentage.is_length() && length_percentage.length().is_auto(); diff --git a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp index a672b44997..c1f9dbbadd 100644 --- a/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp @@ -119,13 +119,13 @@ void InlineFormattingContext::dimension_box_on_line(Box& box, LayoutMode layout_ auto result = calculate_shrink_to_fit_widths(inline_block); auto width_of_containing_block = CSS::Length::make_px(containing_block().width()); - auto margin_left = inline_block.computed_values().margin().left.resolved(width_of_containing_block).resolved_or_zero(inline_block).to_px(inline_block); + auto margin_left = inline_block.computed_values().margin().left.resolved(box, width_of_containing_block).resolved_or_zero(inline_block).to_px(inline_block); auto border_left_width = inline_block.computed_values().border_left().width; - auto padding_left = inline_block.computed_values().padding().left.resolved(width_of_containing_block).resolved_or_zero(inline_block).to_px(inline_block); + auto padding_left = inline_block.computed_values().padding().left.resolved(box, width_of_containing_block).resolved_or_zero(inline_block).to_px(inline_block); - auto margin_right = inline_block.computed_values().margin().right.resolved(width_of_containing_block).resolved_or_zero(inline_block).to_px(inline_block); + auto margin_right = inline_block.computed_values().margin().right.resolved(box, width_of_containing_block).resolved_or_zero(inline_block).to_px(inline_block); auto border_right_width = inline_block.computed_values().border_right().width; - auto padding_right = inline_block.computed_values().padding().right.resolved(width_of_containing_block).resolved_or_zero(inline_block).to_px(inline_block); + auto padding_right = inline_block.computed_values().padding().right.resolved(box, width_of_containing_block).resolved_or_zero(inline_block).to_px(inline_block); auto available_width = containing_block().width() - margin_left @@ -139,7 +139,7 @@ void InlineFormattingContext::dimension_box_on_line(Box& box, LayoutMode layout_ inline_block.set_width(width); } else { auto container_width = CSS::Length::make_px(containing_block().width()); - inline_block.set_width(inline_block.computed_values().width().resolved(container_width).resolved_or_zero(inline_block).to_px(inline_block)); + inline_block.set_width(inline_block.computed_values().width().resolved(box, container_width).resolved_or_zero(inline_block).to_px(inline_block)); } (void)layout_inside(inline_block, layout_mode); @@ -147,7 +147,7 @@ void InlineFormattingContext::dimension_box_on_line(Box& box, LayoutMode layout_ // FIXME: (10.6.6) If 'height' is 'auto', the height depends on the element's descendants per 10.6.7. } else { auto container_height = CSS::Length::make_px(containing_block().height()); - inline_block.set_height(inline_block.computed_values().height().resolved(container_height).resolved_or_zero(inline_block).to_px(inline_block)); + inline_block.set_height(inline_block.computed_values().height().resolved(box, container_height).resolved_or_zero(inline_block).to_px(inline_block)); } return; } diff --git a/Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp b/Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp index 2c928e698a..1e6c01291a 100644 --- a/Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp +++ b/Userland/Libraries/LibWeb/Painting/BackgroundPainting.cpp @@ -88,20 +88,20 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet width = image.width(); height = image.height(); } else if (x_is_auto) { - height = layer.size_y.resolved(CSS::Length::make_px(background_positioning_area.height())) + height = layer.size_y.resolved(layout_node, CSS::Length::make_px(background_positioning_area.height())) .resolved_or_zero(layout_node) .to_px(layout_node); width = roundf(image.width() * ((float)height / (float)image.height())); } else if (y_is_auto) { - width = layer.size_x.resolved(CSS::Length::make_px(background_positioning_area.width())) + width = layer.size_x.resolved(layout_node, CSS::Length::make_px(background_positioning_area.width())) .resolved_or_zero(layout_node) .to_px(layout_node); height = roundf(image.height() * ((float)width / (float)image.width())); } else { - width = layer.size_x.resolved(CSS::Length::make_px(background_positioning_area.width())) + width = layer.size_x.resolved(layout_node, CSS::Length::make_px(background_positioning_area.width())) .resolved_or_zero(layout_node) .to_px(layout_node); - height = layer.size_y.resolved(CSS::Length::make_px(background_positioning_area.height())) + height = layer.size_y.resolved(layout_node, CSS::Length::make_px(background_positioning_area.height())) .resolved_or_zero(layout_node) .to_px(layout_node); } @@ -143,7 +143,7 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet int space_y = background_positioning_area.height() - image_rect.height(); // Position - int offset_x = layer.position_offset_x.resolved(CSS::Length::make_px(space_x)) + int offset_x = layer.position_offset_x.resolved(layout_node, CSS::Length::make_px(space_x)) .resolved_or_zero(layout_node) .to_px(layout_node); if (layer.position_edge_x == CSS::PositionEdge::Right) { @@ -152,7 +152,7 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet image_rect.set_left(background_positioning_area.left() + offset_x); } - int offset_y = layer.position_offset_y.resolved(CSS::Length::make_px(space_y)) + int offset_y = layer.position_offset_y.resolved(layout_node, CSS::Length::make_px(space_y)) .resolved_or_zero(layout_node) .to_px(layout_node); if (layer.position_edge_y == CSS::PositionEdge::Bottom) { diff --git a/Userland/Libraries/LibWeb/Painting/BorderPainting.cpp b/Userland/Libraries/LibWeb/Painting/BorderPainting.cpp index d69281649e..deafecc964 100644 --- a/Userland/Libraries/LibWeb/Painting/BorderPainting.cpp +++ b/Userland/Libraries/LibWeb/Painting/BorderPainting.cpp @@ -17,10 +17,10 @@ BorderRadiusData normalized_border_radius_data(Layout::Node const& node, Gfx::Fl // Spec just says "Refer to corresponding dimension of the border box." // For now, all relative values are relative to the width. auto width_length = CSS::Length::make_px(rect.width()); - auto bottom_left_radius_px = bottom_left_radius.resolved(width_length).resolved_or_zero(node).to_px(node); - auto bottom_right_radius_px = bottom_right_radius.resolved(width_length).resolved_or_zero(node).to_px(node); - auto top_left_radius_px = top_left_radius.resolved(width_length).resolved_or_zero(node).to_px(node); - auto top_right_radius_px = top_right_radius.resolved(width_length).resolved_or_zero(node).to_px(node); + auto bottom_left_radius_px = bottom_left_radius.resolved(node, width_length).resolved_or_zero(node).to_px(node); + auto bottom_right_radius_px = bottom_right_radius.resolved(node, width_length).resolved_or_zero(node).to_px(node); + auto top_left_radius_px = top_left_radius.resolved(node, width_length).resolved_or_zero(node).to_px(node); + auto top_right_radius_px = top_right_radius.resolved(node, width_length).resolved_or_zero(node).to_px(node); // Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap auto f = 1.0f; diff --git a/Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp b/Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp index 73db727cf7..5d0322110a 100644 --- a/Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp +++ b/Userland/Libraries/LibWeb/SVG/SVGGraphicsElement.cpp @@ -62,7 +62,7 @@ Optional<float> SVGGraphicsElement::stroke_width() const // Resolved relative to the "Scaled viewport size": https://www.w3.org/TR/2017/WD-fill-stroke-3-20170413/#scaled-viewport-size // FIXME: This isn't right, but it's something. auto scaled_viewport_size = CSS::Length::make_px((client_width() + client_height()) * 0.5f); - return width->resolved(scaled_viewport_size).to_px(*layout_node()); + return width->resolved(*layout_node(), scaled_viewport_size).to_px(*layout_node()); } return {}; } |