vaev-layout: Fixed positioning for padding.

odoo · Sep 30, 2024 · 52944e3 · 52944e3
1 parent 95b38f5
commit 52944e3
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 2 deletions.
diff --git a/project.json b/project.json
@@ -7,7 +7,7 @@
     "extern": {
         "skift-org/karm": {
             "git": "https://github.com/skift-org/karm.git",
-            "tag": "v0.1.3"
+            "tag": "v0.1.4"
         },
         "cute-engineering/cat": {
             "git": "https://github.com/cute-engineering/cat.git",

diff --git a/src/vaev-layout/frag.cpp b/src/vaev-layout/frag.cpp
@@ -255,6 +255,8 @@ Output layout(Tree &t, Frag &f, Input input) {
     });
     input.intrinsic = heightIntrinsicSize;
 
+    input.position = input.position + borders.topStart() + padding.topStart();
+
     auto [size, _] = _contentLayout(t, f, input);
 
     size.width = input.knownSize.width.unwrapOr(size.width);
@@ -263,7 +265,7 @@ Output layout(Tree &t, Frag &f, Input input) {
     size = size + padding.all() + borders.all();
 
     if (input.commit == Commit::YES) {
-        f.layout.position = input.position;
+        f.layout.position = input.position - borders.topStart() - padding.topStart();
         f.layout.borderSize = size;
         f.layout.padding = padding;
         f.layout.borders = borders;

diff --git a/tests/css/box-model/padding.xhtml b/tests/css/box-model/padding.xhtml
@@ -0,0 +1,104 @@
+<test id="padding-0"></test>
+<container>
+    <html lang="en">
+
+    <head>
+        <style>
+            body {
+                margin: 0px;
+            }
+
+            section {
+                width: 200px;
+                height: 200px;
+                background: #ddd;
+                position: relative;
+            }
+
+            .green {
+                background-color: green;
+            }
+
+            .white {
+                background-color: white;
+            }
+        </style>
+    </head>
+
+    <body>
+        <section>
+            <slot />
+        </section>
+    </body>
+
+    </html>
+</container>
+
+<rendering>
+    <div class="white" style="width: 100px; height: 100px;"></div>
+</rendering>
+
+<rendering>
+    <div class="green" style="padding: 0px; height: 100px; width: 100px">
+        <div class="white" style="height: 100%"></div>
+    </div>
+</rendering>
+
+<error>
+</error>
+
+
+</test>
+
+<test id="padding-1"></test>
+<container>
+    <html lang="en">
+
+    <head>
+        <style>
+            body {
+                margin: 0px;
+            }
+
+            section {
+                width: 200px;
+                height: 200px;
+                background: #ddd;
+                position: relative;
+            }
+
+            .green {
+                background-color: green;
+            }
+
+            .white {
+                background-color: white;
+            }
+        </style>
+    </head>
+
+    <body>
+        <section>
+            <slot />
+        </section>
+    </body>
+
+    </html>
+</container>
+
+<rendering>
+    <div class="green" style="height: 100px; width: 100px" />
+    <div class="white" style="position:absolute; top: 10px; left: 10px; width: 80px; height: 80px;" />
+</rendering>
+
+<rendering>
+    <div class="green" style="padding: 10px; height: 100px; width: 100px">
+        <div class="white" style="height: 100%" />
+    </div>
+</rendering>
+
+<error>
+</error>
+
+
+</test>