LibWeb: Convert white-space CSS property to shorthand

This exposed a few bugs which caused the following tests to behave
incorrectly:
- `tab-size-text-wrap.html`: This previously relied on a bug where we
  incorrectly treated `white-space: pre` as allowing text wrapping. The
  fix here is to implement the text-wrap CSS shorthand property.

- `execCommand-preserveWhitespace.html`: We don't correctly serialize
  shorthand properties. This is covered by an existing FIXME in
  `CSSStyleProperties::serialized()`

- `white-space-shorthand.html`: The last 5 subtests here fail as we
  don't correctly handle shorthand properties in
  `CSSStyleProperties::remove_property()`. This is covered by an
  existing FIXME in said function.

Libraries/LibWeb/CSS/CSSStyleProperties.cpp

@@ -553,6 +553,42 @@ Optional<StyleProperty> CSSStyleProperties::get_property_internal(PropertyID pro
             auto left = get_property_internal(PropertyID::PaddingLeft);
             return style_property_for_sided_shorthand(property_id, top, right, bottom, left);
         }
+        case PropertyID::WhiteSpace: {
+            auto white_space_collapse_property = get_property_internal(PropertyID::WhiteSpaceCollapse);
+            auto text_wrap_mode_property = get_property_internal(PropertyID::TextWrapMode);
+            auto white_space_trim_property = get_property_internal(PropertyID::WhiteSpaceTrim);
+
+            if (!white_space_collapse_property.has_value() || !text_wrap_mode_property.has_value() || !white_space_trim_property.has_value())
+                break;
+
+            RefPtr<CSSStyleValue const> value;
+
+            if (white_space_trim_property->value->is_keyword() && white_space_trim_property->value->as_keyword().keyword() == Keyword::None) {
+                auto white_space_collapse_keyword = white_space_collapse_property->value->as_keyword().keyword();
+                auto text_wrap_mode_keyword = text_wrap_mode_property->value->as_keyword().keyword();
+
+                if (white_space_collapse_keyword == Keyword::Collapse && text_wrap_mode_keyword == Keyword::Wrap)
+                    value = CSSKeywordValue::create(Keyword::Normal);
+
+                if (white_space_collapse_keyword == Keyword::Preserve && text_wrap_mode_keyword == Keyword::Nowrap)
+                    value = CSSKeywordValue::create(Keyword::Pre);
+
+                if (white_space_collapse_keyword == Keyword::Preserve && text_wrap_mode_keyword == Keyword::Wrap)
+                    value = CSSKeywordValue::create(Keyword::PreWrap);
+
+                if (white_space_collapse_keyword == Keyword::PreserveBreaks && text_wrap_mode_keyword == Keyword::Wrap)
+                    value = CSSKeywordValue::create(Keyword::PreLine);
+            }
+
+            if (!value)
+                break;
+
+            return StyleProperty {
+                .important = white_space_collapse_property->important,
+                .property_id = property_id,
+                .value = value.release_nonnull(),
+            };
+        }
         default:
             break;
         }

Libraries/LibWeb/CSS/ComputedProperties.cpp

@@ -824,12 +824,6 @@ Optional<LengthOrCalculated> ComputedProperties::word_spacing() const
     return {};
 }
 
-WhiteSpace ComputedProperties::white_space() const
-{
-    auto const& value = property(PropertyID::WhiteSpace);
-    return keyword_to_white_space(value.to_keyword()).release_value();
-}
-
 WhiteSpaceCollapse ComputedProperties::white_space_collapse() const
 {
     auto const& value = property(PropertyID::WhiteSpaceCollapse);

Libraries/LibWeb/CSS/ComputedProperties.h

@@ -100,7 +100,6 @@ public:
     ContentVisibility content_visibility() const;
     Vector<CursorData> cursor() const;
     Variant<LengthOrCalculated, NumberOrCalculated> tab_size() const;
-    WhiteSpace white_space() const;
     WhiteSpaceCollapse white_space_collapse() const;
     WhiteSpaceTrimData white_space_trim() const;
     WordBreak word_break() const;

Libraries/LibWeb/CSS/ComputedValues.h

@@ -100,7 +100,6 @@ public:
     static CSS::PreferredColorScheme color_scheme() { return CSS::PreferredColorScheme::Auto; }
     static CSS::ContentVisibility content_visibility() { return CSS::ContentVisibility::Visible; }
     static CursorData cursor() { return { CSS::Cursor::Auto }; }
-    static CSS::WhiteSpace white_space() { return CSS::WhiteSpace::Normal; }
     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); }
@@ -431,7 +430,6 @@ public:
     CSS::TextOverflow text_overflow() const { return m_noninherited.text_overflow; }
     Vector<ShadowData> const& text_shadow() const { return m_inherited.text_shadow; }
     CSS::Positioning position() const { return m_noninherited.position; }
-    CSS::WhiteSpace white_space() const { return m_inherited.white_space; }
     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; }
@@ -627,7 +625,6 @@ protected:
         CSS::TextTransform text_transform { InitialValues::text_transform() };
         CSS::LengthPercentage text_indent { InitialValues::text_indent() };
         CSS::TextWrapMode text_wrap_mode { InitialValues::text_wrap_mode() };
-        CSS::WhiteSpace white_space { InitialValues::white_space() };
         CSS::WhiteSpaceCollapse white_space_collapse { InitialValues::white_space_collapse() };
         CSS::WordBreak word_break { InitialValues::word_break() };
         CSS::LengthOrCalculated word_spacing { InitialValues::word_spacing() };
@@ -833,7 +830,6 @@ public:
     void set_text_overflow(CSS::TextOverflow value) { m_noninherited.text_overflow = value; }
     void set_webkit_text_fill_color(Color value) { m_inherited.webkit_text_fill_color = value; }
     void set_position(CSS::Positioning position) { m_noninherited.position = position; }
-    void set_white_space(CSS::WhiteSpace value) { m_inherited.white_space = value; }
     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); }

Libraries/LibWeb/CSS/Enums.json

@@ -675,7 +675,6 @@
   ],
   "white-space": [
     "normal",
-    "nowrap",
     "pre",
     "pre-line",
     "pre-wrap"

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -445,6 +445,7 @@ private:
     RefPtr<CSSStyleValue const> parse_grid_area_shorthand_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_grid_shorthand_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_touch_action_value(TokenStream<ComponentValue>&);
+    RefPtr<CSSStyleValue const> parse_white_space_shorthand(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_white_space_trim_value(TokenStream<ComponentValue>&);
 
     RefPtr<CSSStyleValue const> parse_list_of_time_values(PropertyID, TokenStream<ComponentValue>&);

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -708,6 +708,10 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue const>> Parser::parse_css_value
         if (auto parsed_value = parse_contain_value(tokens); parsed_value && !tokens.has_next_token())
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
+    case PropertyID::WhiteSpace:
+        if (auto parsed_value = parse_white_space_shorthand(tokens); parsed_value && !tokens.has_next_token())
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
     case PropertyID::WhiteSpaceTrim:
         if (auto parsed_value = parse_white_space_trim_value(tokens); parsed_value && !tokens.has_next_token())
             return parsed_value.release_nonnull();
@@ -4819,4 +4823,97 @@ RefPtr<CSSStyleValue const> Parser::parse_white_space_trim_value(TokenStream<Com
     return StyleValueList::create(move(parsed_values), StyleValueList::Separator::Space);
 }
 
+// https://www.w3.org/TR/css-text-4/#white-space-property
+RefPtr<CSSStyleValue const> Parser::parse_white_space_shorthand(TokenStream<ComponentValue>& tokens)
+{
+    // normal | pre | pre-wrap | pre-line | <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>
+
+    auto transaction = tokens.begin_transaction();
+
+    auto make_whitespace_shorthand = [&](RefPtr<CSSStyleValue const> white_space_collapse, RefPtr<CSSStyleValue const> text_wrap_mode, RefPtr<CSSStyleValue const> white_space_trim) {
+        transaction.commit();
+
+        if (!white_space_collapse)
+            white_space_collapse = property_initial_value(PropertyID::WhiteSpaceCollapse);
+
+        if (!text_wrap_mode)
+            text_wrap_mode = property_initial_value(PropertyID::TextWrapMode);
+
+        if (!white_space_trim)
+            white_space_trim = property_initial_value(PropertyID::WhiteSpaceTrim);
+
+        return ShorthandStyleValue::create(
+            PropertyID::WhiteSpace,
+            { PropertyID::WhiteSpaceCollapse, PropertyID::TextWrapMode, PropertyID::WhiteSpaceTrim },
+            { white_space_collapse.release_nonnull(), text_wrap_mode.release_nonnull(), white_space_trim.release_nonnull() });
+    };
+
+    // normal | pre | pre-wrap | pre-line
+    if (parse_all_as_single_keyword_value(tokens, Keyword::Normal))
+        return make_whitespace_shorthand(CSSKeywordValue::create(Keyword::Collapse), CSSKeywordValue::create(Keyword::Wrap), CSSKeywordValue::create(Keyword::None));
+
+    if (parse_all_as_single_keyword_value(tokens, Keyword::Pre))
+        return make_whitespace_shorthand(CSSKeywordValue::create(Keyword::Preserve), CSSKeywordValue::create(Keyword::Nowrap), CSSKeywordValue::create(Keyword::None));
+
+    if (parse_all_as_single_keyword_value(tokens, Keyword::PreWrap))
+        return make_whitespace_shorthand(CSSKeywordValue::create(Keyword::Preserve), CSSKeywordValue::create(Keyword::Wrap), CSSKeywordValue::create(Keyword::None));
+
+    if (parse_all_as_single_keyword_value(tokens, Keyword::PreLine))
+        return make_whitespace_shorthand(CSSKeywordValue::create(Keyword::PreserveBreaks), CSSKeywordValue::create(Keyword::Wrap), CSSKeywordValue::create(Keyword::None));
+
+    // <'white-space-collapse'> || <'text-wrap-mode'> || <'white-space-trim'>
+    RefPtr<CSSStyleValue const> white_space_collapse;
+    RefPtr<CSSStyleValue const> text_wrap_mode;
+    RefPtr<CSSStyleValue const> white_space_trim;
+
+    while (tokens.has_next_token()) {
+        if (auto value = parse_css_value_for_property(PropertyID::WhiteSpaceCollapse, tokens)) {
+            if (white_space_collapse)
+                return {};
+            white_space_collapse = value;
+            continue;
+        }
+
+        if (auto value = parse_css_value_for_property(PropertyID::TextWrapMode, tokens)) {
+            if (text_wrap_mode)
+                return {};
+            text_wrap_mode = value;
+            continue;
+        }
+
+        Vector<ComponentValue> white_space_trim_component_values;
+
+        while (true) {
+            auto peek_token = tokens.next_token();
+
+            if (!peek_token.is(Token::Type::Ident)) {
+                break;
+            }
+
+            auto keyword = keyword_from_string(peek_token.token().ident());
+
+            if (!keyword.has_value() || !property_accepts_keyword(PropertyID::WhiteSpaceTrim, keyword.value())) {
+                break;
+            }
+
+            white_space_trim_component_values.append(tokens.consume_a_token());
+        }
+
+        if (!white_space_trim_component_values.is_empty()) {
+            auto white_space_trim_token_stream = TokenStream { white_space_trim_component_values };
+
+            if (auto value = parse_white_space_trim_value(white_space_trim_token_stream)) {
+                if (white_space_trim)
+                    return {};
+                white_space_trim = value;
+                continue;
+            }
+        }
+
+        return {};
+    }
+
+    return make_whitespace_shorthand(white_space_collapse, text_wrap_mode, white_space_trim);
+}
+
 }

Libraries/LibWeb/CSS/Properties.json

@@ -3127,11 +3127,15 @@
     ]
   },
   "white-space": {
-    "animation-type": "discrete",
-    "inherited": true,
+    "inherited": false,
     "initial": "normal",
     "valid-types": [
       "white-space"
+    ],
+    "longhands": [
+      "white-space-collapse",
+      "text-wrap-mode",
+      "white-space-trim"
     ]
   },
   "white-space-collapse": {

Libraries/LibWeb/CSS/StyleValues/ShorthandStyleValue.cpp

@@ -61,6 +61,38 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
     if (all_same_keyword && built_in_keyword.has_value())
         return m_properties.values.first()->to_string(mode);
 
+    auto default_to_string = [&]() {
+        auto all_properties_same_value = true;
+        auto first_property_value = m_properties.values.first();
+        for (auto i = 1u; i < m_properties.values.size(); ++i) {
+            if (m_properties.values[i] != first_property_value) {
+                all_properties_same_value = false;
+                break;
+            }
+        }
+        if (all_properties_same_value)
+            return first_property_value->to_string(mode);
+
+        StringBuilder builder;
+        auto first = true;
+        for (size_t i = 0; i < m_properties.values.size(); ++i) {
+            auto value = m_properties.values[i];
+            auto value_string = value->to_string(mode);
+            auto initial_value_string = property_initial_value(m_properties.sub_properties[i])->to_string(mode);
+            if (value_string == initial_value_string)
+                continue;
+            if (first)
+                first = false;
+            else
+                builder.append(' ');
+            builder.append(value->to_string(mode));
+        }
+        if (builder.is_empty())
+            return m_properties.values.first()->to_string(mode);
+
+        return MUST(builder.to_string());
+    };
+
     // Then special cases
     switch (m_properties.shorthand_property) {
     case PropertyID::Background: {
@@ -402,36 +434,34 @@ String ShorthandStyleValue::to_string(SerializationMode mode) const
 
         return builder.to_string_without_validation();
     }
+    case PropertyID::WhiteSpace: {
+        auto white_space_collapse_property = longhand(PropertyID::WhiteSpaceCollapse);
+        auto text_wrap_mode_property = longhand(PropertyID::TextWrapMode);
+        auto white_space_trim_property = longhand(PropertyID::WhiteSpaceTrim);
+
+        RefPtr<CSSStyleValue const> value;
+
+        if (white_space_trim_property->is_keyword() && white_space_trim_property->as_keyword().keyword() == Keyword::None) {
+            auto white_space_collapse_keyword = white_space_collapse_property->as_keyword().keyword();
+            auto text_wrap_mode_keyword = text_wrap_mode_property->as_keyword().keyword();
+
+            if (white_space_collapse_keyword == Keyword::Collapse && text_wrap_mode_keyword == Keyword::Wrap)
+                return "normal"_string;
+
+            if (white_space_collapse_keyword == Keyword::Preserve && text_wrap_mode_keyword == Keyword::Nowrap)
+                return "pre"_string;
+
+            if (white_space_collapse_keyword == Keyword::Preserve && text_wrap_mode_keyword == Keyword::Wrap)
+                return "pre-wrap"_string;
+
+            if (white_space_collapse_keyword == Keyword::PreserveBreaks && text_wrap_mode_keyword == Keyword::Wrap)
+                return "pre-line"_string;
+        }
+
+        return default_to_string();
+    }
     default:
-        auto all_properties_same_value = true;
-        auto first_property_value = m_properties.values.first();
-        for (auto i = 1u; i < m_properties.values.size(); ++i) {
-            if (m_properties.values[i] != first_property_value) {
-                all_properties_same_value = false;
-                break;
-            }
-        }
-        if (all_properties_same_value)
-            return first_property_value->to_string(mode);
-
-        StringBuilder builder;
-        auto first = true;
-        for (size_t i = 0; i < m_properties.values.size(); ++i) {
-            auto value = m_properties.values[i];
-            auto value_string = value->to_string(mode);
-            auto initial_value_string = property_initial_value(m_properties.sub_properties[i])->to_string(mode);
-            if (value_string == initial_value_string)
-                continue;
-            if (first)
-                first = false;
-            else
-                builder.append(' ');
-            builder.append(value->to_string(mode));
-        }
-        if (builder.is_empty())
-            return m_properties.values.first()->to_string(mode);
-
-        return MUST(builder.to_string());
+        return default_to_string();
     }
 }