LibWeb: Rename "identifier" and "ValueID" to "Keyword" where correct

For a long time, we've used two terms, inconsistently:
- "Identifier" is a spec term, but refers to a sequence of alphanumeric
  characters, which may or may not be a keyword. (Keywords are a
  subset of all identifiers.)
- "ValueID" is entirely non-spec, and is directly called a "keyword" in
  the CSS specs.

So to avoid confusion as much as possible, let's align with the spec
terminology. I've attempted to change variable names as well, but
obviously we use Keywords in a lot of places in LibWeb and so I may
have missed some.

One exception is that I've not renamed "valid-identifiers" in
Properties.json... I'd like to combine that and the "valid-types" array
together eventually, so there's no benefit to doing an extra rename
now.

Meta/CMake/libweb_generators.cmake

@@ -56,12 +56,12 @@ function (generate_css_implementation)
     )
 
     invoke_generator(
-        "ValueID.cpp"
+        "Keyword.cpp"
-        Lagom::GenerateCSSValueID
+        Lagom::GenerateCSSKeyword
-        "${LIBWEB_INPUT_FOLDER}/CSS/Identifiers.json"
+        "${LIBWEB_INPUT_FOLDER}/CSS/Keywords.json"
-        "CSS/ValueID.h"
+        "CSS/Keyword.h"
-        "CSS/ValueID.cpp"
+        "CSS/Keyword.cpp"
-        arguments -j "${LIBWEB_INPUT_FOLDER}/CSS/Identifiers.json"
+        arguments -j "${LIBWEB_INPUT_FOLDER}/CSS/Keywords.json"
     )
 
     embed_as_string_view(
@@ -99,12 +99,12 @@ function (generate_css_implementation)
     if (ENABLE_INSTALL_HEADERS)
         set(CSS_GENERATED_TO_INSTALL
             "CSS/Enums.h"
+            "CSS/Keyword.h"
             "CSS/MathFunctions.h"
             "CSS/MediaFeatureID.h"
             "CSS/PropertyID.h"
             "CSS/PseudoClass.h"
             "CSS/TransformFunctions.h"
-            "CSS/ValueID.h"
         )
         list(TRANSFORM CSS_GENERATED_TO_INSTALL PREPEND "${CMAKE_CURRENT_BINARY_DIR}/")
         install(FILES ${CSS_GENERATED_TO_INSTALL} DESTINATION "${CMAKE_INSTALL_INCLUDEDIR}/LibWeb/CSS")

Meta/Lagom/Tools/CodeGenerators/LibWeb/CMakeLists.txt

@@ -1,12 +1,12 @@
 set(SOURCES "") # avoid pulling SOURCES from parent scope
 
 lagom_tool(GenerateCSSEnums                 SOURCES GenerateCSSEnums.cpp LIBS LibMain)
+lagom_tool(GenerateCSSKeyword               SOURCES GenerateCSSKeyword.cpp LIBS LibMain)
 lagom_tool(GenerateCSSMathFunctions         SOURCES GenerateCSSMathFunctions.cpp LIBS LibMain)
 lagom_tool(GenerateCSSMediaFeatureID        SOURCES GenerateCSSMediaFeatureID.cpp LIBS LibMain)
 lagom_tool(GenerateCSSPropertyID            SOURCES GenerateCSSPropertyID.cpp LIBS LibMain)
 lagom_tool(GenerateCSSPseudoClass           SOURCES GenerateCSSPseudoClass.cpp LIBS LibMain)
 lagom_tool(GenerateCSSTransformFunctions    SOURCES GenerateCSSTransformFunctions.cpp LIBS LibMain)
-lagom_tool(GenerateCSSValueID               SOURCES GenerateCSSValueID.cpp LIBS LibMain)
 lagom_tool(GenerateWindowOrWorkerInterfaces SOURCES GenerateWindowOrWorkerInterfaces.cpp LIBS LibMain LibIDL)
 lagom_tool(GenerateAriaRoles                SOURCES GenerateAriaRoles.cpp LIBS LibMain)
 

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateAriaRoles.cpp

@@ -366,15 +366,15 @@ ErrorOr<int> serenity_main(Main::Arguments arguments)
 {
     StringView generated_header_path;
     StringView generated_implementation_path;
-    StringView identifiers_json_path;
+    StringView json_path;
 
     Core::ArgsParser args_parser;
     args_parser.add_option(generated_header_path, "Path to the TransformFunctions header file to generate", "generated-header-path", 'h', "generated-header-path");
     args_parser.add_option(generated_implementation_path, "Path to the TransformFunctions implementation file to generate", "generated-implementation-path", 'c', "generated-implementation-path");
-    args_parser.add_option(identifiers_json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
+    args_parser.add_option(json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
     args_parser.parse(arguments);
 
-    auto json = TRY(read_entire_file_as_json(identifiers_json_path));
+    auto json = TRY(read_entire_file_as_json(json_path));
     VERIFY(json.is_object());
     auto roles_data = json.as_object();
 

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSEnums.cpp

@@ -17,15 +17,15 @@ ErrorOr<int> serenity_main(Main::Arguments arguments)
 {
     StringView generated_header_path;
     StringView generated_implementation_path;
-    StringView identifiers_json_path;
+    StringView json_path;
 
     Core::ArgsParser args_parser;
     args_parser.add_option(generated_header_path, "Path to the Enums header file to generate", "generated-header-path", 'h', "generated-header-path");
     args_parser.add_option(generated_implementation_path, "Path to the Enums implementation file to generate", "generated-implementation-path", 'c', "generated-implementation-path");
-    args_parser.add_option(identifiers_json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
+    args_parser.add_option(json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
     args_parser.parse(arguments);
 
-    auto json = TRY(read_entire_file_as_json(identifiers_json_path));
+    auto json = TRY(read_entire_file_as_json(json_path));
     VERIFY(json.is_object());
     auto enums_data = json.as_object();
 
@@ -50,7 +50,7 @@ ErrorOr<void> generate_header_file(JsonObject& enums_data, Core::File& file)
 
 namespace Web::CSS {
 
-enum class ValueID;
+enum class Keyword;
 
 )~~~");
 
@@ -87,8 +87,8 @@ enum class ValueID;
         }
 
         enum_generator.appendln("};");
-        enum_generator.appendln("Optional<@name:titlecase@> value_id_to_@name:snakecase@(ValueID);");
+        enum_generator.appendln("Optional<@name:titlecase@> keyword_to_@name:snakecase@(Keyword);");
-        enum_generator.appendln("ValueID to_value_id(@name:titlecase@);");
+        enum_generator.appendln("Keyword to_keyword(@name:titlecase@);");
         enum_generator.appendln("StringView to_string(@name:titlecase@);");
         enum_generator.append("\n");
     });
@@ -106,7 +106,7 @@ ErrorOr<void> generate_implementation_file(JsonObject& enums_data, Core::File& f
 
     generator.append(R"~~~(
 #include <LibWeb/CSS/Enums.h>
-#include <LibWeb/CSS/ValueID.h>
+#include <LibWeb/CSS/Keyword.h>
 
 namespace Web::CSS {
 )~~~");
@@ -120,9 +120,9 @@ namespace Web::CSS {
         enum_generator.set("name:snakecase", snake_casify(name));
 
         enum_generator.append(R"~~~(
-Optional<@name:titlecase@> value_id_to_@name:snakecase@(ValueID value_id)
+Optional<@name:titlecase@> keyword_to_@name:snakecase@(Keyword keyword)
 {
-    switch (value_id) {)~~~");
+    switch (keyword) {)~~~");
 
         for (auto& member : members.values()) {
             auto member_generator = enum_generator.fork();
@@ -136,7 +136,7 @@ Optional<@name:titlecase@> value_id_to_@name:snakecase@(ValueID value_id)
                 member_generator.set("member:titlecase", title_casify(member_name));
             }
             member_generator.append(R"~~~(
-    case ValueID::@valueid:titlecase@:
+    case Keyword::@valueid:titlecase@:
         return @name:titlecase@::@member:titlecase@;)~~~");
         }
 
@@ -148,7 +148,7 @@ Optional<@name:titlecase@> value_id_to_@name:snakecase@(ValueID value_id)
 )~~~");
 
         enum_generator.append(R"~~~(
-ValueID to_value_id(@name:titlecase@ @name:snakecase@_value)
+Keyword to_keyword(@name:titlecase@ @name:snakecase@_value)
 {
     switch (@name:snakecase@_value) {)~~~");
 
@@ -161,7 +161,7 @@ ValueID to_value_id(@name:titlecase@ @name:snakecase@_value)
 
             member_generator.append(R"~~~(
     case @name:titlecase@::@member:titlecase@:
-        return ValueID::@member:titlecase@;)~~~");
+        return Keyword::@member:titlecase@;)~~~");
         }
 
         enum_generator.append(R"~~~(

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSKeyword.cpp

@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
- * Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
+ * Copyright (c) 2022-2024, Sam Atkins <sam@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -11,35 +11,35 @@
 #include <LibCore/ArgsParser.h>
 #include <LibMain/Main.h>
 
-ErrorOr<void> generate_header_file(JsonArray& identifier_data, Core::File& file);
+ErrorOr<void> generate_header_file(JsonArray& keyword_data, Core::File& file);
-ErrorOr<void> generate_implementation_file(JsonArray& identifier_data, Core::File& file);
+ErrorOr<void> generate_implementation_file(JsonArray& keyword_data, Core::File& file);
 
 ErrorOr<int> serenity_main(Main::Arguments arguments)
 {
     StringView generated_header_path;
     StringView generated_implementation_path;
-    StringView identifiers_json_path;
+    StringView json_path;
 
     Core::ArgsParser args_parser;
-    args_parser.add_option(generated_header_path, "Path to the ValueID header file to generate", "generated-header-path", 'h', "generated-header-path");
+    args_parser.add_option(generated_header_path, "Path to the Keyword header file to generate", "generated-header-path", 'h', "generated-header-path");
-    args_parser.add_option(generated_implementation_path, "Path to the ValueID implementation file to generate", "generated-implementation-path", 'c', "generated-implementation-path");
+    args_parser.add_option(generated_implementation_path, "Path to the Keyword implementation file to generate", "generated-implementation-path", 'c', "generated-implementation-path");
-    args_parser.add_option(identifiers_json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
+    args_parser.add_option(json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
     args_parser.parse(arguments);
 
-    auto json = TRY(read_entire_file_as_json(identifiers_json_path));
+    auto json = TRY(read_entire_file_as_json(json_path));
     VERIFY(json.is_array());
-    auto identifier_data = json.as_array();
+    auto keyword_data = json.as_array();
 
     auto generated_header_file = TRY(Core::File::open(generated_header_path, Core::File::OpenMode::Write));
     auto generated_implementation_file = TRY(Core::File::open(generated_implementation_path, Core::File::OpenMode::Write));
 
-    TRY(generate_header_file(identifier_data, *generated_header_file));
+    TRY(generate_header_file(keyword_data, *generated_header_file));
-    TRY(generate_implementation_file(identifier_data, *generated_implementation_file));
+    TRY(generate_implementation_file(keyword_data, *generated_implementation_file));
 
     return 0;
 }
 
-ErrorOr<void> generate_header_file(JsonArray& identifier_data, Core::File& file)
+ErrorOr<void> generate_header_file(JsonArray& keyword_data, Core::File& file)
 {
     StringBuilder builder;
     SourceGenerator generator { builder };
@@ -51,11 +51,11 @@ ErrorOr<void> generate_header_file(JsonArray& identifier_data, Core::File& file)
 
 namespace Web::CSS {
 
-enum class ValueID {
+enum class Keyword {
     Invalid,
 )~~~");
 
-    identifier_data.for_each([&](auto& name) {
+    keyword_data.for_each([&](auto& name) {
         auto member_generator = generator.fork();
         member_generator.set("name:titlecase", title_casify(name.as_string()));
 
@@ -67,8 +67,8 @@ enum class ValueID {
     generator.append(R"~~~(
 };
 
-Optional<ValueID> value_id_from_string(StringView);
+Optional<Keyword> keyword_from_string(StringView);
-StringView string_from_value_id(ValueID);
+StringView string_from_keyword(Keyword);
 
 // https://www.w3.org/TR/css-values-4/#common-keywords
 // https://drafts.csswg.org/css-cascade-4/#valdef-all-revert
@@ -88,7 +88,7 @@ inline bool is_css_wide_keyword(StringView name)
     return {};
 }
 
-ErrorOr<void> generate_implementation_file(JsonArray& identifier_data, Core::File& file)
+ErrorOr<void> generate_implementation_file(JsonArray& keyword_data, Core::File& file)
 {
     StringBuilder builder;
     SourceGenerator generator { builder };
@@ -96,47 +96,47 @@ ErrorOr<void> generate_implementation_file(JsonArray& identifier_data, Core::Fil
     generator.append(R"~~~(
 #include <AK/Assertions.h>
 #include <AK/HashMap.h>
-#include <LibWeb/CSS/ValueID.h>
+#include <LibWeb/CSS/Keyword.h>
 
 namespace Web::CSS {
 
-HashMap<StringView, ValueID, AK::CaseInsensitiveASCIIStringViewTraits> g_stringview_to_value_id_map {
+HashMap<StringView, Keyword, AK::CaseInsensitiveASCIIStringViewTraits> g_stringview_to_keyword_map {
 )~~~");
 
-    identifier_data.for_each([&](auto& name) {
+    keyword_data.for_each([&](auto& name) {
         auto member_generator = generator.fork();
         member_generator.set("name", name.as_string());
         member_generator.set("name:titlecase", title_casify(name.as_string()));
         member_generator.append(R"~~~(
-    {"@name@"sv, ValueID::@name:titlecase@},
+    {"@name@"sv, Keyword::@name:titlecase@},
 )~~~");
     });
 
     generator.append(R"~~~(
 };
 
-Optional<ValueID> value_id_from_string(StringView string)
+Optional<Keyword> keyword_from_string(StringView string)
 {
-    return g_stringview_to_value_id_map.get(string);
+    return g_stringview_to_keyword_map.get(string);
 }
 
-StringView string_from_value_id(ValueID value_id) {
+StringView string_from_keyword(Keyword keyword) {
-    switch (value_id) {
+    switch (keyword) {
 )~~~");
 
-    identifier_data.for_each([&](auto& name) {
+    keyword_data.for_each([&](auto& name) {
         auto member_generator = generator.fork();
         member_generator.set("name", name.as_string());
         member_generator.set("name:titlecase", title_casify(name.as_string()));
         member_generator.append(R"~~~(
-    case ValueID::@name:titlecase@:
+    case Keyword::@name:titlecase@:
         return "@name@"sv;
         )~~~");
     });
 
     generator.append(R"~~~(
     default:
-        return "(invalid CSS::ValueID)"sv;
+        return "(invalid CSS::Keyword)"sv;
     }
 }
 

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSMathFunctions.cpp

@@ -109,11 +109,11 @@ static Optional<RoundingStrategy> parse_rounding_strategy(Vector<ComponentValue>
     if (stream.has_next_token())
         return {};
 
-    auto maybe_identifier = value_id_from_string(ident.token().ident());
+    auto maybe_keyword = keyword_from_string(ident.token().ident());
-    if (!maybe_identifier.has_value())
+    if (!maybe_keyword.has_value())
         return {};
 
-    return value_id_to_rounding_strategy(maybe_identifier.value());
+    return keyword_to_rounding_strategy(maybe_keyword.value());
 }
 
 OwnPtr<CalculationNode> Parser::parse_math_function(PropertyID property_id, Function const& function)
@@ -357,15 +357,15 @@ ErrorOr<int> serenity_main(Main::Arguments arguments)
 {
     StringView generated_header_path;
     StringView generated_implementation_path;
-    StringView identifiers_json_path;
+    StringView json_path;
 
     Core::ArgsParser args_parser;
     args_parser.add_option(generated_header_path, "Path to the MathFunctions header file to generate", "generated-header-path", 'h', "generated-header-path");
     args_parser.add_option(generated_implementation_path, "Path to the MathFunctions implementation file to generate", "generated-implementation-path", 'c', "generated-implementation-path");
-    args_parser.add_option(identifiers_json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
+    args_parser.add_option(json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
     args_parser.parse(arguments);
 
-    auto json = TRY(read_entire_file_as_json(identifiers_json_path));
+    auto json = TRY(read_entire_file_as_json(json_path));
     VERIFY(json.is_object());
     auto math_functions_data = json.as_object();
 

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSMediaFeatureID.cpp

@@ -46,7 +46,7 @@ ErrorOr<void> generate_header_file(JsonObject& media_feature_data, Core::File& f
 
 #include <AK/StringView.h>
 #include <AK/Traits.h>
-#include <LibWeb/CSS/ValueID.h>
+#include <LibWeb/CSS/Keyword.h>
 
 namespace Web::CSS {
 
@@ -75,7 +75,7 @@ StringView string_from_media_feature_id(MediaFeatureID);
 
 bool media_feature_type_is_range(MediaFeatureID);
 bool media_feature_accepts_type(MediaFeatureID, MediaFeatureValueType);
-bool media_feature_accepts_identifier(MediaFeatureID, ValueID);
+bool media_feature_accepts_keyword(MediaFeatureID, Keyword);
 
 }
 )~~~");
@@ -181,7 +181,7 @@ bool media_feature_accepts_type(MediaFeatureID media_feature_id, MediaFeatureVal
             for (auto& type : values_array.values()) {
                 VERIFY(type.is_string());
                 auto type_name = type.as_string();
-                // Skip identifiers.
+                // Skip keywords.
                 if (type_name[0] != '<')
                     continue;
                 if (type_name == "<mq-boolean>") {
@@ -231,7 +231,7 @@ bool media_feature_accepts_type(MediaFeatureID media_feature_id, MediaFeatureVal
     VERIFY_NOT_REACHED();
 }
 
-bool media_feature_accepts_identifier(MediaFeatureID media_feature_id, ValueID identifier)
+bool media_feature_accepts_keyword(MediaFeatureID media_feature_id, Keyword keyword)
 {
     switch (media_feature_id) {)~~~");
 
@@ -244,34 +244,34 @@ bool media_feature_accepts_identifier(MediaFeatureID media_feature_id, ValueID i
         member_generator.append(R"~~~(
     case MediaFeatureID::@name:titlecase@:)~~~");
 
-        bool have_output_identifier_switch = false;
+        bool have_output_keyword_switch = false;
         if (feature.has("values"sv)) {
-            auto append_identifier_switch_if_needed = [&] {
+            auto append_keyword_switch_if_needed = [&] {
-                if (!have_output_identifier_switch) {
+                if (!have_output_keyword_switch) {
                     member_generator.append(R"~~~(
-        switch (identifier) {)~~~");
+        switch (keyword) {)~~~");
                 }
-                have_output_identifier_switch = true;
+                have_output_keyword_switch = true;
             };
             auto values = feature.get_array("values"sv);
             VERIFY(values.has_value());
             auto& values_array = values.value();
-            for (auto& identifier : values_array.values()) {
+            for (auto& keyword : values_array.values()) {
-                VERIFY(identifier.is_string());
+                VERIFY(keyword.is_string());
-                auto identifier_name = identifier.as_string();
+                auto keyword_name = keyword.as_string();
                 // Skip types.
-                if (identifier_name[0] == '<')
+                if (keyword_name[0] == '<')
                     continue;
-                append_identifier_switch_if_needed();
+                append_keyword_switch_if_needed();
 
-                auto ident_generator = member_generator.fork();
+                auto keyword_generator = member_generator.fork();
-                ident_generator.set("identifier:titlecase", title_casify(identifier_name));
+                keyword_generator.set("keyword:titlecase", title_casify(keyword_name));
-                ident_generator.append(R"~~~(
+                keyword_generator.append(R"~~~(
-        case ValueID::@identifier:titlecase@:
+        case Keyword::@keyword:titlecase@:
             return true;)~~~");
             }
         }
-        if (have_output_identifier_switch) {
+        if (have_output_keyword_switch) {
             member_generator.append(R"~~~(
         default:
             return false;

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPropertyID.cpp

@@ -223,7 +223,7 @@ enum class ValueType {
     Url,
 };
 bool property_accepts_type(PropertyID, ValueType);
-bool property_accepts_identifier(PropertyID, ValueID);
+bool property_accepts_keyword(PropertyID, Keyword);
 Optional<ValueType> property_resolves_percentages_relative_to(PropertyID);
 
 // These perform range-checking, but are also safe to call with properties that don't accept that type. (They'll just return false.)
@@ -811,7 +811,7 @@ bool property_accepts_type(PropertyID property_id, ValueType value_type)
     }
 }
 
-bool property_accepts_identifier(PropertyID property_id, ValueID identifier)
+bool property_accepts_keyword(PropertyID property_id, Keyword keyword)
 {
     switch (property_id) {
 )~~~");
@@ -824,12 +824,12 @@ bool property_accepts_identifier(PropertyID property_id, ValueID identifier)
         property_generator.appendln("    case PropertyID::@name:titlecase@: {");
 
         if (auto maybe_valid_identifiers = object.get_array("valid-identifiers"sv); maybe_valid_identifiers.has_value() && !maybe_valid_identifiers->is_empty()) {
-            property_generator.appendln("        switch (identifier) {");
+            property_generator.appendln("        switch (keyword) {");
             auto& valid_identifiers = maybe_valid_identifiers.value();
-            for (auto& identifier : valid_identifiers.values()) {
+            for (auto& keyword : valid_identifiers.values()) {
-                auto identifier_generator = generator.fork();
+                auto keyword_generator = generator.fork();
-                identifier_generator.set("identifier:titlecase", title_casify(identifier.as_string()));
+                keyword_generator.set("keyword:titlecase", title_casify(keyword.as_string()));
-                identifier_generator.appendln("        case ValueID::@identifier:titlecase@:");
+                keyword_generator.appendln("        case Keyword::@keyword:titlecase@:");
             }
             property_generator.append(R"~~~(
             return true;
@@ -849,7 +849,7 @@ bool property_accepts_identifier(PropertyID property_id, ValueID identifier)
                 auto type_generator = generator.fork();
                 type_generator.set("type_name:snakecase", snake_casify(type_name));
                 type_generator.append(R"~~~(
-        if (value_id_to_@type_name:snakecase@(identifier).has_value())
+        if (keyword_to_@type_name:snakecase@(keyword).has_value())
             return true;
 )~~~");
             }

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSPseudoClass.cpp

@@ -16,15 +16,15 @@ ErrorOr<int> serenity_main(Main::Arguments arguments)
 {
     StringView generated_header_path;
     StringView generated_implementation_path;
-    StringView identifiers_json_path;
+    StringView json_path;
 
     Core::ArgsParser args_parser;
     args_parser.add_option(generated_header_path, "Path to the PseudoClasses header file to generate", "generated-header-path", 'h', "generated-header-path");
     args_parser.add_option(generated_implementation_path, "Path to the PseudoClasses implementation file to generate", "generated-implementation-path", 'c', "generated-implementation-path");
-    args_parser.add_option(identifiers_json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
+    args_parser.add_option(json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
     args_parser.parse(arguments);
 
-    auto json = TRY(read_entire_file_as_json(identifiers_json_path));
+    auto json = TRY(read_entire_file_as_json(json_path));
     VERIFY(json.is_object());
     auto data = json.as_object();
 

Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSTransformFunctions.cpp

@@ -18,15 +18,15 @@ ErrorOr<int> serenity_main(Main::Arguments arguments)
 {
     StringView generated_header_path;
     StringView generated_implementation_path;
-    StringView identifiers_json_path;
+    StringView json_path;
 
     Core::ArgsParser args_parser;
     args_parser.add_option(generated_header_path, "Path to the TransformFunctions header file to generate", "generated-header-path", 'h', "generated-header-path");
     args_parser.add_option(generated_implementation_path, "Path to the TransformFunctions implementation file to generate", "generated-implementation-path", 'c', "generated-implementation-path");
-    args_parser.add_option(identifiers_json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
+    args_parser.add_option(json_path, "Path to the JSON file to read from", "json-path", 'j', "json-path");
     args_parser.parse(arguments);
 
-    auto json = TRY(read_entire_file_as_json(identifiers_json_path));
+    auto json = TRY(read_entire_file_as_json(json_path));
     VERIFY(json.is_object());
     auto transforms_data = json.as_object();
 

Meta/gn/secondary/Meta/Lagom/Tools/CodeGenerators/LibWeb/BUILD.gn

@@ -60,8 +60,8 @@ lagom_tool("GenerateCSSTransformFunctions") {
   ]
 }
 
-lagom_tool("GenerateCSSValueID") {
+lagom_tool("GenerateCSSKeyword") {
-  sources = [ "GenerateCSSValueID.cpp" ]
+  sources = [ "GenerateCSSKeyword.cpp" ]
   deps = [
     ":headers",
     "//Userland/Libraries/LibMain",

Meta/gn/secondary/Userland/Libraries/LibWeb/BUILD.gn

@@ -203,12 +203,12 @@ compiled_action("generate_css_transform_functions") {
   ]
 }
 
-compiled_action("generate_css_value_id") {
+compiled_action("generate_css_keyword") {
-  tool = "//Meta/Lagom/Tools/CodeGenerators/LibWeb:GenerateCSSValueID"
+  tool = "//Meta/Lagom/Tools/CodeGenerators/LibWeb:GenerateCSSKeyword"
-  inputs = [ "CSS/Identifiers.json" ]
+  inputs = [ "CSS/Keywords.json" ]
   outputs = [
-    "$target_gen_dir/CSS/ValueID.h",
+    "$target_gen_dir/CSS/Keyword.h",
-    "$target_gen_dir/CSS/ValueID.cpp",
+    "$target_gen_dir/CSS/Keyword.cpp",
   ]
   args = [
     "-h",
@@ -254,12 +254,12 @@ source_set("all_generated") {
     ":WebWorkerServerEndpoint",
     ":generate_aria_roles",
     ":generate_css_enums",
+    ":generate_css_keyword",
     ":generate_css_math_functions",
     ":generate_css_media_feature_id",
     ":generate_css_property_id",
     ":generate_css_pseudo_class",
     ":generate_css_transform_functions",
-    ":generate_css_value_id",
     ":generate_default_stylesheet_source",
     ":generate_mathml_stylesheet_source",
     ":generate_quirks_mode_stylesheet_source",

Tests/LibWeb/TestCSSIDSpeed.cpp

@@ -6,22 +6,22 @@
 
 #include <LibTest/TestCase.h>
 
-#include <LibWeb/CSS/ValueID.h>
+#include <LibWeb/CSS/Keyword.h>
 
 TEST_CASE(basic)
 {
-    EXPECT_EQ(Web::CSS::value_id_from_string("italic"sv).value(), Web::CSS::ValueID::Italic);
+    EXPECT_EQ(Web::CSS::keyword_from_string("italic"sv).value(), Web::CSS::Keyword::Italic);
-    EXPECT_EQ(Web::CSS::value_id_from_string("inline"sv).value(), Web::CSS::ValueID::Inline);
+    EXPECT_EQ(Web::CSS::keyword_from_string("inline"sv).value(), Web::CSS::Keyword::Inline);
-    EXPECT_EQ(Web::CSS::value_id_from_string("small"sv).value(), Web::CSS::ValueID::Small);
+    EXPECT_EQ(Web::CSS::keyword_from_string("small"sv).value(), Web::CSS::Keyword::Small);
-    EXPECT_EQ(Web::CSS::value_id_from_string("smalL"sv).value(), Web::CSS::ValueID::Small);
+    EXPECT_EQ(Web::CSS::keyword_from_string("smalL"sv).value(), Web::CSS::Keyword::Small);
-    EXPECT_EQ(Web::CSS::value_id_from_string("SMALL"sv).value(), Web::CSS::ValueID::Small);
+    EXPECT_EQ(Web::CSS::keyword_from_string("SMALL"sv).value(), Web::CSS::Keyword::Small);
-    EXPECT_EQ(Web::CSS::value_id_from_string("Small"sv).value(), Web::CSS::ValueID::Small);
+    EXPECT_EQ(Web::CSS::keyword_from_string("Small"sv).value(), Web::CSS::Keyword::Small);
-    EXPECT_EQ(Web::CSS::value_id_from_string("smALl"sv).value(), Web::CSS::ValueID::Small);
+    EXPECT_EQ(Web::CSS::keyword_from_string("smALl"sv).value(), Web::CSS::Keyword::Small);
 }
 
-BENCHMARK_CASE(value_id_from_string)
+BENCHMARK_CASE(keyword_from_string)
 {
     for (size_t i = 0; i < 10'000'000; ++i) {
-        EXPECT_EQ(Web::CSS::value_id_from_string("inline"sv).value(), Web::CSS::ValueID::Inline);
+        EXPECT_EQ(Web::CSS::keyword_from_string("inline"sv).value(), Web::CSS::Keyword::Inline);
     }
 }

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -755,13 +755,13 @@ set(GENERATED_SOURCES
     ARIA/AriaRoles.cpp
     CSS/DefaultStyleSheetSource.cpp
     CSS/Enums.cpp
+    CSS/Keyword.cpp
     CSS/MathFunctions.cpp
     CSS/MediaFeatureID.cpp
     CSS/PropertyID.cpp
     CSS/PseudoClass.cpp
     CSS/QuirksModeStyleSheetSource.cpp
     CSS/TransformFunctions.cpp
-    CSS/ValueID.cpp
     MathML/MathMLStyleSheetSource.cpp
     SVG/SVGStyleSheetSource.cpp
     Worker/WebWorkerClientEndpoint.h

Userland/Libraries/LibWeb/CSS/CSSStyleValue.cpp

@@ -375,28 +375,28 @@ ValueComparingNonnullRefPtr<CSSStyleValue const> CSSStyleValue::absolutized(CSSP
 
 bool CSSStyleValue::has_auto() const
 {
-    return is_keyword() && as_keyword().id() == ValueID::Auto;
+    return is_keyword() && as_keyword().keyword() == Keyword::Auto;
 }
 
-ValueID CSSStyleValue::to_identifier() const
+Keyword CSSStyleValue::to_keyword() const
 {
     if (is_keyword())
-        return as_keyword().id();
+        return as_keyword().keyword();
-    return ValueID::Invalid;
+    return Keyword::Invalid;
 }
 
 int CSSStyleValue::to_font_weight() const
 {
     if (is_keyword()) {
-        switch (static_cast<CSSKeywordValue const&>(*this).id()) {
+        switch (as_keyword().keyword()) {
-        case CSS::ValueID::Normal:
+        case Keyword::Normal:
             return Gfx::FontWeight::Regular;
-        case CSS::ValueID::Bold:
+        case Keyword::Bold:
             return Gfx::FontWeight::Bold;
-        case CSS::ValueID::Lighter:
+        case Keyword::Lighter:
             // FIXME: This should be relative to the parent.
             return Gfx::FontWeight::Regular;
-        case CSS::ValueID::Bolder:
+        case Keyword::Bolder:
             // FIXME: This should be relative to the parent.
             return Gfx::FontWeight::Bold;
         default:
@@ -418,15 +418,15 @@ int CSSStyleValue::to_font_slope() const
 {
     // FIXME: Implement oblique <angle>
     if (is_keyword()) {
-        switch (static_cast<CSSKeywordValue const&>(*this).id()) {
+        switch (as_keyword().keyword()) {
-        case CSS::ValueID::Italic: {
+        case Keyword::Italic: {
             static int italic_slope = Gfx::name_to_slope("Italic"sv);
             return italic_slope;
         }
-        case CSS::ValueID::Oblique:
+        case Keyword::Oblique:
             static int oblique_slope = Gfx::name_to_slope("Oblique"sv);
             return oblique_slope;
-        case CSS::ValueID::Normal:
+        case Keyword::Normal:
         default:
             break;
         }
@@ -439,32 +439,32 @@ int CSSStyleValue::to_font_stretch_width() const
 {
     int width = Gfx::FontWidth::Normal;
     if (is_keyword()) {
-        switch (static_cast<CSSKeywordValue const&>(*this).id()) {
+        switch (as_keyword().keyword()) {
-        case CSS::ValueID::UltraCondensed:
+        case Keyword::UltraCondensed:
             width = Gfx::FontWidth::UltraCondensed;
             break;
-        case CSS::ValueID::ExtraCondensed:
+        case Keyword::ExtraCondensed:
             width = Gfx::FontWidth::ExtraCondensed;
             break;
-        case CSS::ValueID::Condensed:
+        case Keyword::Condensed:
             width = Gfx::FontWidth::Condensed;
             break;
-        case CSS::ValueID::SemiCondensed:
+        case Keyword::SemiCondensed:
             width = Gfx::FontWidth::SemiCondensed;
             break;
-        case CSS::ValueID::Normal:
+        case Keyword::Normal:
             width = Gfx::FontWidth::Normal;
             break;
-        case CSS::ValueID::SemiExpanded:
+        case Keyword::SemiExpanded:
             width = Gfx::FontWidth::SemiExpanded;
             break;
-        case CSS::ValueID::Expanded:
+        case Keyword::Expanded:
             width = Gfx::FontWidth::Expanded;
             break;
-        case CSS::ValueID::ExtraExpanded:
+        case Keyword::ExtraExpanded:
             width = Gfx::FontWidth::ExtraExpanded;
             break;
-        case CSS::ValueID::UltraExpanded:
+        case Keyword::UltraExpanded:
             width = Gfx::FontWidth::UltraExpanded;
             break;
         default:

Userland/Libraries/LibWeb/CSS/CSSStyleValue.h

@@ -22,8 +22,8 @@
 #include <LibGfx/Color.h>
 #include <LibURL/URL.h>
 #include <LibWeb/CSS/Enums.h>
+#include <LibWeb/CSS/Keyword.h>
 #include <LibWeb/CSS/Length.h>
-#include <LibWeb/CSS/ValueID.h>
 #include <LibWeb/Forward.h>
 
 namespace Web::CSS {
@@ -354,7 +354,7 @@ public:
     virtual ValueComparingNonnullRefPtr<CSSStyleValue const> absolutized(CSSPixelRect const& viewport_rect, Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const;
 
     virtual Color to_color(Optional<Layout::NodeWithStyle const&>) const { return {}; }
-    ValueID to_identifier() const;
+    Keyword to_keyword() const;
     virtual String to_string() const = 0;
 
     [[nodiscard]] int to_font_weight() const;

Userland/Libraries/LibWeb/CSS/MediaQuery.cpp

@@ -25,7 +25,7 @@ NonnullRefPtr<MediaQuery> MediaQuery::create_not_all()
 String MediaFeatureValue::to_string() const
 {
     return m_value.visit(
-        [](ValueID const& ident) { return MUST(String::from_utf8(string_from_value_id(ident))); },
+        [](Keyword const& ident) { return MUST(String::from_utf8(string_from_keyword(ident))); },
         [](Length const& length) { return length.to_string(); },
         [](Ratio const& ratio) { return ratio.to_string(); },
         [](Resolution const& resolution) { return resolution.to_string(); },
@@ -35,7 +35,7 @@ String MediaFeatureValue::to_string() const
 bool MediaFeatureValue::is_same_type(MediaFeatureValue const& other) const
 {
     return m_value.visit(
-        [&](ValueID const&) { return other.is_ident(); },
+        [&](Keyword const&) { return other.is_ident(); },
         [&](Length const&) { return other.is_length(); },
         [&](Ratio const&) { return other.is_ratio(); },
         [&](Resolution const&) { return other.is_resolution(); },
@@ -100,10 +100,10 @@ bool MediaFeature::evaluate(HTML::Window const& window) const
         if (queried_value.is_ident()) {
             // NOTE: It is not technically correct to always treat `no-preference` as false, but every
             //       media-feature that accepts it as a value treats it as false, so good enough. :^)
-            //       If other features gain this property for other identifiers in the future, we can
+            //       If other features gain this property for other keywords in the future, we can
             //       add more robust handling for them then.
-            return queried_value.ident() != ValueID::None
+            return queried_value.ident() != Keyword::None
-                && queried_value.ident() != ValueID::NoPreference;
+                && queried_value.ident() != Keyword::NoPreference;
         }
         return false;
 

Userland/Libraries/LibWeb/CSS/MediaQuery.h

@@ -21,7 +21,7 @@ namespace Web::CSS {
 // https://www.w3.org/TR/mediaqueries-4/#typedef-mf-value
 class MediaFeatureValue {
 public:
-    explicit MediaFeatureValue(ValueID ident)
+    explicit MediaFeatureValue(Keyword ident)
         : m_value(move(ident))
     {
     }
@@ -48,17 +48,17 @@ public:
 
     String to_string() const;
 
-    bool is_ident() const { return m_value.has<ValueID>(); }
+    bool is_ident() const { return m_value.has<Keyword>(); }
     bool is_length() const { return m_value.has<Length>(); }
     bool is_number() const { return m_value.has<float>(); }
     bool is_ratio() const { return m_value.has<Ratio>(); }
     bool is_resolution() const { return m_value.has<Resolution>(); }
     bool is_same_type(MediaFeatureValue const& other) const;
 
-    ValueID const& ident() const
+    Keyword const& ident() const
     {
         VERIFY(is_ident());
-        return m_value.get<ValueID>();
+        return m_value.get<Keyword>();
     }
 
     Length const& length() const
@@ -86,7 +86,7 @@ public:
     }
 
 private:
-    Variant<ValueID, Length, Ratio, Resolution, float> m_value;
+    Variant<Keyword, Length, Ratio, Resolution, float> m_value;
 };
 
 // https://www.w3.org/TR/mediaqueries-4/#mq-features

Userland/Libraries/LibWeb/CSS/Parser/MediaParsing.cpp

@@ -550,10 +550,10 @@ Optional<MediaFeatureValue> Parser::parse_media_feature_value(MediaFeatureID med
     if (tokens.peek_token().is(Token::Type::Ident)) {
         auto transaction = tokens.begin_transaction();
         tokens.skip_whitespace();
-        auto ident = value_id_from_string(tokens.next_token().token().ident());
+        auto keyword = keyword_from_string(tokens.next_token().token().ident());
-        if (ident.has_value() && media_feature_accepts_identifier(media_feature, ident.value())) {
+        if (keyword.has_value() && media_feature_accepts_keyword(media_feature, keyword.value())) {
             transaction.commit();
-            return MediaFeatureValue(ident.value());
+            return MediaFeatureValue(keyword.value());
         }
     }
 

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -2371,14 +2371,14 @@ RefPtr<CSSStyleValue> Parser::parse_number_or_percentage_value(TokenStream<Compo
     return nullptr;
 }
 
-RefPtr<CSSStyleValue> Parser::parse_identifier_value(TokenStream<ComponentValue>& tokens)
+RefPtr<CSSStyleValue> Parser::parse_keyword_value(TokenStream<ComponentValue>& tokens)
 {
     auto peek_token = tokens.peek_token();
     if (peek_token.is(Token::Type::Ident)) {
-        auto value_id = value_id_from_string(peek_token.token().ident());
+        auto keyword = keyword_from_string(peek_token.token().ident());
-        if (value_id.has_value()) {
+        if (keyword.has_value()) {
             (void)tokens.next_token(); // ident
-            return CSSKeywordValue::create(value_id.value());
+            return CSSKeywordValue::create(keyword.value());
         }
     }
 
@@ -3002,9 +3002,9 @@ RefPtr<CSSStyleValue> Parser::parse_color_value(TokenStream<ComponentValue>& tok
         return ColorStyleValue::create(color.value());
 
     auto transaction = tokens.begin_transaction();
-    if (auto identifier = parse_identifier_value(tokens); identifier && identifier->has_color()) {
+    if (auto keyword = parse_keyword_value(tokens); keyword && keyword->has_color()) {
         transaction.commit();
-        return identifier;
+        return keyword;
     }
 
     return nullptr;
@@ -3225,13 +3225,13 @@ RefPtr<CSSStyleValue> Parser::parse_paint_value(TokenStream<ComponentValue>& tok
 
         // NOTE: <color> also accepts identifiers, so we do this identifier check last.
         if (tokens.peek_token().is(Token::Type::Ident)) {
-            auto maybe_ident = value_id_from_string(tokens.peek_token().token().ident());
+            auto maybe_keyword = keyword_from_string(tokens.peek_token().token().ident());
-            if (maybe_ident.has_value()) {
+            if (maybe_keyword.has_value()) {
                 // FIXME: Accept `context-fill` and `context-stroke`
-                switch (*maybe_ident) {
+                switch (*maybe_keyword) {
-                case ValueID::None:
+                case Keyword::None:
                     (void)tokens.next_token();
-                    return CSSKeywordValue::create(*maybe_ident);
+                    return CSSKeywordValue::create(*maybe_keyword);
                 default:
                     return nullptr;
                 }
@@ -3264,10 +3264,10 @@ RefPtr<PositionStyleValue> Parser::parse_position_value(TokenStream<ComponentVal
     auto parse_position_edge = [](ComponentValue const& token) -> Optional<PositionEdge> {
         if (!token.is(Token::Type::Ident))
             return {};
-        auto ident = value_id_from_string(token.token().ident());
+        auto keyword = keyword_from_string(token.token().ident());
-        if (!ident.has_value())
+        if (!keyword.has_value())
             return {};
-        return value_id_to_position_edge(*ident);
+        return keyword_to_position_edge(*keyword);
     };
 
     auto parse_length_percentage = [&](ComponentValue const& token) -> Optional<LengthPercentage> {
@@ -3626,7 +3626,7 @@ RefPtr<CSSStyleValue> Parser::parse_all_as_single_none_value(TokenStream<Compone
         return {};
 
     transaction.commit();
-    return CSSKeywordValue::create(ValueID::None);
+    return CSSKeywordValue::create(Keyword::None);
 }
 
 static void remove_property(Vector<PropertyID>& properties, PropertyID property_to_remove)
@@ -3654,7 +3654,7 @@ RefPtr<CSSStyleValue> Parser::parse_aspect_ratio_value(TokenStream<ComponentValu
             continue;
         }
 
-        if (maybe_value->is_keyword() && maybe_value->as_keyword().id() == ValueID::Auto) {
+        if (maybe_value->is_keyword() && maybe_value->as_keyword().keyword() == Keyword::Auto) {
             if (auto_value)
                 return nullptr;
             auto_value = maybe_value.release_nonnull();
@@ -3944,12 +3944,12 @@ RefPtr<CSSStyleValue> Parser::parse_single_background_position_x_or_y_value(Toke
         return nullptr;
 
     if (value->is_keyword()) {
-        auto identifier = value->to_identifier();
+        auto keyword = value->to_keyword();
-        if (identifier == ValueID::Center) {
+        if (keyword == Keyword::Center) {
             transaction.commit();
             return EdgeStyleValue::create(relative_edge, Percentage { 50 });
         }
-        if (auto edge = value_id_to_position_edge(identifier); edge.has_value()) {
+        if (auto edge = keyword_to_position_edge(keyword); edge.has_value()) {
             relative_edge = *edge;
         } else {
             return nullptr;
@@ -3979,19 +3979,19 @@ RefPtr<CSSStyleValue> Parser::parse_single_background_repeat_value(TokenStream<C
     auto transaction = tokens.begin_transaction();
 
     auto is_directional_repeat = [](CSSStyleValue const& value) -> bool {
-        auto value_id = value.to_identifier();
+        auto keyword = value.to_keyword();
-        return value_id == ValueID::RepeatX || value_id == ValueID::RepeatY;
+        return keyword == Keyword::RepeatX || keyword == Keyword::RepeatY;
     };
 
-    auto as_repeat = [](ValueID identifier) -> Optional<Repeat> {
+    auto as_repeat = [](Keyword keyword) -> Optional<Repeat> {
-        switch (identifier) {
+        switch (keyword) {
-        case ValueID::NoRepeat:
+        case Keyword::NoRepeat:
             return Repeat::NoRepeat;
-        case ValueID::Repeat:
+        case Keyword::Repeat:
             return Repeat::Repeat;
-        case ValueID::Round:
+        case Keyword::Round:
             return Repeat::Round;
-        case ValueID::Space:
+        case Keyword::Space:
             return Repeat::Space;
         default:
             return {};
@@ -4004,14 +4004,14 @@ RefPtr<CSSStyleValue> Parser::parse_single_background_repeat_value(TokenStream<C
     auto x_value = maybe_x_value.release_nonnull();
 
     if (is_directional_repeat(*x_value)) {
-        auto value_id = x_value->to_identifier();
+        auto keyword = x_value->to_keyword();
         transaction.commit();
         return BackgroundRepeatStyleValue::create(
-            value_id == ValueID::RepeatX ? Repeat::Repeat : Repeat::NoRepeat,
+            keyword == Keyword::RepeatX ? Repeat::Repeat : Repeat::NoRepeat,
-            value_id == ValueID::RepeatX ? Repeat::NoRepeat : Repeat::Repeat);
+            keyword == Keyword::RepeatX ? Repeat::NoRepeat : Repeat::Repeat);
     }
 
-    auto x_repeat = as_repeat(x_value->to_identifier());
+    auto x_repeat = as_repeat(x_value->to_keyword());
     if (!x_repeat.has_value())
         return nullptr;
 
@@ -4026,7 +4026,7 @@ RefPtr<CSSStyleValue> Parser::parse_single_background_repeat_value(TokenStream<C
     if (is_directional_repeat(*y_value))
         return nullptr;
 
-    auto y_repeat = as_repeat(y_value->to_identifier());
+    auto y_repeat = as_repeat(y_value->to_keyword());
     if (!y_repeat.has_value())
         return nullptr;
 
@@ -4055,7 +4055,7 @@ RefPtr<CSSStyleValue> Parser::parse_single_background_size_value(TokenStream<Com
         return nullptr;
     auto x_value = maybe_x_value.release_nonnull();
 
-    if (x_value->to_identifier() == ValueID::Cover || x_value->to_identifier() == ValueID::Contain) {
+    if (x_value->to_keyword() == Keyword::Cover || x_value->to_keyword() == Keyword::Contain) {
         transaction.commit();
         return x_value;
     }
@@ -4385,10 +4385,10 @@ RefPtr<CSSStyleValue> Parser::parse_content_value(TokenStream<ComponentValue>& t
 {
     // FIXME: `content` accepts several kinds of function() type, which we don't handle in property_accepts_value() yet.
 
-    auto is_single_value_identifier = [](ValueID identifier) -> bool {
+    auto is_single_value_keyword = [](Keyword keyword) -> bool {
-        switch (identifier) {
+        switch (keyword) {
-        case ValueID::None:
+        case Keyword::None:
-        case ValueID::Normal:
+        case Keyword::Normal:
             return true;
         default:
             return false;
@@ -4397,10 +4397,10 @@ RefPtr<CSSStyleValue> Parser::parse_content_value(TokenStream<ComponentValue>& t
 
     if (tokens.remaining_token_count() == 1) {
         auto transaction = tokens.begin_transaction();
-        if (auto identifier = parse_identifier_value(tokens)) {
+        if (auto keyword = parse_keyword_value(tokens)) {
-            if (is_single_value_identifier(identifier->to_identifier())) {
+            if (is_single_value_keyword(keyword->to_keyword())) {
                 transaction.commit();
-                return identifier;
+                return keyword;
             }
         }
     }
@@ -4422,7 +4422,7 @@ RefPtr<CSSStyleValue> Parser::parse_content_value(TokenStream<ComponentValue>& t
         }
 
         if (auto style_value = parse_css_value_for_property(PropertyID::Content, tokens)) {
-            if (is_single_value_identifier(style_value->to_identifier()))
+            if (is_single_value_keyword(style_value->to_keyword()))
                 return nullptr;
 
             if (in_alt_text) {
@@ -4484,14 +4484,14 @@ RefPtr<CSSStyleValue> Parser::parse_display_value(TokenStream<ComponentValue>& t
 {
     auto parse_single_component_display = [this](TokenStream<ComponentValue>& tokens) -> Optional<Display> {
         auto transaction = tokens.begin_transaction();
-        if (auto identifier_value = parse_identifier_value(tokens)) {
+        if (auto keyword_value = parse_keyword_value(tokens)) {
-            auto identifier = identifier_value->to_identifier();
+            auto keyword = keyword_value->to_keyword();
-            if (identifier == ValueID::ListItem) {
+            if (keyword == Keyword::ListItem) {
                 transaction.commit();
                 return Display::from_short(Display::Short::ListItem);
             }
 
-            if (auto display_outside = value_id_to_display_outside(identifier); display_outside.has_value()) {
+            if (auto display_outside = keyword_to_display_outside(keyword); display_outside.has_value()) {
                 transaction.commit();
                 switch (display_outside.value()) {
                 case DisplayOutside::Block:
@@ -4503,7 +4503,7 @@ RefPtr<CSSStyleValue> Parser::parse_display_value(TokenStream<ComponentValue>& t
                 }
             }
 
-            if (auto display_inside = value_id_to_display_inside(identifier); display_inside.has_value()) {
+            if (auto display_inside = keyword_to_display_inside(keyword); display_inside.has_value()) {
                 transaction.commit();
                 switch (display_inside.value()) {
                 case DisplayInside::Flow:
@@ -4523,12 +4523,12 @@ RefPtr<CSSStyleValue> Parser::parse_display_value(TokenStream<ComponentValue>& t
                 }
             }
 
-            if (auto display_internal = value_id_to_display_internal(identifier); display_internal.has_value()) {
+            if (auto display_internal = keyword_to_display_internal(keyword); display_internal.has_value()) {
                 transaction.commit();
                 return Display { display_internal.value() };
             }
 
-            if (auto display_box = value_id_to_display_box(identifier); display_box.has_value()) {
+            if (auto display_box = keyword_to_display_box(keyword); display_box.has_value()) {
                 transaction.commit();
                 switch (display_box.value()) {
                 case DisplayBox::Contents:
@@ -4538,7 +4538,7 @@ RefPtr<CSSStyleValue> Parser::parse_display_value(TokenStream<ComponentValue>& t
                 }
             }
 
-            if (auto display_legacy = value_id_to_display_legacy(identifier); display_legacy.has_value()) {
+            if (auto display_legacy = keyword_to_display_legacy(keyword); display_legacy.has_value()) {
                 transaction.commit();
                 switch (display_legacy.value()) {
                 case DisplayLegacy::InlineBlock:
@@ -4562,21 +4562,21 @@ RefPtr<CSSStyleValue> Parser::parse_display_value(TokenStream<ComponentValue>& t
 
         auto transaction = tokens.begin_transaction();
         while (tokens.has_next_token()) {
-            if (auto value = parse_identifier_value(tokens)) {
+            if (auto value = parse_keyword_value(tokens)) {
-                auto identifier = value->to_identifier();
+                auto keyword = value->to_keyword();
-                if (identifier == ValueID::ListItem) {
+                if (keyword == Keyword::ListItem) {
                     if (list_item == Display::ListItem::Yes)
                         return {};
                     list_item = Display::ListItem::Yes;
                     continue;
                 }
-                if (auto inside_value = value_id_to_display_inside(identifier); inside_value.has_value()) {
+                if (auto inside_value = keyword_to_display_inside(keyword); inside_value.has_value()) {
                     if (inside.has_value())
                         return {};
                     inside = inside_value.value();
                     continue;
                 }
-                if (auto outside_value = value_id_to_display_outside(identifier); outside_value.has_value()) {
+                if (auto outside_value = keyword_to_display_outside(keyword); outside_value.has_value()) {
                     if (outside.has_value())
                         return {};
                     outside = outside_value.value();
@@ -4819,9 +4819,9 @@ RefPtr<CSSStyleValue> Parser::parse_flex_value(TokenStream<ComponentValue>& toke
             return make_flex_shorthand(one, one, *value);
         }
         case PropertyID::Flex: {
-            if (value->is_keyword() && value->to_identifier() == ValueID::None) {
+            if (value->is_keyword() && value->to_keyword() == Keyword::None) {
                 auto zero = NumberStyleValue::create(0);
-                return make_flex_shorthand(zero, zero, CSSKeywordValue::create(ValueID::Auto));
+                return make_flex_shorthand(zero, zero, CSSKeywordValue::create(Keyword::Auto));
             }
             break;
         }
@@ -4921,18 +4921,18 @@ RefPtr<CSSStyleValue> Parser::parse_flex_flow_value(TokenStream<ComponentValue>&
         { flex_direction.release_nonnull(), flex_wrap.release_nonnull() });
 }
 
-static bool is_generic_font_family(ValueID identifier)
+static bool is_generic_font_family(Keyword keyword)
 {
-    switch (identifier) {
+    switch (keyword) {
-    case ValueID::Cursive:
+    case Keyword::Cursive:
-    case ValueID::Fantasy:
+    case Keyword::Fantasy:
-    case ValueID::Monospace:
+    case Keyword::Monospace:
-    case ValueID::Serif:
+    case Keyword::Serif:
-    case ValueID::SansSerif:
+    case Keyword::SansSerif:
-    case ValueID::UiMonospace:
+    case Keyword::UiMonospace:
-    case ValueID::UiRounded:
+    case Keyword::UiRounded:
-    case ValueID::UiSerif:
+    case Keyword::UiSerif:
-    case ValueID::UiSansSerif:
+    case Keyword::UiSansSerif:
         return true;
     default:
         return false;
@@ -5083,15 +5083,15 @@ RefPtr<CSSStyleValue> Parser::parse_font_family_value(TokenStream<ComponentValue
             if (auto builtin = parse_builtin_value(tokens))
                 return nullptr;
 
-            auto maybe_ident = value_id_from_string(peek.token().ident());
+            auto maybe_keyword = keyword_from_string(peek.token().ident());
             // Can't have a generic-font-name as a token in an unquoted font name.
-            if (maybe_ident.has_value() && is_generic_font_family(maybe_ident.value())) {
+            if (maybe_keyword.has_value() && is_generic_font_family(maybe_keyword.value())) {
                 if (!current_name_parts.is_empty())
                     return nullptr;
                 (void)tokens.next_token(); // Ident
                 if (!next_is_comma_or_eof())
                     return nullptr;
-                font_families.append(CSSKeywordValue::create(maybe_ident.value()));
+                font_families.append(CSSKeywordValue::create(maybe_keyword.value()));
                 (void)tokens.next_token(); // Comma
                 continue;
             }
@@ -5181,8 +5181,8 @@ JS::GCPtr<CSSFontFaceRule> Parser::parse_font_face_rule(TokenStream<ComponentVal
                         had_syntax_error = true;
                         break;
                     }
-                    auto value_id = value_id_from_string(part.token().ident());
+                    auto keyword = keyword_from_string(part.token().ident());
-                    if (value_id.has_value() && is_generic_font_family(value_id.value())) {
+                    if (keyword.has_value() && is_generic_font_family(keyword.value())) {
                         dbgln_if(CSS_PARSER_DEBUG, "CSSParser: @font-face font-family format invalid; discarding.");
                         had_syntax_error = true;
                         break;
@@ -5381,14 +5381,14 @@ RefPtr<CSSStyleValue> Parser::parse_list_style_value(TokenStream<ComponentValue>
     if (found_nones == 2) {
         if (list_image || list_type)
             return nullptr;
-        auto none = CSSKeywordValue::create(ValueID::None);
+        auto none = CSSKeywordValue::create(Keyword::None);
         list_image = none;
         list_type = none;
 
     } else if (found_nones == 1) {
         if (list_image && list_type)
             return nullptr;
-        auto none = CSSKeywordValue::create(ValueID::None);
+        auto none = CSSKeywordValue::create(Keyword::None);
         if (!list_image)
             list_image = none;
         if (!list_type)
@@ -5483,7 +5483,7 @@ RefPtr<CSSStyleValue> Parser::parse_place_content_value(TokenStream<ComponentVal
         return nullptr;
 
     if (!tokens.has_next_token()) {
-        if (!property_accepts_identifier(PropertyID::JustifyContent, maybe_align_content_value->to_identifier()))
+        if (!property_accepts_keyword(PropertyID::JustifyContent, maybe_align_content_value->to_keyword()))
             return nullptr;
         transaction.commit();
         return ShorthandStyleValue::create(PropertyID::PlaceContent,
@@ -5508,7 +5508,7 @@ RefPtr<CSSStyleValue> Parser::parse_place_items_value(TokenStream<ComponentValue
         return nullptr;
 
     if (!tokens.has_next_token()) {
-        if (!property_accepts_identifier(PropertyID::JustifyItems, maybe_align_items_value->to_identifier()))
+        if (!property_accepts_keyword(PropertyID::JustifyItems, maybe_align_items_value->to_keyword()))
             return nullptr;
         transaction.commit();
         return ShorthandStyleValue::create(PropertyID::PlaceItems,
@@ -5533,7 +5533,7 @@ RefPtr<CSSStyleValue> Parser::parse_place_self_value(TokenStream<ComponentValue>
         return nullptr;
 
     if (!tokens.has_next_token()) {
-        if (!property_accepts_identifier(PropertyID::JustifySelf, maybe_align_self_value->to_identifier()))
+        if (!property_accepts_keyword(PropertyID::JustifySelf, maybe_align_self_value->to_keyword()))
             return nullptr;
         transaction.commit();
         return ShorthandStyleValue::create(PropertyID::PlaceSelf,
@@ -5557,10 +5557,10 @@ RefPtr<CSSStyleValue> Parser::parse_quotes_value(TokenStream<ComponentValue>& to
     auto transaction = tokens.begin_transaction();
 
     if (tokens.remaining_token_count() == 1) {
-        auto identifier = parse_identifier_value(tokens);
+        auto keyword = parse_keyword_value(tokens);
-        if (identifier && property_accepts_identifier(PropertyID::Quotes, identifier->to_identifier())) {
+        if (keyword && property_accepts_keyword(PropertyID::Quotes, keyword->to_keyword())) {
             transaction.commit();
-            return identifier;
+            return keyword;
         }
         return nullptr;
     }
@@ -5654,7 +5654,7 @@ RefPtr<CSSStyleValue> Parser::parse_text_decoration_line_value(TokenStream<Compo
             break;
         auto value = maybe_value.release_nonnull();
 
-        if (auto maybe_line = value_id_to_text_decoration_line(value->to_identifier()); maybe_line.has_value()) {
+        if (auto maybe_line = keyword_to_text_decoration_line(value->to_keyword()); maybe_line.has_value()) {
             if (maybe_line == TextDecorationLine::None) {
                 if (!style_values.is_empty())
                     break;
@@ -5801,26 +5801,26 @@ RefPtr<CSSStyleValue> Parser::parse_easing_value(TokenStream<ComponentValue>& to
 
         if (comma_separated_arguments.size() == 2) {
             TokenStream identifier_stream { comma_separated_arguments[1] };
-            auto ident = parse_identifier_value(identifier_stream);
+            auto keyword_value = parse_keyword_value(identifier_stream);
-            if (!ident)
+            if (!keyword_value)
                 return nullptr;
-            switch (ident->to_identifier()) {
+            switch (keyword_value->to_keyword()) {
-            case ValueID::JumpStart:
+            case Keyword::JumpStart:
                 steps.position = EasingStyleValue::Steps::Position::JumpStart;
                 break;
-            case ValueID::JumpEnd:
+            case Keyword::JumpEnd:
                 steps.position = EasingStyleValue::Steps::Position::JumpEnd;
                 break;
-            case ValueID::JumpBoth:
+            case Keyword::JumpBoth:
                 steps.position = EasingStyleValue::Steps::Position::JumpBoth;
                 break;
-            case ValueID::JumpNone:
+            case Keyword::JumpNone:
                 steps.position = EasingStyleValue::Steps::Position::JumpNone;
                 break;
-            case ValueID::Start:
+            case Keyword::Start:
                 steps.position = EasingStyleValue::Steps::Position::Start;
                 break;
-            case ValueID::End:
+            case Keyword::End:
                 steps.position = EasingStyleValue::Steps::Position::End;
                 break;
             default:
@@ -5916,11 +5916,11 @@ RefPtr<CSSStyleValue> Parser::parse_transform_value(TokenStream<ComponentValue>&
                     argument_tokens.reconsume_current_input_token();
 
                     if (function_metadata.parameters[argument_index].type == TransformFunctionParameterType::LengthNone) {
-                        auto ident_transaction = argument_tokens.begin_transaction();
+                        auto keyword_transaction = argument_tokens.begin_transaction();
-                        auto identifier_value = parse_identifier_value(argument_tokens);
+                        auto keyword_value = parse_keyword_value(argument_tokens);
-                        if (identifier_value && identifier_value->to_identifier() == ValueID::None) {
+                        if (keyword_value && keyword_value->to_keyword() == Keyword::None) {
-                            values.append(identifier_value.release_nonnull());
+                            values.append(keyword_value.release_nonnull());
-                            ident_transaction.commit();
+                            keyword_transaction.commit();
                             break;
                         }
                     }
@@ -6012,16 +6012,16 @@ RefPtr<CSSStyleValue> Parser::parse_transform_origin_value(TokenStream<Component
         if (value->is_length())
             return AxisOffset { Axis::None, value->as_length() };
         if (value->is_keyword()) {
-            switch (value->to_identifier()) {
+            switch (value->to_keyword()) {
-            case ValueID::Top:
+            case Keyword::Top:
                 return AxisOffset { Axis::Y, PercentageStyleValue::create(Percentage(0)) };
-            case ValueID::Left:
+            case Keyword::Left:
                 return AxisOffset { Axis::X, PercentageStyleValue::create(Percentage(0)) };
-            case ValueID::Center:
+            case Keyword::Center:
                 return AxisOffset { Axis::None, PercentageStyleValue::create(Percentage(50)) };
-            case ValueID::Bottom:
+            case Keyword::Bottom:
                 return AxisOffset { Axis::Y, PercentageStyleValue::create(Percentage(100)) };
-            case ValueID::Right:
+            case Keyword::Right:
                 return AxisOffset { Axis::X, PercentageStyleValue::create(Percentage(100)) };
             default:
                 return OptionalNone {};
@@ -7321,9 +7321,9 @@ Optional<Parser::PropertyAndValue> Parser::parse_css_value_for_properties(Readon
         }
         return {};
     };
-    auto any_property_accepts_identifier = [](ReadonlySpan<PropertyID> property_ids, ValueID identifier) -> Optional<PropertyID> {
+    auto any_property_accepts_keyword = [](ReadonlySpan<PropertyID> property_ids, Keyword keyword) -> Optional<PropertyID> {
         for (auto const& property : property_ids) {
-            if (property_accepts_identifier(property, identifier))
+            if (property_accepts_keyword(property, keyword))
                 return property;
         }
         return {};
@@ -7339,11 +7339,11 @@ Optional<Parser::PropertyAndValue> Parser::parse_css_value_for_properties(Readon
     if (peek_token.is(Token::Type::Ident)) {
         // NOTE: We do not try to parse "CSS-wide keywords" here. https://www.w3.org/TR/css-values-4/#common-keywords
         //       These are only valid on their own, and so should be parsed directly in `parse_css_value()`.
-        auto ident = value_id_from_string(peek_token.token().ident());
+        auto keyword = keyword_from_string(peek_token.token().ident());
-        if (ident.has_value()) {
+        if (keyword.has_value()) {
-            if (auto property = any_property_accepts_identifier(property_ids, ident.value()); property.has_value()) {
+            if (auto property = any_property_accepts_keyword(property_ids, keyword.value()); property.has_value()) {
                 (void)tokens.next_token();
-                return PropertyAndValue { *property, CSSKeywordValue::create(ident.value()) };
+                return PropertyAndValue { *property, CSSKeywordValue::create(keyword.value()) };
             }
         }
 

Userland/Libraries/LibWeb/CSS/Parser/Parser.h

@@ -292,7 +292,7 @@ private:
     RefPtr<CSSStyleValue> parse_integer_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_number_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_number_or_percentage_value(TokenStream<ComponentValue>&);
-    RefPtr<CSSStyleValue> parse_identifier_value(TokenStream<ComponentValue>&);
+    RefPtr<CSSStyleValue> parse_keyword_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_color_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue> parse_counter_value(TokenStream<ComponentValue>&);
     enum class AllowReversed {

Userland/Libraries/LibWeb/CSS/Parser/SelectorParsing.cpp

@@ -566,16 +566,16 @@ Parser::ParseErrorOr<Selector::SimpleSelector> Parser::parse_pseudo_simple_selec
         case PseudoClassMetadata::ParameterType::Ident: {
             auto function_token_stream = TokenStream(pseudo_function.values());
             function_token_stream.skip_whitespace();
-            auto maybe_ident_token = function_token_stream.next_token();
+            auto maybe_keyword_token = function_token_stream.next_token();
             function_token_stream.skip_whitespace();
-            if (!maybe_ident_token.is(Token::Type::Ident) || function_token_stream.has_next_token()) {
+            if (!maybe_keyword_token.is(Token::Type::Ident) || function_token_stream.has_next_token()) {
-                dbgln_if(CSS_PARSER_DEBUG, "Failed to parse :{}() parameter as an ident: not an ident", pseudo_function.name());
+                dbgln_if(CSS_PARSER_DEBUG, "Failed to parse :{}() parameter as a keyword: not an ident", pseudo_function.name());
                 return ParseError::SyntaxError;
             }
 
-            auto maybe_ident = value_id_from_string(maybe_ident_token.token().ident());
+            auto maybe_keyword = keyword_from_string(maybe_keyword_token.token().ident());
-            if (!maybe_ident.has_value()) {
+            if (!maybe_keyword.has_value()) {
-                dbgln_if(CSS_PARSER_DEBUG, "Failed to parse :{}() parameter as an ident: unrecognized ident", pseudo_function.name());
+                dbgln_if(CSS_PARSER_DEBUG, "Failed to parse :{}() parameter as a keyword: unrecognized keyword", pseudo_function.name());
                 return ParseError::SyntaxError;
             }
 
@@ -583,7 +583,7 @@ Parser::ParseErrorOr<Selector::SimpleSelector> Parser::parse_pseudo_simple_selec
                 .type = Selector::SimpleSelector::Type::PseudoClass,
                 .value = Selector::SimpleSelector::PseudoClassSelector {
                     .type = pseudo_class,
-                    .identifier = maybe_ident.value() }
+                    .keyword = maybe_keyword.value() }
             };
         }
         case PseudoClassMetadata::ParameterType::LanguageRanges: {

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -100,7 +100,7 @@ static NonnullRefPtr<CSSStyleValue const> style_value_for_background_property(La
 static NonnullRefPtr<CSSStyleValue const> style_value_for_length_percentage(LengthPercentage const& length_percentage)
 {
     if (length_percentage.is_auto())
-        return CSSKeywordValue::create(ValueID::Auto);
+        return CSSKeywordValue::create(Keyword::Auto);
     if (length_percentage.is_percentage())
         return PercentageStyleValue::create(length_percentage.percentage());
     if (length_percentage.is_length())
@@ -111,22 +111,22 @@ static NonnullRefPtr<CSSStyleValue const> style_value_for_length_percentage(Leng
 static NonnullRefPtr<CSSStyleValue const> style_value_for_size(Size const& size)
 {
     if (size.is_none())
-        return CSSKeywordValue::create(ValueID::None);
+        return CSSKeywordValue::create(Keyword::None);
     if (size.is_percentage())
         return PercentageStyleValue::create(size.percentage());
     if (size.is_length())
         return LengthStyleValue::create(size.length());
     if (size.is_auto())
-        return CSSKeywordValue::create(ValueID::Auto);
+        return CSSKeywordValue::create(Keyword::Auto);
     if (size.is_calculated())
         return size.calculated();
     if (size.is_min_content())
-        return CSSKeywordValue::create(ValueID::MinContent);
+        return CSSKeywordValue::create(Keyword::MinContent);
     if (size.is_max_content())
-        return CSSKeywordValue::create(ValueID::MaxContent);
+        return CSSKeywordValue::create(Keyword::MaxContent);
     // FIXME: Support fit-content(<length>)
     if (size.is_fit_content())
-        return CSSKeywordValue::create(ValueID::FitContent);
+        return CSSKeywordValue::create(Keyword::FitContent);
     TODO();
 }
 
@@ -172,7 +172,7 @@ static RefPtr<CSSStyleValue const> style_value_for_length_box_logical_side(Layou
 static RefPtr<CSSStyleValue const> style_value_for_shadow(Vector<ShadowData> const& shadow_data)
 {
     if (shadow_data.is_empty())
-        return CSSKeywordValue::create(ValueID::None);
+        return CSSKeywordValue::create(Keyword::None);
 
     auto make_shadow_style_value = [](ShadowData const& shadow) {
         return ShadowStyleValue::create(
@@ -263,7 +263,7 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
         //    The resolved value is normal if the computed value is normal, or the used value otherwise.
     case PropertyID::LineHeight: {
         auto line_height = get_computed_value(property_id);
-        if (line_height->is_keyword() && line_height->to_identifier() == ValueID::Normal)
+        if (line_height->is_keyword() && line_height->to_keyword() == Keyword::Normal)
             return line_height;
         return LengthStyleValue::create(Length::make_px(layout_node.computed_values().line_height()));
     }
@@ -370,7 +370,7 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
     case PropertyID::Transform: {
         auto transformations = layout_node.computed_values().transformations();
         if (transformations.is_empty())
-            return CSSKeywordValue::create(ValueID::None);
+            return CSSKeywordValue::create(Keyword::None);
 
         // https://drafts.csswg.org/css-transforms-2/#serialization-of-the-computed-value
         // The transform property is a resolved value special case property. [CSSOM]
@@ -516,7 +516,7 @@ RefPtr<CSSStyleValue const> ResolvedCSSStyleDeclaration::style_value_for_propert
     case PropertyID::WebkitTextFillColor:
         return ColorStyleValue::create(layout_node.computed_values().webkit_text_fill_color());
     case PropertyID::Invalid:
-        return CSSKeywordValue::create(ValueID::Invalid);
+        return CSSKeywordValue::create(Keyword::Invalid);
     case PropertyID::Custom:
         dbgln_if(LIBWEB_CSS_DEBUG, "Computed style for custom properties was requested (?)");
         return nullptr;

Userland/Libraries/LibWeb/CSS/Selector.h

@@ -11,8 +11,8 @@
 #include <AK/RefCounted.h>
 #include <AK/String.h>
 #include <AK/Vector.h>
+#include <LibWeb/CSS/Keyword.h>
 #include <LibWeb/CSS/PseudoClass.h>
-#include <LibWeb/CSS/ValueID.h>
 
 namespace Web::CSS {
 
@@ -145,7 +145,7 @@ public:
             Vector<FlyString> languages {};
 
             // Used by :dir()
-            Optional<ValueID> identifier {};
+            Optional<Keyword> keyword {};
         };
 
         struct Name {

Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp

@@ -5,10 +5,10 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
+#include <LibWeb/CSS/Keyword.h>
 #include <LibWeb/CSS/Parser/Parser.h>
 #include <LibWeb/CSS/SelectorEngine.h>
 #include <LibWeb/CSS/StyleProperties.h>
-#include <LibWeb/CSS/ValueID.h>
 #include <LibWeb/DOM/Attr.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
@@ -606,13 +606,13 @@ static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoCla
     case CSS::PseudoClass::Dir: {
         // "Values other than ltr and rtl are not invalid, but do not match anything."
         // - https://www.w3.org/TR/selectors-4/#the-dir-pseudo
-        if (!first_is_one_of(pseudo_class.identifier, CSS::ValueID::Ltr, CSS::ValueID::Rtl))
+        if (!first_is_one_of(pseudo_class.keyword, CSS::Keyword::Ltr, CSS::Keyword::Rtl))
             return false;
         switch (element.directionality()) {
         case DOM::Element::Directionality::Ltr:
-            return pseudo_class.identifier == CSS::ValueID::Ltr;
+            return pseudo_class.keyword == CSS::Keyword::Ltr;
         case DOM::Element::Directionality::Rtl:
-            return pseudo_class.identifier == CSS::ValueID::Rtl;
+            return pseudo_class.keyword == CSS::Keyword::Rtl;
         }
         VERIFY_NOT_REACHED();
     }

Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -784,10 +784,10 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
     if (property_id == CSS::PropertyID::Transition) {
         if (!value.is_transition()) {
             // Handle `none` as a shorthand for `all 0s ease 0s`.
-            set_longhand_property(CSS::PropertyID::TransitionProperty, CSSKeywordValue::create(CSS::ValueID::All));
+            set_longhand_property(CSS::PropertyID::TransitionProperty, CSSKeywordValue::create(Keyword::All));
             set_longhand_property(CSS::PropertyID::TransitionDuration, TimeStyleValue::create(CSS::Time::make_seconds(0)));
             set_longhand_property(CSS::PropertyID::TransitionDelay, TimeStyleValue::create(CSS::Time::make_seconds(0)));
-            set_longhand_property(CSS::PropertyID::TransitionTimingFunction, CSSKeywordValue::create(CSS::ValueID::Ease));
+            set_longhand_property(CSS::PropertyID::TransitionTimingFunction, CSSKeywordValue::create(Keyword::Ease));
             return;
         }
         auto const& transitions = value.as_transition().transitions();
@@ -808,14 +808,14 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
     }
 
     if (property_id == CSS::PropertyID::Float) {
-        auto ident = value.to_identifier();
+        auto keyword = value.to_keyword();
 
         // FIXME: Honor writing-mode, direction and text-orientation.
-        if (ident == CSS::ValueID::InlineStart) {
+        if (keyword == Keyword::InlineStart) {
-            set_longhand_property(CSS::PropertyID::Float, CSSKeywordValue::create(CSS::ValueID::Left));
+            set_longhand_property(CSS::PropertyID::Float, CSSKeywordValue::create(Keyword::Left));
             return;
-        } else if (ident == CSS::ValueID::InlineEnd) {
+        } else if (keyword == Keyword::InlineEnd) {
-            set_longhand_property(CSS::PropertyID::Float, CSSKeywordValue::create(CSS::ValueID::Right));
+            set_longhand_property(CSS::PropertyID::Float, CSSKeywordValue::create(Keyword::Right));
             return;
         }
     }
@@ -1307,7 +1307,7 @@ static NonnullRefPtr<CSSStyleValue const> interpolate_box_shadow(DOM::Element& e
             }
         } else if (value.is_shadow()) {
             shadows.append(value);
-        } else if (!value.is_keyword() || value.as_keyword().id() != ValueID::None) {
+        } else if (!value.is_keyword() || value.as_keyword().keyword() != Keyword::None) {
             VERIFY_NOT_REACHED();
         }
         return shadows;
@@ -1627,7 +1627,7 @@ void StyleComputer::collect_animation_into(DOM::Element& element, Optional<CSS::
         } else {
             // If interpolate_property() fails, the element should not be rendered
             dbgln_if(LIBWEB_CSS_ANIMATION_DEBUG, "Interpolated value for property {} at {}: {} -> {} is invalid", string_from_property_id(it.key), progress_in_keyframe, start->to_string(), end->to_string());
-            style_properties.set_animated_property(PropertyID::Visibility, CSSKeywordValue::create(ValueID::Hidden));
+            style_properties.set_animated_property(PropertyID::Visibility, CSSKeywordValue::create(Keyword::Hidden));
         }
     }
 }
@@ -1640,7 +1640,7 @@ static void apply_animation_properties(DOM::Document& document, StyleProperties&
     if (auto duration_value = style.maybe_null_property(PropertyID::AnimationDuration); duration_value) {
         if (duration_value->is_time()) {
             duration = duration_value->as_time().time();
-        } else if (duration_value->is_keyword() && duration_value->as_keyword().id() == ValueID::Auto) {
+        } else if (duration_value->is_keyword() && duration_value->as_keyword().keyword() == Keyword::Auto) {
             // We use empty optional to represent "auto".
             duration = {};
         }
@@ -1652,7 +1652,7 @@ static void apply_animation_properties(DOM::Document& document, StyleProperties&
 
     double iteration_count = 1.0;
     if (auto iteration_count_value = style.maybe_null_property(PropertyID::AnimationIterationCount); iteration_count_value) {
-        if (iteration_count_value->is_keyword() && iteration_count_value->to_identifier() == ValueID::Infinite)
+        if (iteration_count_value->is_keyword() && iteration_count_value->to_keyword() == Keyword::Infinite)
             iteration_count = HUGE_VAL;
         else if (iteration_count_value->is_number())
             iteration_count = iteration_count_value->as_number().number();
@@ -1660,19 +1660,19 @@ static void apply_animation_properties(DOM::Document& document, StyleProperties&
 
     CSS::AnimationFillMode fill_mode { CSS::AnimationFillMode::None };
     if (auto fill_mode_property = style.maybe_null_property(PropertyID::AnimationFillMode); fill_mode_property && fill_mode_property->is_keyword()) {
-        if (auto fill_mode_value = value_id_to_animation_fill_mode(fill_mode_property->to_identifier()); fill_mode_value.has_value())
+        if (auto fill_mode_value = keyword_to_animation_fill_mode(fill_mode_property->to_keyword()); fill_mode_value.has_value())
             fill_mode = *fill_mode_value;
     }
 
     CSS::AnimationDirection direction { CSS::AnimationDirection::Normal };
     if (auto direction_property = style.maybe_null_property(PropertyID::AnimationDirection); direction_property && direction_property->is_keyword()) {
-        if (auto direction_value = value_id_to_animation_direction(direction_property->to_identifier()); direction_value.has_value())
+        if (auto direction_value = keyword_to_animation_direction(direction_property->to_keyword()); direction_value.has_value())
             direction = *direction_value;
     }
 
     CSS::AnimationPlayState play_state { CSS::AnimationPlayState::Running };
     if (auto play_state_property = style.maybe_null_property(PropertyID::AnimationPlayState); play_state_property && play_state_property->is_keyword()) {
-        if (auto play_state_value = value_id_to_animation_play_state(play_state_property->to_identifier()); play_state_value.has_value())
+        if (auto play_state_value = keyword_to_animation_play_state(play_state_property->to_keyword()); play_state_value.has_value())
             play_state = *play_state_value;
     }
 
@@ -1924,7 +1924,7 @@ void StyleComputer::compute_defaulted_values(StyleProperties& style, DOM::Elemen
     // https://www.w3.org/TR/css-color-4/#resolving-other-colors
     // In the color property, the used value of currentcolor is the inherited value.
     auto color = style.property(CSS::PropertyID::Color);
-    if (color->to_identifier() == CSS::ValueID::Currentcolor) {
+    if (color->to_keyword() == Keyword::Currentcolor) {
         color = get_inherit_value(document().realm(), CSS::PropertyID::Color, element, pseudo_element);
         style.set_property(CSS::PropertyID::Color, color);
     }
@@ -2073,36 +2073,36 @@ RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(
 
     if (font_size.is_keyword()) {
         // https://w3c.github.io/csswg-drafts/css-fonts/#absolute-size-mapping
-        auto get_absolute_size_mapping = [](Web::CSS::ValueID identifier) -> CSSPixelFraction {
+        auto get_absolute_size_mapping = [](Keyword keyword) -> CSSPixelFraction {
-            switch (identifier) {
+            switch (keyword) {
-            case CSS::ValueID::XxSmall:
+            case Keyword::XxSmall:
                 return CSSPixels(3) / 5;
-            case CSS::ValueID::XSmall:
+            case Keyword::XSmall:
                 return CSSPixels(3) / 4;
-            case CSS::ValueID::Small:
+            case Keyword::Small:
                 return CSSPixels(8) / 9;
-            case CSS::ValueID::Medium:
+            case Keyword::Medium:
                 return 1;
-            case CSS::ValueID::Large:
+            case Keyword::Large:
                 return CSSPixels(6) / 5;
-            case CSS::ValueID::XLarge:
+            case Keyword::XLarge:
                 return CSSPixels(3) / 2;
-            case CSS::ValueID::XxLarge:
+            case Keyword::XxLarge:
                 return 2;
-            case CSS::ValueID::XxxLarge:
+            case Keyword::XxxLarge:
                 return 3;
-            case CSS::ValueID::Smaller:
+            case Keyword::Smaller:
                 return CSSPixels(4) / 5;
-            case CSS::ValueID::Larger:
+            case Keyword::Larger:
                 return CSSPixels(5) / 4;
             default:
                 return 1;
             }
         };
 
-        auto const identifier = static_cast<CSSKeywordValue const&>(font_size).id();
+        auto const keyword = font_size.to_keyword();
 
-        if (identifier == ValueID::Math) {
+        if (keyword == Keyword::Math) {
             auto math_scaling_factor = [&]() {
                 // https://w3c.github.io/mathml-core/#the-math-script-level-property
                 // If the specified value font-size is math then the computed value of font-size is obtained by multiplying
@@ -2147,12 +2147,12 @@ RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(
             // TODO: If the parent element has a keyword font size in the absolute size keyword mapping table,
             //       larger may compute the font size to the next entry in the table,
             //       and smaller may compute the font size to the previous entry in the table.
-            if (identifier == CSS::ValueID::Smaller || identifier == CSS::ValueID::Larger) {
+            if (keyword == Keyword::Smaller || keyword == Keyword::Larger) {
                 if (parent_element && parent_element->computed_css_values()) {
                     font_size_in_px = CSSPixels::nearest_value_for(parent_element->computed_css_values()->first_available_computed_font().pixel_metrics().size);
                 }
             }
-            font_size_in_px *= get_absolute_size_mapping(identifier);
+            font_size_in_px *= get_absolute_size_mapping(keyword);
         }
     } else {
         Length::ResolutionContext const length_resolution_context {
@@ -2218,33 +2218,33 @@ RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(
         return {};
     };
 
-    auto find_generic_font = [&](ValueID font_id) -> RefPtr<Gfx::FontCascadeList const> {
+    auto find_generic_font = [&](Keyword font_id) -> RefPtr<Gfx::FontCascadeList const> {
         Platform::GenericFont generic_font {};
         switch (font_id) {
-        case ValueID::Monospace:
+        case Keyword::Monospace:
-        case ValueID::UiMonospace:
+        case Keyword::UiMonospace:
             generic_font = Platform::GenericFont::Monospace;
             monospace = true;
             break;
-        case ValueID::Serif:
+        case Keyword::Serif:
             generic_font = Platform::GenericFont::Serif;
             break;
-        case ValueID::Fantasy:
+        case Keyword::Fantasy:
             generic_font = Platform::GenericFont::Fantasy;
             break;
-        case ValueID::SansSerif:
+        case Keyword::SansSerif:
             generic_font = Platform::GenericFont::SansSerif;
             break;
-        case ValueID::Cursive:
+        case Keyword::Cursive:
             generic_font = Platform::GenericFont::Cursive;
             break;
-        case ValueID::UiSerif:
+        case Keyword::UiSerif:
             generic_font = Platform::GenericFont::UiSerif;
             break;
-        case ValueID::UiSansSerif:
+        case Keyword::UiSansSerif:
             generic_font = Platform::GenericFont::UiSansSerif;
             break;
-        case ValueID::UiRounded:
+        case Keyword::UiRounded:
             generic_font = Platform::GenericFont::UiRounded;
             break;
         default:
@@ -2259,7 +2259,7 @@ RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(
         for (auto const& family : family_list) {
             RefPtr<Gfx::FontCascadeList const> other_font_list;
             if (family->is_keyword()) {
-                other_font_list = find_generic_font(family->to_identifier());
+                other_font_list = find_generic_font(family->to_keyword());
             } else if (family->is_string()) {
                 other_font_list = find_font(family->as_string().string_value());
             } else if (family->is_custom_ident()) {
@@ -2269,7 +2269,7 @@ RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(
                 font_list->extend(*other_font_list);
         }
     } else if (font_family.is_keyword()) {
-        if (auto other_font_list = find_generic_font(font_family.to_identifier()))
+        if (auto other_font_list = find_generic_font(font_family.to_keyword()))
             font_list->extend(*other_font_list);
     } else if (font_family.is_string()) {
         if (auto other_font_list = find_font(font_family.as_string().string_value()))
@@ -2366,19 +2366,19 @@ void StyleComputer::resolve_effective_overflow_values(StyleProperties& style) co
     // https://www.w3.org/TR/css-overflow-3/#overflow-control
     // The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or
     // overflow-y is neither visible nor clip.
-    auto overflow_x = value_id_to_overflow(style.property(PropertyID::OverflowX)->to_identifier());
+    auto overflow_x = keyword_to_overflow(style.property(PropertyID::OverflowX)->to_keyword());
-    auto overflow_y = value_id_to_overflow(style.property(PropertyID::OverflowY)->to_identifier());
+    auto overflow_y = keyword_to_overflow(style.property(PropertyID::OverflowY)->to_keyword());
     auto overflow_x_is_visible_or_clip = overflow_x == Overflow::Visible || overflow_x == Overflow::Clip;
     auto overflow_y_is_visible_or_clip = overflow_y == Overflow::Visible || overflow_y == Overflow::Clip;
     if (!overflow_x_is_visible_or_clip || !overflow_y_is_visible_or_clip) {
         if (overflow_x == CSS::Overflow::Visible)
-            style.set_property(CSS::PropertyID::OverflowX, CSSKeywordValue::create(CSS::ValueID::Auto));
+            style.set_property(CSS::PropertyID::OverflowX, CSSKeywordValue::create(Keyword::Auto));
         if (overflow_x == CSS::Overflow::Clip)
-            style.set_property(CSS::PropertyID::OverflowX, CSSKeywordValue::create(CSS::ValueID::Hidden));
+            style.set_property(CSS::PropertyID::OverflowX, CSSKeywordValue::create(Keyword::Hidden));
         if (overflow_y == CSS::Overflow::Visible)
-            style.set_property(CSS::PropertyID::OverflowY, CSSKeywordValue::create(CSS::ValueID::Auto));
+            style.set_property(CSS::PropertyID::OverflowY, CSSKeywordValue::create(Keyword::Auto));
         if (overflow_y == CSS::Overflow::Clip)
-            style.set_property(CSS::PropertyID::OverflowY, CSSKeywordValue::create(CSS::ValueID::Hidden));
+            style.set_property(CSS::PropertyID::OverflowY, CSSKeywordValue::create(Keyword::Hidden));
     }
 }
 
@@ -2837,7 +2837,7 @@ void StyleComputer::compute_math_depth(StyleProperties& style, DOM::Element cons
     // The computed value of the math-depth value is determined as follows:
     // - If the specified value of math-depth is auto-add and the inherited value of math-style is compact
     //   then the computed value of math-depth of the element is its inherited value plus one.
-    if (math_depth.is_auto_add() && style.property(CSS::PropertyID::MathStyle)->to_identifier() == CSS::ValueID::Compact) {
+    if (math_depth.is_auto_add() && style.property(CSS::PropertyID::MathStyle)->to_keyword() == Keyword::Compact) {
         style.set_math_depth(inherited_math_depth() + 1);
         return;
     }

Userland/Libraries/LibWeb/CSS/StyleInvalidation.cpp

@@ -33,7 +33,7 @@ RequiredInvalidationAfterStyleChange compute_property_invalidation(CSS::Property
     // OPTIMIZATION: Special handling for CSS `visibility`:
     if (property_id == CSS::PropertyID::Visibility) {
         // We don't need to relayout if the visibility changes from visible to hidden or vice versa. Only collapse requires relayout.
-        if ((old_value && old_value->to_identifier() == CSS::ValueID::Collapse) != (new_value && new_value->to_identifier() == CSS::ValueID::Collapse))
+        if ((old_value && old_value->to_keyword() == CSS::Keyword::Collapse) != (new_value && new_value->to_keyword() == CSS::Keyword::Collapse))
             invalidation.relayout = true;
         // Of course, we still have to repaint on any visibility change.
         invalidation.repaint = true;

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -125,16 +125,16 @@ CSS::Size StyleProperties::size_value(CSS::PropertyID id) const
 {
     auto value = property(id);
     if (value->is_keyword()) {
-        switch (value->to_identifier()) {
+        switch (value->to_keyword()) {
-        case ValueID::Auto:
+        case Keyword::Auto:
             return CSS::Size::make_auto();
-        case ValueID::MinContent:
+        case Keyword::MinContent:
             return CSS::Size::make_min_content();
-        case ValueID::MaxContent:
+        case Keyword::MaxContent:
             return CSS::Size::make_max_content();
-        case ValueID::FitContent:
+        case Keyword::FitContent:
             return CSS::Size::make_fit_content();
-        case ValueID::None:
+        case Keyword::None:
             return CSS::Size::make_none();
         default:
             VERIFY_NOT_REACHED();
@@ -219,7 +219,7 @@ CSSPixels StyleProperties::compute_line_height(CSSPixelRect const& viewport_rect
 {
     auto line_height = property(CSS::PropertyID::LineHeight);
 
-    if (line_height->is_keyword() && line_height->to_identifier() == ValueID::Normal)
+    if (line_height->is_keyword() && line_height->to_keyword() == Keyword::Normal)
         return font_metrics.line_height;
 
     if (line_height->is_length()) {
@@ -330,32 +330,32 @@ float StyleProperties::stop_opacity() const
 Optional<CSS::FillRule> StyleProperties::fill_rule() const
 {
     auto value = property(CSS::PropertyID::FillRule);
-    return value_id_to_fill_rule(value->to_identifier());
+    return keyword_to_fill_rule(value->to_keyword());
 }
 
 Optional<CSS::ClipRule> StyleProperties::clip_rule() const
 {
     auto value = property(CSS::PropertyID::ClipRule);
-    return value_id_to_fill_rule(value->to_identifier());
+    return keyword_to_fill_rule(value->to_keyword());
 }
 
 Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
 {
     auto value = property(CSS::PropertyID::FlexDirection);
-    return value_id_to_flex_direction(value->to_identifier());
+    return keyword_to_flex_direction(value->to_keyword());
 }
 
 Optional<CSS::FlexWrap> StyleProperties::flex_wrap() const
 {
     auto value = property(CSS::PropertyID::FlexWrap);
-    return value_id_to_flex_wrap(value->to_identifier());
+    return keyword_to_flex_wrap(value->to_keyword());
 }
 
 Optional<CSS::FlexBasis> StyleProperties::flex_basis() const
 {
     auto value = property(CSS::PropertyID::FlexBasis);
 
-    if (value->is_keyword() && value->to_identifier() == CSS::ValueID::Content)
+    if (value->is_keyword() && value->to_keyword() == CSS::Keyword::Content)
         return CSS::FlexBasisContent {};
 
     return size_value(CSS::PropertyID::FlexBasis);
@@ -388,7 +388,7 @@ int StyleProperties::order() const
 Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
 {
     auto value = property(CSS::PropertyID::ImageRendering);
-    return value_id_to_image_rendering(value->to_identifier());
+    return keyword_to_image_rendering(value->to_keyword());
 }
 
 CSS::Length StyleProperties::border_spacing_horizontal() const
@@ -412,7 +412,7 @@ CSS::Length StyleProperties::border_spacing_vertical() const
 Optional<CSS::CaptionSide> StyleProperties::caption_side() const
 {
     auto value = property(CSS::PropertyID::CaptionSide);
-    return value_id_to_caption_side(value->to_identifier());
+    return keyword_to_caption_side(value->to_keyword());
 }
 
 CSS::Clip StyleProperties::clip() const
@@ -426,24 +426,24 @@ CSS::Clip StyleProperties::clip() const
 Optional<CSS::JustifyContent> StyleProperties::justify_content() const
 {
     auto value = property(CSS::PropertyID::JustifyContent);
-    return value_id_to_justify_content(value->to_identifier());
+    return keyword_to_justify_content(value->to_keyword());
 }
 
 Optional<CSS::JustifyItems> StyleProperties::justify_items() const
 {
     auto value = property(CSS::PropertyID::JustifyItems);
-    return value_id_to_justify_items(value->to_identifier());
+    return keyword_to_justify_items(value->to_keyword());
 }
 
 Optional<CSS::JustifySelf> StyleProperties::justify_self() const
 {
     auto value = property(CSS::PropertyID::JustifySelf);
-    return value_id_to_justify_self(value->to_identifier());
+    return keyword_to_justify_self(value->to_keyword());
 }
 
 Vector<CSS::Transformation> StyleProperties::transformations_for_style_value(CSSStyleValue const& value)
 {
-    if (value.is_keyword() && value.to_identifier() == CSS::ValueID::None)
+    if (value.is_keyword() && value.to_keyword() == CSS::Keyword::None)
         return {};
 
     if (!value.is_value_list())
@@ -519,7 +519,7 @@ static Optional<LengthPercentage> length_percentage_for_style_value(CSSStyleValu
 Optional<CSS::TransformBox> StyleProperties::transform_box() const
 {
     auto value = property(CSS::PropertyID::TransformBox);
-    return value_id_to_transform_box(value->to_identifier());
+    return keyword_to_transform_box(value->to_keyword());
 }
 
 CSS::TransformOrigin StyleProperties::transform_origin() const
@@ -547,25 +547,25 @@ Optional<Color> StyleProperties::accent_color(Layout::NodeWithStyle const& node)
 Optional<CSS::AlignContent> StyleProperties::align_content() const
 {
     auto value = property(CSS::PropertyID::AlignContent);
-    return value_id_to_align_content(value->to_identifier());
+    return keyword_to_align_content(value->to_keyword());
 }
 
 Optional<CSS::AlignItems> StyleProperties::align_items() const
 {
     auto value = property(CSS::PropertyID::AlignItems);
-    return value_id_to_align_items(value->to_identifier());
+    return keyword_to_align_items(value->to_keyword());
 }
 
 Optional<CSS::AlignSelf> StyleProperties::align_self() const
 {
     auto value = property(CSS::PropertyID::AlignSelf);
-    return value_id_to_align_self(value->to_identifier());
+    return keyword_to_align_self(value->to_keyword());
 }
 
 Optional<CSS::Appearance> StyleProperties::appearance() const
 {
     auto value = property(CSS::PropertyID::Appearance);
-    auto appearance = value_id_to_appearance(value->to_identifier());
+    auto appearance = keyword_to_appearance(value->to_keyword());
     if (appearance.has_value()) {
         switch (*appearance) {
         // Note: All these compatibility values can be treated as 'auto'
@@ -603,7 +603,7 @@ CSS::BackdropFilter StyleProperties::backdrop_filter() const
 Optional<CSS::Positioning> StyleProperties::position() const
 {
     auto value = property(CSS::PropertyID::Position);
-    return value_id_to_positioning(value->to_identifier());
+    return keyword_to_positioning(value->to_keyword());
 }
 
 bool StyleProperties::operator==(StyleProperties const& other) const
@@ -635,61 +635,61 @@ bool StyleProperties::operator==(StyleProperties const& other) const
 Optional<CSS::TextAnchor> StyleProperties::text_anchor() const
 {
     auto value = property(CSS::PropertyID::TextAnchor);
-    return value_id_to_text_anchor(value->to_identifier());
+    return keyword_to_text_anchor(value->to_keyword());
 }
 
 Optional<CSS::TextAlign> StyleProperties::text_align() const
 {
     auto value = property(CSS::PropertyID::TextAlign);
-    return value_id_to_text_align(value->to_identifier());
+    return keyword_to_text_align(value->to_keyword());
 }
 
 Optional<CSS::TextJustify> StyleProperties::text_justify() const
 {
     auto value = property(CSS::PropertyID::TextJustify);
-    return value_id_to_text_justify(value->to_identifier());
+    return keyword_to_text_justify(value->to_keyword());
 }
 
 Optional<CSS::TextOverflow> StyleProperties::text_overflow() const
 {
     auto value = property(CSS::PropertyID::TextOverflow);
-    return value_id_to_text_overflow(value->to_identifier());
+    return keyword_to_text_overflow(value->to_keyword());
 }
 
 Optional<CSS::PointerEvents> StyleProperties::pointer_events() const
 {
     auto value = property(CSS::PropertyID::PointerEvents);
-    return value_id_to_pointer_events(value->to_identifier());
+    return keyword_to_pointer_events(value->to_keyword());
 }
 
 Optional<CSS::WhiteSpace> StyleProperties::white_space() const
 {
     auto value = property(CSS::PropertyID::WhiteSpace);
-    return value_id_to_white_space(value->to_identifier());
+    return keyword_to_white_space(value->to_keyword());
 }
 
 Optional<CSS::LineStyle> StyleProperties::line_style(CSS::PropertyID property_id) const
 {
     auto value = property(property_id);
-    return value_id_to_line_style(value->to_identifier());
+    return keyword_to_line_style(value->to_keyword());
 }
 
 Optional<CSS::OutlineStyle> StyleProperties::outline_style() const
 {
     auto value = property(CSS::PropertyID::OutlineStyle);
-    return value_id_to_outline_style(value->to_identifier());
+    return keyword_to_outline_style(value->to_keyword());
 }
 
 Optional<CSS::Float> StyleProperties::float_() const
 {
     auto value = property(CSS::PropertyID::Float);
-    return value_id_to_float(value->to_identifier());
+    return keyword_to_float(value->to_keyword());
 }
 
 Optional<CSS::Clear> StyleProperties::clear() const
 {
     auto value = property(CSS::PropertyID::Clear);
-    return value_id_to_clear(value->to_identifier());
+    return keyword_to_clear(value->to_keyword());
 }
 
 StyleProperties::ContentDataAndQuoteNestingLevel StyleProperties::content(DOM::Element& element, u32 initial_quote_nesting_level) const
@@ -730,11 +730,11 @@ StyleProperties::ContentDataAndQuoteNestingLevel StyleProperties::content(DOM::E
             if (item->is_string()) {
                 builder.append(item->as_string().string_value());
             } else if (item->is_keyword()) {
-                switch (item->to_identifier()) {
+                switch (item->to_keyword()) {
-                case ValueID::OpenQuote:
+                case Keyword::OpenQuote:
                     builder.append(get_quote_string(true, quote_nesting_level++));
                     break;
-                case ValueID::CloseQuote:
+                case Keyword::CloseQuote:
                     // A 'close-quote' or 'no-close-quote' that would make the depth negative is in error and is ignored
                     // (at rendering time): the depth stays at 0 and no quote mark is rendered (although the rest of the
                     // 'content' property's value is still inserted).
@@ -743,10 +743,10 @@ StyleProperties::ContentDataAndQuoteNestingLevel StyleProperties::content(DOM::E
                     if (quote_nesting_level > 0)
                         builder.append(get_quote_string(false, --quote_nesting_level));
                     break;
-                case ValueID::NoOpenQuote:
+                case Keyword::NoOpenQuote:
                     quote_nesting_level++;
                     break;
-                case ValueID::NoCloseQuote:
+                case Keyword::NoCloseQuote:
                     // NOTE: See CloseQuote
                     if (quote_nesting_level > 0)
                         quote_nesting_level--;
@@ -782,10 +782,10 @@ StyleProperties::ContentDataAndQuoteNestingLevel StyleProperties::content(DOM::E
         return { content_data, quote_nesting_level };
     }
 
-    switch (value->to_identifier()) {
+    switch (value->to_keyword()) {
-    case ValueID::None:
+    case Keyword::None:
         return { { ContentData::Type::None }, quote_nesting_level };
-    case ValueID::Normal:
+    case Keyword::Normal:
         return { { ContentData::Type::Normal }, quote_nesting_level };
     default:
         break;
@@ -797,13 +797,13 @@ StyleProperties::ContentDataAndQuoteNestingLevel StyleProperties::content(DOM::E
 Optional<CSS::ContentVisibility> StyleProperties::content_visibility() const
 {
     auto value = property(CSS::PropertyID::ContentVisibility);
-    return value_id_to_content_visibility(value->to_identifier());
+    return keyword_to_content_visibility(value->to_keyword());
 }
 
 Optional<CSS::Cursor> StyleProperties::cursor() const
 {
     auto value = property(CSS::PropertyID::Cursor);
-    return value_id_to_cursor(value->to_identifier());
+    return keyword_to_cursor(value->to_keyword());
 }
 
 Optional<CSS::Visibility> StyleProperties::visibility() const
@@ -811,7 +811,7 @@ Optional<CSS::Visibility> StyleProperties::visibility() const
     auto value = property(CSS::PropertyID::Visibility);
     if (!value->is_keyword())
         return {};
-    return value_id_to_visibility(value->to_identifier());
+    return keyword_to_visibility(value->to_keyword());
 }
 
 Display StyleProperties::display() const
@@ -831,12 +831,12 @@ Vector<CSS::TextDecorationLine> StyleProperties::text_decoration_line() const
         Vector<CSS::TextDecorationLine> lines;
         auto& values = value->as_value_list().values();
         for (auto const& item : values) {
-            lines.append(value_id_to_text_decoration_line(item->to_identifier()).value());
+            lines.append(keyword_to_text_decoration_line(item->to_keyword()).value());
         }
         return lines;
     }
 
-    if (value->is_keyword() && value->to_identifier() == ValueID::None)
+    if (value->is_keyword() && value->to_keyword() == Keyword::None)
         return {};
 
     dbgln("FIXME: Unsupported value for text-decoration-line: {}", value->to_string());
@@ -846,25 +846,25 @@ Vector<CSS::TextDecorationLine> StyleProperties::text_decoration_line() const
 Optional<CSS::TextDecorationStyle> StyleProperties::text_decoration_style() const
 {
     auto value = property(CSS::PropertyID::TextDecorationStyle);
-    return value_id_to_text_decoration_style(value->to_identifier());
+    return keyword_to_text_decoration_style(value->to_keyword());
 }
 
 Optional<CSS::TextTransform> StyleProperties::text_transform() const
 {
     auto value = property(CSS::PropertyID::TextTransform);
-    return value_id_to_text_transform(value->to_identifier());
+    return keyword_to_text_transform(value->to_keyword());
 }
 
 Optional<CSS::ListStyleType> StyleProperties::list_style_type() const
 {
     auto value = property(CSS::PropertyID::ListStyleType);
-    return value_id_to_list_style_type(value->to_identifier());
+    return keyword_to_list_style_type(value->to_keyword());
 }
 
 Optional<CSS::ListStylePosition> StyleProperties::list_style_position() const
 {
     auto value = property(CSS::PropertyID::ListStylePosition);
-    return value_id_to_list_style_position(value->to_identifier());
+    return keyword_to_list_style_position(value->to_keyword());
 }
 
 Optional<CSS::Overflow> StyleProperties::overflow_x() const
@@ -880,7 +880,7 @@ Optional<CSS::Overflow> StyleProperties::overflow_y() const
 Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) const
 {
     auto value = property(property_id);
-    return value_id_to_overflow(value->to_identifier());
+    return keyword_to_overflow(value->to_keyword());
 }
 
 Vector<ShadowData> StyleProperties::shadow(PropertyID property_id, Layout::Node const& layout_node) const
@@ -956,7 +956,7 @@ Vector<ShadowData> StyleProperties::text_shadow(Layout::Node const& layout_node)
 Optional<CSS::BoxSizing> StyleProperties::box_sizing() const
 {
     auto value = property(CSS::PropertyID::BoxSizing);
-    return value_id_to_box_sizing(value->to_identifier());
+    return keyword_to_box_sizing(value->to_keyword());
 }
 
 Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_align() const
@@ -964,7 +964,7 @@ Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_ali
     auto value = property(CSS::PropertyID::VerticalAlign);
 
     if (value->is_keyword())
-        return value_id_to_vertical_align(value->to_identifier()).release_value();
+        return keyword_to_vertical_align(value->to_keyword()).release_value();
 
     if (value->is_length())
         return CSS::LengthPercentage(value->as_length().length());
@@ -981,7 +981,7 @@ Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_ali
 Optional<CSS::FontVariant> StyleProperties::font_variant() const
 {
     auto value = property(CSS::PropertyID::FontVariant);
-    return value_id_to_font_variant(value->to_identifier());
+    return keyword_to_font_variant(value->to_keyword());
 }
 
 CSS::GridTrackSizeList StyleProperties::grid_auto_columns() const
@@ -1044,7 +1044,7 @@ CSS::GridTrackPlacement StyleProperties::grid_row_start() const
 Optional<CSS::BorderCollapse> StyleProperties::border_collapse() const
 {
     auto value = property(CSS::PropertyID::BorderCollapse);
-    return value_id_to_border_collapse(value->to_identifier());
+    return keyword_to_border_collapse(value->to_keyword());
 }
 
 Vector<Vector<String>> StyleProperties::grid_template_areas() const
@@ -1056,7 +1056,7 @@ Vector<Vector<String>> StyleProperties::grid_template_areas() const
 Optional<CSS::ObjectFit> StyleProperties::object_fit() const
 {
     auto value = property(CSS::PropertyID::ObjectFit);
-    return value_id_to_object_fit(value->to_identifier());
+    return keyword_to_object_fit(value->to_keyword());
 }
 
 CSS::ObjectPosition StyleProperties::object_position() const
@@ -1082,19 +1082,19 @@ CSS::ObjectPosition StyleProperties::object_position() const
 Optional<CSS::TableLayout> StyleProperties::table_layout() const
 {
     auto value = property(CSS::PropertyID::TableLayout);
-    return value_id_to_table_layout(value->to_identifier());
+    return keyword_to_table_layout(value->to_keyword());
 }
 
 Optional<CSS::Direction> StyleProperties::direction() const
 {
     auto value = property(CSS::PropertyID::Direction);
-    return value_id_to_direction(value->to_identifier());
+    return keyword_to_direction(value->to_keyword());
 }
 
 Optional<CSS::MaskType> StyleProperties::mask_type() const
 {
     auto value = property(CSS::PropertyID::MaskType);
-    return value_id_to_mask_type(value->to_identifier());
+    return keyword_to_mask_type(value->to_keyword());
 }
 
 Color StyleProperties::stop_color() const
@@ -1102,8 +1102,8 @@ Color StyleProperties::stop_color() const
     auto value = property(CSS::PropertyID::StopColor);
     if (value->is_keyword()) {
         // Workaround lack of layout node to resolve current color.
-        auto& ident = value->as_keyword();
+        auto& keyword = value->as_keyword();
-        if (ident.id() == CSS::ValueID::Currentcolor)
+        if (keyword.keyword() == CSS::Keyword::Currentcolor)
             value = property(CSS::PropertyID::Color);
     }
     if (value->has_color()) {
@@ -1125,10 +1125,10 @@ QuotesData StyleProperties::quotes() const
 {
     auto value = property(CSS::PropertyID::Quotes);
     if (value->is_keyword()) {
-        switch (value->to_identifier()) {
+        switch (value->to_keyword()) {
-        case ValueID::Auto:
+        case Keyword::Auto:
             return QuotesData { .type = QuotesData::Type::Auto };
-        case ValueID::None:
+        case Keyword::None:
             return QuotesData { .type = QuotesData::Type::None };
         default:
             break;
@@ -1178,7 +1178,7 @@ Vector<CounterData> StyleProperties::counter_data(PropertyID property_id) const
         return result;
     }
 
-    if (value->to_identifier() == ValueID::None)
+    if (value->to_keyword() == Keyword::None)
         return {};
 
     dbgln("Unhandled type for {} value: '{}'", string_from_property_id(property_id), value->to_string());
@@ -1188,7 +1188,7 @@ Vector<CounterData> StyleProperties::counter_data(PropertyID property_id) const
 Optional<CSS::ScrollbarWidth> StyleProperties::scrollbar_width() const
 {
     auto value = property(CSS::PropertyID::ScrollbarWidth);
-    return value_id_to_scrollbar_width(value->to_identifier());
+    return keyword_to_scrollbar_width(value->to_keyword());
 }
 
 }

Userland/Libraries/LibWeb/CSS/StyleValues/CSSKeywordValue.cpp

@@ -18,110 +18,110 @@ namespace Web::CSS {
 
 String CSSKeywordValue::to_string() const
 {
-    return MUST(String::from_utf8(CSS::string_from_value_id(m_id)));
+    return MUST(String::from_utf8(string_from_keyword(keyword())));
 }
 
-bool CSSKeywordValue::is_color(ValueID value_id)
+bool CSSKeywordValue::is_color(Keyword keyword)
 {
-    switch (value_id) {
+    switch (keyword) {
-    case ValueID::Accentcolor:
+    case Keyword::Accentcolor:
-    case ValueID::Accentcolortext:
+    case Keyword::Accentcolortext:
-    case ValueID::Activeborder:
+    case Keyword::Activeborder:
-    case ValueID::Activecaption:
+    case Keyword::Activecaption:
-    case ValueID::Activetext:
+    case Keyword::Activetext:
-    case ValueID::Appworkspace:
+    case Keyword::Appworkspace:
-    case ValueID::Background:
+    case Keyword::Background:
-    case ValueID::Buttonborder:
+    case Keyword::Buttonborder:
-    case ValueID::Buttonface:
+    case Keyword::Buttonface:
-    case ValueID::Buttonhighlight:
+    case Keyword::Buttonhighlight:
-    case ValueID::Buttonshadow:
+    case Keyword::Buttonshadow:
-    case ValueID::Buttontext:
+    case Keyword::Buttontext:
-    case ValueID::Canvas:
+    case Keyword::Canvas:
-    case ValueID::Canvastext:
+    case Keyword::Canvastext:
-    case ValueID::Captiontext:
+    case Keyword::Captiontext:
-    case ValueID::Currentcolor:
+    case Keyword::Currentcolor:
-    case ValueID::Field:
+    case Keyword::Field:
-    case ValueID::Fieldtext:
+    case Keyword::Fieldtext:
-    case ValueID::Graytext:
+    case Keyword::Graytext:
-    case ValueID::Highlight:
+    case Keyword::Highlight:
-    case ValueID::Highlighttext:
+    case Keyword::Highlighttext:
-    case ValueID::Inactiveborder:
+    case Keyword::Inactiveborder:
-    case ValueID::Inactivecaption:
+    case Keyword::Inactivecaption:
-    case ValueID::Inactivecaptiontext:
+    case Keyword::Inactivecaptiontext:
-    case ValueID::Infobackground:
+    case Keyword::Infobackground:
-    case ValueID::Infotext:
+    case Keyword::Infotext:
-    case ValueID::LibwebLink:
+    case Keyword::LibwebLink:
-    case ValueID::LibwebPaletteActiveLink:
+    case Keyword::LibwebPaletteActiveLink:
-    case ValueID::LibwebPaletteActiveWindowBorder1:
+    case Keyword::LibwebPaletteActiveWindowBorder1:
-    case ValueID::LibwebPaletteActiveWindowBorder2:
+    case Keyword::LibwebPaletteActiveWindowBorder2:
-    case ValueID::LibwebPaletteActiveWindowTitle:
+    case Keyword::LibwebPaletteActiveWindowTitle:
-    case ValueID::LibwebPaletteBase:
+    case Keyword::LibwebPaletteBase:
-    case ValueID::LibwebPaletteBaseText:
+    case Keyword::LibwebPaletteBaseText:
-    case ValueID::LibwebPaletteButton:
+    case Keyword::LibwebPaletteButton:
-    case ValueID::LibwebPaletteButtonText:
+    case Keyword::LibwebPaletteButtonText:
-    case ValueID::LibwebPaletteDesktopBackground:
+    case Keyword::LibwebPaletteDesktopBackground:
-    case ValueID::LibwebPaletteFocusOutline:
+    case Keyword::LibwebPaletteFocusOutline:
-    case ValueID::LibwebPaletteHighlightWindowBorder1:
+    case Keyword::LibwebPaletteHighlightWindowBorder1:
-    case ValueID::LibwebPaletteHighlightWindowBorder2:
+    case Keyword::LibwebPaletteHighlightWindowBorder2:
-    case ValueID::LibwebPaletteHighlightWindowTitle:
+    case Keyword::LibwebPaletteHighlightWindowTitle:
-    case ValueID::LibwebPaletteHoverHighlight:
+    case Keyword::LibwebPaletteHoverHighlight:
-    case ValueID::LibwebPaletteInactiveSelection:
+    case Keyword::LibwebPaletteInactiveSelection:
-    case ValueID::LibwebPaletteInactiveSelectionText:
+    case Keyword::LibwebPaletteInactiveSelectionText:
-    case ValueID::LibwebPaletteInactiveWindowBorder1:
+    case Keyword::LibwebPaletteInactiveWindowBorder1:
-    case ValueID::LibwebPaletteInactiveWindowBorder2:
+    case Keyword::LibwebPaletteInactiveWindowBorder2:
-    case ValueID::LibwebPaletteInactiveWindowTitle:
+    case Keyword::LibwebPaletteInactiveWindowTitle:
-    case ValueID::LibwebPaletteLink:
+    case Keyword::LibwebPaletteLink:
-    case ValueID::LibwebPaletteMenuBase:
+    case Keyword::LibwebPaletteMenuBase:
-    case ValueID::LibwebPaletteMenuBaseText:
+    case Keyword::LibwebPaletteMenuBaseText:
-    case ValueID::LibwebPaletteMenuSelection:
+    case Keyword::LibwebPaletteMenuSelection:
-    case ValueID::LibwebPaletteMenuSelectionText:
+    case Keyword::LibwebPaletteMenuSelectionText:
-    case ValueID::LibwebPaletteMenuStripe:
+    case Keyword::LibwebPaletteMenuStripe:
-    case ValueID::LibwebPaletteMovingWindowBorder1:
+    case Keyword::LibwebPaletteMovingWindowBorder1:
-    case ValueID::LibwebPaletteMovingWindowBorder2:
+    case Keyword::LibwebPaletteMovingWindowBorder2:
-    case ValueID::LibwebPaletteMovingWindowTitle:
+    case Keyword::LibwebPaletteMovingWindowTitle:
-    case ValueID::LibwebPaletteRubberBandBorder:
+    case Keyword::LibwebPaletteRubberBandBorder:
-    case ValueID::LibwebPaletteRubberBandFill:
+    case Keyword::LibwebPaletteRubberBandFill:
-    case ValueID::LibwebPaletteRuler:
+    case Keyword::LibwebPaletteRuler:
-    case ValueID::LibwebPaletteRulerActiveText:
+    case Keyword::LibwebPaletteRulerActiveText:
-    case ValueID::LibwebPaletteRulerBorder:
+    case Keyword::LibwebPaletteRulerBorder:
-    case ValueID::LibwebPaletteRulerInactiveText:
+    case Keyword::LibwebPaletteRulerInactiveText:
-    case ValueID::LibwebPaletteSelection:
+    case Keyword::LibwebPaletteSelection:
-    case ValueID::LibwebPaletteSelectionText:
+    case Keyword::LibwebPaletteSelectionText:
-    case ValueID::LibwebPaletteSyntaxComment:
+    case Keyword::LibwebPaletteSyntaxComment:
-    case ValueID::LibwebPaletteSyntaxControlKeyword:
+    case Keyword::LibwebPaletteSyntaxControlKeyword:
-    case ValueID::LibwebPaletteSyntaxIdentifier:
+    case Keyword::LibwebPaletteSyntaxIdentifier:
-    case ValueID::LibwebPaletteSyntaxKeyword:
+    case Keyword::LibwebPaletteSyntaxKeyword:
-    case ValueID::LibwebPaletteSyntaxNumber:
+    case Keyword::LibwebPaletteSyntaxNumber:
-    case ValueID::LibwebPaletteSyntaxOperator:
+    case Keyword::LibwebPaletteSyntaxOperator:
-    case ValueID::LibwebPaletteSyntaxPreprocessorStatement:
+    case Keyword::LibwebPaletteSyntaxPreprocessorStatement:
-    case ValueID::LibwebPaletteSyntaxPreprocessorValue:
+    case Keyword::LibwebPaletteSyntaxPreprocessorValue:
-    case ValueID::LibwebPaletteSyntaxPunctuation:
+    case Keyword::LibwebPaletteSyntaxPunctuation:
-    case ValueID::LibwebPaletteSyntaxString:
+    case Keyword::LibwebPaletteSyntaxString:
-    case ValueID::LibwebPaletteSyntaxType:
+    case Keyword::LibwebPaletteSyntaxType:
-    case ValueID::LibwebPaletteTextCursor:
+    case Keyword::LibwebPaletteTextCursor:
-    case ValueID::LibwebPaletteThreedHighlight:
+    case Keyword::LibwebPaletteThreedHighlight:
-    case ValueID::LibwebPaletteThreedShadow1:
+    case Keyword::LibwebPaletteThreedShadow1:
-    case ValueID::LibwebPaletteThreedShadow2:
+    case Keyword::LibwebPaletteThreedShadow2:
-    case ValueID::LibwebPaletteVisitedLink:
+    case Keyword::LibwebPaletteVisitedLink:
-    case ValueID::LibwebPaletteWindow:
+    case Keyword::LibwebPaletteWindow:
-    case ValueID::LibwebPaletteWindowText:
+    case Keyword::LibwebPaletteWindowText:
-    case ValueID::Linktext:
+    case Keyword::Linktext:
-    case ValueID::Mark:
+    case Keyword::Mark:
-    case ValueID::Marktext:
+    case Keyword::Marktext:
-    case ValueID::Menu:
+    case Keyword::Menu:
-    case ValueID::Menutext:
+    case Keyword::Menutext:
-    case ValueID::Scrollbar:
+    case Keyword::Scrollbar:
-    case ValueID::Selecteditem:
+    case Keyword::Selecteditem:
-    case ValueID::Selecteditemtext:
+    case Keyword::Selecteditemtext:
-    case ValueID::Threeddarkshadow:
+    case Keyword::Threeddarkshadow:
-    case ValueID::Threedface:
+    case Keyword::Threedface:
-    case ValueID::Threedhighlight:
+    case Keyword::Threedhighlight:
-    case ValueID::Threedlightshadow:
+    case Keyword::Threedlightshadow:
-    case ValueID::Threedshadow:
+    case Keyword::Threedshadow:
-    case ValueID::Visitedtext:
+    case Keyword::Visitedtext:
-    case ValueID::Window:
+    case Keyword::Window:
-    case ValueID::Windowframe:
+    case Keyword::Windowframe:
-    case ValueID::Windowtext:
+    case Keyword::Windowtext:
         return true;
     default:
         return false;
@@ -130,12 +130,12 @@ bool CSSKeywordValue::is_color(ValueID value_id)
 
 bool CSSKeywordValue::has_color() const
 {
-    return is_color(m_id);
+    return is_color(keyword());
 }
 
 Color CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&> node) const
 {
-    if (id() == CSS::ValueID::Currentcolor) {
+    if (keyword() == Keyword::Currentcolor) {
         if (!node.has_value() || !node->has_style())
             return Color::Black;
         return node->computed_values().color();
@@ -144,65 +144,65 @@ Color CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&> node) con
     // First, handle <system-color>s, since they don't require a node.
     // https://www.w3.org/TR/css-color-4/#css-system-colors
     // https://www.w3.org/TR/css-color-4/#deprecated-system-colors
-    switch (id()) {
+    switch (keyword()) {
-    case ValueID::Accentcolor:
+    case Keyword::Accentcolor:
         return SystemColor::accent_color();
-    case ValueID::Accentcolortext:
+    case Keyword::Accentcolortext:
         return SystemColor::accent_color_text();
-    case ValueID::Activetext:
+    case Keyword::Activetext:
         return SystemColor::active_text();
-    case ValueID::Buttonborder:
+    case Keyword::Buttonborder:
-    case ValueID::Activeborder:
+    case Keyword::Activeborder:
-    case ValueID::Inactiveborder:
+    case Keyword::Inactiveborder:
-    case ValueID::Threeddarkshadow:
+    case Keyword::Threeddarkshadow:
-    case ValueID::Threedhighlight:
+    case Keyword::Threedhighlight:
-    case ValueID::Threedlightshadow:
+    case Keyword::Threedlightshadow:
-    case ValueID::Threedshadow:
+    case Keyword::Threedshadow:
-    case ValueID::Windowframe:
+    case Keyword::Windowframe:
         return SystemColor::button_border();
-    case ValueID::Buttonface:
+    case Keyword::Buttonface:
-    case ValueID::Buttonhighlight:
+    case Keyword::Buttonhighlight:
-    case ValueID::Buttonshadow:
+    case Keyword::Buttonshadow:
-    case ValueID::Threedface:
+    case Keyword::Threedface:
         return SystemColor::button_face();
-    case ValueID::Buttontext:
+    case Keyword::Buttontext:
         return SystemColor::button_text();
-    case ValueID::Canvas:
+    case Keyword::Canvas:
-    case ValueID::Appworkspace:
+    case Keyword::Appworkspace:
-    case ValueID::Background:
+    case Keyword::Background:
-    case ValueID::Inactivecaption:
+    case Keyword::Inactivecaption:
-    case ValueID::Infobackground:
+    case Keyword::Infobackground:
-    case ValueID::Menu:
+    case Keyword::Menu:
-    case ValueID::Scrollbar:
+    case Keyword::Scrollbar:
-    case ValueID::Window:
+    case Keyword::Window:
         return SystemColor::canvas();
-    case ValueID::Canvastext:
+    case Keyword::Canvastext:
-    case ValueID::Activecaption:
+    case Keyword::Activecaption:
-    case ValueID::Captiontext:
+    case Keyword::Captiontext:
-    case ValueID::Infotext:
+    case Keyword::Infotext:
-    case ValueID::Menutext:
+    case Keyword::Menutext:
-    case ValueID::Windowtext:
+    case Keyword::Windowtext:
         return SystemColor::canvas_text();
-    case ValueID::Field:
+    case Keyword::Field:
         return SystemColor::field();
-    case ValueID::Fieldtext:
+    case Keyword::Fieldtext:
         return SystemColor::field_text();
-    case ValueID::Graytext:
+    case Keyword::Graytext:
-    case ValueID::Inactivecaptiontext:
+    case Keyword::Inactivecaptiontext:
         return SystemColor::gray_text();
-    case ValueID::Highlight:
+    case Keyword::Highlight:
         return SystemColor::highlight();
-    case ValueID::Highlighttext:
+    case Keyword::Highlighttext:
         return SystemColor::highlight_text();
-    case ValueID::Mark:
+    case Keyword::Mark:
         return SystemColor::mark();
-    case ValueID::Marktext:
+    case Keyword::Marktext:
         return SystemColor::mark_text();
-    case ValueID::Selecteditem:
+    case Keyword::Selecteditem:
         return SystemColor::selected_item();
-    case ValueID::Selecteditemtext:
+    case Keyword::Selecteditemtext:
         return SystemColor::selected_item_text();
-    case ValueID::Visitedtext:
+    case Keyword::Visitedtext:
         return SystemColor::visited_text();
     default:
         break;
@@ -214,118 +214,118 @@ Color CSSKeywordValue::to_color(Optional<Layout::NodeWithStyle const&> node) con
     }
 
     auto& document = node->document();
-    if (id() == CSS::ValueID::LibwebLink || id() == ValueID::Linktext)
+    if (keyword() == Keyword::LibwebLink || keyword() == Keyword::Linktext)
         return document.normal_link_color();
 
     auto palette = document.page().palette();
-    switch (id()) {
+    switch (keyword()) {
-    case CSS::ValueID::LibwebPaletteDesktopBackground:
+    case Keyword::LibwebPaletteDesktopBackground:
         return palette.color(ColorRole::DesktopBackground);
-    case CSS::ValueID::LibwebPaletteActiveWindowBorder1:
+    case Keyword::LibwebPaletteActiveWindowBorder1:
         return palette.color(ColorRole::ActiveWindowBorder1);
-    case CSS::ValueID::LibwebPaletteActiveWindowBorder2:
+    case Keyword::LibwebPaletteActiveWindowBorder2:
         return palette.color(ColorRole::ActiveWindowBorder2);
-    case CSS::ValueID::LibwebPaletteActiveWindowTitle:
+    case Keyword::LibwebPaletteActiveWindowTitle:
         return palette.color(ColorRole::ActiveWindowTitle);
-    case CSS::ValueID::LibwebPaletteInactiveWindowBorder1:
+    case Keyword::LibwebPaletteInactiveWindowBorder1:
         return palette.color(ColorRole::InactiveWindowBorder1);
-    case CSS::ValueID::LibwebPaletteInactiveWindowBorder2:
+    case Keyword::LibwebPaletteInactiveWindowBorder2:
         return palette.color(ColorRole::InactiveWindowBorder2);
-    case CSS::ValueID::LibwebPaletteInactiveWindowTitle:
+    case Keyword::LibwebPaletteInactiveWindowTitle:
         return palette.color(ColorRole::InactiveWindowTitle);
-    case CSS::ValueID::LibwebPaletteMovingWindowBorder1:
+    case Keyword::LibwebPaletteMovingWindowBorder1:
         return palette.color(ColorRole::MovingWindowBorder1);
-    case CSS::ValueID::LibwebPaletteMovingWindowBorder2:
+    case Keyword::LibwebPaletteMovingWindowBorder2:
         return palette.color(ColorRole::MovingWindowBorder2);
-    case CSS::ValueID::LibwebPaletteMovingWindowTitle:
+    case Keyword::LibwebPaletteMovingWindowTitle:
         return palette.color(ColorRole::MovingWindowTitle);
-    case CSS::ValueID::LibwebPaletteHighlightWindowBorder1:
+    case Keyword::LibwebPaletteHighlightWindowBorder1:
         return palette.color(ColorRole::HighlightWindowBorder1);
-    case CSS::ValueID::LibwebPaletteHighlightWindowBorder2:
+    case Keyword::LibwebPaletteHighlightWindowBorder2:
         return palette.color(ColorRole::HighlightWindowBorder2);
-    case CSS::ValueID::LibwebPaletteHighlightWindowTitle:
+    case Keyword::LibwebPaletteHighlightWindowTitle:
         return palette.color(ColorRole::HighlightWindowTitle);
-    case CSS::ValueID::LibwebPaletteMenuStripe:
+    case Keyword::LibwebPaletteMenuStripe:
         return palette.color(ColorRole::MenuStripe);
-    case CSS::ValueID::LibwebPaletteMenuBase:
+    case Keyword::LibwebPaletteMenuBase:
         return palette.color(ColorRole::MenuBase);
-    case CSS::ValueID::LibwebPaletteMenuBaseText:
+    case Keyword::LibwebPaletteMenuBaseText:
         return palette.color(ColorRole::MenuBaseText);
-    case CSS::ValueID::LibwebPaletteMenuSelection:
+    case Keyword::LibwebPaletteMenuSelection:
         return palette.color(ColorRole::MenuSelection);
-    case CSS::ValueID::LibwebPaletteMenuSelectionText:
+    case Keyword::LibwebPaletteMenuSelectionText:
         return palette.color(ColorRole::MenuSelectionText);
-    case CSS::ValueID::LibwebPaletteWindow:
+    case Keyword::LibwebPaletteWindow:
         return palette.color(ColorRole::Window);
-    case CSS::ValueID::LibwebPaletteWindowText:
+    case Keyword::LibwebPaletteWindowText:
         return palette.color(ColorRole::WindowText);
-    case CSS::ValueID::LibwebPaletteButton:
+    case Keyword::LibwebPaletteButton:
         return palette.color(ColorRole::Button);
-    case CSS::ValueID::LibwebPaletteButtonText:
+    case Keyword::LibwebPaletteButtonText:
         return palette.color(ColorRole::ButtonText);
-    case CSS::ValueID::LibwebPaletteBase:
+    case Keyword::LibwebPaletteBase:
         return palette.color(ColorRole::Base);
-    case CSS::ValueID::LibwebPaletteBaseText:
+    case Keyword::LibwebPaletteBaseText:
         return palette.color(ColorRole::BaseText);
-    case CSS::ValueID::LibwebPaletteThreedHighlight:
+    case Keyword::LibwebPaletteThreedHighlight:
         return palette.color(ColorRole::ThreedHighlight);
-    case CSS::ValueID::LibwebPaletteThreedShadow1:
+    case Keyword::LibwebPaletteThreedShadow1:
         return palette.color(ColorRole::ThreedShadow1);
-    case CSS::ValueID::LibwebPaletteThreedShadow2:
+    case Keyword::LibwebPaletteThreedShadow2:
         return palette.color(ColorRole::ThreedShadow2);
-    case CSS::ValueID::LibwebPaletteHoverHighlight:
+    case Keyword::LibwebPaletteHoverHighlight:
         return palette.color(ColorRole::HoverHighlight);
-    case CSS::ValueID::LibwebPaletteSelection:
+    case Keyword::LibwebPaletteSelection:
         return palette.color(ColorRole::Selection);
-    case CSS::ValueID::LibwebPaletteSelectionText:
+    case Keyword::LibwebPaletteSelectionText:
         return palette.color(ColorRole::SelectionText);
-    case CSS::ValueID::LibwebPaletteInactiveSelection:
+    case Keyword::LibwebPaletteInactiveSelection:
         return palette.color(ColorRole::InactiveSelection);
-    case CSS::ValueID::LibwebPaletteInactiveSelectionText:
+    case Keyword::LibwebPaletteInactiveSelectionText:
         return palette.color(ColorRole::InactiveSelectionText);
-    case CSS::ValueID::LibwebPaletteRubberBandFill:
+    case Keyword::LibwebPaletteRubberBandFill:
         return palette.color(ColorRole::RubberBandFill);
-    case CSS::ValueID::LibwebPaletteRubberBandBorder:
+    case Keyword::LibwebPaletteRubberBandBorder:
         return palette.color(ColorRole::RubberBandBorder);
-    case CSS::ValueID::LibwebPaletteLink:
+    case Keyword::LibwebPaletteLink:
         return palette.color(ColorRole::Link);
-    case CSS::ValueID::LibwebPaletteActiveLink:
+    case Keyword::LibwebPaletteActiveLink:
         return palette.color(ColorRole::ActiveLink);
-    case CSS::ValueID::LibwebPaletteVisitedLink:
+    case Keyword::LibwebPaletteVisitedLink:
         return palette.color(ColorRole::VisitedLink);
-    case CSS::ValueID::LibwebPaletteRuler:
+    case Keyword::LibwebPaletteRuler:
         return palette.color(ColorRole::Ruler);
-    case CSS::ValueID::LibwebPaletteRulerBorder:
+    case Keyword::LibwebPaletteRulerBorder:
         return palette.color(ColorRole::RulerBorder);
-    case CSS::ValueID::LibwebPaletteRulerActiveText:
+    case Keyword::LibwebPaletteRulerActiveText:
         return palette.color(ColorRole::RulerActiveText);
-    case CSS::ValueID::LibwebPaletteRulerInactiveText:
+    case Keyword::LibwebPaletteRulerInactiveText:
         return palette.color(ColorRole::RulerInactiveText);
-    case CSS::ValueID::LibwebPaletteTextCursor:
+    case Keyword::LibwebPaletteTextCursor:
         return palette.color(ColorRole::TextCursor);
-    case CSS::ValueID::LibwebPaletteFocusOutline:
+    case Keyword::LibwebPaletteFocusOutline:
         return palette.color(ColorRole::FocusOutline);
-    case CSS::ValueID::LibwebPaletteSyntaxComment:
+    case Keyword::LibwebPaletteSyntaxComment:
         return palette.color(ColorRole::SyntaxComment);
-    case CSS::ValueID::LibwebPaletteSyntaxNumber:
+    case Keyword::LibwebPaletteSyntaxNumber:
         return palette.color(ColorRole::SyntaxNumber);
-    case CSS::ValueID::LibwebPaletteSyntaxString:
+    case Keyword::LibwebPaletteSyntaxString:
         return palette.color(ColorRole::SyntaxString);
-    case CSS::ValueID::LibwebPaletteSyntaxType:
+    case Keyword::LibwebPaletteSyntaxType:
         return palette.color(ColorRole::SyntaxType);
-    case CSS::ValueID::LibwebPaletteSyntaxPunctuation:
+    case Keyword::LibwebPaletteSyntaxPunctuation:
         return palette.color(ColorRole::SyntaxPunctuation);
-    case CSS::ValueID::LibwebPaletteSyntaxOperator:
+    case Keyword::LibwebPaletteSyntaxOperator:
         return palette.color(ColorRole::SyntaxOperator);
-    case CSS::ValueID::LibwebPaletteSyntaxKeyword:
+    case Keyword::LibwebPaletteSyntaxKeyword:
         return palette.color(ColorRole::SyntaxKeyword);
-    case CSS::ValueID::LibwebPaletteSyntaxControlKeyword:
+    case Keyword::LibwebPaletteSyntaxControlKeyword:
         return palette.color(ColorRole::SyntaxControlKeyword);
-    case CSS::ValueID::LibwebPaletteSyntaxIdentifier:
+    case Keyword::LibwebPaletteSyntaxIdentifier:
         return palette.color(ColorRole::SyntaxIdentifier);
-    case CSS::ValueID::LibwebPaletteSyntaxPreprocessorStatement:
+    case Keyword::LibwebPaletteSyntaxPreprocessorStatement:
         return palette.color(ColorRole::SyntaxPreprocessorStatement);
-    case CSS::ValueID::LibwebPaletteSyntaxPreprocessorValue:
+    case Keyword::LibwebPaletteSyntaxPreprocessorValue:
         return palette.color(ColorRole::SyntaxPreprocessorValue);
     default:
         return {};

Userland/Libraries/LibWeb/CSS/StyleValues/CSSKeywordValue.h

@@ -10,36 +10,36 @@
 #pragma once
 
 #include <LibWeb/CSS/CSSStyleValue.h>
-#include <LibWeb/CSS/ValueID.h>
+#include <LibWeb/CSS/Keyword.h>
 
 namespace Web::CSS {
 
 // https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue
 class CSSKeywordValue final : public StyleValueWithDefaultOperators<CSSKeywordValue> {
 public:
-    static ValueComparingNonnullRefPtr<CSSKeywordValue> create(ValueID id)
+    static ValueComparingNonnullRefPtr<CSSKeywordValue> create(Keyword keyword)
     {
-        return adopt_ref(*new (nothrow) CSSKeywordValue(id));
+        return adopt_ref(*new (nothrow) CSSKeywordValue(keyword));
     }
     virtual ~CSSKeywordValue() override = default;
 
-    ValueID id() const { return m_id; }
+    Keyword keyword() const { return m_keyword; }
 
-    static bool is_color(ValueID);
+    static bool is_color(Keyword);
     virtual bool has_color() const override;
     virtual Color to_color(Optional<Layout::NodeWithStyle const&> node) const override;
     virtual String to_string() const override;
 
-    bool properties_equal(CSSKeywordValue const& other) const { return m_id == other.m_id; }
+    bool properties_equal(CSSKeywordValue const& other) const { return m_keyword == other.m_keyword; }
 
 private:
-    explicit CSSKeywordValue(ValueID id)
+    explicit CSSKeywordValue(Keyword keyword)
         : StyleValueWithDefaultOperators(Type::Keyword)
-        , m_id(id)
+        , m_keyword(keyword)
     {
     }
 
-    ValueID m_id { ValueID::Invalid };
+    Keyword m_keyword { Keyword::Invalid };
 };
 
 }

Userland/Libraries/LibWeb/CSS/StyleValues/CounterStyleValue.cpp

@@ -8,10 +8,10 @@
 
 #include "CounterStyleValue.h"
 #include <LibWeb/CSS/Enums.h>
+#include <LibWeb/CSS/Keyword.h>
 #include <LibWeb/CSS/Serialize.h>
 #include <LibWeb/CSS/StyleValues/CustomIdentStyleValue.h>
 #include <LibWeb/CSS/StyleValues/StringStyleValue.h>
-#include <LibWeb/CSS/ValueID.h>
 #include <LibWeb/DOM/Element.h>
 
 namespace Web::CSS {
@@ -51,9 +51,9 @@ static String generate_a_counter_representation(CSSStyleValue const& counter_sty
     //  It's based largely on the ListItemMarkerBox code, with minimal adjustments.
     if (counter_style.is_custom_ident()) {
         auto counter_style_name = counter_style.as_custom_ident().custom_ident();
-        auto identifier = value_id_from_string(counter_style_name);
+        auto keyword = keyword_from_string(counter_style_name);
-        if (identifier.has_value()) {
+        if (keyword.has_value()) {
-            auto list_style_type = value_id_to_list_style_type(*identifier);
+            auto list_style_type = keyword_to_list_style_type(*keyword);
             if (list_style_type.has_value()) {
                 switch (*list_style_type) {
                 case ListStyleType::Square:
@@ -151,7 +151,7 @@ String CounterStyleValue::to_string() const
     list.append(CustomIdentStyleValue::create(m_properties.counter_name));
     if (m_properties.function == CounterFunction::Counters)
         list.append(StringStyleValue::create(m_properties.join_string.to_string()));
-    if (m_properties.counter_style->to_identifier() != ValueID::Decimal)
+    if (m_properties.counter_style->to_keyword() != Keyword::Decimal)
         list.append(m_properties.counter_style);
 
     // 5. Let each item in list be the result of invoking serialize a CSS component value on that item.

Userland/Libraries/LibWeb/DOM/Element.cpp

@@ -542,7 +542,7 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_style()
     if (is<HTML::HTMLTableElement>(*this)) {
         auto text_align = new_computed_css_values->text_align();
         if (text_align.has_value() && (text_align.value() == CSS::TextAlign::LibwebLeft || text_align.value() == CSS::TextAlign::LibwebCenter || text_align.value() == CSS::TextAlign::LibwebRight))
-            new_computed_css_values->set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Start));
+            new_computed_css_values->set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Start));
     }
 
     CSS::RequiredInvalidationAfterStyleChange invalidation;

Userland/Libraries/LibWeb/Dump.cpp

@@ -536,7 +536,7 @@ void dump_selector(StringBuilder& builder, CSS::Selector const& selector)
                     break;
                 }
                 case CSS::PseudoClassMetadata::ParameterType::Ident:
-                    builder.appendff("(ident={})", string_from_value_id(pseudo_class.identifier.value()));
+                    builder.appendff("(keyword={})", string_from_keyword(pseudo_class.keyword.value()));
                     break;
                 case CSS::PseudoClassMetadata::ParameterType::LanguageRanges: {
                     builder.append('(');

Userland/Libraries/LibWeb/Forward.h

@@ -212,9 +212,9 @@ class UnresolvedStyleValue;
 class UnsetStyleValue;
 class VisualViewport;
 
+enum class Keyword;
 enum class MediaFeatureID;
 enum class PropertyID;
-enum class ValueID;
 
 struct BackgroundLayerData;
 }

Userland/Libraries/LibWeb/HTML/HTMLCanvasElement.cpp

@@ -74,7 +74,7 @@ void HTMLCanvasElement::apply_presentational_hints(CSS::StyleProperties& style)
         // then the user agent is expected to use the parsed integers as a presentational hint for the 'aspect-ratio' property of the form auto w / h.
         style.set_property(CSS::PropertyID::AspectRatio,
             CSS::StyleValueList::create(CSS::StyleValueVector {
-                                            CSS::CSSKeywordValue::create(CSS::ValueID::Auto),
+                                            CSS::CSSKeywordValue::create(CSS::Keyword::Auto),
                                             CSS::RatioStyleValue::create(CSS::Ratio { static_cast<double>(w.value()), static_cast<double>(h.value()) }) },
 
                 CSS::StyleValueList::Separator::Space));

Userland/Libraries/LibWeb/HTML/HTMLDivElement.cpp

@@ -27,13 +27,13 @@ void HTMLDivElement::apply_presentational_hints(CSS::StyleProperties& style) con
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("align"sv)) {
             if (value.equals_ignoring_ascii_case("left"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::LibwebLeft));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebLeft));
             else if (value.equals_ignoring_ascii_case("right"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::LibwebRight));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebRight));
             else if (value.equals_ignoring_ascii_case("center"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::LibwebCenter));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebCenter));
             else if (value.equals_ignoring_ascii_case("justify"sv))
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Justify));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
         }
     });
 }

Userland/Libraries/LibWeb/HTML/HTMLFontElement.cpp

@@ -26,7 +26,7 @@ enum class Mode {
 };
 
 // https://html.spec.whatwg.org/multipage/rendering.html#rules-for-parsing-a-legacy-font-size
-static Optional<CSS::ValueID> parse_legacy_font_size(StringView string)
+static Optional<CSS::Keyword> parse_legacy_font_size(StringView string)
 {
     // 1. Let input be the attribute's value.
     // 2. Let position be a pointer into input, initially pointing at the start of the string.
@@ -81,19 +81,19 @@ static Optional<CSS::ValueID> parse_legacy_font_size(StringView string)
     // 12. Set 'font-size' to the keyword corresponding to the value of value according to the following table:
     switch (value) {
     case 1:
-        return CSS::ValueID::XSmall;
+        return CSS::Keyword::XSmall;
     case 2:
-        return CSS::ValueID::Small;
+        return CSS::Keyword::Small;
     case 3:
-        return CSS::ValueID::Medium;
+        return CSS::Keyword::Medium;
     case 4:
-        return CSS::ValueID::Large;
+        return CSS::Keyword::Large;
     case 5:
-        return CSS::ValueID::XLarge;
+        return CSS::Keyword::XLarge;
     case 6:
-        return CSS::ValueID::XxLarge;
+        return CSS::Keyword::XxLarge;
     case 7:
-        return CSS::ValueID::XxxLarge;
+        return CSS::Keyword::XxxLarge;
     default:
         VERIFY_NOT_REACHED();
     }
@@ -124,7 +124,7 @@ void HTMLFontElement::apply_presentational_hints(CSS::StyleProperties& style) co
             // When a font element has a size attribute, the user agent is expected to use the following steps, known as the rules for parsing a legacy font size, to treat the attribute as a presentational hint setting the element's 'font-size' property:
             auto font_size_or_empty = parse_legacy_font_size(value);
             if (font_size_or_empty.has_value()) {
-                auto font_size = string_from_value_id(font_size_or_empty.release_value());
+                auto font_size = string_from_keyword(font_size_or_empty.release_value());
                 if (auto parsed_value = parse_css_value(CSS::Parser::ParsingContext { document() }, font_size, CSS::PropertyID::FontSize))
                     style.set_property(CSS::PropertyID::FontSize, parsed_value.release_nonnull());
             }

Userland/Libraries/LibWeb/HTML/HTMLHeadingElement.cpp

@@ -34,13 +34,13 @@ void HTMLHeadingElement::apply_presentational_hints(CSS::StyleProperties& style)
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("align"sv)) {
             if (value == "left"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Left));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Left));
             else if (value == "right"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Right));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Right));
             else if (value == "center"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Center));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
             else if (value == "justify"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Justify));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
         }
     });
 }

Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp

@@ -135,7 +135,7 @@ void HTMLInputElement::adjust_computed_style(CSS::StyleProperties& style)
     double current_line_height = style.line_height().to_double();
 
     if (is_single_line() && current_line_height < normal_line_height)
-        style.set_property(CSS::PropertyID::LineHeight, CSS::CSSKeywordValue::create(CSS::ValueID::Normal));
+        style.set_property(CSS::PropertyID::LineHeight, CSS::CSSKeywordValue::create(CSS::Keyword::Normal));
 }
 
 void HTMLInputElement::set_checked(bool checked, ChangeSource change_source)

Userland/Libraries/LibWeb/HTML/HTMLParagraphElement.cpp

@@ -34,13 +34,13 @@ void HTMLParagraphElement::apply_presentational_hints(CSS::StyleProperties& styl
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("align"sv)) {
             if (value == "left"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Left));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Left));
             else if (value == "right"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Right));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Right));
             else if (value == "center"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Center));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
             else if (value == "justify"sv)
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::Justify));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Justify));
         }
     });
 }

Userland/Libraries/LibWeb/HTML/HTMLPreElement.cpp

@@ -34,7 +34,7 @@ void HTMLPreElement::apply_presentational_hints(CSS::StyleProperties& style) con
 
     for_each_attribute([&](auto const& name, auto const&) {
         if (name.equals_ignoring_ascii_case(HTML::AttributeNames::wrap))
-            style.set_property(CSS::PropertyID::WhiteSpace, CSS::CSSKeywordValue::create(CSS::ValueID::PreWrap));
+            style.set_property(CSS::PropertyID::WhiteSpace, CSS::CSSKeywordValue::create(CSS::Keyword::PreWrap));
     });
 }
 

Userland/Libraries/LibWeb/HTML/HTMLTableCaptionElement.cpp

@@ -34,7 +34,7 @@ void HTMLTableCaptionElement::apply_presentational_hints(CSS::StyleProperties& s
     for_each_attribute([&](auto& name, auto& value) {
         if (name.equals_ignoring_ascii_case("align"sv)) {
             if (value == "bottom"sv)
-                style.set_property(CSS::PropertyID::CaptionSide, CSS::CSSKeywordValue::create(CSS::ValueID::Bottom));
+                style.set_property(CSS::PropertyID::CaptionSide, CSS::CSSKeywordValue::create(CSS::Keyword::Bottom));
         }
     });
 }

Userland/Libraries/LibWeb/HTML/HTMLTableCellElement.cpp

@@ -54,11 +54,11 @@ void HTMLTableCellElement::apply_presentational_hints(CSS::StyleProperties& styl
         }
         if (name == HTML::AttributeNames::align) {
             if (value.equals_ignoring_ascii_case("center"sv) || value.equals_ignoring_ascii_case("middle"sv)) {
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::LibwebCenter));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebCenter));
             } else if (value.equals_ignoring_ascii_case("left"sv)) {
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::LibwebLeft));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebLeft));
             } else if (value.equals_ignoring_ascii_case("right"sv)) {
-                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::ValueID::LibwebRight));
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::LibwebRight));
             } else {
                 if (auto parsed_value = parse_css_value(CSS::Parser::ParsingContext { document() }, value, CSS::PropertyID::TextAlign))
                     style.set_property(CSS::PropertyID::TextAlign, parsed_value.release_nonnull());
@@ -96,7 +96,7 @@ void HTMLTableCellElement::apply_presentational_hints(CSS::StyleProperties& styl
     if (!border)
         return;
     auto apply_border_style = [&](CSS::PropertyID style_property, CSS::PropertyID width_property, CSS::PropertyID color_property) {
-        style.set_property(style_property, CSS::CSSKeywordValue::create(CSS::ValueID::Inset));
+        style.set_property(style_property, CSS::CSSKeywordValue::create(CSS::Keyword::Inset));
         style.set_property(width_property, CSS::LengthStyleValue::create(CSS::Length::make_px(1)));
         style.set_property(color_property, table_element->computed_css_values()->property(color_property));
     };

Userland/Libraries/LibWeb/HTML/HTMLTableElement.cpp

@@ -65,8 +65,8 @@ void HTMLTableElement::apply_presentational_hints(CSS::StyleProperties& style) c
         }
         if (name == HTML::AttributeNames::align) {
             if (value.equals_ignoring_ascii_case("center"sv)) {
-                style.set_property(CSS::PropertyID::MarginLeft, CSS::CSSKeywordValue::create(CSS::ValueID::Auto));
+                style.set_property(CSS::PropertyID::MarginLeft, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
-                style.set_property(CSS::PropertyID::MarginRight, CSS::CSSKeywordValue::create(CSS::ValueID::Auto));
+                style.set_property(CSS::PropertyID::MarginRight, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
             } else if (auto parsed_value = parse_css_value(CSS::Parser::ParsingContext { document() }, value, CSS::PropertyID::Float)) {
                 style.set_property(CSS::PropertyID::Float, parsed_value.release_nonnull());
             }
@@ -89,7 +89,7 @@ void HTMLTableElement::apply_presentational_hints(CSS::StyleProperties& style) c
             if (!border)
                 return;
             auto apply_border_style = [&](CSS::PropertyID style_property, CSS::PropertyID width_property, CSS::PropertyID color_property) {
-                auto legacy_line_style = CSS::CSSKeywordValue::create(CSS::ValueID::Outset);
+                auto legacy_line_style = CSS::CSSKeywordValue::create(CSS::Keyword::Outset);
                 style.set_property(style_property, legacy_line_style);
                 style.set_property(width_property, CSS::LengthStyleValue::create(CSS::Length::make_px(border)));
                 style.set_property(color_property, CSS::ColorStyleValue::create(Color(128, 128, 128)));

Userland/Libraries/LibWeb/HTML/Window.cpp

@@ -279,15 +279,15 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
     // https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table
     switch (media_feature) {
     case CSS::MediaFeatureID::AnyHover:
-        return CSS::MediaFeatureValue(CSS::ValueID::Hover);
+        return CSS::MediaFeatureValue(CSS::Keyword::Hover);
     case CSS::MediaFeatureID::AnyPointer:
-        return CSS::MediaFeatureValue(CSS::ValueID::Fine);
+        return CSS::MediaFeatureValue(CSS::Keyword::Fine);
     case CSS::MediaFeatureID::AspectRatio:
         return CSS::MediaFeatureValue(CSS::Ratio(inner_width(), inner_height()));
     case CSS::MediaFeatureID::Color:
         return CSS::MediaFeatureValue(8);
     case CSS::MediaFeatureID::ColorGamut:
-        return CSS::MediaFeatureValue(CSS::ValueID::Srgb);
+        return CSS::MediaFeatureValue(CSS::Keyword::Srgb);
     case CSS::MediaFeatureID::ColorIndex:
         return CSS::MediaFeatureValue(0);
     // FIXME: device-aspect-ratio
@@ -297,13 +297,13 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
         return CSS::MediaFeatureValue(CSS::Length::make_px(page().web_exposed_screen_area().width()));
     case CSS::MediaFeatureID::DisplayMode:
         // FIXME: Detect if window is fullscreen
-        return CSS::MediaFeatureValue(CSS::ValueID::Browser);
+        return CSS::MediaFeatureValue(CSS::Keyword::Browser);
     case CSS::MediaFeatureID::DynamicRange:
-        return CSS::MediaFeatureValue(CSS::ValueID::Standard);
+        return CSS::MediaFeatureValue(CSS::Keyword::Standard);
     case CSS::MediaFeatureID::EnvironmentBlending:
-        return CSS::MediaFeatureValue(CSS::ValueID::Opaque);
+        return CSS::MediaFeatureValue(CSS::Keyword::Opaque);
     case CSS::MediaFeatureID::ForcedColors:
-        return CSS::MediaFeatureValue(CSS::ValueID::None);
+        return CSS::MediaFeatureValue(CSS::Keyword::None);
     case CSS::MediaFeatureID::Grid:
         return CSS::MediaFeatureValue(0);
     case CSS::MediaFeatureID::Height:
@@ -311,78 +311,78 @@ Optional<CSS::MediaFeatureValue> Window::query_media_feature(CSS::MediaFeatureID
     case CSS::MediaFeatureID::HorizontalViewportSegments:
         return CSS::MediaFeatureValue(1);
     case CSS::MediaFeatureID::Hover:
-        return CSS::MediaFeatureValue(CSS::ValueID::Hover);
+        return CSS::MediaFeatureValue(CSS::Keyword::Hover);
     case CSS::MediaFeatureID::InvertedColors:
-        return CSS::MediaFeatureValue(CSS::ValueID::None);
+        return CSS::MediaFeatureValue(CSS::Keyword::None);
     case CSS::MediaFeatureID::Monochrome:
         return CSS::MediaFeatureValue(0);
     case CSS::MediaFeatureID::NavControls:
-        return CSS::MediaFeatureValue(CSS::ValueID::Back);
+        return CSS::MediaFeatureValue(CSS::Keyword::Back);
     case CSS::MediaFeatureID::Orientation:
-        return CSS::MediaFeatureValue(inner_height() >= inner_width() ? CSS::ValueID::Portrait : CSS::ValueID::Landscape);
+        return CSS::MediaFeatureValue(inner_height() >= inner_width() ? CSS::Keyword::Portrait : CSS::Keyword::Landscape);
     case CSS::MediaFeatureID::OverflowBlock:
-        return CSS::MediaFeatureValue(CSS::ValueID::Scroll);
+        return CSS::MediaFeatureValue(CSS::Keyword::Scroll);
     case CSS::MediaFeatureID::OverflowInline:
-        return CSS::MediaFeatureValue(CSS::ValueID::Scroll);
+        return CSS::MediaFeatureValue(CSS::Keyword::Scroll);
     case CSS::MediaFeatureID::Pointer:
-        return CSS::MediaFeatureValue(CSS::ValueID::Fine);
+        return CSS::MediaFeatureValue(CSS::Keyword::Fine);
     case CSS::MediaFeatureID::PrefersColorScheme: {
         switch (page().preferred_color_scheme()) {
         case CSS::PreferredColorScheme::Light:
-            return CSS::MediaFeatureValue(CSS::ValueID::Light);
+            return CSS::MediaFeatureValue(CSS::Keyword::Light);
         case CSS::PreferredColorScheme::Dark:
-            return CSS::MediaFeatureValue(CSS::ValueID::Dark);
+            return CSS::MediaFeatureValue(CSS::Keyword::Dark);
         case CSS::PreferredColorScheme::Auto:
         default:
-            return CSS::MediaFeatureValue(page().palette().is_dark() ? CSS::ValueID::Dark : CSS::ValueID::Light);
+            return CSS::MediaFeatureValue(page().palette().is_dark() ? CSS::Keyword::Dark : CSS::Keyword::Light);
         }
     }
     case CSS::MediaFeatureID::PrefersContrast:
         switch (page().preferred_contrast()) {
         case CSS::PreferredContrast::Less:
-            return CSS::MediaFeatureValue(CSS::ValueID::Less);
+            return CSS::MediaFeatureValue(CSS::Keyword::Less);
         case CSS::PreferredContrast::More:
-            return CSS::MediaFeatureValue(CSS::ValueID::More);
+            return CSS::MediaFeatureValue(CSS::Keyword::More);
         case CSS::PreferredContrast::NoPreference:
-            return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+            return CSS::MediaFeatureValue(CSS::Keyword::NoPreference);
         case CSS::PreferredContrast::Auto:
         default:
             // FIXME: Fallback to system settings
-            return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+            return CSS::MediaFeatureValue(CSS::Keyword::NoPreference);
         }
     case CSS::MediaFeatureID::PrefersReducedData:
         // FIXME: Make this a preference
-        return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+        return CSS::MediaFeatureValue(CSS::Keyword::NoPreference);
     case CSS::MediaFeatureID::PrefersReducedMotion:
         switch (page().preferred_motion()) {
         case CSS::PreferredMotion::NoPreference:
-            return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+            return CSS::MediaFeatureValue(CSS::Keyword::NoPreference);
         case CSS::PreferredMotion::Reduce:
-            return CSS::MediaFeatureValue(CSS::ValueID::Reduce);
+            return CSS::MediaFeatureValue(CSS::Keyword::Reduce);
         case CSS::PreferredMotion::Auto:
         default:
             // FIXME: Fallback to system settings
-            return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+            return CSS::MediaFeatureValue(CSS::Keyword::NoPreference);
         }
     case CSS::MediaFeatureID::PrefersReducedTransparency:
         // FIXME: Make this a preference
-        return CSS::MediaFeatureValue(CSS::ValueID::NoPreference);
+        return CSS::MediaFeatureValue(CSS::Keyword::NoPreference);
     case CSS::MediaFeatureID::Resolution:
         return CSS::MediaFeatureValue(CSS::Resolution(device_pixel_ratio(), CSS::Resolution::Type::Dppx));
     case CSS::MediaFeatureID::Scan:
-        return CSS::MediaFeatureValue(CSS::ValueID::Progressive);
+        return CSS::MediaFeatureValue(CSS::Keyword::Progressive);
     case CSS::MediaFeatureID::Scripting:
         if (associated_document().is_scripting_enabled())
-            return CSS::MediaFeatureValue(CSS::ValueID::Enabled);
+            return CSS::MediaFeatureValue(CSS::Keyword::Enabled);
-        return CSS::MediaFeatureValue(CSS::ValueID::None);
+        return CSS::MediaFeatureValue(CSS::Keyword::None);
     case CSS::MediaFeatureID::Update:
-        return CSS::MediaFeatureValue(CSS::ValueID::Fast);
+        return CSS::MediaFeatureValue(CSS::Keyword::Fast);
     case CSS::MediaFeatureID::VerticalViewportSegments:
         return CSS::MediaFeatureValue(1);
     case CSS::MediaFeatureID::VideoColorGamut:
-        return CSS::MediaFeatureValue(CSS::ValueID::Srgb);
+        return CSS::MediaFeatureValue(CSS::Keyword::Srgb);
     case CSS::MediaFeatureID::VideoDynamicRange:
-        return CSS::MediaFeatureValue(CSS::ValueID::Standard);
+        return CSS::MediaFeatureValue(CSS::Keyword::Standard);
     case CSS::MediaFeatureID::Width:
         return CSS::MediaFeatureValue(CSS::Length::make_px(inner_width()));
 

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -374,14 +374,14 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
             }
 
             if (auto attachment_value = value_for_layer(attachments, layer_index); attachment_value && attachment_value->is_keyword()) {
-                switch (attachment_value->to_identifier()) {
+                switch (attachment_value->to_keyword()) {
-                case CSS::ValueID::Fixed:
+                case CSS::Keyword::Fixed:
                     layer.attachment = CSS::BackgroundAttachment::Fixed;
                     break;
-                case CSS::ValueID::Local:
+                case CSS::Keyword::Local:
                     layer.attachment = CSS::BackgroundAttachment::Local;
                     break;
-                case CSS::ValueID::Scroll:
+                case CSS::Keyword::Scroll:
                     layer.attachment = CSS::BackgroundAttachment::Scroll;
                     break;
                 default:
@@ -389,15 +389,15 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
                 }
             }
 
-            auto as_box = [](auto value_id) {
+            auto as_box = [](auto keyword) {
-                switch (value_id) {
+                switch (keyword) {
-                case CSS::ValueID::BorderBox:
+                case CSS::Keyword::BorderBox:
                     return CSS::BackgroundBox::BorderBox;
-                case CSS::ValueID::ContentBox:
+                case CSS::Keyword::ContentBox:
                     return CSS::BackgroundBox::ContentBox;
-                case CSS::ValueID::PaddingBox:
+                case CSS::Keyword::PaddingBox:
                     return CSS::BackgroundBox::PaddingBox;
-                case CSS::ValueID::Text:
+                case CSS::Keyword::Text:
                     return CSS::BackgroundBox::Text;
                 default:
                     VERIFY_NOT_REACHED();
@@ -405,11 +405,11 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
             };
 
             if (auto origin_value = value_for_layer(origins, layer_index); origin_value && origin_value->is_keyword()) {
-                layer.origin = as_box(origin_value->to_identifier());
+                layer.origin = as_box(origin_value->to_keyword());
             }
 
             if (auto clip_value = value_for_layer(clips, layer_index); clip_value && clip_value->is_keyword()) {
-                layer.clip = as_box(clip_value->to_identifier());
+                layer.clip = as_box(clip_value->to_keyword());
             }
 
             if (auto position_value = value_for_layer(x_positions, layer_index); position_value && position_value->is_edge()) {
@@ -431,11 +431,11 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
                     layer.size_x = size.size_x();
                     layer.size_y = size.size_y();
                 } else if (size_value->is_keyword()) {
-                    switch (size_value->to_identifier()) {
+                    switch (size_value->to_keyword()) {
-                    case CSS::ValueID::Contain:
+                    case CSS::Keyword::Contain:
                         layer.size_type = CSS::BackgroundSize::Contain;
                         break;
-                    case CSS::ValueID::Cover:
+                    case CSS::Keyword::Cover:
                         layer.size_type = CSS::BackgroundSize::Cover;
                         break;
                     default:
@@ -722,12 +722,12 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
                     return value->as_length().length().to_px(*this);
                 if (value->is_keyword()) {
                     // https://www.w3.org/TR/css-backgrounds-3/#valdef-line-width-thin
-                    switch (value->to_identifier()) {
+                    switch (value->to_keyword()) {
-                    case CSS::ValueID::Thin:
+                    case CSS::Keyword::Thin:
                         return 1;
-                    case CSS::ValueID::Medium:
+                    case CSS::Keyword::Medium:
                         return 3;
-                    case CSS::ValueID::Thick:
+                    case CSS::Keyword::Thick:
                         return 5;
                     default:
                         VERIFY_NOT_REACHED();
@@ -843,22 +843,22 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (aspect_ratio->is_value_list()) {
         auto& values_list = aspect_ratio->as_value_list().values();
         if (values_list.size() == 2
-            && values_list[0]->is_keyword() && values_list[0]->as_keyword().id() == CSS::ValueID::Auto
+            && values_list[0]->is_keyword() && values_list[0]->as_keyword().keyword() == CSS::Keyword::Auto
             && values_list[1]->is_ratio()) {
             computed_values.set_aspect_ratio({ true, values_list[1]->as_ratio().ratio() });
         }
-    } else if (aspect_ratio->is_keyword() && aspect_ratio->as_keyword().id() == CSS::ValueID::Auto) {
+    } else if (aspect_ratio->is_keyword() && aspect_ratio->as_keyword().keyword() == CSS::Keyword::Auto) {
         computed_values.set_aspect_ratio({ true, {} });
     } else if (aspect_ratio->is_ratio()) {
         computed_values.set_aspect_ratio({ false, aspect_ratio->as_ratio().ratio() });
     }
 
     auto math_shift_value = computed_style.property(CSS::PropertyID::MathShift);
-    if (auto math_shift = value_id_to_math_shift(math_shift_value->to_identifier()); math_shift.has_value())
+    if (auto math_shift = keyword_to_math_shift(math_shift_value->to_keyword()); math_shift.has_value())
         computed_values.set_math_shift(math_shift.value());
 
     auto math_style_value = computed_style.property(CSS::PropertyID::MathStyle);
-    if (auto math_style = value_id_to_math_style(math_style_value->to_identifier()); math_style.has_value())
+    if (auto math_style = keyword_to_math_style(math_style_value->to_keyword()); math_style.has_value())
         computed_values.set_math_style(math_style.value());
 
     computed_values.set_math_depth(computed_style.math_depth());

Userland/Libraries/LibWeb/Painting/BorderPainting.cpp

@@ -583,7 +583,7 @@ Optional<BordersData> borders_data_for_outline(Layout::Node const& layout_node,
         outline_color = layout_node.document().normal_link_color();
         outline_width = 2;
     } else {
-        line_style = CSS::value_id_to_line_style(CSS::to_value_id(outline_style)).value_or(CSS::LineStyle::None);
+        line_style = CSS::keyword_to_line_style(CSS::to_keyword(outline_style)).value_or(CSS::LineStyle::None);
     }
 
     if (outline_color.alpha() == 0 || line_style == CSS::LineStyle::None || outline_width == 0)