LibWeb: Support percentages in word-spacing

Fixes crash in the created test as well as https://wpt.live/css/css-text
/word-spacing/reference/word-spacing-percent-001-ref.html. The WPT test
hasn't been imported as it passing is currently a false-positive due to
the fact that we don't yet respect `word-spacing` in most cases.

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -839,20 +839,22 @@ WordBreak ComputedProperties::word_break() const
     return keyword_to_word_break(value.to_keyword()).release_value();
 }
 
-Optional<LengthOrCalculated> ComputedProperties::word_spacing() const
+Optional<LengthPercentage> ComputedProperties::word_spacing() const
 {
     auto const& value = property(PropertyID::WordSpacing);
-    if (value.is_calculated()) {
-        auto& math_value = value.as_calculated();
-        if (math_value.resolves_to_length()) {
-            return LengthOrCalculated { math_value };
-        }
-    }
+    if (value.is_keyword() && value.to_keyword() == Keyword::Normal)
+        return LengthPercentage { Length::make_px(0) };
 
     if (value.is_length())
-        return LengthOrCalculated { value.as_length().length() };
+        return LengthPercentage(value.as_length().length());
 
-    return {};
+    if (value.is_percentage())
+        return LengthPercentage(value.as_percentage().percentage());
+
+    if (value.is_calculated())
+        return LengthPercentage { value.as_calculated() };
+
+    VERIFY_NOT_REACHED();
 }
 
 WhiteSpaceCollapse ComputedProperties::white_space_collapse() const

Libraries/LibWeb/CSS/ComputedProperties.h

@@ -104,7 +104,7 @@ public:
     WhiteSpaceCollapse white_space_collapse() const;
     WhiteSpaceTrimData white_space_trim() const;
     WordBreak word_break() const;
-    Optional<LengthOrCalculated> word_spacing() const;
+    Optional<LengthPercentage> word_spacing() const;
     Optional<LengthOrCalculated> letter_spacing() const;
     LineStyle line_style(PropertyID) const;
     OutlineStyle outline_style() const;

Libraries/LibWeb/CSS/ComputedValues.h

@@ -109,7 +109,7 @@ public:
     static CursorData cursor() { return { CSS::CursorPredefined::Auto }; }
     static CSS::WhiteSpaceCollapse white_space_collapse() { return CSS::WhiteSpaceCollapse::Collapse; }
     static CSS::WordBreak word_break() { return CSS::WordBreak::Normal; }
-    static CSS::LengthOrCalculated word_spacing() { return CSS::Length::make_px(0); }
+    static LengthPercentage word_spacing() { return CSS::Length::make_px(0); }
     static LengthOrCalculated letter_spacing() { return CSS::Length::make_px(0); }
     static Variant<LengthOrCalculated, NumberOrCalculated> tab_size() { return NumberOrCalculated(8.0f); }
     static CSS::TextAlign text_align() { return CSS::TextAlign::Start; }
@@ -451,7 +451,7 @@ public:
     CSS::Positioning position() const { return m_noninherited.position; }
     CSS::WhiteSpaceCollapse white_space_collapse() const { return m_inherited.white_space_collapse; }
     WhiteSpaceTrimData white_space_trim() const { return m_noninherited.white_space_trim; }
-    CSS::LengthOrCalculated word_spacing() const { return m_inherited.word_spacing; }
+    LengthPercentage const& word_spacing() const { return m_inherited.word_spacing; }
     LengthOrCalculated letter_spacing() const { return m_inherited.letter_spacing; }
     CSS::FlexDirection flex_direction() const { return m_noninherited.flex_direction; }
     CSS::FlexWrap flex_wrap() const { return m_noninherited.flex_wrap; }
@@ -654,7 +654,7 @@ protected:
         CSS::TextRendering text_rendering { InitialValues::text_rendering() };
         CSS::WhiteSpaceCollapse white_space_collapse { InitialValues::white_space_collapse() };
         CSS::WordBreak word_break { InitialValues::word_break() };
-        CSS::LengthOrCalculated word_spacing { InitialValues::word_spacing() };
+        LengthPercentage word_spacing { InitialValues::word_spacing() };
         LengthOrCalculated letter_spacing { InitialValues::letter_spacing() };
         CSS::ListStyleType list_style_type { InitialValues::list_style_type() };
         CSS::ListStylePosition list_style_position { InitialValues::list_style_position() };
@@ -866,7 +866,7 @@ public:
     void set_position(CSS::Positioning position) { m_noninherited.position = position; }
     void set_white_space_collapse(CSS::WhiteSpaceCollapse value) { m_inherited.white_space_collapse = value; }
     void set_white_space_trim(WhiteSpaceTrimData value) { m_noninherited.white_space_trim = value; }
-    void set_word_spacing(CSS::LengthOrCalculated value) { m_inherited.word_spacing = move(value); }
+    void set_word_spacing(CSS::LengthPercentage value) { m_inherited.word_spacing = move(value); }
     void set_word_break(CSS::WordBreak value) { m_inherited.word_break = value; }
     void set_letter_spacing(CSS::LengthOrCalculated value) { m_inherited.letter_spacing = value; }
     void set_width(CSS::Size const& width) { m_noninherited.width = width; }

Libraries/LibWeb/Layout/InlineLevelIterator.cpp

@@ -528,7 +528,8 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
 
         CSS::CalculationResolutionContext calculation_context { .length_resolution_context = CSS::Length::ResolutionContext::for_layout_node(text_node) };
         auto letter_spacing = text_node.computed_values().letter_spacing().resolved(calculation_context).map([&](auto& it) { return it.to_px(text_node); }).value_or(0);
-        auto word_spacing = text_node.computed_values().word_spacing().resolved(calculation_context).map([&](auto& it) { return it.to_px(text_node); }).value_or(0);
+        // FIXME: We should apply word spacing to all word-separator characters not just breaking tabs
+        auto word_spacing = text_node.computed_values().word_spacing().resolved(text_node, CSS::Length::make_px(chunk.font->glyph_width(' ')).to_px(text_node)).absolute_length_to_px();
 
         auto x = 0.0f;
         if (chunk.has_breaking_tab) {

Tests/LibWeb/Crash/CSS/word-spacing-percentage.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<style>
+    #foo {
+        word-spacing: calc(100%);
+    }
+</style>
+<div id="foo">bar baz</div>