LibWeb: Implement the flex order CSS property

Adds support for the flex order property and a test page for it
on the browser welcome page.

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -43,6 +43,7 @@ public:
     static CSS::PointerEvents pointer_events() { return CSS::PointerEvents::Auto; }
     static float flex_grow() { return 0.0f; }
     static float flex_shrink() { return 1.0f; }
+    static int order() { return 0; }
     static float opacity() { return 1.0f; }
     static CSS::Length border_radius() { return Length::make_px(0); }
     static Variant<CSS::VerticalAlign, CSS::LengthPercentage> vertical_align() { return CSS::VerticalAlign::Baseline; }
@@ -133,6 +134,7 @@ public:
     FlexBasisData const& flex_basis() const { return m_noninherited.flex_basis; }
     float flex_grow() const { return m_noninherited.flex_grow; }
     float flex_shrink() const { return m_noninherited.flex_shrink; }
+    int order() const { return m_noninherited.order; }
     CSS::AlignItems align_items() const { return m_noninherited.align_items; }
     float opacity() const { return m_noninherited.opacity; }
     CSS::Visibility visibility() const { return m_inherited.visibility; }
@@ -245,6 +247,7 @@ protected:
         CSS::FlexBasisData flex_basis {};
         float flex_grow { InitialValues::flex_grow() };
         float flex_shrink { InitialValues::flex_shrink() };
+        int order { InitialValues::order() };
         CSS::AlignItems align_items { InitialValues::align_items() };
         CSS::JustifyContent justify_content { InitialValues::justify_content() };
         CSS::Overflow overflow_x { InitialValues::overflow() };
@@ -313,6 +316,7 @@ public:
     void set_flex_basis(FlexBasisData value) { m_noninherited.flex_basis = value; }
     void set_flex_grow(float value) { m_noninherited.flex_grow = value; }
     void set_flex_shrink(float value) { m_noninherited.flex_shrink = value; }
+    void set_order(int value) { m_noninherited.order = value; }
     void set_align_items(CSS::AlignItems value) { m_noninherited.align_items = value; }
     void set_opacity(float value) { m_noninherited.opacity = value; }
     void set_justify_content(CSS::JustifyContent value) { m_noninherited.justify_content = value; }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -689,6 +689,13 @@
       "number"
     ]
   },
+  "order": {
+    "inherited": false,
+    "initial": "0",
+    "valid-types": [
+      "integer"
+    ]
+  },
   "flex-wrap": {
     "inherited": false,
     "initial": "nowrap",

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -549,6 +549,8 @@ RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout:
         return NumericStyleValue::create_float(layout_node.computed_values().flex_grow());
     case CSS::PropertyID::FlexShrink:
         return NumericStyleValue::create_float(layout_node.computed_values().flex_shrink());
+    case CSS::PropertyID::Order:
+        return NumericStyleValue::create_integer(layout_node.computed_values().order());
     case CSS::PropertyID::Opacity:
         return NumericStyleValue::create_float(layout_node.computed_values().opacity());
     case CSS::PropertyID::ImageRendering:

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -263,6 +263,14 @@ float StyleProperties::flex_shrink() const
     return value.value()->to_number();
 }
 
+int StyleProperties::order() const
+{
+    auto value = property(CSS::PropertyID::Order);
+    if (!value.has_value() || !value.value()->has_integer())
+        return 0;
+    return value.value()->to_integer();
+}
+
 Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
 {
     auto value = property(CSS::PropertyID::ImageRendering);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -65,6 +65,7 @@ public:
     Optional<CSS::FlexBasisData> flex_basis() const;
     float flex_grow() const;
     float flex_shrink() const;
+    int order() const;
     Optional<CSS::AlignItems> align_items() const;
     float opacity() const;
     Optional<CSS::Visibility> visibility() const;