diff --git a/Base/home/anon/www/percent-css.html b/Base/home/anon/www/percent-css.html
new file mode 100644
index 0000000000..85a1b93178
--- /dev/null
+++ b/Base/home/anon/www/percent-css.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
25%
+
50%
+
75%
+
100%
+
+
+
+
diff --git a/Base/home/anon/www/welcome.html b/Base/home/anon/www/welcome.html
index 2fffcb8f6c..9ee1bac2c9 100644
--- a/Base/home/anon/www/welcome.html
+++ b/Base/home/anon/www/welcome.html
@@ -28,6 +28,7 @@ span#ua {
Your user agent is:
Some small test pages:
+ - CSS percentage values
- display: inline-block; test
- canvas path quadratic curve test
- pngsuite odd sizes test
diff --git a/Libraries/LibWeb/CSS/StyleProperties.cpp b/Libraries/LibWeb/CSS/StyleProperties.cpp
index 466f99b4fc..917d44bb31 100644
--- 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(*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);
diff --git a/Libraries/LibWeb/CSS/StyleProperties.h b/Libraries/LibWeb/CSS/StyleProperties.h
index 908e20c641..0b32443415 100644
--- a/Libraries/LibWeb/CSS/StyleProperties.h
+++ b/Libraries/LibWeb/CSS/StyleProperties.h
@@ -55,6 +55,7 @@ public:
Optional> 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;
diff --git a/Libraries/LibWeb/CSS/StyleValue.h b/Libraries/LibWeb/CSS/StyleValue.h
index 49d9098f9d..8f49de7cd4 100644
--- 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 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 create() { return adopt(*new InitialStyleValue); }
diff --git a/Libraries/LibWeb/Layout/LayoutBlock.cpp b/Libraries/LibWeb/Layout/LayoutBlock.cpp
index ebe2abaaff..50c4ab2a81 100644
--- 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)
diff --git a/Libraries/LibWeb/Parser/CSSParser.cpp b/Libraries/LibWeb/Parser/CSSParser.cpp
index 95a468b137..bb46b55f7d 100644
--- a/Libraries/LibWeb/Parser/CSSParser.cpp
+++ b/Libraries/LibWeb/Parser/CSSParser.cpp
@@ -125,7 +125,10 @@ static Optional try_parse_float(const StringView& string)
static Optional 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 parse_number(const StringView& view)
NonnullRefPtr 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")