vaev-style: Fixed infix selectors matching.

odoo · Oct 4, 2024 · 9b320f0 · 9b320f0
1 parent 7168dd9
commit 9b320f0
Show file tree

Hide file tree

Showing 3 changed files with 154 additions and 11 deletions.
diff --git a/src/vaev-style/select.cpp b/src/vaev-style/select.cpp
@@ -53,13 +53,13 @@ Spec spec(Selector const &s) {
 
 // https://www.w3.org/TR/selectors-4/#descendant-combinators
 static bool _matchDescendant(Selector const &s, Markup::Element const &e) {
-    Markup::Node const *curr = &e;
+    Cursor<Markup::Node> curr = e;
     while (curr->hasParent()) {
         auto &parent = curr->parentNode();
         if (auto el = parent.is<Markup::Element>())
             if (s.match(*el))
                 return true;
-        curr = &parent;
+        curr = parent;
     }
     return false;
 }
@@ -100,21 +100,21 @@ static bool _matchSubsequent(Selector const &s, Markup::Element const &e) {
 }
 
 static bool _match(Infix const &s, Markup::Element const &e) {
-    if (not s.lhs->match(e))
+    if (not s.rhs->match(e))
         return false;
 
     switch (s.type) {
-    case Infix::Type::DESCENDANT:
-        return _matchDescendant(*s.rhs, e);
+    case Infix::Type::DESCENDANT: // ' '
+        return _matchDescendant(*s.lhs, e);
 
-    case Infix::Type::CHILD:
-        return _matchChild(*s.rhs, e);
+    case Infix::Type::CHILD: // >
+        return _matchChild(*s.lhs, e);
 
-    case Infix::Type::ADJACENT:
-        return _matchAdjacent(*s.rhs, e);
+    case Infix::Type::ADJACENT: // +
+        return _matchAdjacent(*s.lhs, e);
 
-    case Infix::Type::SUBSEQUENT:
-        return _matchSubsequent(*s.rhs, e);
+    case Infix::Type::SUBSEQUENT: // ~
+        return _matchSubsequent(*s.lhs, e);
 
     default:
         logWarn("unimplemented selector: {}", s);

diff --git a/tests/css/selectors/class.xhtml b/tests/css/selectors/class.xhtml
@@ -0,0 +1,59 @@
+<test id="slect-class">
+    <container>
+        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+        <head>
+            <style>
+                body {
+                    margin: 0px;
+                }
+
+                section {
+                    width: 200px;
+                    height: 200px;
+                    background: #ddd;
+                    position: relative;
+                }
+
+                div {
+                    width: 100px;
+                    height: 100px;
+                }
+            </style>
+        </head>
+
+        <body>
+            <section>
+                <slot />
+            </section>
+        </body>
+
+        </html>
+    </container>
+
+    <rendering>
+        <div class="klass" style="background-color: green;" />
+    </rendering>
+
+    <rendering>
+        <div class="klass" />
+        <style>
+            .klass {
+                background-color: green;
+            }
+        </style>
+    </rendering>
+
+
+    <error>
+        <div id="klass" />
+        <style>
+            .klass {
+                background-color: green;
+            }
+        </style>
+    </error>
+
+    <error>
+    </error>
+</test>
diff --git a/tests/css/selectors/descendant.xhtml b/tests/css/selectors/descendant.xhtml
@@ -0,0 +1,84 @@
+<test id="select-descendant">
+    <container>
+        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+        <head>
+            <style>
+                body {
+                    margin: 0px;
+                }
+
+                section {
+                    width: 200px;
+                    height: 200px;
+                    background: #ddd;
+                    position: relative;
+                }
+
+                div {
+                    width: 100px;
+                    height: 100px;
+                }
+            </style>
+        </head>
+
+        <body>
+            <section>
+                <slot />
+            </section>
+        </body>
+
+        </html>
+    </container>
+
+    <rendering>
+        <div class="klass" style="background-color: green;" />
+    </rendering>
+
+    <error>
+    </error>
+
+    <rendering>
+        <div class="cool">
+            <div class="klass" />
+        </div>
+
+        <style>
+            .cool .klass {
+                background-color: green;
+            }
+        </style>
+    </rendering>
+
+    <error>
+        <div>
+            <div class="klass" />
+        </div>
+
+        <style>
+            .cool .klass {
+                background-color: green;
+            }
+        </style>
+    </error>
+
+    <rendering>
+        <div class="cool">
+            <div>
+                <div>
+                    <div>
+                        <div>
+                            <div class="klass" /> <!-- This is peek react dev right here :^) -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <style>
+            .cool .klass {
+                background-color: green;
+            }
+        </style>
+    </rendering>
+</test>