LibWeb: Add remaining CSS AttributeMatchTypes

This adds:
- ContainsString     [att*=val]
- StartsWithSegment  [att|=val]
- StartsWithString   [att^=val]
- EndsWithString     [att$=val]

Renamed AttributeMatchType::Contains to ::ContainsWord for clarity.

5 files changed, 38 insertions, 10 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/Parser/DeprecatedCSSParser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/DeprecatedCSSParser.cpp
index 6de38c9d98..18b6bfc8f5 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/DeprecatedCSSParser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/DeprecatedCSSParser.cpp
@@ -478,7 +478,7 @@ public:
                         attribute_match_type = CSS::Selector::SimpleSelector::AttributeMatchType::ExactValueMatch;
                     } else if (ch == '~') {
                         consume_one();
-                        attribute_match_type = CSS::Selector::SimpleSelector::AttributeMatchType::Contains;
+                        attribute_match_type = CSS::Selector::SimpleSelector::AttributeMatchType::ContainsWord;
                     }
                     attribute_name = String::copy(buffer);
                     buffer.clear();
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
index fa945f30a6..aaa3696f7c 100644
--- a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
+++ b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -189,12 +189,12 @@ Vector<CSS::Selector::ComplexSelector> Parser::parse_selectors(Vector<StyleCompo
                 }
 
                 if (delim_part.token().delim() == "~") {
-                    simple_selector.attribute_match_type = CSS::Selector::SimpleSelector::AttributeMatchType::Contains;
+                    simple_selector.attribute_match_type = CSS::Selector::SimpleSelector::AttributeMatchType::ContainsWord;
                     attribute_index++;
                 }
 
                 if (delim_part.token().delim() == "|") {
-                    simple_selector.attribute_match_type = CSS::Selector::SimpleSelector::AttributeMatchType::StartsWith;
+                    simple_selector.attribute_match_type = CSS::Selector::SimpleSelector::AttributeMatchType::StartsWithSegment;
                     attribute_index++;
                 }
             }
diff --git a/Userland/Libraries/LibWeb/CSS/Selector.h b/Userland/Libraries/LibWeb/CSS/Selector.h
index 682a2fb18c..2e724307f9 100644
--- a/Userland/Libraries/LibWeb/CSS/Selector.h
+++ b/Userland/Libraries/LibWeb/CSS/Selector.h
@@ -60,8 +60,11 @@ public:
             None,
             HasAttribute,
             ExactValueMatch,
-            Contains,
-            StartsWith,
+            ContainsWord,      // [att~=val]
+            ContainsString,    // [att*=val]
+            StartsWithSegment, // [att|=val]
+            StartsWithString,  // [att^=val]
+            EndsWithString,    // [att$=val]
         };
 
         AttributeMatchType attribute_match_type { AttributeMatchType::None };
diff --git a/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp b/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
index 99916b6303..ccbaf1712d 100644
--- a/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
+++ b/Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
@@ -180,10 +180,26 @@ static bool matches(const CSS::Selector::SimpleSelector& component, const DOM::E
         if (element.attribute(component.attribute_name) != component.attribute_value)
             return false;
         break;
-    case CSS::Selector::SimpleSelector::AttributeMatchType::Contains:
+    case CSS::Selector::SimpleSelector::AttributeMatchType::ContainsWord:
         if (!element.attribute(component.attribute_name).split(' ').contains_slow(component.attribute_value))
             return false;
         break;
+    case CSS::Selector::SimpleSelector::AttributeMatchType::ContainsString:
+        if (!element.attribute(component.attribute_name).contains(component.attribute_value))
+            return false;
+        break;
+    case CSS::Selector::SimpleSelector::AttributeMatchType::StartsWithSegment:
+        if (element.attribute(component.attribute_name).split('-').first() != component.attribute_value)
+            return false;
+        break;
+    case CSS::Selector::SimpleSelector::AttributeMatchType::StartsWithString:
+        if (!element.attribute(component.attribute_name).starts_with(component.attribute_value))
+            return false;
+        break;
+    case CSS::Selector::SimpleSelector::AttributeMatchType::EndsWithString:
+        if (!element.attribute(component.attribute_name).ends_with(component.attribute_value))
+            return false;
+        break;
     default:
         break;
     }
diff --git a/Userland/Libraries/LibWeb/Dump.cpp b/Userland/Libraries/LibWeb/Dump.cpp
index 0b4bb29d12..99b6217cb0 100644
--- a/Userland/Libraries/LibWeb/Dump.cpp
+++ b/Userland/Libraries/LibWeb/Dump.cpp
@@ -325,11 +325,20 @@ void dump_selector(StringBuilder& builder, const CSS::Selector& selector)
             case CSS::Selector::SimpleSelector::AttributeMatchType::ExactValueMatch:
                 attribute_match_type_description = "ExactValueMatch";
                 break;
-            case CSS::Selector::SimpleSelector::AttributeMatchType::Contains:
-                attribute_match_type_description = "Contains";
+            case CSS::Selector::SimpleSelector::AttributeMatchType::ContainsWord:
+                attribute_match_type_description = "ContainsWord";
                 break;
-            case CSS::Selector::SimpleSelector::AttributeMatchType::StartsWith:
-                attribute_match_type_description = "StartsWith";
+            case CSS::Selector::SimpleSelector::AttributeMatchType::ContainsString:
+                attribute_match_type_description = "ContainsString";
+                break;
+            case CSS::Selector::SimpleSelector::AttributeMatchType::StartsWithSegment:
+                attribute_match_type_description = "StartsWithSegment";
+                break;
+            case CSS::Selector::SimpleSelector::AttributeMatchType::StartsWithString:
+                attribute_match_type_description = "StartsWithString";
+                break;
+            case CSS::Selector::SimpleSelector::AttributeMatchType::EndsWithString:
+                attribute_match_type_description = "EndsWithString";
                 break;
             }