From 197c2f8d75c8436f29f3cdfd62a6bcd9cb88ff15 Mon Sep 17 00:00:00 2001
From: VAN BOSSUYT Nicolas <nivb@odoo.com>
Date: Tue, 1 Oct 2024 10:06:21 +0200
Subject: [PATCH] vaev-layout: Improved z-index ordering.

---
 meta/plugins/reftest.py        | 24 +++++-----
 src/vaev-base/insets.h         |  1 +
 src/vaev-base/z-index.h        |  4 ++
 src/vaev-layout/frag.cpp       |  4 +-
 src/vaev-layout/paint.cpp      | 82 +++++++++++++++++++++++++++++-----
 src/vaev-layout/positioned.cpp |  4 +-
 6 files changed, 91 insertions(+), 28 deletions(-)

diff --git a/meta/plugins/reftest.py b/meta/plugins/reftest.py
index 551c1b9d..3545c95c 100644
--- a/meta/plugins/reftest.py
+++ b/meta/plugins/reftest.py
@@ -152,12 +152,12 @@ def getInfo(txt):
                     print(f"{vt100.YELLOW}Skip test{vt100.RESET}")
                     continue
 
-                input_path = TEST_REPORT / f"{temp_file_name}-{num}.xhtml"
+                input_path = TEST_REPORT / f"{counter}.xhtml"
 
                 update_temp_file(input_path, container, rendering)
 
                 # generate temporary bmp
-                img_path = TEST_REPORT / f"{temp_file_name}-{num}.bmp"
+                img_path = TEST_REPORT / f"{counter}.bmp"
 
                 if props.get("size") == "full":
                     paperMuncher.popen("render", "-sdlpo", img_path, input_path)
@@ -177,7 +177,7 @@ def getInfo(txt):
                 paperMuncher.popen(
                     "print",
                     "-sdlpo",
-                    TEST_REPORT / f"{temp_file_name}-{num}.pdf",
+                    TEST_REPORT / f"{counter}.pdf",
                     input_path,
                 )
 
@@ -206,12 +206,12 @@ def getInfo(txt):
                 if ok:
                     passed += 1
                     # img_path.unlink()
-                    print(f"{help}: {vt100.GREEN}Passed{vt100.RESET}")
+                    print(f"{counter}: {help}: {vt100.GREEN}Passed{vt100.RESET}")
                 else:
                     failed += 1
 
                     print()
-                    print(f"{help}: {vt100.RED}Failed{vt100.RESET}")
+                    print(f"{counter}: {help}: {vt100.RED}Failed{vt100.RESET}")
                     # generate temporary file for debugging
 
                     print(f"file://{input_path}")
@@ -220,7 +220,7 @@ def getInfo(txt):
 
                 report += f"""
                 <div id="case-{counter}" class="test-case {ok and 'passed' or 'failed'}">
-                    <h2>{tag} - {props.get('name')}</h2>
+                    <h2>{counter} - {tag} - {props.get('name')}</h2>
                     <p>{help}</p>
                     <div class="outputs">
                         <div>
@@ -229,7 +229,7 @@ def getInfo(txt):
                         </div>
 
                         <div>
-                            <img class="actual" src="{TEST_REPORT / f'{temp_file_name}-{num}.bmp'}" />
+                            <img class="actual" src="{TEST_REPORT / f'{counter}.bmp'}" />
                             <figcaption>Actual</figcaption>
                         </div>
 
@@ -238,7 +238,7 @@ def getInfo(txt):
                             <figcaption>Rendition</figcaption>
                         </div>
                     </div>
-                    <a href="{TEST_REPORT / f'{temp_file_name}-{num}.pdf'}">PDF</a>
+                    <a href="{TEST_REPORT / f'{counter}.pdf'}">PDF</a>
                     <a href="{expected_image_url}">Expected</a>
                     <a href="{input_path}">Source</a>
                 </div>
@@ -255,6 +255,8 @@ def getInfo(txt):
     <style>
         body {
             font-family: sans-serif;
+            background-color: #18181b;
+            color: #fafafa
         }
 
         .test-case {
@@ -263,13 +265,11 @@ def getInfo(txt):
         }
 
         .passed {
-            border: 2px solid #aea;
-            background-color: #efe;
         }
 
         .failed {
-            border: 2px solid red;
-            background-color: lightcoral;
+            border: 2px solid #991b1b;
+            background-color: #450a0a;
         }
 
         .outputs {
diff --git a/src/vaev-base/insets.h b/src/vaev-base/insets.h
index a0bfa586..d3bec21f 100644
--- a/src/vaev-base/insets.h
+++ b/src/vaev-base/insets.h
@@ -7,6 +7,7 @@ namespace Vaev {
 // https://www.w3.org/TR/CSS22/visuren.html#propdef-position
 enum struct Position {
     STATIC,
+
     RELATIVE,
     ABSOLUTE,
     FIXED,
diff --git a/src/vaev-base/z-index.h b/src/vaev-base/z-index.h
index 8e1ceac5..7c940641 100644
--- a/src/vaev-base/z-index.h
+++ b/src/vaev-base/z-index.h
@@ -20,6 +20,10 @@ struct ZIndex {
 
     bool operator==(_Auto) const { return auto_; }
 
+    bool operator==(isize value) const {
+        return not auto_ and this->value == value;
+    }
+
     void repr(Io::Emit &e) const {
         if (auto_) {
             e("auto");
diff --git a/src/vaev-layout/frag.cpp b/src/vaev-layout/frag.cpp
index fb95f94e..60949073 100644
--- a/src/vaev-layout/frag.cpp
+++ b/src/vaev-layout/frag.cpp
@@ -41,7 +41,7 @@ void Frag::add(Frag &&frag) {
 
 void Frag::repr(Io::Emit &e) const {
     if (children()) {
-        e("(flow {} {}", style->display, layout.borderBox());
+        e("(flow {} {} {}", style->display, style->position, layout.borderBox());
         e.indentNewline();
         for (auto &c : children()) {
             c.repr(e);
@@ -50,7 +50,7 @@ void Frag::repr(Io::Emit &e) const {
         e.deindent();
         e(")");
     } else {
-        e("(frag {} {})", style->display, layout.borderBox());
+        e("(frag {} {} {})", style->display, style->position, layout.borderBox());
     }
 }
 
diff --git a/src/vaev-layout/paint.cpp b/src/vaev-layout/paint.cpp
index 26857180..02e6ec43 100644
--- a/src/vaev-layout/paint.cpp
+++ b/src/vaev-layout/paint.cpp
@@ -66,14 +66,17 @@ static void _paintBackground(Frag &frag, Gfx::Color currentColor, Paint::Stack &
     stack.add(makeStrong<Paint::Box>(std::move(paint)));
 }
 
-static void _paintInner(Frag &frag, Paint::Stack &stack) {
+static void _establishStackingContext(Frag &frag, Paint::Stack &stack);
+static void _paintStackingContext(Frag &frag, Paint::Stack &stack);
+
+static void _paintFrag(Frag &frag, Paint::Stack &stack) {
     Gfx::Color currentColor = Gfx::BLACK;
     currentColor = resolve(frag.style->color, currentColor);
 
     _paintBackground(frag, currentColor, stack);
 
-    for (auto &c : frag.children())
-        paint(c, stack);
+    if (not frag.layout.borders.zero())
+        _paintBorders(frag, currentColor, stack);
 
     if (auto run = frag.content.is<Strong<Text::Run>>()) {
         Math::Vec2f baseline = {0, frag.font.metrics().ascend};
@@ -83,22 +86,77 @@ static void _paintInner(Frag &frag, Paint::Stack &stack) {
             currentColor
         ));
     }
-
-    if (not frag.layout.borders.zero())
-        _paintBorders(frag, currentColor, stack);
 }
 
-void paint(Frag &frag, Paint::Stack &stack) {
-    if (frag.style->zIndex == ZIndex::AUTO) {
-        _paintInner(frag, stack);
-        return;
+static void _paintChildren(Frag &frag, Paint::Stack &stack, auto predicate) {
+    for (auto &c : frag.children()) {
+        auto &s = *c.style;
+
+        auto zIndex = s.zIndex;
+        if (zIndex != ZIndex::AUTO) {
+            if (predicate(s))
+                _establishStackingContext(c, stack);
+            continue;
+        }
+
+        // NOTE: Positioned elements act as if they establish a stacking context
+        auto position = s.position;
+        if (position != Position::STATIC) {
+            if (predicate(s))
+                _paintStackingContext(c, stack);
+            continue;
+        }
+
+        if (predicate(s))
+            _paintFrag(c, stack);
+        _paintChildren(c, stack, predicate);
     }
+}
 
-    // Z-index is not auto, we need to create a new stacking context
+static void _paintStackingContext(Frag &frag, Paint::Stack &stack) {
+    // 1. the background and borders of the element forming the stacking context.
+    _paintFrag(frag, stack);
+
+    // 2. the child stacking contexts with negative stack levels (most negative first).
+    _paintChildren(frag, stack, [](Style::Computed const &s) {
+        return s.zIndex.value < 0;
+    });
+
+    // 3. the in-flow, non-inline-level, non-positioned descendants.
+    _paintChildren(frag, stack, [](Style::Computed const &s) {
+        return s.zIndex == ZIndex::AUTO and s.display != Display::INLINE and s.position == Position::STATIC;
+    });
+
+    // 4. the non-positioned floats.
+    _paintChildren(frag, stack, [](Style::Computed const &s) {
+        return s.zIndex == ZIndex::AUTO and s.position == Position::STATIC and s.float_ != Float::NONE;
+    });
+
+    // 5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
+    _paintChildren(frag, stack, [](Style::Computed const &s) {
+        return s.zIndex == ZIndex::AUTO and s.display == Display::INLINE and s.position == Position::STATIC;
+    });
+
+    // 6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
+    _paintChildren(frag, stack, [](Style::Computed const &s) {
+        return s.zIndex.value == 0 and s.position != Position::STATIC;
+    });
+
+    // 7. the child stacking contexts with positive stack levels (least positive first).
+    _paintChildren(frag, stack, [](Style::Computed const &s) {
+        return s.zIndex.value > 0;
+    });
+}
+
+static void _establishStackingContext(Frag &frag, Paint::Stack &stack) {
     auto innerStack = makeStrong<Paint::Stack>();
     innerStack->zIndex = frag.style->zIndex.value;
-    _paintInner(frag, *innerStack);
+    _paintStackingContext(frag, *innerStack);
     stack.add(std::move(innerStack));
 }
 
+void paint(Frag &frag, Paint::Stack &stack) {
+    _paintStackingContext(frag, stack);
+}
+
 } // namespace Vaev::Layout
diff --git a/src/vaev-layout/positioned.cpp b/src/vaev-layout/positioned.cpp
index 89784074..22df4d4a 100644
--- a/src/vaev-layout/positioned.cpp
+++ b/src/vaev-layout/positioned.cpp
@@ -8,8 +8,8 @@ void layoutPositioned(Tree &t, Frag &f, RectPx containingBlock) {
         if (f.style->position == Position::RELATIVE)
             origin = f.layout.position;
 
-        auto top = f.layout.borderBox().top();
-        auto start = f.layout.borderBox().start();
+        auto top = f.layout.position.y;
+        auto start = f.layout.position.x;
 
         auto topOffset = f.style->offsets->top;
         if (topOffset != Width::AUTO) {