LibWeb: Add basic support for CSS percentages

Many properties can now have percentage values that get resolved in layout. The reference value (what is this a percentage *of*?) differs per property, so I've added a helper where you provide a reference value as an added parameter to the existing length_or_fallback().
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/5f9d80d8bcd
2025-04-22 12:35:14 +00:00 · 2020-05-11 23:04:59 +02:00 · 2020-05-11 23:04:59 +02:00 · 5f9d80d8bc · 2024-07-19 06:43:18 +09:00
commit 5f9d80d8bc
parent 8ffdcce0d0
7 changed files with 117 additions and 31 deletions
--- a/Base/home/anon/www/percent-css.html
+++ b/Base/home/anon/www/percent-css.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <style>
+        #hcontainer {
+            background-color: black;
+        }
+        .hbar {
+            background-color: blue;
+            color: white;
+        }
+        .w25 { width: 25% }
+        .w50 { width: 50% }
+        .w75 { width: 75% }
+        .w100 { width: 100% }
+
+
+        #vcontainer {
+            background-color: black;
+            height: 200px;
+        }
+        .vbar {
+            background-color: blue;
+            color: white;
+        }
+        .h25 { height: 25% }
+    </style>
+    </head>
+    <body>
+        <div id="hcontainer">
+            <div class="hbar w25">25%</div>
+            <div class="hbar w50">50%</div>
+            <div class="hbar w75">75%</div>
+            <div class="hbar w100">100%</div>
+        </div>
+        <br>
+        <div id="vcontainer">
+            <div class="vbar h25">25%</div>
+        </div>
+    </body>
+</html>
--- a/Base/home/anon/www/welcome.html
+++ b/Base/home/anon/www/welcome.html
@ -28,6 +28,7 @@ span#ua {
    <p>Your user agent is: <b><span id="ua"></span></b></p>
    <p>Some small test pages:</p>
    <ul>
+        <li><a href="percent-css.html">CSS percentage values</a></li>
        <li><a href="inline-block.html">display: inline-block; test</a></li>
        <li><a href="canvas-path-quadratic-curve.html">canvas path quadratic curve test</a></li>
        <li><a href="pngsuite_siz_png.html">pngsuite odd sizes test</a></li>
--- a/Libraries/LibWeb/CSS/StyleProperties.cpp
+++ b/Libraries/LibWeb/CSS/StyleProperties.cpp
@ -71,6 +71,16 @@ Length StyleProperties::length_or_fallback(CSS::PropertyID id, const Length& fal
    return value.value()->to_length();
 }

+Length StyleProperties::length_or_fallback(CSS::PropertyID id, const Length& fallback, float reference_for_percentages) const
+{
+    auto value = property(id);
+    if (!value.has_value())
+        return fallback;
+    if (value.value()->is_percentage())
+        return static_cast<const PercentageStyleValue&>(*value.value()).to_length(reference_for_percentages);
+    return value.value()->to_length();
+}
+
 String StyleProperties::string_or_fallback(CSS::PropertyID id, const StringView& fallback) const
 {
    auto value = property(id);
--- a/Libraries/LibWeb/CSS/StyleProperties.h
+++ b/Libraries/LibWeb/CSS/StyleProperties.h
@ -55,6 +55,7 @@ public:
    Optional<NonnullRefPtr<StyleValue>> property(CSS::PropertyID) const;

    Length length_or_fallback(CSS::PropertyID, const Length& fallback) const;
+    Length length_or_fallback(CSS::PropertyID, const Length& fallback, float reference_for_percentages) const;
    String string_or_fallback(CSS::PropertyID, const StringView& fallback) const;
    Color color_or_fallback(CSS::PropertyID, const Document&, Color fallback) const;

--- a/Libraries/LibWeb/CSS/StyleValue.h
+++ b/Libraries/LibWeb/CSS/StyleValue.h
@ -70,6 +70,7 @@ public:
        Initial,
        String,
        Length,
+        Percentage,
        Color,
        Identifier,
        Image,
@ -85,6 +86,7 @@ public:
    bool is_image() const { return type() == Type::Image; }
    bool is_string() const { return type() == Type::String; }
    bool is_length() const { return type() == Type::Length; }
+    bool is_percentage() const { return type() == Type::Percentage; }
    bool is_position() const { return type() == Type::Position; }

    virtual String to_string() const = 0;
@ -145,6 +147,31 @@ private:
    Length m_length;
 };

+class PercentageStyleValue : public StyleValue {
+public:
+    static NonnullRefPtr<PercentageStyleValue> create(float percentage)
+    {
+        return adopt(*new PercentageStyleValue(percentage));
+    }
+    virtual ~PercentageStyleValue() override {}
+
+    virtual String to_string() const override { return String::format("%g%%", m_percentage); }
+
+    Length to_length(float reference) const { return Length((m_percentage / 100.0f) * reference, Length::Type::Absolute); }
+
+private:
+    virtual Length to_length() const override { return {}; }
+    virtual bool is_auto() const override { return false; }
+
+    explicit PercentageStyleValue(float percentage)
+        : StyleValue(Type::Percentage)
+        , m_percentage(percentage)
+    {
+    }
+
+    float m_percentage { 0 };
+};
+
 class InitialStyleValue final : public StyleValue {
 public:
    static NonnullRefPtr<InitialStyleValue> create() { return adopt(*new InitialStyleValue); }
--- a/Libraries/LibWeb/Layout/LayoutBlock.cpp
+++ b/Libraries/LibWeb/Layout/LayoutBlock.cpp
@ -202,18 +202,20 @@ void LayoutBlock::compute_width()
    Length padding_left;
    Length padding_right;

+    auto& containing_block = *this->containing_block();
+
    auto try_compute_width = [&](const auto& a_width) {
        Length width = a_width;
 #ifdef HTML_DEBUG
        dbg() << " Left: " << margin_left << "+" << border_left << "+" << padding_left;
        dbg() << "Right: " << margin_right << "+" << border_right << "+" << padding_right;
 #endif
-        margin_left = style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value);
-        margin_right = style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value);
+        margin_left = style.length_or_fallback(CSS::PropertyID::MarginLeft, zero_value, containing_block.width());
+        margin_right = style.length_or_fallback(CSS::PropertyID::MarginRight, zero_value, containing_block.width());
        border_left = style.length_or_fallback(CSS::PropertyID::BorderLeftWidth, zero_value);
        border_right = style.length_or_fallback(CSS::PropertyID::BorderRightWidth, zero_value);
-        padding_left = style.length_or_fallback(CSS::PropertyID::PaddingLeft, zero_value);
-        padding_right = style.length_or_fallback(CSS::PropertyID::PaddingRight, zero_value);
+        padding_left = style.length_or_fallback(CSS::PropertyID::PaddingLeft, zero_value, containing_block.width());
+        padding_right = style.length_or_fallback(CSS::PropertyID::PaddingRight, zero_value, containing_block.width());

        float total_px = 0;
        for (auto& value : { margin_left, border_left, padding_left, width, padding_right, border_right, margin_right }) {
@ -226,7 +228,7 @@ void LayoutBlock::compute_width()

        // 10.3.3 Block-level, non-replaced elements in normal flow
        // If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero.
-        if (width.is_auto() && total_px > containing_block()->width()) {
+        if (width.is_auto() && total_px > containing_block.width()) {
            if (margin_left.is_auto())
                margin_left = zero_value;
            if (margin_right.is_auto())
@ -234,7 +236,7 @@ void LayoutBlock::compute_width()
        }

        // 10.3.3 cont'd.
-        auto underflow_px = containing_block()->width() - total_px;
+        auto underflow_px = containing_block.width() - total_px;

        if (width.is_auto()) {
            if (margin_left.is_auto())
@ -263,14 +265,14 @@ void LayoutBlock::compute_width()
        return width;
    };

-    auto specified_width = style.length_or_fallback(CSS::PropertyID::Width, auto_value);
+    auto specified_width = style.length_or_fallback(CSS::PropertyID::Width, auto_value, containing_block.width());

    // 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 = style.length_or_fallback(CSS::PropertyID::MaxWidth, auto_value);
+    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()) {
            used_width = try_compute_width(specified_max_width);
@ -279,7 +281,7 @@ void LayoutBlock::compute_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 = style.length_or_fallback(CSS::PropertyID::MinWidth, auto_value);
+    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()) {
            used_width = try_compute_width(specified_min_width);
@ -302,36 +304,38 @@ void LayoutBlock::compute_position()
    auto auto_value = Length();
    auto zero_value = Length(0, Length::Type::Absolute);

-    auto width = style.length_or_fallback(CSS::PropertyID::Width, auto_value);
+    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);
-        box_model().offset().right = style.length_or_fallback(CSS::PropertyID::Right, zero_value);
-        box_model().offset().bottom = style.length_or_fallback(CSS::PropertyID::Bottom, zero_value);
-        box_model().offset().left = style.length_or_fallback(CSS::PropertyID::Left, zero_value);
+        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());
+        box_model().offset().bottom = style.length_or_fallback(CSS::PropertyID::Bottom, zero_value, containing_block.height());
+        box_model().offset().left = style.length_or_fallback(CSS::PropertyID::Left, zero_value, containing_block.width());
    }

-    box_model().margin().top = style.length_or_fallback(CSS::PropertyID::MarginTop, zero_value);
-    box_model().margin().bottom = style.length_or_fallback(CSS::PropertyID::MarginBottom, zero_value);
+    box_model().margin().top = style.length_or_fallback(CSS::PropertyID::MarginTop, zero_value, containing_block.height());
+    box_model().margin().bottom = style.length_or_fallback(CSS::PropertyID::MarginBottom, zero_value, containing_block.height());
    box_model().border().top = style.length_or_fallback(CSS::PropertyID::BorderTopWidth, zero_value);
    box_model().border().bottom = style.length_or_fallback(CSS::PropertyID::BorderBottomWidth, zero_value);
-    box_model().padding().top = style.length_or_fallback(CSS::PropertyID::PaddingTop, zero_value);
-    box_model().padding().bottom = style.length_or_fallback(CSS::PropertyID::PaddingBottom, zero_value);
+    box_model().padding().top = style.length_or_fallback(CSS::PropertyID::PaddingTop, zero_value, containing_block.height());
+    box_model().padding().bottom = style.length_or_fallback(CSS::PropertyID::PaddingBottom, zero_value, containing_block.height());

    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();

-    if (style.position() != CSS::Position::Absolute || containing_block()->style().position() == CSS::Position::Absolute)
-        position_x += containing_block()->x();
+    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();

-    if (style.position() != CSS::Position::Absolute || containing_block()->style().position() == CSS::Position::Absolute) {
+    if (style.position() != CSS::Position::Absolute || containing_block.style().position() == CSS::Position::Absolute) {
        LayoutBlock* relevant_sibling = previous_sibling();
        while (relevant_sibling != nullptr) {
            if (relevant_sibling->style().position() != CSS::Position::Absolute)
@ -340,7 +344,7 @@ void LayoutBlock::compute_position()
        }

        if (relevant_sibling == nullptr) {
-            position_y += containing_block()->y();
+            position_y += containing_block.y();
        } else {
            auto& previous_sibling_rect = relevant_sibling->rect();
            auto& previous_sibling_style = relevant_sibling->box_model();
@ -355,13 +359,9 @@ void LayoutBlock::compute_position()
 void LayoutBlock::compute_height()
 {
    auto& style = this->style();
-
-    auto height_property = style.property(CSS::PropertyID::Height);
-    if (!height_property.has_value())
-        return;
-    auto height_length = height_property.value()->to_length();
-    if (height_length.is_absolute())
-        rect().set_height(height_length.to_px());
+    auto height = style.length_or_fallback(CSS::PropertyID::Height, Length(), containing_block()->height());
+    if (height.is_absolute())
+        rect().set_height(height.to_px());
 }

 void LayoutBlock::render(RenderingContext& context)
--- a/Libraries/LibWeb/Parser/CSSParser.cpp
+++ b/Libraries/LibWeb/Parser/CSSParser.cpp
@ -125,7 +125,10 @@ static Optional<float> try_parse_float(const StringView& string)

 static Optional<float> parse_number(const StringView& view)
 {
-    if (view.length() >= 2 && view[view.length() - 2] == 'p' && view[view.length() - 1] == 'x')
+    if (view.ends_with('%'))
+        return parse_number(view.substring_view(0, view.length() - 1));
+
+    if (view.ends_with("px"))
        return parse_number(view.substring_view(0, view.length() - 2));

    return try_parse_float(view);
@ -134,8 +137,11 @@ static Optional<float> parse_number(const StringView& view)
 NonnullRefPtr<StyleValue> parse_css_value(const StringView& string)
 {
    auto number = parse_number(string);
-    if (number.has_value())
+    if (number.has_value()) {
+        if (string.ends_with('%'))
+            return PercentageStyleValue::create(number.value());
        return LengthStyleValue::create(Length(number.value(), Length::Type::Absolute));
+    }
    if (string == "inherit")
        return InheritStyleValue::create();
    if (string == "initial")