buninu-browser 0.2.3 → 0.3.0

package/lib/render-tree/svg.js

@@ -6,7 +6,7 @@
  * Supported: path, rect, circle, ellipse, line, polyline, polygon, nested g
  * and svg; fill, stroke, stroke-width, fill-rule, opacity, fill-opacity,
  * stroke-opacity and transform (matrix, translate, scale, rotate) from
- * attributes, inherited through groups; currentColor. Text, gradients,
+ * attributes, inherited through groups; CSS fill/stroke/opacity and currentColor. Text, gradients,
  * patterns, masks, filters and <use> are not drawn.
  */
 
@@ -19,7 +19,7 @@ const IDENTITY = Object.freeze([1, 0, 0, 1, 0, 0]);
  * @param {string} currentColor the element's computed color (rgba)
  * @returns {{ viewBox: number[] | null, width: number | null, height: number | null, shapes: object[] }}
  */
-export function extractSvg(element, currentColor) {
+export function extractSvg(element, currentColor, styleEngine = null) {
   // HTML-parsed markup may carry the attribute lowercased (viewbox).
   const viewBox = parseNumbers(element.getAttribute("viewBox") ?? element.getAttribute("viewbox"));
   const shapes = [];
@@ -33,18 +33,21 @@ export function extractSvg(element, currentColor) {
     opacity: 1,
     matrix: IDENTITY,
   };
-  walk(element, inherit(root, element, currentColor, true));
+  walk(element, inherit(root, element, currentColor, true, styleEngine?.get(element)));
 
   function walk(node, paint) {
     for (const child of node.children ?? []) {
       const name = child.localName?.toLowerCase();
-      if (!name || SKIPPED.has(name) || child.getAttribute("display") === "none" || child.getAttribute("visibility") === "hidden") continue;
-      const childPaint = inherit(paint, child, currentColor, false);
+      const style = styleEngine?.get(child);
+      if (!name || SKIPPED.has(name) || (style?.display ?? child.getAttribute("display")) === "none"
+        || !styleEngine && child.getAttribute("visibility") === "hidden") continue;
+      const childPaint = inherit(paint, child, style?.color ?? currentColor, false, style);
       if (name === "g" || name === "svg" || name === "a") {
         walk(child, childPaint);
         continue;
       }
       if (!SHAPES.has(name)) continue;
+      if (["hidden", "collapse"].includes(style?.visibility ?? child.getAttribute("visibility"))) continue;
       const d = shapePath(name, child);
       if (!d) continue;
       // A line has no interior to fill (SVG 2 §10.5).
@@ -72,8 +75,12 @@ export function extractSvg(element, currentColor) {
 }
 
 /** Paint properties of `element`, inheriting from `parent`. Opacity multiplies down the tree. */
-function inherit(parent, element, currentColor, isRoot) {
+function inherit(parent, element, currentColor, isRoot, computed) {
   const attribute = (name) => {
+    if (computed) {
+      const field = name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+      if (computed[field] != null) return computed[field];
+    }
     // Presentation attributes, overridden by the style attribute.
     const style = element.getAttribute("style") ?? "";
     const fromStyle = new RegExp(`(?:^|;)\\s*${name}\\s*:\\s*([^;]+)`, "i").exec(style)?.[1]?.trim();
@@ -94,7 +101,8 @@ function inherit(parent, element, currentColor, isRoot) {
   };
   paint.fillOpacity = number("fill-opacity") ?? parent.fillOpacity;
   paint.strokeOpacity = number("stroke-opacity") ?? parent.strokeOpacity;
-  paint.opacity = parent.opacity * (number("opacity") ?? 1);
+  // The SVG CSS box already composites its own opacity in the display list.
+  paint.opacity = parent.opacity * (isRoot && computed ? 1 : number("opacity") ?? 1);
   // The root's own transform does not apply (it is a CSS box), its children's do.
   const transform = isRoot ? null : element.getAttribute("transform");
   if (transform) paint.matrix = multiply(parent.matrix, parseTransform(transform));