We use cookies to ensure you get the best experience on our website
Inicio Explorar Axuda
Rexistro Iniciar sesión
0ct0pu5
/
ladybird
1
0
Fork 0
Ficheiros Incidencias 0 Pull Requests 0 Wiki
Explorar o código

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().
Andreas Kling %!s(int64=5) %!d(string=hai) anos
pai
8ffdcce0d0
achega
5f9d80d8bc
Modificáronse 7 ficheiros con 117 adicións e 31 borrados
Dividir vista Mostrar estatísticas de Diff
  1. 41 0
      Base/home/anon/www/percent-css.html
  2. 1 0
      Base/home/anon/www/welcome.html
  3. 10 0
      Libraries/LibWeb/CSS/StyleProperties.cpp
  4. 1 0
      Libraries/LibWeb/CSS/StyleProperties.h
  5. 27 0
      Libraries/LibWeb/CSS/StyleValue.h
  6. 29 29
      Libraries/LibWeb/Layout/LayoutBlock.cpp
  7. 8 2
      Libraries/LibWeb/Parser/CSSParser.cpp

+ 41 - 0
Base/home/anon/www/percent-css.html
Ver ficheiro 

@@ -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>

+ 1 - 0
Base/home/anon/www/welcome.html
Ver ficheiro 

@@ -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>

+ 10 - 0
Libraries/LibWeb/CSS/StyleProperties.cpp
Ver ficheiro 

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

+ 1 - 0
Libraries/LibWeb/CSS/StyleProperties.h
Ver ficheiro 

@@ -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;

+ 27 - 0
Libraries/LibWeb/CSS/StyleValue.h
Ver ficheiro 

@@ -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); }

+ 29 - 29
Libraries/LibWeb/Layout/LayoutBlock.cpp
Ver ficheiro 

@@ -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)

+ 8 - 2
Libraries/LibWeb/Parser/CSSParser.cpp
Ver ficheiro 

@@ -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")

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5