vaev-driver: Handle correctly HTML/BODY backgrounds outside of layout builder.

Author: Louciole

src/main.cpp

@@ -157,7 +157,7 @@ Async::Task<> renderAsync(
     };
 
     auto media = constructMediaForRender(options.scale, imageSize);
-    auto [style, layout, paint, frags] = Vaev::Driver::render(*dom, media, {.small = imageSize});
+    auto [style, layout, paint, frags, canvasColor] = Vaev::Driver::render(*dom, media, {.small = imageSize});
 
     auto image = Gfx::Surface::alloc(
         imageSize.cast<isize>() * options.density.toDppx(),
@@ -166,7 +166,7 @@ Async::Task<> renderAsync(
 
     Gfx::CpuCanvas g;
     g.begin(*image);
-    g.clear(Gfx::WHITE);
+    g.clear(canvasColor);
     g.scale(options.density.toDppx());
     paint->paint(g);
     if (options.wireframe)

src/web/vaev-driver/render.cpp

@@ -20,6 +20,7 @@ export struct RenderResult {
     Rc<Layout::Box> layout;
     Rc<Scene::Node> scenes;
     Rc<Layout::Frag> frag;
+    Gfx::Color canvasColor;
 };
 
 export RenderResult render(Gc::Ref<Dom::Document> dom, Style::Media const& media, Layout::Viewport viewport) {
@@ -43,9 +44,11 @@ export RenderResult render(Gc::Ref<Dom::Document> dom, Style::Media const& media
     Style::Computer computer{media, stylebook, fontBook};
     computer.loadFontFaces();
 
+    auto canvasColor = Layout::BGSearch(computer, dom);
+
     Layout::Tree tree = {
         Layout::build(computer, dom),
-        viewport,
+        viewport
     };
 
     elapsed = Sys::now() - start;
@@ -79,7 +82,8 @@ export RenderResult render(Gc::Ref<Dom::Document> dom, Style::Media const& media
         std::move(stylebook),
         makeRc<Layout::Box>(std::move(tree.root)),
         sceneRoot,
-        makeRc<Layout::Frag>(std::move(root))
+        makeRc<Layout::Frag>(std::move(root)),
+        canvasColor
     };
 }
 

src/web/vaev-layout/backgroundCanvas.cpp

@@ -0,0 +1,55 @@
+module;
+
+#include <karm-image/loader.h>
+#include <karm-text/loader.h>
+#include <karm-text/prose.h>
+#include <vaev-dom/document.h>
+#include <vaev-style/computer.h>
+
+export module Vaev.Layout:backgroundCanvas;
+
+import :values;
+
+namespace Vaev::Layout {
+
+Gfx::Color ColorToGfx(Color color) {
+    if (auto isRes = color.is<Gfx::Color>()) {
+        return *isRes;
+    } else {
+        logWarn("color was not a Gfx color");
+        return Gfx::WHITE;
+    }
+}
+
+export Gfx::Color BGSearch(Style::Computer& c, Gc::Ref<Dom::Document> doc) {
+    auto el = doc->documentElement();
+    if (!el) {
+        return Gfx::WHITE;
+    }
+
+    auto style = c.computeFor(Style::Computed::initial(), *el);
+    if (style->backgrounds->color != Gfx::ALPHA) {
+        style->backgrounds.cow().color = Gfx::PINK;
+        return ColorToGfx(style->backgrounds->color);
+    }
+
+    for (auto child = el->firstChild(); child; child = child->nextSibling()) {
+        if (auto isRes = child->is<Dom::Element>()) {
+            if (isRes->tagName != Html::BODY) {
+                continue;
+            }
+
+            auto childStyle = c.computeFor(*style, *isRes);
+            if (childStyle->backgrounds->color != Gfx::ALPHA) {
+                childStyle->backgrounds.cow().color = Gfx::PINK;
+                return ColorToGfx(childStyle->backgrounds->color);
+            } else {
+                return Gfx::WHITE;
+            }
+        }
+    }
+
+    return Gfx::WHITE;
+}
+
+} // namespace Vaev::Layout

src/web/vaev-layout/builder.cpp

@@ -275,6 +275,7 @@ static void _buildElement(Style::Computer& c, Gc::Ref<Dom::Element> el, Box& par
     }
 
     auto style = c.computeFor(*parent.style, el);
+
     auto font = _lookupFontface(c.fontBook, *style);
 
     auto display = style->display;
@@ -295,12 +296,11 @@ static void _buildNode(Style::Computer& c, Gc::Ref<Dom::Node> node, Box& parent)
         _buildElement(c, *el, parent);
     } else if (auto text = node->is<Dom::Text>()) {
         _buildRun(c, *text, parent);
-    } else if (auto doc = node->is<Dom::Document>()) {
-        _buildChildren(c, *doc, parent);
     }
 }
 
 export Box build(Style::Computer& c, Gc::Ref<Dom::Document> doc) {
+
     if (auto el = doc->documentElement()) {
         auto style = c.computeFor(Style::Computed::initial(), *el);
         auto font = _lookupFontface(c.fontBook, *style);

src/web/vaev-layout/mod.cpp

@@ -13,3 +13,4 @@ export import :replaced;
 export import :table;
 export import :values;
 export import :writing;
+export import :backgroundCanvas;

src/web/vaev-view/view.cpp

@@ -71,6 +71,7 @@ struct View : public Ui::View<View> {
     }
 
     void paint(Gfx::Canvas& g, Math::Recti rect) override {
+        // Painting browser's viewport.
         auto viewport = bound().size();
         if (not _renderResult) {
             auto media = _constructMedia(viewport);
@@ -82,10 +83,11 @@ struct View : public Ui::View<View> {
         g.origin(bound().xy.cast<f64>());
         g.clip(viewport);
 
-        auto [_, layout, paint, frag] = *_renderResult;
-        g.clear(rect, Gfx::WHITE);
+        auto [_, layout, paint, frag, canvasColor] = *_renderResult;
+        auto paintRect = rect.offset(-bound().xy);
+        g.clear(paintRect, canvasColor);
 
-        paint->paint(g, rect.offset(-bound().xy).cast<f64>());
+        paint->paint(g, paintRect.cast<f64>());
         if (_props.wireframe)
             Layout::wireframe(*frag, g);
 
@@ -100,7 +102,7 @@ struct View : public Ui::View<View> {
     Math::Vec2i size(Math::Vec2i size, Ui::Hint) override {
         // FIXME: This is wasteful, we should cache the result
         auto media = _constructMedia(size);
-        auto [_, layout, _, frag] = Driver::render(*_dom, media, {.small = size.cast<Au>()});
+        auto [_, layout, _, frag, _] = Driver::render(*_dom, media, {.small = size.cast<Au>()});
 
         return {
             frag->metrics.borderBox().width.cast<isize>(),

tests/css/colors/stupid-backgrounds.xhtml

@@ -0,0 +1,65 @@
+<test name="html-body-bg">
+    <container>
+        <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+        <head>
+            <style>
+                body {
+                    height: 100svh;
+                    width: 100vw;
+                    margin: 0;
+                }
+
+                html {
+                    height: 100svh;
+                    width: 100vw;
+                }
+
+                #ref {
+                    height: 100svh;
+                    width: 100vw;
+                    background-color: #b98af1;
+                }
+            </style>
+        </head>
+
+        <body>
+        <slot />
+        </body>
+
+        </html>
+    </container>
+
+    <rendering>
+        <div id="ref" style="height: 100svh;width: 100vw;background-color: #b98af1;"></div>
+    </rendering>
+
+    <rendering>
+        <style>
+            html {
+                background-color: #b98af1;
+            }
+        </style>
+    </rendering>
+
+    <rendering>
+        <style>
+            body {
+                background-color: #b98af1;
+            }
+        </style>
+    </rendering>
+
+    <rendering>
+        <style>
+            html {
+                background-color: #b98af1;
+            }
+
+            body {
+                background-color: #ff2b8d;
+                display: none;
+            }
+        </style>
+    </rendering>
+</test>