(wip) vaev-style: Implement css counters.

Author: sleepy-monax

src/vaev-engine/dom/element.cpp

@@ -7,6 +7,7 @@ import :dom.node;
 import :dom.names;
 import :dom.text;
 import :dom.tokenList;
+import :style.counter;
 
 using namespace Karm;
 
@@ -26,11 +27,12 @@ export struct PseudoElement {
     static Symbol const AFTER;
     static Symbol const MARKER;
     Symbol type;
-
+    
     // https://drafts.csswg.org/css-pseudo/#dom-csspseudoelement-parent
     Gc::Ptr<Element> parent;
-
+    
     Opt<Rc<Style::ComputedValues>> _computedValues = NONE;
+    Style::CounterSet counters = {};
 
     PseudoElement(Symbol type, Rc<Style::ComputedValues> computedValues)
         : type(type), _computedValues(computedValues) {}
@@ -69,6 +71,7 @@ export struct Element : Node {
     TokenList classList;
     Opt<Rc<Scene::Node>> imageContent;
     Map<Symbol, Rc<PseudoElement>> _pseudoElements;
+    Style::CounterSet counters;
 
     // MARK: Node --------------------------------------------------------------
 

src/vaev-engine/driver/print.cpp

@@ -186,7 +186,6 @@ Pair<Vec<Layout::Breakpoint>, Vec<PageLayoutInfos>> collectBreakPointsAndRunning
 
 export Yield<Print::Page> print(Gc::Ref<Dom::Document> dom, Print::Settings const& settings) {
     auto media = Style::Media::forPrint(settings);
-
     Style::Computer computer{
         media,
         dom->registeredPropertySet,

src/vaev-engine/layout/base/box.cpp

@@ -130,6 +130,9 @@ struct Box : Meta::NoCopy {
     Box(Rc<Style::ComputedValues> style, Content content, Opt<Dom::OriginatingElement> og)
         : style{std::move(style)}, content{std::move(content)}, origin{og} {}
 
+    Box(Rc<Style::SpecifiedValues> style, Content content, Opt<Symbol> pseudoOrigin)
+        : style{std::move(style)}, content{std::move(content)}, pseudoOrigin{pseudoOrigin} {}
+
     Slice<Box> children() const {
         if (auto children = content.is<Vec<Box>>())
             return *children;

src/vaev-engine/layout/base/running-position.cpp

@@ -48,15 +48,15 @@ struct RunningPositionMap {
     }
 
     // https://www.w3.org/TR/css-gcpm-3/#using-named-strings
-    Res<RunningPositionInfo> match(ElementContent elt, usize currentPage = 0) {
+    Res<RunningPositionInfo> match(ElementFunc elt, usize currentPage = 0) {
         auto id = elt.customIdent;
         auto const& list = try$(content.lookup(id).okOr(Error::notFound("element not found")));
 
         switch (elt.target) {
-        case ElementContent::Target::UNDEFINED:
+        case ElementFunc::Target::UNDEFINED:
             return Ok(list[0]);
 
-        case ElementContent::Target::START:
+        case ElementFunc::Target::START:
             for (usize i = 0; i < list.len(); i++) {
                 auto elt = list[i];
                 if (elt.page == currentPage and i > 0) {
@@ -65,13 +65,13 @@ struct RunningPositionMap {
             }
             return Ok(list[0]);
 
-        case ElementContent::Target::FIRST:
-        case ElementContent::Target::FIRST_EXCEPT: {
+        case ElementFunc::Target::FIRST:
+        case ElementFunc::Target::FIRST_EXCEPT: {
             auto elements = _searchPage(list, currentPage);
             return Ok(elements[0]);
         }
 
-        case ElementContent::Target::LAST: {
+        case ElementFunc::Target::LAST: {
             auto elements = _searchPage(list, currentPage);
             return Ok(elements[elements.len() - 1]);
         }

src/vaev-engine/layout/block.cpp

@@ -231,13 +231,17 @@ struct BlockFormatingContext : FormatingContext {
                 .margin = computeMargins(tree, c, childInput)
             };
 
-            if (not impliesRemovingFromFlow(c.style->position)) {
+            if (not(impliesRemovingFromFlow(c.style->position) or c.pseudoOrigin == Dom::PseudoElement::MARKER)) {
                 // TODO: collapsed margins for sibling elements
                 blockSize += max(usedSpacings.margin.top, lastMarginBottom) - lastMarginBottom;
             }
 
             childInput.position = input.position + Vec2Au{usedSpacings.margin.start, blockSize};
 
+            if (c.pseudoOrigin == Dom::PseudoElement::MARKER) {
+                childInput.position.x -= computeIntrinsicContentSize(tree, c, IntrinsicSize::MAX_CONTENT).x;
+            }
+
             // HACK: Table Box mostly behaves like a block box, let's compute its capmin
             //       and avoid duplicating the layout code
             if (c.style->display == Display::Internal::TABLE_BOX) {
@@ -250,7 +254,7 @@ struct BlockFormatingContext : FormatingContext {
                               ? layoutAndCommitBorderBox(tree, c, childInput, *input.fragment, usedSpacings)
                               : layoutBorderBox(tree, c, childInput, usedSpacings);
 
-            if (not impliesRemovingFromFlow(c.style->position)) {
+            if (not(impliesRemovingFromFlow(c.style->position) or c.pseudoOrigin == Dom::PseudoElement::MARKER)) {
                 blockSize += output.size.y + usedSpacings.margin.bottom;
                 lastMarginBottom = usedSpacings.margin.bottom;
             }

src/vaev-engine/layout/builder/mod.cpp

@@ -289,7 +289,7 @@ struct BuilderContext {
 };
 
 static void _buildNode(BuilderContext bc, Gc::Ref<Dom::Node> node);
-static void _buildPseudoElement(BuilderContext bc, Rc<Dom::PseudoElement> pseudoElement);
+static void _buildPseudoElement(BuilderContext bc, Gc::Ref<Dom::Element> originatingElement, Rc<Dom::PseudoElement> pseudoElement);
 
 // MARK: Build void/leaves ---------------------------------------------------------
 
@@ -720,7 +720,7 @@ static void _buildTableBox(BuilderContext tableWrapperBc, Gc::Ref<Dom::Element>
     }
 
     if (auto before = el->getPseudoElement(Dom::PseudoElement::BEFORE)) {
-        _buildPseudoElement(tableWrapperBc, before.unwrap());
+        _buildPseudoElement(tableWrapperBc, el, before.unwrap());
     }
 
     // An anonymous table-row box must be generated around each sequence of consecutive children of a table-root
@@ -735,7 +735,7 @@ static void _buildTableBox(BuilderContext tableWrapperBc, Gc::Ref<Dom::Element>
     }
 
     if (auto before = el->getPseudoElement(Dom::PseudoElement::AFTER)) {
-        _buildPseudoElement(tableWrapperBc, before.unwrap());
+        _buildPseudoElement(tableWrapperBc, el, before.unwrap());
     }
 }
 
@@ -802,16 +802,22 @@ static void _innerDisplayDispatchCreationOfInlineLevelBox(BuilderContext bc, Gc:
 
 static void _buildChildren(BuilderContext bc, Gc::Ref<Dom::Node> parent) {
     auto el = parent->is<Dom::Element>();
+    if (el->specifiedValues()->display == Display::Item::YES) {
+        if (auto marker = el ? el->getPseudoElement(Dom::PseudoElement::MARKER) : NONE) {
+            _buildPseudoElement(bc, el.upgrade(), marker.unwrap());
+        }
+    }
+
     if (auto before = el ? el->getPseudoElement(Dom::PseudoElement::BEFORE) : NONE) {
-        _buildPseudoElement(bc, before.unwrap());
+        _buildPseudoElement(bc, el.upgrade(), before.unwrap());
     }
 
     for (auto child = parent->firstChild(); child; child = child->nextSibling()) {
         _buildNode(bc, *child);
     }
 
     if (auto after = el ? el->getPseudoElement(Dom::PseudoElement::AFTER) : NONE) {
-        _buildPseudoElement(bc, after.unwrap());
+        _buildPseudoElement(bc, el.upgrade(), after.unwrap());
     }
 }
 
@@ -885,18 +891,56 @@ export Box _buildBlockPseudoElement(Rc<Dom::PseudoElement> el) {
 static void _buildPseudoElement(BuilderContext bc, Rc<Dom::PseudoElement> pseudoElement) {
     auto style = pseudoElement->computedValues();
     auto display = style->display;
+
     if (display == Display::NONE)
         return;
 
-    if (display == Display::INLINE or
-        display == Display::CONTENTS) {
+    bool isBeforeOrAfter = (pseudoElement->type == Dom::PseudoElement::BEFORE or pseudoElement->type == Dom::PseudoElement::AFTER);
+    if (isBeforeOrAfter and (style->content.is<Keywords::Normal>() or style->content.is<Keywords::None>())) {
+        return;
+    }
+
+    auto generateInnerContent = [&](BuilderContext& innerBc) {
+        if (pseudoElement->type == Dom::PseudoElement::MARKER and style->content.is<Keywords::Normal>()) {
+            String marker = ""s;
+            auto listStyleType = originatingElement->specifiedValues()->list->type;
+            yap("list style type: {}", listStyleType);
+            if (listStyleType == CustomIdent{"disc"_sym}) {
+                marker = "\u2022 "s;
+            } else if (listStyleType == CustomIdent{"circle"_sym}) {
+                marker = "\u25E6 "s;
+            } else if (listStyleType == CustomIdent{"square"_sym}) {
+                marker = "\u25AA "s;
+            } else if (listStyleType == CustomIdent{"decimal"_sym}) {
+                marker = Io::format("{}. ", originatingElement->counters.innerMost(CustomIdent{"list-item"_sym}).v1);
+            }
+            _buildText(innerBc, marker.str(), style);
+        } else if (style->content.is<String>()) {
+            // TODO: Expand this to iterate over a Vector of content items (Strings, URLs, Counters)
+            _buildText(innerBc, style->content.unwrap<String>().str(), style);
+        }
+    };
+
+    if (display == Display::INLINE or display == Display::CONTENTS) {
         bc.startInlineBox(_proseStyleFromStyle(*style, style->fontFace));
-        if (auto maybeStr = style->content.is<String>())
-            _buildText(bc, maybeStr->str(), style);
+        generateInnerContent(bc);
         bc.endInlineBox();
     } else {
         bc.flushRootInlineBoxIntoAnonymousBox();
-        bc.addToParentBox(_buildBlockPseudoElement(pseudoElement));
+
+        Box pseudoBox = {style, pseudoElement->type}; // Ensure Box constructor accepts pseudo type
+        InlineBox rootInlineBox{_proseStyleFromStyle(*style, style->fontFace)};
+
+        BuilderContext pseudoBc = (display == Display::Inside::FLEX)
+                                      ? bc.toFlexContext(pseudoBox, rootInlineBox)
+                                      : bc.toBlockContext(pseudoBox, rootInlineBox);
+
+        pseudoBc.startInlineBox(_proseStyleFromStyle(*style, style->fontFace));
+        generateInnerContent(pseudoBc);
+        pseudoBc.endInlineBox();
+
+        pseudoBc.finalizeParentBoxAndFlushInline();
+        bc.addToParentBox(std::move(pseudoBox));
     }
 }
 
@@ -947,22 +991,21 @@ export Box buildForPseudoElement(Rc<Dom::PseudoElement> el, usize currentPage, R
         auto prose = makeRc<Gfx::Prose>(proseStyle);
         prose->append(style->content.unwrap<String>().str());
         return Box{style, InlineBox{prose}, el};
-    } else if (style->content.is<ElementContent>()) {
-        auto elt = style->content.unwrap<ElementContent>();
+    } else if (style->content.is<ElementFunc>()) {
+        auto elt = style->content.unwrap<ElementFunc>();
         if (auto infos = runningPos.match(elt, currentPage)) {
             Box box = buildElement(infos.unwrap().element);
             box.style->position = Keywords::STATIC;
             return box;
         }
-    } else if (auto elt = style->content.is<Counter>()) {
-        if (elt->type == Counter::Type::PAGE) {
-            auto prose = makeRc<Gfx::Prose>(proseStyle);
-            prose->append(Io::toStr(currentPage + 1).str());
-            return Box{style, InlineBox{prose}, el};
-        }
+    } else if (auto it = style->content.is<CounterFunc>()) {
+        auto prose = makeRc<Gfx::Prose>(proseStyle);
+        auto maybeCounter = el.counters.innerMost(it->name).v0;
+        prose->append("{}"_f(maybeCounter ? maybeCounter->value : 0).str());
+        return {style, InlineBox{prose}, nullptr};
     }
 
-    return {style, el};
+    return {style, nullptr};
 }
 
 } // namespace Vaev::Layout

src/vaev-engine/props/base.cpp

@@ -14,7 +14,7 @@ using namespace Karm;
 
 namespace Vaev::Style {
 
-static auto debugProperties = Debug::Flag::debug("css-properties", "Print debug information about CSS properties");
+static auto debugProperties = Debug::Flag::debug("css-properties", "Print debug information about CSS properties", true);
 
 namespace Properties {
 
@@ -40,7 +40,8 @@ export struct Property : Meta::NoCopy {
         // https://svgwg.org/svg2-draft/styling.html#PresentationAttributes
         PRESENTATION_ATTRIBUTE = 1 << 3,
 
-        // Represent a miss-parsed property
+        /// Indicates that the property represents an invalid or unrecognized, CSS declaration.
+        /// Bogus properties are ignored during the cascade and do not affect computed styles.
         BOGUS_REGISTRATION = 1 << 4,
 
         // The property is not reset by all:
@@ -50,6 +51,12 @@ export struct Property : Meta::NoCopy {
 
     using enum Options;
 
+    /// Defines the metadata, lifecycle, and parsing rules for a specific CSS property.
+    ///
+    /// The `Registration` acts as a singleton-like factory and behavior contract
+    /// for all instances of a given property. It handles parsing raw CSS tokens
+    /// into a concrete `Property` instance and dictates how the property interacts
+    /// with the cascade (inheritance, initial values).
     // https://drafts.css-houdini.org/css-properties-values-api/#custom-property-registration
     struct Registration : Meta::NoCopy {
         Opt<Weak<Registration>> _self;
@@ -63,6 +70,7 @@ export struct Property : Meta::NoCopy {
 
         virtual ~Registration() = default;
 
+        /// Returns the canonical CSS identifier for this property (e.g., `color`, `margin-top`).
         virtual Symbol name() const = 0;
 
         // https://drafts.csswg.org/css-cascade-4/#legacy-name-alias
@@ -74,6 +82,7 @@ export struct Property : Meta::NoCopy {
             return {};
         }
 
+        // https://drafts.csswg.org/css-cascade/#initial-value
         virtual Rc<Property> initial() const = 0;
 
         virtual Rc<Property> load(ComputedValues const& c) const = 0;
@@ -83,7 +92,7 @@ export struct Property : Meta::NoCopy {
             //       commonly inherited. Any property marked with the INHERITED
             //       flag should override this method with a faster implementation.
             if (flags().has(INHERITED))
-                logFatal("property {#} marked as INHERITED is using the slow fallback path. override inherit()!", name());
+                logWarn("property {#} marked as INHERITED is using the slow fallback path. override inherit()!", name());
             load(parent)->apply(child);
         }
 
@@ -109,7 +118,7 @@ export struct Property : Meta::NoCopy {
 
     virtual Vec<Rc<Property>> expandShorthand(RegisteredPropertySet&, [[maybe_unused]] ComputedValues const& parent, [[maybe_unused]] ComputedValues& child) const {
         if (isBogusProperty())
-            logFatal("trying to expand {#} as a bug property");
+            logFatal("trying to expand {#} which is a bogus property");
 
         if (isShorthandProperty())
             logFatal("shorthand property {#} is missing expandShorthand() implementation", registration->name());
@@ -151,6 +160,7 @@ export struct Property : Meta::NoCopy {
         return false;
     }
 
+    /// Determines whether this property instance represents a parsing failure or an unrecognized CSS declaration.
     virtual bool isBogusProperty() const {
         return registration->flags().has(BOGUS_REGISTRATION);
     }
@@ -263,8 +273,8 @@ struct ToggleProperty : Property {
 
 // MARK: Deferred Property -----------------------------------------------------
 
-// NOTE: A property that could not be parsed, it's used to store the value
-//       as-is and apply it with the cascade and custom properties
+/// A property that could not be parsed, it's used to store the value
+/// as-is and apply it with the cascade and custom properties
 struct DeferredProperty : Property {
     Css::Content _value;