From caa2b5671aee0a6b1ba61ab1e51b4ed3f8459620 Mon Sep 17 00:00:00 2001
From: Vlad Tukhtarov <vtukhtarov@reviversoft.com>
Date: Thu, 31 Mar 2022 11:27:19 +0300
Subject: [PATCH] Canvas not rendering visible children of hidden element

---
 src/css/index.ts                     | 4 ++++
 src/dom/node-parser.ts               | 2 +-
 src/render/canvas/canvas-renderer.ts | 7 +++++--
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/css/index.ts b/src/css/index.ts
index b338871..48cca37 100644
--- a/src/css/index.ts
+++ b/src/css/index.ts
@@ -231,6 +231,10 @@ export class CSSParsedDeclaration {
         return this.display > 0 && this.opacity > 0 && this.visibility === VISIBILITY.VISIBLE;
     }
 
+    isChildVisible(): boolean {
+        return this.display > 0 && this.opacity > 0;
+    }
+
     isTransparent(): boolean {
         return isTransparent(this.backgroundColor);
     }
diff --git a/src/dom/node-parser.ts b/src/dom/node-parser.ts
index 5f38a24..924fbf9 100644
--- a/src/dom/node-parser.ts
+++ b/src/dom/node-parser.ts
@@ -25,7 +25,7 @@ const parseNodeTree = (context: Context, node: Node, parent: ElementContainer, r
                 childNode.assignedNodes().forEach((childNode) => parseNodeTree(context, childNode, parent, root));
             } else {
                 const container = createContainer(context, childNode);
-                if (container.styles.isVisible()) {
+                if (container.styles.isChildVisible()) {
                     if (createsRealStackingContext(childNode, container, root)) {
                         container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
                     } else if (createsStackingContext(container.styles)) {
diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index 6efb648..0a9f6b6 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -128,7 +128,7 @@ export class CanvasRenderer extends Renderer {
 
     async renderStack(stack: StackingContext): Promise<void> {
         const styles = stack.element.container.styles;
-        if (styles.isVisible()) {
+        if (styles.isChildVisible()) {
             await this.renderStackContent(stack);
         }
     }
@@ -476,7 +476,10 @@ export class CanvasRenderer extends Renderer {
         }
         // https://www.w3.org/TR/css-position-3/#painting-order
         // 1. the background and borders of the element forming the stacking context.
-        await this.renderNodeBackgroundAndBorders(stack.element);
+        const styles = stack.element.container.styles;
+        if (styles.isVisible()) {
+            await this.renderNodeBackgroundAndBorders(stack.element);
+        }
         // 2. the child stacking contexts with negative stack levels (most negative first).
         for (const child of stack.negativeZIndex) {
             await this.renderStack(child);