LibWeb: Implement appearance CSS property

This includes the "compat" values even though they are not strictly
necessary.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -39,6 +39,7 @@ public:
     static CSS::JustifyContent justify_content() { return CSS::JustifyContent::FlexStart; }
     static CSS::AlignItems align_items() { return CSS::AlignItems::Stretch; }
     static CSS::AlignSelf align_self() { return CSS::AlignSelf::Auto; }
+    static CSS::Appearance appearance() { return CSS::Appearance::Auto; }
     static CSS::Overflow overflow() { return CSS::Overflow::Visible; }
     static CSS::BoxSizing box_sizing() { return CSS::BoxSizing::ContentBox; }
     static CSS::PointerEvents pointer_events() { return CSS::PointerEvents::Auto; }
@@ -154,6 +155,7 @@ public:
     int order() const { return m_noninherited.order; }
     CSS::AlignItems align_items() const { return m_noninherited.align_items; }
     CSS::AlignSelf align_self() const { return m_noninherited.align_self; }
+    CSS::Appearance appearance() const { return m_noninherited.appearance; }
     float opacity() const { return m_noninherited.opacity; }
     CSS::Visibility visibility() const { return m_inherited.visibility; }
     CSS::ImageRendering image_rendering() const { return m_inherited.image_rendering; }
@@ -269,6 +271,7 @@ protected:
         int order { InitialValues::order() };
         CSS::AlignItems align_items { InitialValues::align_items() };
         CSS::AlignSelf align_self { InitialValues::align_self() };
+        CSS::Appearance appearance { InitialValues::appearance() };
         CSS::JustifyContent justify_content { InitialValues::justify_content() };
         CSS::Overflow overflow_x { InitialValues::overflow() };
         CSS::Overflow overflow_y { InitialValues::overflow() };
@@ -339,6 +342,7 @@ public:
     void set_order(int value) { m_noninherited.order = value; }
     void set_align_items(CSS::AlignItems value) { m_noninherited.align_items = value; }
     void set_align_self(CSS::AlignSelf value) { m_noninherited.align_self = value; }
+    void set_appearance(CSS::Appearance value) { m_noninherited.appearance = value; }
     void set_opacity(float value) { m_noninherited.opacity = value; }
     void set_justify_content(CSS::JustifyContent value) { m_noninherited.justify_content = value; }
     void set_box_shadow(Vector<ShadowData>&& value) { m_noninherited.box_shadow = move(value); }

Userland/Libraries/LibWeb/CSS/Enums.json

@@ -24,6 +24,24 @@
         "stretch",
         "unsafe"
     ],
+    "appearance": [
+        "auto",
+        "button",
+        "checkbox",
+        "listbox",
+        "menulist",
+        "meter",
+        "menulist-button",
+        "none",
+        "push-button",
+        "progress-bar",
+        "radio",
+        "searchfield",
+        "slider-horizontal",
+        "square-button",
+        "textarea",
+        "textfield"
+    ],
     "background-attachment": [
         "fixed",
         "local",

Userland/Libraries/LibWeb/CSS/Identifiers.json

@@ -74,6 +74,7 @@
   "bottom",
   "break-word",
   "browser",
+  "button",
   "capitalize",
   "cell",
   "center",
@@ -96,6 +97,7 @@
   "currentcolor",
   "cursive",
   "custom",
+  "checkbox",
   "dark",
   "dashed",
   "decimal",
@@ -160,12 +162,16 @@
   "lower-roman",
   "lowercase",
   "ltr",
+  "listbox",
   "medium",
   "middle",
   "minimal-ui",
   "monospace",
   "more",
   "move",
+  "menulist",
+  "meter",
+  "menulist-button",
   "n-resize",
   "ne-resize",
   "nesw-resize",
@@ -197,6 +203,8 @@
   "pre-wrap",
   "progress",
   "progressive",
+  "push-button",
+  "progress-bar",
   "rec2020",
   "reduce",
   "relative",
@@ -216,6 +224,7 @@
   "ruby-text",
   "ruby-text-container",
   "run-in",
+  "radio",
   "s-resize",
   "safe",
   "sans-serif",
@@ -245,6 +254,9 @@
   "subtractive",
   "super",
   "sw-resize",
+  "searchfield",
+  "slider-horizontal",
+  "square-button",
   "table",
   "table-caption",
   "table-cell",
@@ -260,6 +272,8 @@
   "thick",
   "thin",
   "top",
+  "textarea",
+  "textfield",
   "ui-monospace",
   "ui-rounded",
   "ui-sans-serif",

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -13,6 +13,13 @@
       "align-self"
     ]
   },
+  "appearance": {
+    "inherited": false,
+    "initial": "auto",
+    "valid-types": [
+      "appearance"
+    ]
+  },
   "background": {
     "affects-layout": false,
     "inherited": false,

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -316,6 +316,36 @@ Optional<CSS::AlignSelf> StyleProperties::align_self() const
     return value_id_to_align_self(value->to_identifier());
 }
 
+Optional<CSS::Appearance> StyleProperties::appearance() const
+{
+    auto value = property(CSS::PropertyID::Appearance);
+    auto appearance = value_id_to_appearance(value->to_identifier());
+    if (appearance.has_value()) {
+        switch (*appearance) {
+        // Note: All these compatibility values can be treated as 'auto'
+        case CSS::Appearance::Textfield:
+        case CSS::Appearance::MenulistButton:
+        case CSS::Appearance::Searchfield:
+        case CSS::Appearance::Textarea:
+        case CSS::Appearance::PushButton:
+        case CSS::Appearance::SliderHorizontal:
+        case CSS::Appearance::Checkbox:
+        case CSS::Appearance::Radio:
+        case CSS::Appearance::SquareButton:
+        case CSS::Appearance::Menulist:
+        case CSS::Appearance::Listbox:
+        case CSS::Appearance::Meter:
+        case CSS::Appearance::ProgressBar:
+        case CSS::Appearance::Button:
+            appearance = CSS::Appearance::Auto;
+            break;
+        default:
+            break;
+        }
+    }
+    return appearance;
+}
+
 Optional<CSS::Position> StyleProperties::position() const
 {
     auto value = property(CSS::PropertyID::Position);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -68,6 +68,7 @@ public:
     int order() const;
     Optional<CSS::AlignItems> align_items() const;
     Optional<CSS::AlignSelf> align_self() const;
+    Optional<CSS::Appearance> appearance() const;
     float opacity() const;
     Optional<CSS::Visibility> visibility() const;
     Optional<CSS::ImageRendering> image_rendering() const;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -431,6 +431,10 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (align_self.has_value())
         computed_values.set_align_self(align_self.value());
 
+    auto appearance = computed_style.appearance();
+    if (appearance.has_value())
+        computed_values.set_appearance(appearance.value());
+
     auto position = computed_style.position();
     if (position.has_value())
         computed_values.set_position(position.value());