xbintsc 0.5.45 → 0.5.52

package/runtime/ext_gui/paint_backdrop.cpp

@@ -0,0 +1,211 @@
+/*
+ * xbintsc GUI engine — CSS `backdrop-filter`.
+ *
+ * The backdrop is whatever has already been painted behind the element, which
+ * only the renderer can see. Paint therefore resolves the filter list into the
+ * two things the compositor needs: a Gaussian sigma and one combined 3x3 colour
+ * matrix. The renderer snapshots the scene, applies both in a full-screen
+ * shader, and composites the result back inside the element's rounded border
+ * box (see `renderer_layer.cpp`).
+ */
+
+#include "paint_internal.h"
+
+#include <algorithm>
+#include <cmath>
+
+namespace xtgui {
+namespace paint_detail {
+
+namespace {
+
+struct ColorMatrix {
+  float m[9] = {1, 0, 0, 0, 1, 0, 0, 0, 1};
+  float offset[3] = {0, 0, 0};
+};
+
+/** `out = left * right` for row-major 3x3 matrices. */
+ColorMatrix multiply(const ColorMatrix &left, const ColorMatrix &right) {
+  ColorMatrix result;
+  for (int row = 0; row < 3; row++) {
+    for (int column = 0; column < 3; column++) {
+      float sum = 0.0f;
+      for (int k = 0; k < 3; k++) sum += left.m[row * 3 + k] * right.m[k * 3 + column];
+      result.m[row * 3 + column] = sum;
+    }
+    result.offset[row] = left.m[row * 3] * right.offset[0] +
+                         left.m[row * 3 + 1] * right.offset[1] +
+                         left.m[row * 3 + 2] * right.offset[2] + left.offset[row];
+  }
+  return result;
+}
+
+ColorMatrix identity() { return ColorMatrix(); }
+
+ColorMatrix brightness(float amount) {
+  ColorMatrix matrix;
+  matrix.m[0] = matrix.m[4] = matrix.m[8] = amount;
+  return matrix;
+}
+
+ColorMatrix contrast(float amount) {
+  ColorMatrix matrix = brightness(amount);
+  float shift = 0.5f - 0.5f * amount;
+  matrix.offset[0] = matrix.offset[1] = matrix.offset[2] = shift;
+  return matrix;
+}
+
+ColorMatrix invert(float amount) {
+  ColorMatrix matrix;
+  float scale = 1.0f - 2.0f * amount;
+  matrix.m[0] = matrix.m[4] = matrix.m[8] = scale;
+  matrix.offset[0] = matrix.offset[1] = matrix.offset[2] = amount;
+  return matrix;
+}
+
+ColorMatrix grayscale(float amount) {
+  const float lr = 0.2126f, lg = 0.7152f, lb = 0.0722f;
+  ColorMatrix matrix;
+  matrix.m[0] = 1.0f - amount + amount * lr;
+  matrix.m[1] = amount * lg;
+  matrix.m[2] = amount * lb;
+  matrix.m[3] = amount * lr;
+  matrix.m[4] = 1.0f - amount + amount * lg;
+  matrix.m[5] = amount * lb;
+  matrix.m[6] = amount * lr;
+  matrix.m[7] = amount * lg;
+  matrix.m[8] = 1.0f - amount + amount * lb;
+  return matrix;
+}
+
+ColorMatrix sepia(float amount) {
+  const float base[9] = {0.393f, 0.769f, 0.189f, 0.349f, 0.686f,
+                         0.168f, 0.272f, 0.534f, 0.131f};
+  ColorMatrix matrix;
+  for (int i = 0; i < 9; i++) matrix.m[i] = (1.0f - amount) * (i % 4 == 0 ? 1.0f : 0.0f) +
+                                            amount * base[i];
+  return matrix;
+}
+
+ColorMatrix saturate(float amount) {
+  const float lr = 0.213f, lg = 0.715f, lb = 0.072f;
+  ColorMatrix matrix;
+  matrix.m[0] = lr + (1.0f - lr) * amount;
+  matrix.m[1] = lg - lg * amount;
+  matrix.m[2] = lb - lb * amount;
+  matrix.m[3] = lr - lr * amount;
+  matrix.m[4] = lg + (1.0f - lg) * amount;
+  matrix.m[5] = lb - lb * amount;
+  matrix.m[6] = lr - lr * amount;
+  matrix.m[7] = lg - lg * amount;
+  matrix.m[8] = lb + (1.0f - lb) * amount;
+  return matrix;
+}
+
+ColorMatrix hueRotate(float degrees) {
+  float radians = degrees * 3.14159265358979323846f / 180.0f;
+  float c = std::cos(radians);
+  float s = std::sin(radians);
+  ColorMatrix matrix;
+  matrix.m[0] = 0.213f + c * 0.787f - s * 0.213f;
+  matrix.m[1] = 0.715f - c * 0.715f - s * 0.715f;
+  matrix.m[2] = 0.072f - c * 0.072f + s * 0.928f;
+  matrix.m[3] = 0.213f - c * 0.213f + s * 0.143f;
+  matrix.m[4] = 0.715f + c * 0.285f + s * 0.140f;
+  matrix.m[5] = 0.072f - c * 0.072f - s * 0.283f;
+  matrix.m[6] = 0.213f - c * 0.213f - s * 0.787f;
+  matrix.m[7] = 0.715f - c * 0.715f + s * 0.715f;
+  matrix.m[8] = 0.072f + c * 0.928f + s * 0.072f;
+  return matrix;
+}
+
+/** Combine the filter list in application order: the first function applies to
+ * the backdrop first, so each new matrix multiplies the accumulated one on the
+ * left. Drop shadows are a silhouette effect that the colour matrix cannot
+ * express; they are ignored rather than misapplied. */
+void compileFilters(const std::vector<FilterOp> &filters, const XtStyle &style,
+                    float viewportWidth, float viewportHeight, ColorMatrix *matrix, float *blur,
+                    float *alpha) {
+  *matrix = identity();
+  *blur = 0.0f;
+  *alpha = 1.0f;
+  for (const FilterOp &filter : filters) {
+    switch (filter.kind) {
+      case FilterKind::Blur:
+        *blur += resolveLength(filter.blur, 0.0f, style.font_size, viewportWidth, viewportHeight);
+        break;
+      case FilterKind::Brightness:
+        *matrix = multiply(brightness(filter.amount), *matrix);
+        break;
+      case FilterKind::Contrast:
+        *matrix = multiply(contrast(filter.amount), *matrix);
+        break;
+      case FilterKind::Grayscale:
+        *matrix = multiply(grayscale(filter.amount), *matrix);
+        break;
+      case FilterKind::Sepia:
+        *matrix = multiply(sepia(filter.amount), *matrix);
+        break;
+      case FilterKind::Invert:
+        *matrix = multiply(invert(filter.amount), *matrix);
+        break;
+      case FilterKind::Saturate:
+        *matrix = multiply(saturate(filter.amount), *matrix);
+        break;
+      case FilterKind::HueRotate:
+        *matrix = multiply(hueRotate(filter.amount), *matrix);
+        break;
+      case FilterKind::Opacity:
+        *alpha *= filter.amount;
+        break;
+      case FilterKind::DropShadow:
+        break;
+    }
+  }
+}
+
+}  // namespace
+
+bool addBackdropFilter(DisplayList &out, const LayoutBox &box, const XtStyle &style,
+                       const PaintClip &clip, float viewportWidth, float viewportHeight) {
+  if (style.backdrop_filters.empty()) return false;
+  ColorMatrix matrix;
+  float blur = 0.0f;
+  float alpha = 1.0f;
+  compileFilters(style.backdrop_filters, style, viewportWidth, viewportHeight, &matrix, &blur,
+                 &alpha);
+  if (blur <= 0.0f && alpha >= 1.0f && matrix.m[0] == 1.0f && matrix.m[1] == 0.0f &&
+      matrix.m[2] == 0.0f && matrix.m[3] == 0.0f && matrix.m[4] == 1.0f &&
+      matrix.m[5] == 0.0f && matrix.m[6] == 0.0f && matrix.m[7] == 0.0f &&
+      matrix.m[8] == 1.0f) {
+    return false;
+  }
+  PaintBackdrop backdrop;
+  float x = box.x;
+  float y = box.y;
+  float width = box.width;
+  float height = box.height;
+  backdrop.radius = box.border_radius;
+  if (box.has_transform) {
+    LayoutRect bounds = xt_layout_transform_rect(box.world, x, y, width, height);
+    x = bounds.x;
+    y = bounds.y;
+    width = bounds.width;
+    height = bounds.height;
+  }
+  backdrop.x = x;
+  backdrop.y = y;
+  backdrop.width = width;
+  backdrop.height = height;
+  backdrop.blur = blur;
+  backdrop.alpha = alpha;
+  for (int i = 0; i < 9; i++) backdrop.color[i] = matrix.m[i];
+  for (int i = 0; i < 3; i++) backdrop.offset[i] = matrix.offset[i];
+  out.backdrops.push_back(backdrop);
+  out.ops.push_back(
+      PaintOp{PaintKind::Backdrop, (uint32_t)(out.backdrops.size() - 1), clip});
+  return true;
+}
+
+}  // namespace paint_detail
+}  // namespace xtgui

package/runtime/ext_gui/paint_background.cpp

@@ -2,19 +2,21 @@
  * xbintsc GUI engine — background layer painting.
  *
  * `background-color` is one rounded rectangle and a `background-image` layer is
- * a gradient or an image. A linear gradient is emitted as a run of solid bands
- * (18 strips, 64 while repeating). A radial gradient is emitted as a single
+ * a gradient or an image. Both gradient kinds are emitted as a single
  * `PaintGradient` that the renderer rasterises per pixel
- * (`renderer_gradient.cpp`): stacking translucent radial bands composites their
+ * (`renderer_gradient.cpp`). Stacking translucent bands instead composites their
  * alpha once per band, which turns a vignette whose stops fade to `transparent`
- * into an opaque disc.
+ * into an opaque disc, and a run of bands cannot draw a stop narrower than one
+ * band: a 1px divider line either falls between two samples or becomes a block.
  */
 
 #include "paint_internal.h"
 
 #include <algorithm>
 #include <cmath>
+#include <cstddef>
 #include <cstdio>
+#include <limits>
 #include <memory>
 #include <string>
 #include <vector>
@@ -69,23 +71,31 @@ Color gradientColorAt(const std::vector<GradientStop> &stops, bool repeating, fl
 namespace {
 
 /** Resolve the declaration's percentage/length offsets against the gradient
- * line, then distribute the omitted (`Unit::Auto`) ones between their
- * neighbours. The last explicit stop is preserved: for a normal gradient it
- * holds that colour, and for a repeating one it defines the period. */
+ * line, then distribute the omitted ones between their neighbours. The last
+ * explicit stop is preserved: for a normal gradient it holds that colour, and
+ * for a repeating one it defines the period. */
 std::vector<GradientStop> resolveStops(const BackgroundLayer &layer, float line_length,
                                        const XtStyle &style, float viewportWidth,
                                        float viewportHeight) {
   std::vector<GradientStop> stops;
+  stops.reserve(layer.stops.size());
   for (const BackgroundGradientStop &stop : layer.stops) {
     GradientStop resolved;
     resolved.color = stop.color;
-    resolved.offset = -1.0f;
+    /* NaN means "this stop has no offset"; a resolved offset may legitimately be
+     * negative (`red -10%`, or a `calc()` that lands below the line's start), so
+     * it must not double as the "unset" marker — that turned a negative offset
+     * into an implicit one and re-spaced the whole ramp. */
+    resolved.offset = std::numeric_limits<float>::quiet_NaN();
     if (stop.offset.unit == Unit::Percent) {
       resolved.offset = stop.offset.value / 100.0f;
     } else if (stop.offset.unit != Unit::Auto && stop.offset.unit != Unit::Invalid &&
                stop.offset.unit != Unit::None) {
-      float pixels = resolveLength(stop.offset, 0.0f, style.font_size, viewportWidth,
-                                   viewportHeight);
+      /* A percentage inside `calc()` is relative to the gradient line, exactly
+       * like a bare percentage; resolving it against a zero base made
+       * `calc(10% - 1px)` come out as `-1px`. */
+      float pixels =
+          resolveLength(stop.offset, line_length, style.font_size, viewportWidth, viewportHeight);
       resolved.offset = line_length > 0.00001f ? pixels / line_length : 0.0f;
     }
     stops.push_back(resolved);
@@ -93,24 +103,27 @@ std::vector<GradientStop> resolveStops(const BackgroundLayer &layer, float line_
   if (stops.empty()) return stops;
 
   /* Explicit offsets are non-decreasing, as in CSS. */
-  float last = -1.0f;
+  bool have_previous = false;
+  float previous = 0.0f;
   for (GradientStop &stop : stops) {
-    if (stop.offset < 0.0f) continue;
-    if (stop.offset < last) stop.offset = last;
-    last = stop.offset;
+    if (std::isnan(stop.offset)) continue;
+    if (have_previous && stop.offset < previous) stop.offset = previous;
+    previous = stop.offset;
+    have_previous = true;
   }
 
   /* Fill implicit offsets by distributing them between their neighbours. */
   size_t i = 0;
   while (i < stops.size()) {
-    if (stops[i].offset >= 0.0f) {
+    if (!std::isnan(stops[i].offset)) {
       i++;
       continue;
     }
     size_t j = i;
-    while (j < stops.size() && stops[j].offset < 0.0f) j++;
+    while (j < stops.size() && std::isnan(stops[j].offset)) j++;
     float before = (i == 0) ? 0.0f : stops[i - 1].offset;
     float after = (j >= stops.size()) ? 1.0f : stops[j].offset;
+    if (after < before) after = before;
     size_t count = j - i;
     for (size_t k = 0; k < count; k++) {
       float offset = 0.0f;
@@ -164,35 +177,108 @@ PaintClip boxClip(const PaintClip &clip, const LayoutBox &box) {
   return out;
 }
 
+/** Stable identity of a rasterised gradient: the ramp plus its geometry. The
+ * renderer keys its texture cache by this string, so an unchanged declaration
+ * rasterises once. */
+std::string gradientKey(const PaintGradient &gradient) {
+  char buffer[192];
+  std::string key;
+  for (const GradientStop &stop : gradient.stops) {
+    std::snprintf(buffer, sizeof(buffer), "%.4f/%.5f,%.5f,%.5f,%.5f;", stop.offset, stop.color.r,
+                  stop.color.g, stop.color.b, stop.color.a);
+    key += buffer;
+  }
+  std::snprintf(buffer, sizeof(buffer), "%d;%.3f,%.3f,%.3f,%.3f;%.3f,%.3f,%.4f,%.4f,%.3f;%d;%.5f",
+                gradient.kind == PaintGradient::Kind::Linear ? 1 : 0, gradient.center_x,
+                gradient.center_y, gradient.radius_x, gradient.radius_y, gradient.start_x,
+                gradient.start_y, gradient.dir_x, gradient.dir_y, gradient.length,
+                gradient.repeating ? 1 : 0, gradient.period);
+  key += buffer;
+  return key;
+}
+
+/** The CSS gradient line of `layer` inside `box`: the box-local point where the
+ * ramp starts, the direction increasing offsets run in, and the line's length.
+ * CSS angles grow clockwise from "to top" and y grows downwards, hence the
+ * negated cosine. The line passes through the box centre and its length is the
+ * box's extent projected onto the direction, so `t` spans exactly 0..1 across
+ * the box and `%` offsets in `calc()` resolve against it. */
+void linearLine(const LayoutBox &box, float angle, float *start_x, float *start_y, float *dir_x,
+                float *dir_y, float *length) {
+  const float radians = angle * 3.14159265358979f / 180.0f;
+  const float dx = std::sin(radians);
+  const float dy = -std::cos(radians);
+  const float span = std::fabs(box.width * dx) + std::fabs(box.height * dy);
+  *dir_x = dx;
+  *dir_y = dy;
+  *length = span;
+  *start_x = box.width * 0.5f - dx * span * 0.5f;
+  *start_y = box.height * 0.5f - dy * span * 0.5f;
+}
+
+/** Fold the colour half of the filter chain into `stops` and emit the layer as
+ * one gradient image. `brightness()` and `opacity()` stay out of the stops: the
+ * image tint carries them exactly, and leaving them out keeps the ramp — and
+ * therefore the texture cache key — stable while a fade animates. */
+void emitGradient(const LayoutBox &box, const FilterChain &chain, const PaintClip &clip,
+                  const std::shared_ptr<PaintGradient> &gradient,
+                  const std::vector<GradientStop> &stops, DisplayList &out) {
+  FilterChain stopChain = chain;
+  stopChain.opacity = 1.0f;
+  for (size_t i = stopChain.ops.size(); i-- > 0;) {
+    FilterKind kind = stopChain.ops[i].kind;
+    if (kind == FilterKind::Brightness || kind == FilterKind::Opacity) {
+      stopChain.ops.erase(stopChain.ops.begin() + (std::ptrdiff_t)i);
+    }
+  }
+  gradient->stops.reserve(stops.size());
+  bool visible = false;
+  for (const GradientStop &stop : stops) {
+    GradientStop resolved = stop;
+    resolved.color = filterColor(stopChain, resolved.color);
+    visible = visible || resolved.color.a > 0.0f;
+    gradient->stops.push_back(resolved);
+  }
+  if (!visible) return;
+  gradient->key = gradientKey(*gradient);
+
+  /* One quad for the whole layer: the renderer resolves the ramp per pixel, so
+   * the layer composites exactly once instead of once per translucent band, and
+   * a stop narrower than a band keeps its exact position and width. */
+  PaintImage image;
+  image.x = box.x;
+  image.y = box.y;
+  image.width = box.width;
+  image.height = box.height;
+  image.transform = box.world;
+  image.gradient = gradient;
+  addImage(out, std::move(image), clip, chain);
+}
+
 void paintLinear(const LayoutBox &box, const XtStyle &style, const BackgroundLayer &layer,
                  const FilterChain &chain, const PaintClip &clip, float viewportWidth,
                  float viewportHeight, DisplayList &out) {
   if (layer.stops.size() < 2 || box.width <= 0.0f || box.height <= 0.0f) return;
-  /* Repeating patterns need more samples than one gradient ramp: a 10%
-   * stripe is only two bands at the old 18-strip resolution. */
-  const int strips = layer.repeating ? 64 : 18;
-  bool horizontal = (layer.angle > 80.0f && layer.angle < 100.0f) ||
-                    (layer.angle > 260.0f && layer.angle < 280.0f);
-  bool reverse = (layer.angle > 260.0f && layer.angle < 280.0f) || layer.angle < 10.0f ||
-                 layer.angle > 350.0f;
-  const float line_length = horizontal ? box.width : box.height;
-  std::vector<GradientStop> stops = resolveStops(layer, line_length, style, viewportWidth,
-                                                 viewportHeight);
+  float start_x = 0.0f;
+  float start_y = 0.0f;
+  float dir_x = 1.0f;
+  float dir_y = 0.0f;
+  float length = 0.0f;
+  linearLine(box, layer.angle, &start_x, &start_y, &dir_x, &dir_y, &length);
+  if (length <= 0.00001f) return;
+  std::vector<GradientStop> stops =
+      resolveStops(layer, length, style, viewportWidth, viewportHeight);
   if (stops.size() < 2) return;
-  const float period = stops.back().offset;
-  for (int i = 0; i < strips; i++) {
-    float t = ((float)i + 0.5f) / (float)strips;
-    Color color = gradientColorAt(stops, layer.repeating, period, reverse ? 1.0f - t : t);
-    color = filterColor(chain, color);
-    if (color.a <= 0.0f) continue;
-    if (horizontal) {
-      addRect(out, box.x + box.width * (float)i / (float)strips, box.y,
-              box.width / (float)strips + 0.4f, box.height, 0.0f, color, clip, box.world);
-    } else {
-      addRect(out, box.x, box.y + box.height * (float)i / (float)strips, box.width,
-              box.height / (float)strips + 0.4f, 0.0f, color, clip, box.world);
-    }
-  }
+  auto gradient = std::make_shared<PaintGradient>();
+  gradient->kind = PaintGradient::Kind::Linear;
+  gradient->start_x = start_x;
+  gradient->start_y = start_y;
+  gradient->dir_x = dir_x;
+  gradient->dir_y = dir_y;
+  gradient->length = length;
+  gradient->repeating = layer.repeating;
+  gradient->period = stops.back().offset;
+  emitGradient(box, chain, clip, gradient, stops, out);
 }
 
 /** Radii of a keyword-sized ellipse: it keeps the box's aspect ratio and is
@@ -283,24 +369,6 @@ void radialRadii(const LayoutBox &box, const BackgroundLayer &layer, const XtSty
   *cy = centerY;
 }
 
-/** Stable identity of a rasterised gradient: the ramp plus its geometry. The
- * renderer keys its texture cache by this string, so an unchanged declaration
- * rasterises once. */
-std::string gradientKey(const PaintGradient &gradient) {
-  char buffer[192];
-  std::string key;
-  for (const GradientStop &stop : gradient.stops) {
-    std::snprintf(buffer, sizeof(buffer), "%.4f/%.5f,%.5f,%.5f,%.5f;", stop.offset, stop.color.r,
-                  stop.color.g, stop.color.b, stop.color.a);
-    key += buffer;
-  }
-  std::snprintf(buffer, sizeof(buffer), "%.3f,%.3f,%.3f,%.3f;%d;%.5f", gradient.center_x,
-                gradient.center_y, gradient.radius_x, gradient.radius_y,
-                gradient.repeating ? 1 : 0, gradient.period);
-  key += buffer;
-  return key;
-}
-
 void paintRadial(const LayoutBox &box, const XtStyle &style, const BackgroundLayer &layer,
                  const FilterChain &chain, const PaintClip &clip, float viewportWidth,
                  float viewportHeight, DisplayList &out) {
@@ -314,53 +382,63 @@ void paintRadial(const LayoutBox &box, const XtStyle &style, const BackgroundLay
   std::vector<GradientStop> stops = resolveStops(layer, std::max(rx, ry), style, viewportWidth,
                                                  viewportHeight);
   if (stops.size() < 2) return;
-  /* The colour functions fold into the stops (a per-stop application is exact
-   * for the linear ones); `brightness()` and `opacity()` stay out, because the
-   * image tint carries them exactly and leaving them out keeps the ramp — and
-   * therefore the texture cache key — stable while a fade animates. */
-  FilterChain stopChain = chain;
-  stopChain.opacity = 1.0f;
-  for (size_t i = stopChain.ops.size(); i-- > 0;) {
-    FilterKind kind = stopChain.ops[i].kind;
-    if (kind == FilterKind::Brightness || kind == FilterKind::Opacity) {
-      stopChain.ops.erase(stopChain.ops.begin() + (ptrdiff_t)i);
-    }
-  }
   auto gradient = std::make_shared<PaintGradient>();
-  gradient->stops.reserve(stops.size());
-  bool visible = false;
-  for (size_t i = 0; i < stops.size(); i++) {
-    GradientStop resolved = stops[i];
-    resolved.color = filterColor(stopChain, resolved.color);
-    visible = visible || resolved.color.a > 0.0f;
-    gradient->stops.push_back(resolved);
-  }
-  if (!visible) return;
+  gradient->kind = PaintGradient::Kind::Radial;
   gradient->center_x = cx - box.x;
   gradient->center_y = cy - box.y;
   gradient->radius_x = rx;
   gradient->radius_y = ry;
   gradient->repeating = layer.repeating;
   gradient->period = stops.back().offset;
-  gradient->key = gradientKey(*gradient);
-
-  /* One quad for the whole layer: the renderer resolves the ramp per pixel, so
-   * the layer composites exactly once instead of once per translucent band. */
-  PaintImage image;
-  image.x = box.x;
-  image.y = box.y;
-  image.width = box.width;
-  image.height = box.height;
-  image.transform = box.world;
-  image.gradient = gradient;
-  addImage(out, std::move(image), clip, chain);
+  emitGradient(box, chain, clip, gradient, stops, out);
 }
 
-void paintImage(const LayoutBox &box, const BackgroundLayer &layer, const FilterChain &chain,
-                const PaintClip &clip, DisplayList &out) {
+void paintImage(const LayoutBox &box, const BackgroundLayer &layer, const XtStyle &style,
+                size_t index, const FilterChain &chain, const PaintClip &clip, DisplayList &out,
+                float viewportWidth, float viewportHeight) {
   if (layer.image_src.empty() || box.width <= 0.0f || box.height <= 0.0f) return;
-  /* A `background-image: url(...)` layer fills the box. (CSS `background-size`
-   * is not modelled, so the intrinsic-size/tiling default becomes a stretch.) */
+  const BackgroundSize *size =
+      index < style.background_sizes.size() ? &style.background_sizes[index] : nullptr;
+  if (size != nullptr) {
+    bool width_auto = size->width.unit == Unit::Auto || size->width.unit == Unit::Invalid ||
+                      size->width.unit == Unit::None;
+    bool height_auto = size->height.unit == Unit::Auto || size->height.unit == Unit::Invalid ||
+                       size->height.unit == Unit::None;
+    float tile_width =
+        width_auto ? box.width
+                   : resolveLength(size->width, box.width, style.font_size, viewportWidth,
+                                   viewportHeight);
+    float tile_height =
+        height_auto ? box.height
+                    : resolveLength(size->height, box.height, style.font_size, viewportWidth,
+                                    viewportHeight);
+    if (tile_width > 0.0f && tile_height > 0.0f) {
+      /* The default `background-repeat` is `repeat`; the size is per layer. */
+      int columns = (int)std::ceil(box.width / tile_width);
+      int rows = (int)std::ceil(box.height / tile_height);
+      if (columns < 1) columns = 1;
+      if (rows < 1) rows = 1;
+      const int kMaxTiles = 4096;
+      if (columns * rows > kMaxTiles) {
+        columns = 1;
+        rows = 1;
+      }
+      for (int row = 0; row < rows; row++) {
+        for (int column = 0; column < columns; column++) {
+          PaintImage image;
+          image.x = box.x + (float)column * tile_width;
+          image.y = box.y + (float)row * tile_height;
+          image.width = tile_width;
+          image.height = tile_height;
+          image.src = layer.image_src;
+          image.transform = box.world;
+          addImage(out, image, clip, chain);
+        }
+      }
+      return;
+    }
+  }
+  /* No `background-size`: keep the historical stretch to the box. */
   PaintImage image;
   image.x = box.x;
   image.y = box.y;
@@ -382,7 +460,7 @@ void paintBackgrounds(DisplayList &out, const LayoutBox &box, const XtStyle &sty
     /* The rectangle is already the border box, so the incoming clip is enough;
      * narrowing it to the box again would only change the reported clip (and
      * would clip a filtered/rounded fill differently from before M19). */
-    addRectFiltered(out, box.x, box.y, box.width, box.height, style.border_radius,
+    addRectFiltered(out, box.x, box.y, box.width, box.height, box.border_radius,
                     style.background, clip, box.world, chain);
   }
   /* CSS paints the first layer on top, so walk the list backwards. */
@@ -393,7 +471,7 @@ void paintBackgrounds(DisplayList &out, const LayoutBox &box, const XtStyle &sty
     } else if (layer.kind == BackgroundKind::Radial) {
       paintRadial(box, style, layer, chain, layerClip, viewportWidth, viewportHeight, out);
     } else {
-      paintImage(box, layer, chain, layerClip, out);
+      paintImage(box, layer, style, i, chain, layerClip, out, viewportWidth, viewportHeight);
     }
   }
 }

package/runtime/ext_gui/paint_effects.cpp

@@ -228,6 +228,7 @@ void addRectFiltered(DisplayList &out, float x, float y, float width, float heig
 
 void addBoxDropShadows(DisplayList &out, const LayoutBox &box, const XtStyle &style,
                        const FilterChain &chain, const PaintClip &clip) {
+  (void)style;  // box.border_radius is the resolved form
   if (chain.shadows.empty()) return;
   for (const FilterChain::Shadow &shadow : chain.shadows) {
     Color color = filterColor(chain, shadow.color);
@@ -237,7 +238,7 @@ void addBoxDropShadows(DisplayList &out, const LayoutBox &box, const XtStyle &st
       Color copy = color;
       if (shadow.blur > 0.0f) copy.a *= kBlurTapWeight;
       addRect(out, box.x + shadow.dx + tap.dx, box.y + shadow.dy + tap.dy, box.width, box.height,
-              style.border_radius, copy, clip, box.world);
+              box.border_radius, copy, clip, box.world);
     }
   }
 }
@@ -274,7 +275,9 @@ void addTextRun(DisplayList &out, float x, float baseline, float width, float he
   }
 
   /* `text-shadow`, bottom-most first: CSS paints later layers under earlier
-   * ones, so reverse the declaration list. */
+   * ones, so reverse the declaration list. A zero-blur layer stays a crisp text
+   * run at an offset; a blurred one is a real Gaussian of the glyph coverage,
+   * composited as one tinted texture. */
   for (size_t index = style.text_shadow.size(); index-- > 0;) {
     const TextShadow &shadow = style.text_shadow[index];
     float dx = resolveLength(shadow.dx, 0.0f, style.font_size, viewportWidth, viewportHeight);
@@ -282,11 +285,14 @@ void addTextRun(DisplayList &out, float x, float baseline, float width, float he
     float blur =
         resolveLength(shadow.blur, 0.0f, style.font_size, viewportWidth, viewportHeight);
     Color shadowColor = shadow.has_color ? filterColor(chain, shadow.color) : color;
-    for (const Tap &tap : blurTaps(blur)) {
-      Color copy = shadowColor;
-      if (blur > 0.0f) copy.a *= kBlurTapWeight;
-      emit(dx + tap.dx, dy + tap.dy, copy, true);
+    if (blur <= 0.0f) {
+      emit(dx, dy, shadowColor, true);
+      continue;
     }
+    std::shared_ptr<const PaintBitmap> mask = textShadowMask(text, font, blur);
+    if (mask == nullptr) continue;
+    addBitmapImage(out, mask, x + dx + mask->origin_x, baseline + dy + mask->origin_y,
+                   shadowColor, transform, clip);
   }
 
   /* `filter: blur()` spreads the glyphs themselves. */

package/runtime/ext_gui/paint_internal.h

@@ -72,10 +72,37 @@ void paintBackgrounds(DisplayList &out, const LayoutBox &box, const XtStyle &sty
                       const FilterChain &chain, const PaintClip &clip, float viewportWidth,
                       float viewportHeight);
 
+/** Append the `outline` edge rectangles (after the border, before content). */
+void addOutline(DisplayList &out, const LayoutBox &box, const XtStyle &style,
+                const FilterChain &chain, const PaintClip &clip, float viewportWidth,
+                float viewportHeight);
+
 /** Append the drop-shadow silhouettes of a box (once, before its content). */
 void addBoxDropShadows(DisplayList &out, const LayoutBox &box, const XtStyle &style,
                        const FilterChain &chain, const PaintClip &clip);
 
+/** Append the `box-shadow` layers of a box. Outer shadows paint behind the
+ * background; inset shadows paint above it (call with `inset = true` for the
+ * latter). Declaration order is topmost first, so the list is reversed. */
+void addBoxShadows(DisplayList &out, const LayoutBox &box, const XtStyle &style,
+                   const FilterChain &chain, const PaintClip &clip, bool inset,
+                   float viewportWidth, float viewportHeight);
+
+/** Rasterise (or fetch from the bounded cache) the blurred glyph mask of a
+ * `text-shadow` layer. Returns null when the run has no visible glyphs. */
+std::shared_ptr<const PaintBitmap> textShadowMask(const std::string &text, const FontSpec &font,
+                                                  float blur);
+
+/** Append a bitmap-backed image op (a rasterised shadow) with `color` as its
+ * tint. The bitmap now owns its pixels; the renderer uploads it once. */
+void addBitmapImage(DisplayList &out, std::shared_ptr<const PaintBitmap> bitmap, float x, float y,
+                    const Color &color, const Matrix2D &transform, const PaintClip &clip);
+
+/** Resolve and append a `backdrop-filter` op for a box (before its
+ * background). Returns false when the filter list has no visible effect. */
+bool addBackdropFilter(DisplayList &out, const LayoutBox &box, const XtStyle &style,
+                       const PaintClip &clip, float viewportWidth, float viewportHeight);
+
 /** Resolve `clip-path` into a device-space triangulated polygon. */
 int addClipPathForBox(DisplayList &out, const LayoutBox &box, const XtStyle &style,
                       float viewportWidth, float viewportHeight);