xbintsc 0.5.41 → 0.5.42

package/runtime/ext_gui/image.cpp

@@ -64,13 +64,84 @@ std::string normalizePath(const std::string &input) {
   return out;
 }
 
-/** Decode a `data:` URL's base64 payload (the only encoding the engine emits
- * and the common one a page assigns). */
-bool decodeDataUrl(const std::string &url, std::vector<unsigned char> *out) {
-  const size_t comma = url.find(',');
-  if (comma == std::string::npos) return false;
-  const std::string header = url.substr(0, comma);
-  if (header.find(";base64") == std::string::npos) return false;
+/** One classified `data:` URL: whether its payload is SVG and the intrinsic
+ * size parsed from it (or from the raster header). Classification happens once
+ * per URL and is cached, so the renderer's vector probe does not decode the
+ * payload on every frame. */
+struct DataUrlEntry {
+  bool svg = false;
+  SizeEntry size;
+};
+
+std::unordered_map<std::string, DataUrlEntry> &dataUrlCache() {
+  static std::unordered_map<std::string, DataUrlEntry> cache;
+  return cache;
+}
+
+std::string lowercase(std::string value) {
+  for (char &c : value) c = (char)std::tolower((unsigned char)c);
+  return value;
+}
+
+std::string trim(const std::string &text) {
+  size_t start = 0;
+  while (start < text.size() && std::isspace((unsigned char)text[start])) start++;
+  size_t end = text.size();
+  while (end > start && std::isspace((unsigned char)text[end - 1])) end--;
+  return text.substr(start, end - start);
+}
+
+/** Decode `%XX` escapes. `+` stays a literal plus: a data URL uses URL
+ * percent-encoding, not form encoding. A malformed escape is left verbatim. */
+std::string percentDecode(const std::string &text) {
+  std::string out;
+  out.reserve(text.size());
+  for (size_t i = 0; i < text.size(); i++) {
+    if (text[i] == '%' && i + 2 < text.size() && std::isxdigit((unsigned char)text[i + 1]) &&
+        std::isxdigit((unsigned char)text[i + 2])) {
+      auto hex = [](char c) -> int {
+        if (c >= '0' && c <= '9') return c - '0';
+        return std::tolower((unsigned char)c) - 'a' + 10;
+      };
+      out.push_back((char)(hex(text[i + 1]) * 16 + hex(text[i + 2])));
+      i += 2;
+    } else {
+      out.push_back(text[i]);
+    }
+  }
+  return out;
+}
+
+/** True when one of the header's `;`-separated parameters is `base64`
+ * (case-insensitive, as the data-URL grammar specifies). */
+bool headerHasBase64(const std::string &header) {
+  size_t start = 0;
+  while (start <= header.size()) {
+    size_t end = header.find(';', start);
+    if (end == std::string::npos) end = header.size();
+    if (lowercase(trim(header.substr(start, end - start))) == "base64") return true;
+    if (end == header.size()) break;
+    start = end + 1;
+  }
+  return false;
+}
+
+/** The MIME type part of a data URL's header, lowercased. */
+std::string headerMime(const std::string &header) {
+  size_t semi = header.find(';');
+  return lowercase(trim(header.substr(0, semi)));
+}
+
+/** A cheap content sniff for a data URL whose MIME type is generic: look for
+ * `<svg` in the first chunk (after an XML declaration, doctype or comment). */
+bool bytesLookLikeSvg(const std::vector<unsigned char> &bytes) {
+  if (bytes.empty()) return false;
+  const size_t limit = bytes.size() < 1024 ? bytes.size() : 1024;
+  const std::string prefix(reinterpret_cast<const char *>(bytes.data()), limit);
+  return prefix.find("<svg") != std::string::npos;
+}
+
+bool base64Decode(const std::string &text, std::vector<unsigned char> *out) {
   static const signed char kDecode[128] = {
       -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
       -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,
@@ -81,12 +152,11 @@ bool decodeDataUrl(const std::string &url, std::vector<unsigned char> *out) {
       -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
       41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1};
   out->clear();
-  out->reserve((url.size() - comma) * 3 / 4 + 4);
+  out->reserve(text.size() * 3 / 4 + 4);
   uint32_t accumulator = 0;
   int bits = 0;
-  for (size_t i = comma + 1; i < url.size(); i++) {
-    const unsigned char c = (unsigned char)url[i];
-    if (c == '=' || c == '\n' || c == '\r' || c == ' ') continue;
+  for (unsigned char c : text) {
+    if (c == '=' || std::isspace(c)) continue;
     if (c >= 128) return false;
     const int value = kDecode[c];
     if (value < 0) return false;
@@ -100,33 +170,107 @@ bool decodeDataUrl(const std::string &url, std::vector<unsigned char> *out) {
   return !out->empty();
 }
 
+/** Decode a `data:` URL's payload. Both `;base64` and percent-encoded (or
+ * plain) bodies are accepted; in the base64 case the body is percent-decoded
+ * first, which is what a browser does. `mime` receives the lowercased header
+ * type (empty when the URL omits one). */
+bool decodeDataUrl(const std::string &url, std::vector<unsigned char> *out, std::string *mime) {
+  const size_t comma = url.find(',');
+  if (comma == std::string::npos || comma < 5) return false;
+  const std::string header = url.substr(5, comma - 5);
+  if (mime != nullptr) *mime = headerMime(header);
+  const std::string body = percentDecode(url.substr(comma + 1));
+  if (headerHasBase64(header)) return base64Decode(body, out);
+  out->assign(body.begin(), body.end());
+  return !out->empty();
+}
+
+/** Classify (`SVG` vs raster) and measure a `data:` URL once. */
+DataUrlEntry &dataUrlEntry(const std::string &url) {
+  auto &cache = dataUrlCache();
+  auto found = cache.find(url);
+  if (found != cache.end()) return found->second;
+
+  DataUrlEntry entry;
+  std::vector<unsigned char> bytes;
+  std::string mime;
+  if (decodeDataUrl(url, &bytes, &mime)) {
+    /* Trust an explicit raster MIME type; sniff only when the type is absent
+     * or generic, so a PNG that happens to contain `<svg` in a text chunk is
+     * not mistaken for vector art. */
+    const bool generic_mime =
+        mime.empty() || mime == "text/plain" || mime == "application/octet-stream";
+    entry.svg = mime == "image/svg+xml" || (generic_mime && bytesLookLikeSvg(bytes));
+    if (entry.svg) {
+      const std::string markup(bytes.begin(), bytes.end());
+      int width = 0;
+      int height = 0;
+      if (xt_svg_markup_size(markup, &width, &height)) {
+        entry.size.valid = true;
+        entry.size.width = width;
+        entry.size.height = height;
+      }
+    } else {
+      int width = 0;
+      int height = 0;
+      int channels = 0;
+      if (stbi_info_from_memory(bytes.data(), (int)bytes.size(), &width, &height, &channels) != 0) {
+        entry.size.valid = true;
+        entry.size.width = width;
+        entry.size.height = height;
+      }
+    }
+  }
+  return cache.emplace(url, std::move(entry)).first->second;
+}
+
 }  // namespace
 
 const Image *xt_image_load(const std::string &raw_path, int target_width, int target_height) {
   /* A `data:` URL carries its bytes inline (a canvas used as a CSS
    * `background-image` reaches this path through `toDataURL()`). */
   if (raw_path.rfind("data:", 0) == 0) {
+    const DataUrlEntry &info = dataUrlEntry(raw_path);
+    int width = target_width;
+    int height = target_height;
+    if (info.svg && width <= 0 && height <= 0 && info.size.valid) {
+      width = info.size.width;
+      height = info.size.height;
+    }
+    /* A vector source is rasterised at the drawn size, so that size is part of
+     * its cache identity. A raster data URL decodes once at its intrinsic
+     * resolution. */
+    std::string key = raw_path;
+    if (info.svg) {
+      key = "data-svg:" + std::to_string(width) + "x" + std::to_string(height) + ":" + raw_path;
+    }
     auto &cache = imageCache();
-    auto found = cache.find(raw_path);
+    auto found = cache.find(key);
     if (found != cache.end()) {
       return found->second.width > 0 ? &found->second : nullptr;
     }
     Image image;
     std::vector<unsigned char> bytes;
-    if (decodeDataUrl(raw_path, &bytes)) {
-      int width = 0;
-      int height = 0;
-      int channels = 0;
-      unsigned char *data = stbi_load_from_memory(bytes.data(), (int)bytes.size(), &width, &height,
-                                                  &channels, 4);
-      if (data != nullptr) {
-        image.width = width;
-        image.height = height;
-        image.pixels.assign(data, data + (size_t)width * (size_t)height * 4);
-        stbi_image_free(data);
+    std::string mime;
+    if (decodeDataUrl(raw_path, &bytes, &mime)) {
+      if (info.svg) {
+        const std::string markup(bytes.begin(), bytes.end());
+        xt_svg_markup_render(markup, width, height, &image);
+      } else {
+        int decoded_width = 0;
+        int decoded_height = 0;
+        int channels = 0;
+        unsigned char *data = stbi_load_from_memory(bytes.data(), (int)bytes.size(),
+                                                    &decoded_width, &decoded_height, &channels, 4);
+        if (data != nullptr) {
+          image.width = decoded_width;
+          image.height = decoded_height;
+          image.pixels.assign(data, data + (size_t)decoded_width * (size_t)decoded_height * 4);
+          stbi_image_free(data);
+        }
       }
     }
-    auto inserted = cache.emplace(raw_path, std::move(image));
+    auto inserted = cache.emplace(key, std::move(image));
     return inserted.first->second.width > 0 ? &inserted.first->second : nullptr;
   }
   std::string path = normalizePath(raw_path);
@@ -165,6 +309,13 @@ const Image *xt_image_load(const std::string &raw_path, int target_width, int ta
 
 bool xt_image_size(const std::string &raw_path, int *width, int *height) {
   if (raw_path.rfind("data:", 0) == 0) {
+    const DataUrlEntry &info = dataUrlEntry(raw_path);
+    if (info.size.valid) {
+      if (width != nullptr) *width = info.size.width;
+      if (height != nullptr) *height = info.size.height;
+      return true;
+    }
+    if (info.svg) return false;
     const Image *image = xt_image_load(raw_path);
     if (image == nullptr) return false;
     if (width != nullptr) *width = image->width;
@@ -202,11 +353,15 @@ bool xt_image_decode(const unsigned char *data, size_t size, Image *out) {
   return true;
 }
 
-bool xt_image_is_vector(const std::string &path) { return xt_svg_is_svg(normalizePath(path)); }
+bool xt_image_is_vector(const std::string &path) {
+  if (path.rfind("data:", 0) == 0) return dataUrlEntry(path).svg;
+  return xt_svg_is_svg(normalizePath(path));
+}
 
 void xt_image_shutdown() {
   imageCache().clear();
   sizeCache().clear();
+  dataUrlCache().clear();
   xt_svg_shutdown();
 }
 

package/runtime/ext_gui/image.h

@@ -23,9 +23,11 @@ struct Image {
   std::vector<unsigned char> pixels;
 };
 
-/** Decode an image file (PNG/JPEG/BMP/GIF/TGA or SVG) to RGBA8. Returns
- * nullptr on failure. Results (including failures) are cached by path. A
- * `file://` prefix and URL percent-encoding are handled.
+/** Decode an image source (PNG/JPEG/BMP/GIF/TGA or SVG, from a file path or a
+ * `data:` URL) to RGBA8. Returns nullptr on failure. Results (including
+ * failures) are cached. A `file://` prefix and URL percent-encoding are
+ * handled for paths; a `data:` URL accepts a `;base64` or percent-encoded
+ * payload and is classified by MIME type/content (SVG or raster).
  *
  * `target_width`/`target_height` are the pixel size the image will be drawn at.
  * Raster formats ignore them (they decode at their intrinsic resolution), but
@@ -40,7 +42,7 @@ const Image *xt_image_load(const std::string &path, int target_width = 0, int ta
  * viewBox). Returns false when the file cannot be read/parsed. Cached. */
 bool xt_image_size(const std::string &path, int *width, int *height);
 
-/** Decode an in-memory buffer to RGBA8 (e.g. a future `data:` URI). */
+/** Decode an in-memory raster buffer to RGBA8 (used by the app icon). */
 bool xt_image_decode(const unsigned char *data, size_t size, Image *out);
 
 /** True when `path` is a vector source (SVG) that is rasterised on demand

package/runtime/ext_gui/paint.cpp

@@ -9,6 +9,7 @@
 #include "paint.h"
 
 #include <algorithm>
+#include <cstddef>
 #include <cstdio>
 #include <utility>
 
@@ -56,6 +57,9 @@ int zIndexOf(const LayoutBox *box) {
 void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip,
               const paint_detail::FilterChain &parentChain, float viewportWidth,
               float viewportHeight);
+void paintBoxInner(const LayoutBox *box, DisplayList &out, const PaintClip &clip,
+                   const paint_detail::FilterChain &parentChain, float viewportWidth,
+                   float viewportHeight);
 
 /** The clip a box imposes on its content: its padding box, intersected with the
  * clip already in effect. Only `overflow: hidden/scroll/auto` clips. A
@@ -149,9 +153,9 @@ void addTextRuns(const LayoutBox *box, const XtStyle &style, DisplayList &out,
   }
 }
 
-void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip,
-              const paint_detail::FilterChain &parentChain, float viewportWidth,
-              float viewportHeight) {
+void paintBoxInner(const LayoutBox *box, DisplayList &out, const PaintClip &clip,
+                   const paint_detail::FilterChain &parentChain, float viewportWidth,
+                   float viewportHeight) {
   if (box == nullptr) return;
   const XtStyle *style = box->style;
 
@@ -166,6 +170,11 @@ void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip,
     chain = paint_detail::extendFilter(parentChain, style->filters, *style, viewportWidth,
                                        viewportHeight);
   }
+  /* `opacity` is not inherited, but its effect is: every shape painted by the
+   * box or its descendants gets its alpha multiplied by the product down the
+   * chain. This makes fractional opacity visible instead of treating anything
+   * above zero as fully opaque. */
+  if (style != nullptr && !box->is_text) chain.opacity *= style->opacity;
 
   PaintClip own = clip;
   if (style != nullptr && box->display != Display::None && !box->is_text) {
@@ -252,6 +261,32 @@ void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip,
   paintChildren(box, out, clipForChildren(box, own), childChain, viewportWidth, viewportHeight);
 }
 
+/** Paint one box, wrapping it in a `mix-blend-mode` group when it declares one.
+ * The group's ops are bounded by `LayerBegin`/`LayerEnd`, so the renderer can
+ * draw the subtree to an offscreen texture and blend it over the backdrop as
+ * one unit (overlapping children must not blend twice). */
+void paintBox(const LayoutBox *box, DisplayList &out, const PaintClip &clip,
+              const paint_detail::FilterChain &parentChain, float viewportWidth,
+              float viewportHeight) {
+  if (box == nullptr) return;
+  const XtStyle *style = box->style;
+  const bool group = style != nullptr && !box->is_text && box->display != Display::None &&
+                     style->mix_blend_mode != MixBlendMode::Normal;
+  if (!group) {
+    paintBoxInner(box, out, clip, parentChain, viewportWidth, viewportHeight);
+    return;
+  }
+  size_t first = out.ops.size();
+  paintBoxInner(box, out, clip, parentChain, viewportWidth, viewportHeight);
+  if (out.ops.size() == first) return;  /* nothing painted (e.g. opacity: 0) */
+  PaintLayer layer;
+  layer.blend = style->mix_blend_mode;
+  uint32_t index = (uint32_t)out.layers.size();
+  out.layers.push_back(layer);
+  out.ops.insert(out.ops.begin() + (ptrdiff_t)first, PaintOp{PaintKind::LayerBegin, index, clip});
+  out.ops.push_back(PaintOp{PaintKind::LayerEnd, 0, clip});
+}
+
 }  // namespace
 
 void xt_paint_build(const LayoutBox *root, DisplayList &out, float viewportWidth,
@@ -311,6 +346,21 @@ std::string DisplayList::dump() const {
       }
       prefix += " ";
     }
+    if (op.kind == PaintKind::LayerBegin) {
+      static const char *const names[] = {
+          "normal",     "multiply",    "screen",      "overlay",     "darken",
+          "lighten",    "color-dodge", "color-burn",  "hard-light",  "soft-light",
+          "difference", "exclusion",   "hue",         "saturation",  "color",
+          "luminosity"};
+      const char *name = "normal";
+      if (op.index < layers.size()) name = names[(int)layers[op.index].blend];
+      text += prefix + "layer blend=" + name + "\n";
+      continue;
+    }
+    if (op.kind == PaintKind::LayerEnd) {
+      text += prefix + "end-layer\n";
+      continue;
+    }
     std::string suffix;
     if (op.kind == PaintKind::Rect) {
       suffix = transformSuffix(rects[op.index].transform);

package/runtime/ext_gui/paint.h

@@ -102,7 +102,14 @@ struct PaintClip {
   int paths[2] = {-1, -1};
 };
 
-enum class PaintKind { Rect, Text, Image };
+enum class PaintKind { Rect, Text, Image, LayerBegin, LayerEnd };
+
+/** One `mix-blend-mode` compositing group. The ops between its `LayerBegin`
+ * and `LayerEnd` markers are rendered to an offscreen texture and composited
+ * over the backdrop as a group, so overlapping children blend once. */
+struct PaintLayer {
+  MixBlendMode blend = MixBlendMode::Normal;
+};
 
 /** One entry in painter order: which kind of shape, its index in the matching
  * payload vector, and the clip in effect. */
@@ -121,6 +128,8 @@ struct DisplayList {
   std::vector<PaintOp> ops;
   /** Device-space clip-path polygons shared by an element's ops. */
   std::vector<ClipPathGeometry> clip_paths;
+  /** `mix-blend-mode` groups referenced by `LayerBegin` ops. */
+  std::vector<PaintLayer> layers;
 
   void clear() {
     rects.clear();
@@ -128,6 +137,7 @@ struct DisplayList {
     images.clear();
     ops.clear();
     clip_paths.clear();
+    layers.clear();
   }
   bool empty() const { return rects.empty() && texts.empty() && images.empty(); }
   /** Human-readable dump, one shape per line, in painter order (diagnostics/tests). */

package/runtime/ext_gui/paint_background.cpp

@@ -3,7 +3,8 @@
  *
  * The renderer has one rounded-rectangle pipeline and no gradient shader, so a
  * gradient is emitted as a run of solid bands: 18 strips for a linear gradient
- * and 32 concentric ellipses for a radial one. Radial ellipses use the shape
+ * (64 while repeating) and 32 concentric ellipses for a radial one (64 while
+ * repeating). Radial ellipses use the shape
  * pipeline's transform slot (a unit circle scaled to the ellipse radii), which
  * keeps the distance-field antialiasing intact.
  */
@@ -19,9 +20,81 @@ namespace paint_detail {
 
 namespace {
 
-Color gradientColorAt(const BackgroundLayer &layer, float t) {
-  const std::vector<BackgroundGradientStop> &stops = layer.stops;
+struct ResolvedStop {
+  float offset = 0.0f;
+  Color color;
+};
+
+/** 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. */
+std::vector<ResolvedStop> resolveStops(const BackgroundLayer &layer, float line_length,
+                                       const XtStyle &style, float viewportWidth,
+                                       float viewportHeight) {
+  std::vector<ResolvedStop> stops;
+  for (const BackgroundGradientStop &stop : layer.stops) {
+    ResolvedStop resolved;
+    resolved.color = stop.color;
+    resolved.offset = -1.0f;
+    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);
+      resolved.offset = line_length > 0.00001f ? pixels / line_length : 0.0f;
+    }
+    stops.push_back(resolved);
+  }
+  if (stops.empty()) return stops;
+
+  /* Explicit offsets are non-decreasing, as in CSS. */
+  float last = -1.0f;
+  for (ResolvedStop &stop : stops) {
+    if (stop.offset < 0.0f) continue;
+    if (stop.offset < last) stop.offset = last;
+    last = stop.offset;
+  }
+
+  /* Fill implicit offsets by distributing them between their neighbours. */
+  size_t i = 0;
+  while (i < stops.size()) {
+    if (stops[i].offset >= 0.0f) {
+      i++;
+      continue;
+    }
+    size_t j = i;
+    while (j < stops.size() && stops[j].offset < 0.0f) j++;
+    float before = (i == 0) ? 0.0f : stops[i - 1].offset;
+    float after = (j >= stops.size()) ? 1.0f : stops[j].offset;
+    size_t count = j - i;
+    for (size_t k = 0; k < count; k++) {
+      float offset = 0.0f;
+      if (i == 0 && j >= stops.size()) {
+        offset = count > 1 ? (float)k / (float)(count - 1) : 0.0f;
+      } else if (i == 0) {
+        offset = after * (float)k / (float)count;
+      } else if (j >= stops.size()) {
+        offset = before + (1.0f - before) * (float)(k + 1) / (float)count;
+      } else {
+        offset = before + (after - before) * (float)(k + 1) / (float)(count + 1);
+      }
+      stops[i + k].offset = offset;
+    }
+    i = j;
+  }
+  return stops;
+}
+
+Color gradientColorAt(const std::vector<ResolvedStop> &stops, bool repeating, float t) {
   if (stops.empty()) return Color();
+  /* A repeating gradient restarts its stop pattern at the last stop's offset. */
+  if (repeating) {
+    float period = stops.back().offset;
+    if (period <= 0.00001f) return stops.back().color;
+    t -= std::floor(t / period) * period;
+  }
   if (t <= stops.front().offset) return stops.front().color;
   if (t >= stops.back().offset) return stops.back().color;
   for (size_t i = 1; i < stops.size(); i++) {
@@ -75,17 +148,23 @@ PaintClip boxClip(const PaintClip &clip, const LayoutBox &box) {
   return out;
 }
 
-void paintLinear(const LayoutBox &box, const BackgroundLayer &layer, const FilterChain &chain,
-                 const PaintClip &clip, DisplayList &out) {
+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;
-  const int strips = 18;
+  /* 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<ResolvedStop> stops = resolveStops(layer, line_length, style, viewportWidth,
+                                                 viewportHeight);
   for (int i = 0; i < strips; i++) {
     float t = ((float)i + 0.5f) / (float)strips;
-    Color color = gradientColorAt(layer, reverse ? 1.0f - t : t);
+    Color color = gradientColorAt(stops, layer.repeating, reverse ? 1.0f - t : t);
     color = filterColor(chain, color);
     if (color.a <= 0.0f) continue;
     if (horizontal) {
@@ -188,15 +267,17 @@ void paintRadial(const LayoutBox &box, const XtStyle &style, const BackgroundLay
   float ry = 0.0f;
   radialRadii(box, layer, style, viewportWidth, viewportHeight, &cx, &cy, &rx, &ry);
   if (rx <= 0.0f || ry <= 0.0f) return;
-  const int bands = 32;
+  std::vector<ResolvedStop> stops = resolveStops(layer, std::max(rx, ry), style, viewportWidth,
+                                                 viewportHeight);
+  const int bands = layer.repeating ? 64 : 32;
   for (int i = bands; i >= 1; i--) {
     float t = (float)i / (float)bands;
-    Color color = filterColor(chain, gradientColorAt(layer, t));
+    Color color = filterColor(chain, gradientColorAt(stops, layer.repeating, t));
     if (color.a <= 0.0f) continue;
     addEllipse(out, cx, cy, rx * t, ry * t, color, clip, box.world);
   }
   /* Exact centre colour (the innermost band samples just off zero). */
-  Color center = filterColor(chain, gradientColorAt(layer, 0.0f));
+  Color center = filterColor(chain, gradientColorAt(stops, layer.repeating, 0.0f));
   addEllipse(out, cx, cy, 0.6f, 0.6f, center, clip, box.world);
 }
 
@@ -233,7 +314,7 @@ void paintBackgrounds(DisplayList &out, const LayoutBox &box, const XtStyle &sty
   for (size_t i = style.background_layers.size(); i-- > 0;) {
     const BackgroundLayer &layer = style.background_layers[i];
     if (layer.kind == BackgroundKind::Linear) {
-      paintLinear(box, layer, chain, layerClip, out);
+      paintLinear(box, style, layer, chain, layerClip, viewportWidth, viewportHeight, out);
     } else if (layer.kind == BackgroundKind::Radial) {
       paintRadial(box, style, layer, chain, layerClip, viewportWidth, viewportHeight, out);
     } else {

package/runtime/ext_gui/paint_effects.cpp

@@ -169,6 +169,7 @@ Color filterColor(const FilterChain &chain, Color color) {
     color.b = clamp01(color.b);
     color.a = clamp01(color.a);
   }
+  color.a = clamp01(color.a * chain.opacity);
   return color;
 }
 
@@ -190,7 +191,7 @@ Color imageTint(const FilterChain &chain) {
   tint.r = clamp01(tint.r);
   tint.g = clamp01(tint.g);
   tint.b = clamp01(tint.b);
-  tint.a = clamp01(tint.a);
+  tint.a = clamp01(tint.a * chain.opacity);
   return tint;
 }
 

package/runtime/ext_gui/paint_internal.h

@@ -25,6 +25,10 @@ namespace paint_detail {
 struct FilterChain {
   std::vector<FilterOp> ops;  // colour functions (and any unknown no-ops)
   float blur = 0.0f;          // resolved px
+  /** Product of the CSS `opacity` values on the ancestor chain (including the
+   * element itself). It multiplies every painted colour's alpha, which is the
+   * per-shape approximation of group opacity. */
+  float opacity = 1.0f;
   struct Shadow {
     float dx = 0.0f;
     float dy = 0.0f;
@@ -33,7 +37,7 @@ struct FilterChain {
   };
   std::vector<Shadow> shadows;
 
-  bool empty() const { return ops.empty() && blur <= 0.0f && shadows.empty(); }
+  bool empty() const { return ops.empty() && blur <= 0.0f && shadows.empty() && opacity >= 1.0f; }
 };
 
 /** Append `filters` (declared on a box with `style`) to `parent`. */