@react-x11/components 0.10.0 → 0.11.0

package/dist/html/paint.js

@@ -24,7 +24,7 @@ import { alphaOf, inkColor, isTransparent, resolve } from './css/values.js';
 import { blend, borderShades } from './css/color.js';
 import { CONTAIN_LAYOUT, CONTAIN_PAINT, CONTAIN_SIZE, copyStyle, scrolls, } from './css/style.js';
 import { contained } from './layout/block.js';
-import { BOX_RAISES, LINE_BOX_RAISES, Box, CLAMPED, CLIPPED_CELLS, COLLAPSED_CELLS, FADED_BLOCKS, PAINT_ORDER, INLINE_OFFSETS, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, TEXT_SHIFTS, } from './layout/boxes.js';
+import { BOX_RAISES, LINE_BOX_RAISES, Box, CLAMPED, CLIPPED_CELLS, COLLAPSED_CELLS, FADED_BLOCKS, PAINT_ORDER, INLINE_OFFSETS, MOVED_OFF_LINES, SHADOWED_TEXT, SHIFTED_LINES, TEXT_RAISES, TEXT_SHIFTS, } from './layout/boxes.js';
 import { CLIPPED_TEXT, clipBoxOf, depthOf, inklessLayout, layoutOffsetOf, layoutOffsets, } from './layout/inline.js';
 import { tableGrid } from './layout/grid.js';
 import { SvgDrawing, inlineDrawing } from './svg.js';
@@ -280,7 +280,7 @@ export function paintDocument(ctx, tree, options) {
     if (!canFill(ctx))
         return;
     ctx.save();
-    const canvas = canvasBackground(tree.root);
+    const canvas = canvasBackground(tree);
     if (canvas)
         paintCanvas(ctx, canvas, tree.root, options);
     paintBox(ctx, tree.root, {
@@ -296,22 +296,41 @@ export function paintDocument(ctx, tree, options) {
  * `<body>`'s, which then paints no background of its own. A document with
  * no `<html>` tag has the root box standing in for its root element, and a
  * `<body>` in it is still the body: mail often starts at `<body style>`.
- * `anchor` is the box the image is positioned against: the root element's,
- * whichever box it came from.
+ * With neither tag, the root box stands in for the body, and the `<html>`
+ * around it is implied: an `html { … }` or a `:root { … }` background, which
+ * a test's reference sets on a document with no tags at all, has no box
+ * but the canvas to be painted on. `anchor` is the box the image is
+ * positioned against: the root element's, whichever box it came from.
  */
-function canvasBackground(root) {
-    const has = (b) => !isTransparent(b.style.backgroundColor) ||
-        !!b.style.backgroundImage ||
-        !!b.style.backgroundGradient ||
-        !!b.style.backgroundImages;
+function canvasBackground(tree) {
+    const root = tree.root;
+    const has = (s) => !isTransparent(s.backgroundColor) ||
+        !!s.backgroundImage ||
+        !!s.backgroundGradient ||
+        !!s.backgroundImages;
+    const implied = tree.impliedHtml;
+    if (implied) {
+        // an `<html>` that is not displayed has no background to give
+        if (implied.display === 'none')
+            return null;
+        if (has(implied))
+            return { style: implied, source: null, anchor: root };
+        // containment on either keeps the body's to the body (CSS Containment 2)
+        if (implied.contain || root.style.contain)
+            return null;
+        return has(root.style)
+            ? { style: root.style, source: root, anchor: root }
+            : null;
+    }
     const top = childNamed(root, 'html') ?? root;
-    if (has(top))
-        return { source: top, anchor: top };
+    if (has(top.style))
+        return { style: top.style, source: top, anchor: top };
     const body = childNamed(top, 'body');
-    // containment on either keeps the body's to the body (CSS Containment 2)
     if (!body || top.style.contain || body.style.contain)
         return null;
-    return has(body) ? { source: body, anchor: top } : null;
+    return has(body.style)
+        ? { style: body.style, source: body, anchor: top }
+        : null;
 }
 /** A box's child element of that name, or one inside the anonymous boxes
  *  it is wrapped in: a `<body>` in an `<html>` set `display: table` is in
@@ -328,7 +347,7 @@ function childNamed(box, name) {
     }
     return null;
 }
-function paintCanvas(ctx, { source, anchor }, root, options) {
+function paintCanvas(ctx, { style: source, anchor }, root, options) {
     const whole = options.canvas ?? {
         x: root.x + options.originX,
         y: root.y + options.originY,
@@ -338,8 +357,8 @@ function paintCanvas(ctx, { source, anchor }, root, options) {
     const area = clampRect(options, Math.round(whole.x), Math.round(whole.y), Math.ceil(whole.width), Math.ceil(whole.height));
     if (!area)
         return;
-    const layers = layersOf(source.style) ?? [source.style];
-    const visible = source.style.visibility === 'visible';
+    const layers = layersOf(source) ?? [source];
+    const visible = source.visibility === 'visible';
     for (let i = layers.length - 1; i >= 0; i -= 1) {
         const style = layers[i];
         if (!isTransparent(style.backgroundColor) && visible) {
@@ -403,22 +422,32 @@ function layersOf(style) {
  */
 function paintLayers(ctx, box, options, image) {
     // a background painted through the text is painted with it
-    // (`paintClippedText`), and not as a box
-    if (box.style.backgroundClipText)
+    // (`paintClippedText`), and not as a box — but for what `border-area
+    // text` paints in the border as well
+    const style = box.style;
+    if (style.backgroundClipText && style.backgroundClip !== 'border-area') {
         return;
-    const layers = layersOf(box.style);
+    }
+    const layers = layersOf(style);
     if (!layers) {
-        paintBackground(ctx, box, options, box.style);
-        if (image && box.style.backgroundImage)
-            image(box.style);
+        paintLayer(ctx, box, options, style, image);
         return;
     }
     for (let i = layers.length - 1; i >= 0; i -= 1) {
-        paintBackground(ctx, box, options, layers[i]);
-        if (image && layers[i].backgroundImage)
-            image(layers[i]);
+        paintLayer(ctx, box, options, layers[i], image);
     }
 }
+function paintLayer(ctx, box, options, layer, image) {
+    // painted over the border box, inside what the border paints
+    const area = layer.backgroundClip === 'border-area';
+    if (area && !pushBorderArea(ctx, box, options))
+        return;
+    paintBackground(ctx, box, options, layer);
+    if (image && layer.backgroundImage)
+        image(layer);
+    if (area)
+        ctx.restore();
+}
 /** A box's padding box in window coordinates. */
 function paddingBox(box, options) {
     return {
@@ -627,14 +656,7 @@ function paintOwnBackground(ctx, box, options) {
     if (style.boxShadow)
         paintShadows(ctx, box, options, false);
     if (box !== options.canvasSource) {
-        paintLayers(ctx, box, options, (layer) => {
-            const painted = clipArea(box, options, layer, true);
-            const area = painted &&
-                clampRect(options, painted.x, painted.y, painted.w, painted.h);
-            if (area) {
-                paintBackgroundImage(ctx, layer, area, originBox(box, options, layer), options, painted.corners);
-            }
-        });
+        paintLayers(ctx, box, options, frameImages(ctx, box, options));
     }
     if (style.boxShadow)
         paintShadows(ctx, box, options, true);
@@ -644,6 +666,21 @@ function paintOwnBackground(ctx, box, options) {
     if (box.kind === 'table')
         paintPartBackgrounds(ctx, box, options);
 }
+/**
+ * How `paintLayers` draws a frame's image layers: each in the area its
+ * `background-clip` names, from the box its `background-origin` names
+ * (CSS Backgrounds 3, 3.7 and 3.8) — a block's, or an inline box's
+ * fragment's, whose background is its images as much as its colour.
+ */
+function frameImages(ctx, frame, options) {
+    return (layer) => {
+        const painted = clipArea(frame, options, layer, true);
+        const area = painted && clampRect(options, painted.x, painted.y, painted.w, painted.h);
+        if (area) {
+            paintBackgroundImage(ctx, layer, area, originBox(frame, options, layer), options, painted.corners);
+        }
+    };
+}
 /** How far past its shape a shadow's blur shows: three standard deviations,
  *  the blur being two (CSS Backgrounds 3, 7.1.1). */
 function shadowReach(blur) {
@@ -1215,9 +1252,10 @@ function spreadCorners(c, width, height, top, right, bottom, left) {
     return rounded ? { x, y } : null;
 }
 /** How far in from a box's border box the box a `<visual-box>` names is:
- *  top, right, bottom and left. */
+ *  top, right, bottom and left — none for `border-area`, whose layer is
+ *  painted over the border box inside what the border paints. */
 function edgeInsets(box, which) {
-    if (which === 'border-box')
+    if (which === 'border-box' || which === 'border-area')
         return NO_INSETS;
     const t = box.borderTop;
     const r = box.borderRight;
@@ -2821,6 +2859,88 @@ function roundedRing(ctx, box, x, y, w, h, options) {
     }, insetCorners(corners, top, right, bottom, left));
     return true;
 }
+/**
+ * Clip to what a box's border paints, for a layer of `background-clip:
+ * border-area` (CSS Backgrounds 4, 2.1): each side's width and style, and
+ * not its colour — a transparent border still has an area, which is what
+ * the value is for. The shapes are the border painter's own, so that the
+ * background shows exactly where that border would: the ring `roundedRing`
+ * fills where a rounded border is solid, the ring the trapezoids of a 3D
+ * style make, and otherwise the rectangles `fillEdge` fills a side at a
+ * time — the dots, the dashes, the two lines of a double border. All of
+ * them run clockwise and a ring's inside the other way, so the clip is the
+ * union by the non-zero rule, the one every context's `clip` takes. False
+ * where the border paints nothing or the context cannot clip, and nothing
+ * is pushed.
+ */
+function pushBorderArea(ctx, box, options) {
+    const t = box.borderTop;
+    const r = box.borderRight;
+    const b = box.borderBottom;
+    const l = box.borderLeft;
+    if (!(t || r || b || l) || !ctx.beginPath || !ctx.rect || !ctx.clip) {
+        return false;
+    }
+    const s = box.style;
+    const left = box.x + options.originX;
+    const top = frameY(box) + options.originY;
+    const x = Math.round(left);
+    const y = Math.round(top);
+    const w = Math.round(left + box.width) - x;
+    const h = Math.round(top + frameHeight(box)) - y;
+    if (w <= 0 || h <= 0)
+        return false;
+    const area = clampRect(options, x, y, w, h);
+    if (!area)
+        return false;
+    const corners = cornersOf(s, w, h);
+    ctx.save();
+    ctx.beginPath();
+    if (corners && canCurve(ctx) && solidBorder(box)) {
+        roundedRect(ctx, area.x, area.y, area.w, area.h, corners, true);
+        const iw = area.w - l - r;
+        const ih = area.h - t - b;
+        if (iw > 0 && ih > 0) {
+            const inner = insetCorners(corners, t, r, b, l);
+            roundedRect(ctx, area.x + l, area.y + t, iw, ih, inner, true, true);
+        }
+    }
+    else if (sculpted(s)) {
+        // a band a side, which the trapezoids cover between them
+        ctx.rect(area.x, area.y, area.w, t);
+        ctx.rect(area.x, area.y + area.h - b, area.w, b);
+        ctx.rect(area.x, area.y + t, l, area.h - t - b);
+        ctx.rect(area.x + area.w - r, area.y + t, r, area.h - t - b);
+    }
+    else {
+        const path = { fillRect: ctx.rect.bind(ctx) };
+        const edge = (ex, ey, ew, eh, style, horizontal) => {
+            const rect = clampRect(options, ex, ey, ew, eh);
+            if (rect)
+                fillEdge(path, rect, horizontal ? ex : ey, style, horizontal);
+        };
+        const between = h - t - b;
+        if (t > 0)
+            edge(x, y, w, t, s.borderTopStyle, true);
+        if (b > 0)
+            edge(x, y + h - b, w, b, s.borderBottomStyle, true);
+        if (l > 0)
+            edge(x, y + t, l, between, s.borderLeftStyle, false);
+        if (r > 0)
+            edge(x + w - r, y + t, r, between, s.borderRightStyle, false);
+    }
+    ctx.clip();
+    return true;
+}
+/** Whether every side a box has a border on is solid, which a rounded box
+ *  draws as one ring (`roundedRing`). */
+function solidBorder(box) {
+    const s = box.style;
+    return ((!box.borderTop || s.borderTopStyle === 'solid') &&
+        (!box.borderRight || s.borderRightStyle === 'solid') &&
+        (!box.borderBottom || s.borderBottomStyle === 'solid') &&
+        (!box.borderLeft || s.borderLeftStyle === 'solid'));
+}
 /** The border styles drawn in two shades, as though lit from the top left. */
 const SCULPTED = new Set(['groove', 'ridge', 'inset', 'outset']);
 function sculpted(s) {
@@ -3215,6 +3335,20 @@ function paintLines(ctx, box, options) {
             if (line.y + line.height > top)
                 visible.push(line);
         }
+        // and a line the damage misses whose text or inline-block `position:
+        // relative` moved into it: drawn by its line, it went undrawn with it
+        const moved = MOVED_OFF_LINES.get(lines);
+        if (moved && reachedOff(visible, moved, top, bottom)) {
+            const drawn = new Set(visible);
+            for (const line of moved) {
+                if (movedInto(line, top, bottom))
+                    drawn.add(line);
+            }
+            visible.length = 0;
+            for (const line of lines)
+                if (drawn.has(line))
+                    visible.push(line);
+        }
     }
     else {
         visible.push(...lines);
@@ -3276,6 +3410,35 @@ function paintLines(ctx, box, options) {
         }
     }
 }
+/** Whether any of the lines moved content was taken off, and the damage
+ *  does not already draw, has it within the damage's rows. */
+function reachedOff(visible, moved, top, bottom) {
+    for (const line of moved) {
+        if (!visible.includes(line) && movedInto(line, top, bottom))
+            return true;
+    }
+    return false;
+}
+/** Whether what was moved off a line — its inline-blocks and images, where
+ *  their ink is, and its texts, where they are drawn — reaches the rows
+ *  between `top` and `bottom`. */
+function movedInto(line, top, bottom) {
+    for (const placed of line.atomics) {
+        const box = placed.box;
+        if (box.boundsY < bottom && box.boundsY + box.boundsHeight > top) {
+            return true;
+        }
+    }
+    for (const text of line.texts) {
+        const natural = text.layout.lines[text.layoutLine];
+        if (!natural)
+            continue;
+        const y = text.drawY + natural.y;
+        if (y < bottom && y + natural.height > top)
+            return true;
+    }
+    return false;
+}
 /**
  * The part of each such fragment above its line, drawn again over the
  * text there. CSS 2.1 Appendix E paints a block's inline content a line at
@@ -3297,7 +3460,7 @@ function paintBleeds(ctx, bleeds, options) {
         ctx.beginPath();
         ctx.rect(left, top, Math.ceil(fragment.width) + 2, bottom - top);
         ctx.clip();
-        paintLayers(ctx, fragment, options);
+        paintLayers(ctx, fragment, options, frameImages(ctx, fragment, options));
         paintBorders(ctx, fragment, options);
         ctx.restore();
     }
@@ -3755,7 +3918,10 @@ bleeds = null) {
         };
         if (fragment.width <= 0)
             continue;
-        paintLayers(ctx, fragment, options);
+        // its images from its own padding box, as its gradients are, each
+        // fragment alike: `slice` would lay them out as though the fragments
+        // were one box end to end, which a box on one line is
+        paintLayers(ctx, fragment, options, frameImages(ctx, fragment, options));
         paintBorders(ctx, fragment, options);
         if (box.style.outlineStyle !== 'none')
             paintOutline(ctx, fragment, options);