vaev-style: Implemented most flex related properties.

skift-org · Jul 22, 2024 · 5e41f23 · 5e41f23
1 parent e5636b7
commit 5e41f23
Show file tree

Hide file tree

Showing 7 changed files with 261 additions and 78 deletions.
diff --git a/src/web/vaev-base/flex.h b/src/web/vaev-base/flex.h
@@ -2,6 +2,7 @@
 
 #include "length.h"
 #include "percent.h"
+#include "width.h"
 
 namespace Vaev {
 
@@ -10,19 +11,52 @@ enum struct FlexDirection {
     ROW_REVERSE,
     COLUMN,
     COLUMN_REVERSE,
+
+    _LEN,
 };
 
 enum struct FlexWrap {
     NOWRAP,
     WRAP,
     WRAP_REVERSE,
+
+    _LEN
+};
+
+struct FlexBasis {
+    enum struct Type {
+        CONTENT,
+        WIDTH,
+    };
+
+    using enum Type;
+
+    Type type;
+    Width width;
+
+    constexpr FlexBasis(Type type)
+        : type(type) {
+    }
+
+    constexpr FlexBasis(Width width)
+        : type(Type::WIDTH), width(width) {
+    }
+
+    void repr(Io::Emit &e) const {
+        if (type == Type::CONTENT) {
+            e("content");
+        } else {
+            e("{}", width);
+        }
+    }
 };
 
 struct Flex {
     FlexDirection direction = FlexDirection::ROW;
     FlexWrap wrap = FlexWrap::NOWRAP;
-    f64 flexGrow = 0;
-    f64 flexShrink = 1;
+    FlexBasis basis = Width{Width::AUTO};
+    f64 grow = 0;
+    f64 shrink = 1;
 };
 
 } // namespace Vaev
diff --git a/src/web/vaev-base/insets.h b/src/web/vaev-base/insets.h
@@ -1,67 +1,10 @@
 #pragma once
 
-#include "length.h"
-#include "percent.h"
+#include "width.h"
 
 namespace Vaev {
 
-struct MarginWidth {
-    enum struct Type {
-        AUTO,
-        PERCENT,
-        VALUE,
-    };
-
-    using enum Type;
-
-    Type _type;
-    union {
-        Percent _percent;
-        Length _value;
-    };
-
-    constexpr MarginWidth()
-        : MarginWidth(Percent{}) {
-    }
-
-    constexpr MarginWidth(Type type)
-        : _type(type) {
-    }
-
-    constexpr MarginWidth(Percent percent)
-        : _type(Type::PERCENT), _percent(percent) {
-    }
-
-    constexpr MarginWidth(Length value)
-        : _type(Type::VALUE), _value(value) {
-    }
-
-    constexpr MarginWidth(PercentOr<Length> val) {
-        if (val == PercentOr<Length>::PERCENT) {
-            _type = Type::PERCENT;
-            _percent = val._percent;
-        } else {
-            _type = Type::VALUE;
-            _value = val._value;
-        }
-    }
-
-    void repr(Io::Emit &e) const {
-        if (_type == Type::AUTO) {
-            e("auto");
-        } else if (_type == Type::PERCENT) {
-            e("{}", _percent);
-        } else {
-            e("{}", _value);
-        }
-    }
-
-    bool operator==(Type type) const {
-        return _type == type;
-    }
-};
-
-using Margin = Math::Spacing<MarginWidth>;
+using Margin = Math::Spacing<Width>;
 
 using Padding = Math::Spacing<PercentOr<Length>>;
 

diff --git a/src/web/vaev-base/width.h b/src/web/vaev-base/width.h
@@ -0,0 +1,48 @@
+#pragma once
+
+#include "length.h"
+#include "percent.h"
+
+namespace Vaev {
+
+struct Width {
+    enum struct Type {
+        AUTO,
+        VALUE,
+    };
+
+    using enum Type;
+
+    Type type = Type::VALUE;
+    PercentOr<Length> value;
+
+    constexpr Width()
+        : Width(Percent{}) {
+    }
+
+    constexpr Width(Type type)
+        : type(type) {
+    }
+
+    constexpr Width(PercentOr<Length> percent)
+        : type(Type::VALUE), value(percent) {
+    }
+
+    constexpr Width(Length length)
+        : type(Type::VALUE), value(length) {
+    }
+
+    void repr(Io::Emit &e) const {
+        if (type == Type::AUTO) {
+            e("auto");
+        } else {
+            e("{}", value);
+        }
+    }
+
+    bool operator==(Type t) const {
+        return type == t;
+    }
+};
+
+} // namespace Vaev
diff --git a/src/web/vaev-base/z-index.h b/src/web/vaev-base/z-index.h
@@ -1,6 +1,5 @@
 #pragma once
 
-#include <karm-base/std.h>
 #include <karm-io/emit.h>
 
 namespace Vaev {

diff --git a/src/web/vaev-style/styles.h b/src/web/vaev-style/styles.h
@@ -311,6 +311,96 @@ struct BorderLeftWidthProp {
 
 // MARK: Flex ------------------------------------------------------------------
 
+// https://www.w3.org/TR/css-flexbox-1/#flex-basis-property
+struct FlexBasisProp {
+    FlexBasis value = initial();
+
+    static constexpr Str name() { return "flex-basis"; }
+
+    static constexpr FlexBasis initial() { return Width{Width::AUTO}; }
+
+    void apply(Computed &c) const {
+        c.flex.basis = value;
+    }
+
+    Res<> parse(Cursor<Css::Sst> &c) {
+        value = try$(parseValue<FlexBasis>(c));
+        return Ok();
+    }
+};
+
+// https://www.w3.org/TR/css-flexbox-1/#propdef-flex-direction
+struct FlexDirectionProp {
+    FlexDirection value = initial();
+
+    static constexpr Str name() { return "flex-direction"; }
+
+    static constexpr FlexDirection initial() { return FlexDirection::ROW; }
+
+    void apply(Computed &c) const {
+        c.flex.direction = value;
+    }
+
+    Res<> parse(Cursor<Css::Sst> &c) {
+        value = try$(parseValue<FlexDirection>(c));
+        return Ok();
+    }
+};
+
+// https://www.w3.org/TR/css-flexbox-1/#flex-grow-property
+struct FlexGrowProp {
+    f64 value = initial();
+
+    static constexpr Str name() { return "flex-grow"; }
+
+    static constexpr f64 initial() { return 0; }
+
+    void apply(Computed &c) const {
+        c.flex.grow = value;
+    }
+
+    Res<> parse(Cursor<Css::Sst> &c) {
+        value = try$(parseValue<f64>(c));
+        return Ok();
+    }
+};
+
+// https://www.w3.org/TR/css-flexbox-1/#propdef-flex-shrink
+struct FlexShrinkProp {
+    f64 value = initial();
+
+    static constexpr Str name() { return "flex-shrink"; }
+
+    static constexpr f64 initial() { return 1; }
+
+    void apply(Computed &c) const {
+        c.flex.shrink = value;
+    }
+
+    Res<> parse(Cursor<Css::Sst> &c) {
+        value = try$(parseValue<f64>(c));
+        return Ok();
+    }
+};
+
+// https://www.w3.org/TR/css-flexbox-1/#propdef-flex-wrap
+struct FlexWrapProp {
+    FlexWrap value = initial();
+
+    static constexpr Str name() { return "flex-wrap"; }
+
+    static constexpr FlexWrap initial() { return FlexWrap::NOWRAP; }
+
+    void apply(Computed &c) const {
+        c.flex.wrap = value;
+    }
+
+    Res<> parse(Cursor<Css::Sst> &c) {
+        value = try$(parseValue<FlexWrap>(c));
+        return Ok();
+    }
+};
+
 // MARK: Fonts -----------------------------------------------------------------
 
 // https://www.w3.org/TR/css-fonts-4/#font-family-prop
@@ -437,69 +527,69 @@ struct FontSizeProp {
 // https://www.w3.org/TR/css-box-3/#propdef-margin
 
 struct MarginTopProp {
-    MarginWidth value = initial();
+    Width value = initial();
 
     static Str name() { return "margin-top"; }
 
-    static constexpr Length initial() { return Length{}; }
+    static constexpr Width initial() { return Length{}; }
 
     void apply(Computed &c) const {
         c.margin.cow().top = value;
     }
 
     Res<> parse(Cursor<Css::Sst> &c) {
-        value = try$(parseValue<MarginWidth>(c));
+        value = try$(parseValue<Width>(c));
         return Ok();
     }
 };
 
 struct MarginRightProp {
-    MarginWidth value = initial();
+    Width value = initial();
 
     static Str name() { return "margin-right"; }
 
-    static constexpr Length initial() { return Length{}; }
+    static constexpr Width initial() { return Length{}; }
 
     void apply(Computed &c) const {
         c.margin.cow().start = value;
     }
 
     Res<> parse(Cursor<Css::Sst> &c) {
-        value = try$(parseValue<MarginWidth>(c));
+        value = try$(parseValue<Width>(c));
         return Ok();
     }
 };
 
 struct MarginBottomProp {
-    MarginWidth value = initial();
+    Width value = initial();
 
     static constexpr Str name() { return "margin-bottom"; }
 
-    static constexpr Length initial() { return Length{}; }
+    static constexpr Width initial() { return Length{}; }
 
     void apply(Computed &c) const {
         c.margin.cow().bottom = value;
     }
 
     Res<> parse(Cursor<Css::Sst> &c) {
-        value = try$(parseValue<MarginWidth>(c));
+        value = try$(parseValue<Width>(c));
         return Ok();
     }
 };
 
 struct MarginLeftProp {
-    MarginWidth value = initial();
+    Width value = initial();
 
     static Str name() { return "margin-left"; }
 
-    static Length initial() { return Length{}; }
+    static Width initial() { return Length{}; }
 
     void apply(Computed &c) const {
         c.margin.cow().end = value;
     }
 
     Res<> parse(Cursor<Css::Sst> &c) {
-        value = try$(parseValue<MarginWidth>(c));
+        value = try$(parseValue<Width>(c));
         return Ok();
     }
 };
@@ -831,6 +921,13 @@ using _StyleProp = Union<
     BorderBottomWidthProp,
     BorderLeftWidthProp,
 
+    // Flex
+    FlexBasisProp,
+    FlexDirectionProp,
+    FlexGrowProp,
+    FlexShrinkProp,
+    FlexWrapProp,
+
     // Font
     FontFamilyProp,
     FontWeightProp,