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

Author: Louciole

src/main.cpp

@@ -164,7 +164,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(),
@@ -173,7 +173,15 @@ Async::Task<> renderAsync(
 
     Gfx::CpuCanvas g;
     g.begin(*image);
-    g.clear(Gfx::WHITE);
+
+    if (canvasColor.alpha < 255) {
+        g.clear(Gfx::WHITE);
+        auto rectangle = Math::Rectf{0, 0, options.width._val, options.height._val};
+        g.fillStyle(canvasColor);
+        g.fill(rectangle.cast<i64>(), Math::Radiif{0});
+    } else
+        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) {
@@ -45,9 +46,11 @@ export RenderResult render(Gc::Ref<Dom::Document> dom, Style::Media const& media
 
     Layout::Tree tree = {
         Layout::build(computer, dom),
-        viewport,
+        viewport
     };
 
+    auto canvasColor = Layout::BGSearch(computer, dom, tree);
+
     elapsed = Sys::now() - start;
 
     logDebugIf(DEBUG_RENDER, "layout tree build time: {}", elapsed);
@@ -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,64 @@
+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;
+    }
+}
+
+void patchBackgrounds(MutSlice<Layout::Box>& children) {
+    for (auto& child : children) {
+        if (child.origin->tagName == Html::BODY) {
+            child.style->backgrounds.cow().color = Gfx::ALPHA;
+        }
+    }
+}
+
+export Gfx::Color BGSearch(Style::Computer& c, Gc::Ref<Dom::Document> doc, Layout::Tree& tree) {
+    auto el = doc->documentElement();
+    if (!el) {
+        return Gfx::WHITE;
+    }
+
+    auto style = c.computeFor(Style::Computed::initial(), *el);
+    if (style->backgrounds->color != Gfx::ALPHA) {
+        tree.root.style->backgrounds.cow().color = Gfx::ALPHA;
+        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) {
+                auto children = tree.root.children();
+                patchBackgrounds(children);
+                return ColorToGfx(childStyle->backgrounds->color);
+            } else {
+                return Gfx::WHITE;
+            }
+        }
+    }
+
+    return Gfx::WHITE;
+}
+
+} // namespace Vaev::Layout

src/web/vaev-layout/base.cpp

@@ -254,12 +254,13 @@ struct Box : public Meta::NoCopy {
     Content content = NONE;
     Attrs attrs;
     Opt<Rc<FormatingContext>> formatingContext = NONE;
+    Gc::Ptr<Dom::Element> origin;
 
-    Box(Rc<Style::Computed> style, Rc<Text::Fontface> font)
-        : style{std::move(style)}, fontFace{font} {}
+    Box(Rc<Style::Computed> style, Rc<Text::Fontface> font, Gc::Ptr<Dom::Element> og)
+        : style{std::move(style)}, fontFace{font} , origin{og} {}
 
-    Box(Rc<Style::Computed> style, Rc<Text::Fontface> font, Content content)
-        : style{std::move(style)}, fontFace{font}, content{std::move(content)} {}
+    Box(Rc<Style::Computed> style, Rc<Text::Fontface> font, Content content, Gc::Ptr<Dom::Element> og)
+        : style{std::move(style)}, fontFace{font}, content{std::move(content)} , origin{og} {}
 
     Slice<Box> children() const {
         if (auto children = content.is<Vec<Box>>())

src/web/vaev-layout/builder.cpp

@@ -175,7 +175,7 @@ static void _buildRun(Style::Computer& c, Gc::Ref<Dom::Text> node, Box& parent)
         }
     }
 
-    parent.add({style, fontFace, std::move(prose)});
+    parent.add({style, fontFace, std::move(prose), nullptr});
 }
 
 // MARK: Build Block -----------------------------------------------------------
@@ -188,7 +188,7 @@ void _buildChildren(Style::Computer& c, Gc::Ref<Dom::Node> node, Box& parent) {
 
 static void _buildBlock(Style::Computer& c, Rc<Style::Computed> style, Gc::Ref<Dom::Element> el, Box& parent) {
     auto font = _lookupFontface(c.fontBook, *style);
-    Box box = {style, font};
+    Box box = {style, font, el};
     _buildChildren(c, el, box);
     box.attrs = _parseDomAttr(el);
     parent.add(std::move(box));
@@ -207,7 +207,7 @@ static void _buildImage(Style::Computer& c, Gc::Ref<Dom::Element> el, Box& paren
     auto img = Karm::Image::load(url).unwrapOrElse([] {
         return Karm::Image::loadOrFallback("bundle://vaev-driver/missing.qoi"_url).unwrap();
     });
-    parent.add({style, font, img});
+    parent.add({style, font, img, el});
 }
 
 // MARK: Build Table -----------------------------------------------------------
@@ -216,6 +216,7 @@ static void _buildTableChildren(Style::Computer& c, Gc::Ref<Dom::Node> node, Box
     Box tableBox{
         tableBoxStyle,
         tableWrapperBox.fontFace,
+        node->is<Dom::Element>()
     };
 
     tableBox.style->display = Display::Internal::TABLE_BOX;
@@ -259,7 +260,7 @@ static void _buildTable(Style::Computer& c, Rc<Style::Computed> style, Gc::Ref<D
     wrapperStyle->display = style->display;
     wrapperStyle->margin = style->margin;
 
-    Box wrapper = {wrapperStyle, font};
+    Box wrapper = {wrapperStyle, font, el};
     _buildTableChildren(c, el, wrapper, style);
     wrapper.attrs = _parseDomAttr(el);
 
@@ -295,16 +296,14 @@ 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);
-        Box root = {style, _lookupFontface(c.fontBook, *style)};
+        Box root = {style, _lookupFontface(c.fontBook, *style), el};
         _buildChildren(c, *el, root);
         return root;
     }
@@ -313,6 +312,7 @@ export Box build(Style::Computer& c, Gc::Ref<Dom::Document> doc) {
     return {
         style,
         _lookupFontface(c.fontBook, *style),
+        nullptr
     };
 }
 
@@ -335,10 +335,10 @@ export Box buildForPseudoElement(Text::FontBook& fontBook, Rc<Style::Computed> s
     auto prose = makeRc<Text::Prose>(proseStyle);
     if (style->content) {
         prose->append(style->content.str());
-        return {style, fontFace, prose};
+        return {style, fontFace, prose, nullptr};
     }
 
-    return {style, fontFace};
+    return {style, fontFace, nullptr};
 }
 
 } // namespace Vaev::Layout

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,17 @@ 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);
 
-        paint->paint(g, rect.offset(-bound().xy).cast<f64>());
+        if (canvasColor.alpha < 255) {
+            g.clear(paintRect, Gfx::WHITE);
+            g.rect(paintRect.cast<f64>());
+            g.fill(canvasColor);
+        } else
+            g.clear(paintRect, canvasColor);
+
+        paint->paint(g, paintRect.cast<f64>());
         if (_props.wireframe)
             Layout::wireframe(*frag, g);
 
@@ -100,7 +108,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,109 @@
+<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>
+<test name="html-body-bg-delete-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: rgba(185, 138, 241, 0.4);
+            }
+        </style>
+    </head>
+
+    <body>
+    <slot/>
+    </body>
+
+    </html>
+</container>
+
+<rendering>
+    <div id="ref" style="height: 100svh;width: 100vw"></div>
+</rendering>
+
+<rendering>
+    <style>
+        body {
+            background-color: rgba(185, 138, 241, 0.4);
+        }
+    </style>
+</rendering>
+</test>