From a551398a54d213ba87f88ff5c4cd193c8a684369 Mon Sep 17 00:00:00 2001
From: Patryk Kubiak <patryk.kubiak90@gmail.com>
Date: Mon, 5 Oct 2026 15:06:30 +0200
Subject: [PATCH] dmvs_html: what a car HMI page needs - listeners, inline SVG,
 images

From converting a second real page (a 480x272 car HMI in Tailwind):

Scripts
- addEventListener('click', ...) and el.onclick = ... set up while the
  page loads, with arrow / function expressions closing over their
  scope; querySelector() / querySelectorAll() (css_select), forEach()
  unrolled, getAttribute(), el.click() running an element's handlers,
  string concatenation.
- Several class changes of an element in one handler are one look of
  it (MOD_CLASSES "+a -b", a <id>_look variable for its looks).
- visibility: hidden fades as opacity 0.

Layout and style
- tailwind.config's theme.extend.fontFamily (Inter as font-sans).
- The static position of an absolutely positioned flex child follows
  justify-content / align-items.
- content: '' makes a ::before / ::after box (a nav indicator).

Images
- object-fit / object-position of <img>; background-image: url() under
  its gradients, background-size, background-position (also in the
  background shorthand); filter: blur() blurs the image - as
  dmvsi_image_t width / height / blur and DMVSI_IMAGE_* placement.
  Tailwind's bg-cover, bg-center, object-cover, ...
- Inline <svg>: a replaced element whose subtree is written into an
  SVG file of its box's size ($TMPDIR, <page>-svg<index>.svg), the
  viewBox and camelCase names kept, currentColor resolved; drawn as an
  image (dmimg_svg rasterizes it).

The dmodOS fixture converts to the same view as before.

Needs dmvsi with dmvsi_image_t width / height / blur.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CMakeLists.txt         |   1 +
 Makefile               |   2 +-
 README.md              |  24 +-
 src/css.c              |  43 +++
 src/dmvs_html.c        |  22 ++
 src/layout.c           |  35 +-
 src/paint.c            |  66 +++-
 src/private.h          |  20 ++
 src/script.c           | 739 +++++++++++++++++++++++++++++++++++------
 src/style.c            | 158 ++++++++-
 src/svg.c              | 255 ++++++++++++++
 src/tailwind.c         | 156 ++++++++-
 tests/dmvs_html_test.c | 132 ++++++++
 13 files changed, 1542 insertions(+), 111 deletions(-)
 create mode 100644 src/svg.c

diff --git a/CMakeLists.txt b/CMakeLists.txt
index 37802d3..6c47ad7 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -69,6 +69,7 @@ dmod_add_library(${DMOD_MODULE_NAME} ${DMOD_MODULE_VERSION}
     src/style.c
     src/layout.c
     src/paint.c
+    src/svg.c
     src/script.c
 )
 
diff --git a/Makefile b/Makefile
index d5f558a..519e4ca 100644
--- a/Makefile
+++ b/Makefile
@@ -24,7 +24,7 @@ DMOD_MODULE_VERSION=0.1
 DMOD_AUTHOR_NAME=Patryk Kubiak
 
 # The list of C sources
-DMOD_CSOURCES=src/dmvs_html.c src/html.c src/css.c src/tailwind.c src/style.c src/layout.c src/paint.c src/script.c
+DMOD_CSOURCES=src/dmvs_html.c src/html.c src/css.c src/tailwind.c src/style.c src/layout.c src/paint.c src/svg.c src/script.c
 
 # The list of C++ sources
 DMOD_CXXSOURCES=
diff --git a/README.md b/README.md
index 1079b19..3e9ac91 100644
--- a/README.md
+++ b/README.md
@@ -18,8 +18,9 @@ it works out at conversion and makes the view's variables and handlers.
 
 **HTML** - elements, attributes, text with character references, the end
 tags a page may leave out, `<style>`, `<link rel="stylesheet">`, `style=""`,
-`<img>`, `<br>`. `<script>` is not run; one that loads Tailwind's Play CDN
-(`cdn.tailwindcss.com`) turns Tailwind on.
+`<img>`, inline `<svg>`, `<br>`. `<script>` is not run; one that loads
+Tailwind's Play CDN (`cdn.tailwindcss.com`) turns Tailwind on, and its
+`tailwind.config` (`theme.extend.fontFamily`) is read.
 
 **CSS** - the cascade (origins, `!important`, specificity, order),
 inheritance, custom properties and `var()`, `calc()` / `min()` / `max()` /
@@ -44,6 +45,17 @@ fixed, `z-index` and stacking contexts, `overflow` (clipping, scrolling),
 `border` and `border-radius`, `opacity`, `box-shadow` (outer and inset),
 `filter: blur()` (e.g. a glow) and `drop-shadow()`, `visibility`.
 
+**Images** - `<img>` with `object-fit` (`cover`, `contain`, `fill` - its
+aspect kept -, `none`, `scale-down`) and `object-position`;
+`background-image: url()` (under its gradient layers) with
+`background-size` (`cover`, `contain`, `auto`) and `background-position`;
+`filter: blur()` blurs the image. Each size and blur an image is drawn at
+is converted once (todmvs: a section of the image's `.ini`). An inline
+`<svg>` is an image of its own: its subtree is written into an SVG file
+of its box's size - `$TMPDIR` (`/tmp`), `<page>-svg<index>.svg`, the
+`viewBox` and SVG's camelCase names kept, `currentColor` as its color -
+which dmod's dmimg_svg rasterizes.
+
 **Tailwind CSS** (v3, as its Play CDN generates it) - its preflight, the
 utilities of layout, flexbox, grid, spacing, sizing, typography,
 backgrounds and gradients, borders, effects, filters and transforms, the
@@ -79,6 +91,14 @@ function close() {
 }
 ```
 
+Handlers are also what the page sets up when it loads:
+`addEventListener('click', ...)` and `el.onclick = ...` with arrow and
+function expressions (closures over their scope), on elements of
+`getElementById()`, `querySelector()` / `querySelectorAll()` (a list's
+`forEach()` is unrolled), `getAttribute()`; `el.click()` runs the
+element's handlers. Several class changes of an element at once are one
+look of it.
+
 `this` in an `onclick` is its element. Every change is laid out - the page
 with that class or that style:
 
diff --git a/src/css.c b/src/css.c
index 80bc8dd..fa20c95 100644
--- a/src/css.c
+++ b/src/css.c
@@ -618,6 +618,49 @@ bool css_matches(const rule_t* rule, const node_t* n)
     return rule->count > 0 && matches_from(rule, (int)rule->count - 1, n);
 }
 
+static void select_under(const rule_t* rules, uint32_t count, node_t* n, node_t** out, uint32_t max, uint32_t* found, uint32_t depth)
+{
+    for (node_t* k = n->first; k != NULL && depth < 200U; k = k->next)
+    {
+        if (k->kind != NODE_ELEMENT || k->pseudo != PSEUDO_NONE)
+            continue;
+        bool match = false;
+        for (uint32_t i = 0; i < count && !match; i++)
+            match = rules[i].pseudo_element == PSEUDO_NONE && css_matches(&rules[i], k);
+        if (match && *found < max)
+            out[(*found)++] = k;
+        select_under(rules, count, k, out, max, found, depth + 1U);
+    }
+}
+
+/* What document.querySelectorAll(selector) gives: the elements under n it matches, in the
+ * document's order - up to max of them */
+uint32_t css_select(conv_t* c, const char* selector, node_t* n, node_t** out, uint32_t max)
+{
+    rule_t rules[8];
+    uint32_t count = 0;
+    const char* end = selector + strlen(selector);
+    const char* s = selector;
+    while (s < end && count < 8U)
+    {
+        const char* e = s;
+        int depth = 0;
+        while (e < end && !(*e == ',' && depth == 0))
+        {
+            depth += (*e == '(' || *e == '[') ? 1 : (*e == ')' || *e == ']') ? -1 : 0;
+            e++;
+        }
+        memset(&rules[count], 0, sizeof(rules[count]));
+        if (parse_selector(c, s, e, &rules[count]))
+            count++;
+        s = (e < end) ? e + 1 : end;
+    }
+    uint32_t found = 0;
+    if (count > 0)
+        select_under(rules, count, n, out, max, &found, 0);
+    return found;
+}
+
 /* ---- Rules ---- */
 
 uint16_t css_parse_decls(conv_t* c, const char* text, size_t length, decl_t** decls);
diff --git a/src/dmvs_html.c b/src/dmvs_html.c
index 3d78baa..af176a2 100644
--- a/src/dmvs_html.c
+++ b/src/dmvs_html.c
@@ -399,6 +399,8 @@ static void load_sheets(conv_t* c, node_t* n, uint32_t depth)
             const char* src = node_attr(k, "src");
             if (src != NULL && has_text(src, "tailwindcss"))
                 c->tailwind = true;
+            if (src == NULL && k->first != NULL && k->first->kind == NODE_TEXT)
+                tailwind_config(c, k->first->text, k->first->length);
             continue;
         }
         load_sheets(c, k, depth + 1U);
@@ -553,6 +555,26 @@ static void apply_mod(conv_t* c, const mod_t* m)
         }
         return;
     }
+    if (m->kind == MOD_CLASSES)
+    {
+        /* "+a -b": each one as its own */
+        for (const char* q = m->name; *q != '\0'; )
+        {
+            while (*q == ' ')
+                q++;
+            if (*q != '+' && *q != '-')
+                break;
+            bool add = *q++ == '+';
+            const char* e = q;
+            while (*e != '\0' && *e != ' ')
+                e++;
+            mod_t one = { m->element, add ? MOD_CLASS_ADD : MOD_CLASS_REMOVE, arena_strndup(&c->arena, q, (size_t)(e - q)), NULL };
+            if (one.name != NULL)
+                apply_mod(c, &one);
+            q = e;
+        }
+        return;
+    }
     /* A class added or removed */
     uint32_t at = n->class_count;
     for (uint32_t i = 0; i < n->class_count; i++)
diff --git a/src/layout.c b/src/layout.c
index 14707ab..3a53f58 100644
--- a/src/layout.c
+++ b/src/layout.c
@@ -489,8 +489,8 @@ static frag_t* add_frag(conv_t* c, node_t* block, uint8_t kind)
 
 static bool decorated(const style_t* st)
 {
-    return (st->background >> 24) != 0 || st->background_image != NULL || st->border_w[0] > 0 || st->border_w[1] > 0 ||
-           st->border_w[2] > 0 || st->border_w[3] > 0 || st->shadow_count > 0;
+    return (st->background >> 24) != 0 || st->background_image != NULL || st->background_url != NULL ||
+           st->border_w[0] > 0 || st->border_w[1] > 0 || st->border_w[2] > 0 || st->border_w[3] > 0 || st->shadow_count > 0;
 }
 
 /* One line of items [from, to) at y: placed, returns its height */
@@ -830,9 +830,11 @@ static int32_t clamp_height(const node_t* n, int32_t h, int32_t cb_h)
     return max32(h, e);
 }
 
-/* <img>: its size from its file (or its width / height attributes) */
+/* <img>: its size from its file (or its width / height attributes); <svg>: from its attributes */
 static bool replaced_size(conv_t* c, node_t* n, int32_t* w, int32_t* h)
 {
+    if (node_is(n, "svg"))
+        return svg_size(n, w, h);
     if (!node_is(n, "img"))
         return false;
     int32_t iw = 0, ih = 0;
@@ -1598,7 +1600,32 @@ static void layout_absolute(conv_t* c, node_t* n)
         h = clamp_height(n, h, cbh);
     layout_box(c, n, w, (h != AUTO_SIZE) ? h : -1, cbw, cbh);
 
-    /* Its static position, where the flow would have put it */
+    /* Its static position, where the flow would have put it - in a flex container, as
+     * its only item, aligned by justify-content and align-self (or align-items) */
+    node_t* fc = n->box.container;
+    if (fc != NULL && fc == n->parent && fc->style != NULL &&
+        (fc->style->display == DISPLAY_FLEX || fc->style->display == DISPLAY_INLINE_FLEX))
+    {
+        const style_t* fs = fc->style;
+        bool row = fs->flex_direction == FLEX_ROW || fs->flex_direction == FLEX_ROW_REVERSE;
+        bool reverse = fs->flex_direction == FLEX_ROW_REVERSE || fs->flex_direction == FLEX_COLUMN_REVERSE;
+        int32_t free_x = fc->box.w - fc->box.b[1] - fc->box.b[3] - fc->box.p[1] - fc->box.p[3] - n->box.w - mx;
+        int32_t free_y = fc->box.h - fc->box.b[0] - fc->box.b[2] - fc->box.p[0] - fc->box.p[2] - n->box.h - my;
+        uint8_t justify = fs->justify_content;
+        uint8_t cross = (st->align_self != ALIGN_AUTO) ? st->align_self : fs->align_items;
+        int32_t main_free = row ? free_x : free_y, cross_free = row ? free_y : free_x;
+        int32_t main_off = 0, cross_off = 0;
+        if (justify == ALIGN_CENTER || justify == ALIGN_AROUND || justify == ALIGN_EVENLY)
+            main_off = main_free / 2;
+        else if ((justify == ALIGN_END) != reverse)
+            main_off = main_free;
+        if (cross == ALIGN_CENTER)
+            cross_off = cross_free / 2;
+        else if (cross == ALIGN_END)
+            cross_off = cross_free;
+        n->box.x = fc->box.b[3] + fc->box.p[3] + (row ? main_off : cross_off);
+        n->box.y = fc->box.b[0] + fc->box.p[0] + (row ? cross_off : main_off);
+    }
     int32_t sx = n->box.x, sy = n->box.y;
     if (n->box.container != NULL)
     {
diff --git a/src/paint.c b/src/paint.c
index dc0e48c..374edd1 100644
--- a/src/paint.c
+++ b/src/paint.c
@@ -309,6 +309,48 @@ static bool gradient_paint(const gradient_t* g, int32_t w, int32_t h, dmvsi_pain
     return true;
 }
 
+/*
+ * An image file in r, sized as `fit` says - cover (and fill, its aspect kept),
+ * contain, scale-down, none (its own size) - placed at x, y (%) and clipped
+ * to r; blurred with the standard deviation `blur`
+ */
+static void image_in(painter_t* p, const char* path, dmvsi_rect_t r, uint8_t fit, int16_t x, int16_t y, int32_t blur)
+{
+    if (r.w <= 0 || r.h <= 0)
+        return;
+    dmvsi_image_t im;
+    memset(&im, 0, sizeof(im));
+    im.rect = r;
+    im.path = path;
+    im.blur = blur;
+    int32_t iw = 0, ih = 0;
+    if (fit != FIT_NONE && image_size(path, &iw, &ih) && iw > 0 && ih > 0)
+    {
+        bool wider = (int64_t)r.w * ih > (int64_t)r.h * iw;        /* The box is wider than the image */
+        int64_t w, h;
+        if ((fit == FIT_COVER || fit == FIT_FILL) == wider)
+        {
+            w = r.w;
+            h = (int64_t)r.w * ih / iw;
+        }
+        else
+        {
+            h = r.h;
+            w = (int64_t)r.h * iw / ih;
+        }
+        if (fit == FIT_SCALE_DOWN && w > (int64_t)iw * U)
+        {
+            w = (int64_t)iw * U;
+            h = (int64_t)ih * U;
+        }
+        im.width = (dmvsi_unit_t)w;
+        im.height = (dmvsi_unit_t)h;
+    }
+    im.flags = (uint8_t)(((x > 75) ? DMVSI_IMAGE_RIGHT : (x >= 25) ? DMVSI_IMAGE_CENTER : 0u) |
+                         ((y > 75) ? DMVSI_IMAGE_BOTTOM : (y >= 25) ? DMVSI_IMAGE_MIDDLE : 0u));
+    check(p, dmvsi_add_image(p->c->doc, &im));
+}
+
 static void fill(painter_t* p, dmvsi_rect_t r, int32_t radius, const dmvsi_paint_t* paint, const style_t* st)
 {
     if (r.w <= 0 || r.h <= 0)
@@ -384,6 +426,8 @@ static void paint_box(painter_t* p, const style_t* st, dmvsi_rect_t r, const int
         paint.color = st->background;
         fill(p, r, radius, &paint, st);
     }
+    if (st->background_url != NULL && st != p->canvas && !p->shadow)
+        image_in(p, st->background_url, r, st->background_size, st->background_x, st->background_y, st->blur);
     if (st->background_image != NULL && st != p->canvas && gradient_paint(st->background_image, r.w, r.h, &paint))
         fill(p, r, radius, &paint, st);
 
@@ -482,13 +526,27 @@ static void paint_image(painter_t* p, const node_t* n)
     char* path = (src != NULL) ? resolve_resource(p->c, p->c->path, src, strlen(src)) : NULL;
     if (path == NULL || p->shadow || n->style->hidden)
         return;
+    dmvsi_rect_t r = border_box(p, n);
+    dmvsi_rect_t b = inner(&r, n->box.b);
+    const style_t* st = n->style;
+    image_in(p, path, inner(&b, n->box.p), st->object_fit, st->object_x, st->object_y, st->blur);
+}
+
+/* An inline <svg>: its subtree as an SVG file of its content box's size */
+static void paint_svg(painter_t* p, const node_t* n)
+{
+    if (p->shadow || n->style->hidden)
+        return;
     dmvsi_image_t im;
     memset(&im, 0, sizeof(im));
     dmvsi_rect_t r = border_box(p, n);
     dmvsi_rect_t b = inner(&r, n->box.b);
     im.rect = inner(&b, n->box.p);
-    im.path = path;
-    check(p, dmvsi_add_image(p->c->doc, &im));
+    if (im.rect.w <= 0 || im.rect.h <= 0)
+        return;
+    im.path = svg_export(p->c, n, (im.rect.w + U - 1) / U, (im.rect.h + U - 1) / U);
+    if (im.path != NULL)
+        check(p, dmvsi_add_image(p->c->doc, &im));
 }
 
 /* ---- Stacking ---- */
@@ -561,6 +619,8 @@ static void paint_inner(painter_t* p, node_t* n, uint32_t depth)
         paint_decoration(p, st, r, n->box.b);       /* The root's is the canvas's (paint_page) */
     if (node_is(n, "img"))
         paint_image(p, n);
+    else if (node_is(n, "svg"))
+        paint_svg(p, n);
 
     bool clip = clips(st);
     if (clip)
@@ -680,6 +740,8 @@ static void paint_flow_element(painter_t* p, node_t* k, uint32_t depth)
         paint_box(p, k->style, border_box(p, k), k->box.b, !outer_done);
         if (node_is(k, "img"))
             paint_image(p, k);
+        else if (node_is(k, "svg"))
+            paint_svg(p, k);
         paint_lines(p, k);
     }
     paint_flow(p, k, depth + 1U);
diff --git a/src/private.h b/src/private.h
index c79a6ce..e86a29b 100644
--- a/src/private.h
+++ b/src/private.h
@@ -383,6 +383,11 @@ struct style
     uint32_t    color;
     uint32_t    background;
     gradient_t* background_image;
+    const char* background_url;                     /* background-image: url() - the file (its last layer that has one) */
+    uint8_t     background_size;                    /* FIT_* (FIT_NONE: auto) */
+    int16_t     background_x, background_y;         /* background-position, % */
+    uint8_t     object_fit;                         /* FIT_* */
+    int16_t     object_x, object_y;                 /* object-position, % */
 
     const char* font_family;
     int32_t     font_size;
@@ -451,6 +456,14 @@ struct rule_ref
 #define MOD_CLASS_REMOVE    1u
 #define MOD_STYLE           2u
 #define MOD_ACTIVE          3u                      /* Pressed: it and its ancestors are :active */
+#define MOD_CLASSES         4u                      /* Classes added and removed at once: name "+a -b" */
+
+/* object-fit, background-size */
+#define FIT_FILL            0u
+#define FIT_CONTAIN         1u
+#define FIT_COVER           2u
+#define FIT_NONE            3u                      /* background-size: auto */
+#define FIT_SCALE_DOWN      4u
 
 typedef struct
 {
@@ -475,6 +488,7 @@ typedef struct
     uint32_t                order;
     font_face_t*            faces;
     bool                    tailwind;               /* The page loads Tailwind CSS (its Play CDN) */
+    const char*             tw_fonts;               /* Its tailwind.config's fontFamily: "|sans=Inter, sans-serif|" */
     bool                    has_active;             /* A rule of :active (a pressed look) */
     int32_t                 vw, vh;                 /* The viewport, 1/64 px */
     int                     status;
@@ -497,9 +511,14 @@ node_t* html_parse(conv_t* c, const char* text, size_t length);
 const char* node_attr(const node_t* n, const char* name);
 bool    node_is(const node_t* n, const char* tag);
 
+/* Inline <svg> (svg.c): its intrinsic size; its subtree written into an SVG file of the box's size (px) */
+bool    svg_size(const node_t* n, int32_t* w, int32_t* h);
+char*   svg_export(conv_t* c, const node_t* n, int32_t width, int32_t height);
+
 /* css.c */
 void    css_parse(conv_t* c, const char* text, size_t length, const char* base, uint32_t layer);
 bool    css_matches(const rule_t* rule, const node_t* n);
+uint32_t css_select(conv_t* c, const char* selector, node_t* n, node_t** out, uint32_t max);
 uint32_t css_unescape(const char** p, const char* end);
 void    css_add_rule(conv_t* c, rule_t* rule);
 uint16_t css_parse_decls(conv_t* c, const char* text, size_t length, decl_t** decls);
@@ -511,6 +530,7 @@ const rule_ref_t* css_bucket(const conv_t* c, const char* prefix, const char* na
 
 /* tailwind.c */
 extern const char tailwind_preflight[];
+void    tailwind_config(conv_t* c, const char* text, size_t length);
 uint32_t tailwind_class(conv_t* c, const char* name, decl_t* decls, uint32_t max, uint32_t* rank, bool* active);
 
 /* style.c */
diff --git a/src/script.c b/src/script.c
index 8f62208..9ac4704 100644
--- a/src/script.c
+++ b/src/script.c
@@ -209,6 +209,8 @@ static bool accept(lexer_t* l, const char* text)
 #define J_AND       14u
 #define J_OR        15u
 #define J_UNDEFINED 16u
+#define J_FUNC      17u         /* (list) => b, a; function (list) { b } */
+#define J_ADD       18u         /* a + b */
 
 #define S_EXPR      32u
 #define S_VAR       33u         /* name = a */
@@ -246,7 +248,59 @@ static js_t* node(lexer_t* l, uint8_t kind)
 }
 
 static js_t* expression(lexer_t* l);
+static js_t* assignment(lexer_t* l);
 static js_t* statement(lexer_t* l);
+static js_t* block(lexer_t* l);
+static void skip_balanced(lexer_t* l);
+
+/* (a, b = 1, c): the parameters' names into *tail - at "(" */
+static void parameters(lexer_t* l, js_t** tail)
+{
+    if (!accept(l, "("))
+        return;
+    while (!is(l, ")") && l->tok.kind != T_END)
+    {
+        if (l->tok.kind == T_IDENT && tail != NULL)
+        {
+            js_t* p = node(l, J_IDENT);
+            if (p != NULL)
+            {
+                p->name = l->tok.s;
+                p->length = l->tok.n;
+                *tail = p;
+                tail = &p->next;
+            }
+        }
+        if (is(l, "[") || is(l, "{"))
+            skip_balanced(l);           /* ({ a }) => ...: not understood, passed as it is */
+        else
+            next(l);
+        if (is(l, "="))
+        {
+            next(l);
+            (void)assignment(l);        /* A default: not understood, the argument is passed */
+        }
+        (void)accept(l, ",");
+    }
+    (void)accept(l, ")");
+}
+
+/* An arrow function's body - after "=>": a block, or an expression */
+static void arrow_body(lexer_t* l, js_t* f)
+{
+    if (is(l, "{"))
+    {
+        js_t* b = block(l);
+        if (f != NULL)
+            f->b = b;
+    }
+    else
+    {
+        js_t* e = assignment(l);
+        if (f != NULL)
+            f->a = e;
+    }
+}
 
 /* Past a balanced (...), [...] or {...} starting at the current token */
 static void skip_balanced(lexer_t* l)
@@ -298,7 +352,20 @@ static js_t* primary(lexer_t* l)
                 return n;
             }
         }
-        if (is(l, "function") || is(l, "new") || is(l, "class") || is(l, "async") || is(l, "await"))
+        if (is(l, "function"))
+        {
+            /* function (a) { ... }: a function as a value */
+            n = node(l, J_FUNC);
+            next(l);
+            if (l->tok.kind == T_IDENT)
+                next(l);
+            parameters(l, (n != NULL) ? &n->list : NULL);
+            js_t* b = block(l);
+            if (n != NULL)
+                n->b = b;
+            return n;
+        }
+        if (is(l, "new") || is(l, "class") || is(l, "async") || is(l, "await"))
         {
             /* A function expression, an object made: not understood - past it */
             n = node(l, J_UNKNOWN);
@@ -320,14 +387,16 @@ static js_t* primary(lexer_t* l)
         next(l);
         if (is(l, "=>"))
         {
-            /* x => ...: an arrow function, not understood */
+            /* x => ...: an arrow function, x its parameter */
             next(l);
-            if (is(l, "{"))
-                skip_balanced(l);
-            else
-                (void)expression(l);
-            if (n != NULL)
-                n->kind = J_UNKNOWN;
+            js_t* f = node(l, J_FUNC);
+            if (f != NULL)
+            {
+                f->list = n;
+                f->source = (n != NULL) ? n->source : f->source;
+            }
+            arrow_body(l, f);
+            return f;
         }
         return n;
     }
@@ -339,12 +408,13 @@ static js_t* primary(lexer_t* l)
         skip_balanced(l);
         if (is(l, "=>"))
         {
-            next(l);
-            if (is(l, "{"))
-                skip_balanced(l);
-            else
-                (void)expression(l);
-            return node(l, J_UNKNOWN);
+            l->p = p;
+            l->tok = t;
+            js_t* f = node(l, J_FUNC);
+            parameters(l, (f != NULL) ? &f->list : NULL);
+            (void)accept(l, "=>");
+            arrow_body(l, f);
+            return f;
         }
         l->p = p;
         l->tok = t;
@@ -383,6 +453,7 @@ static js_t* postfix(lexer_t* l)
             if (m == NULL)
                 return n;
             m->a = n;
+            m->source = (n != NULL) ? n->source : m->source;
             if (l->tok.kind == T_IDENT)
             {
                 m->name = l->tok.s;
@@ -398,10 +469,11 @@ static js_t* postfix(lexer_t* l)
             if (call == NULL)
                 return n;
             call->a = n;
+            call->source = (n != NULL) ? n->source : call->source;
             js_t** tail = &call->list;
             while (!is(l, ")") && l->tok.kind != T_END)
             {
-                js_t* arg = expression(l);
+                js_t* arg = assignment(l);
                 if (arg != NULL)
                 {
                     *tail = arg;
@@ -477,18 +549,22 @@ static js_t* binary(lexer_t* l, int level)
             kind = J_AND;
         else if (is(l, "||"))
             kind = J_OR;
+        else if (is(l, "+"))
+            kind = J_ADD;
         next(l);
         js_t* right = binary(l, level + 1);
         js_t* b = node(l, kind);
         if (b == NULL)
             return left;
         b->a = left;
+        b->source = (left != NULL) ? left->source : b->source;
         b->b = right;
         left = b;
     }
 }
 
-static js_t* expression(lexer_t* l)
+/* An expression but a list of them (a, b): an argument, a variable's value */
+static js_t* assignment(lexer_t* l)
 {
     if (++l->depth > MAX_PARSE_DEPTH)
     {
@@ -500,9 +576,9 @@ static js_t* expression(lexer_t* l)
     if (accept(l, "?"))
     {
         /* a ? b : c - not understood */
-        (void)expression(l);
+        (void)assignment(l);
         (void)accept(l, ":");
-        (void)expression(l);
+        (void)assignment(l);
         left = node(l, J_UNKNOWN);
     }
     else if (is(l, "=") || is(l, "+=") || is(l, "-=") || is(l, "*=") || is(l, "/=") || is(l, "**="))
@@ -513,16 +589,23 @@ static js_t* expression(lexer_t* l)
         if (a != NULL)
         {
             a->a = left;
-            a->b = expression(l);
+            a->source = (left != NULL) ? left->source : a->source;
+            a->b = assignment(l);
         }
         left = a;
     }
-    while (accept(l, ","))
-        (void)expression(l);         /* a, b: only the first is kept */
     l->depth--;
     return left;
 }
 
+static js_t* expression(lexer_t* l)
+{
+    js_t* left = assignment(l);
+    while (accept(l, ","))
+        (void)assignment(l);         /* a, b: only the first is kept */
+    return left;
+}
+
 /* Past a statement not understood: up to its ';', or its block */
 static void skip_statement(lexer_t* l)
 {
@@ -587,32 +670,7 @@ static js_t* statement(lexer_t* l)
             s->length = l->tok.n;
             next(l);
         }
-        if (accept(l, "("))
-        {
-            js_t** tail = (s != NULL) ? &s->list : NULL;
-            while (!is(l, ")") && l->tok.kind != T_END)
-            {
-                if (l->tok.kind == T_IDENT && tail != NULL)
-                {
-                    js_t* p = node(l, J_IDENT);
-                    if (p != NULL)
-                    {
-                        p->name = l->tok.s;
-                        p->length = l->tok.n;
-                        *tail = p;
-                        tail = &p->next;
-                    }
-                }
-                next(l);
-                if (is(l, "="))
-                {
-                    next(l);
-                    (void)expression(l);    /* A default: not understood, the argument is passed */
-                }
-                (void)accept(l, ",");
-            }
-            (void)accept(l, ")");
-        }
+        parameters(l, (s != NULL) ? &s->list : NULL);
         if (s != NULL)
             s->b = block(l);
         else
@@ -631,7 +689,7 @@ static js_t* statement(lexer_t* l)
                 v->length = l->tok.n;
                 next(l);
                 if (accept(l, "="))
-                    v->a = expression(l);
+                    v->a = assignment(l);
                 *tail = v;
                 tail = &v->next;
             }
@@ -734,6 +792,9 @@ static js_t* parse(conv_t* c, const char* text, size_t length)
 #define V_FUNCTION  9u
 #define V_CLASSES   10u         /* x.classList */
 #define V_STYLE     11u         /* x.style */
+#define V_LIST      12u         /* document.querySelectorAll(...): elements known at conversion */
+
+typedef struct binding binding_t;
 
 typedef struct
 {
@@ -742,15 +803,19 @@ typedef struct
     uint32_t        runtime;    /* V_RUNTIME (1 ...); V_CLASSES, V_STYLE of one */
     const char*     text;
     int32_t         num;
-    const js_t*     function;
+    const js_t*     function;   /* V_FUNCTION: S_FUNC or J_FUNC */
+    binding_t*      closure;    /* ... the variables it sees (J_FUNC) */
+    uint32_t        closure_count;
+    node_t**        items;      /* V_LIST */
+    uint32_t        count;
 } val_t;
 
-typedef struct
+struct binding
 {
     const char*     name;
     size_t          length;
     val_t           value;
-} binding_t;
+};
 
 /* A global variable a handler assigns: the view's variable of the element it holds */
 typedef struct
@@ -776,6 +841,8 @@ typedef struct
     uint16_t        move_ms, fade_ms;
     int16_t         move_easing[4], fade_easing[4];
     node_t*         look;               /* changed: the element as it looks then (NULL: not shown) */
+    uint32_t        look_index;         /* MOD_CLASSES: its look of the element's lookvar (0: as it is) */
+    node_t*         reveals;            /* The element as it is then, shown - hidden as the page is */
 } change_t;
 
 /* A class of an element a script asks about (contains, toggle): its variable */
@@ -786,6 +853,40 @@ typedef struct
     dmvsi_var_t     var;
 } classvar_t;
 
+/* el.addEventListener('click', f) of the page as it loads: f, run when el is clicked */
+#define MAX_LISTENERS   32u
+
+typedef struct
+{
+    node_t*         element;
+    val_t           function;
+} listener_t;
+
+/* The classes a handler changes of an element, until what it does is known (a condition, its
+ * end): one change of them all - the look they make together */
+#define MAX_PENDING     16u
+#define MAX_PENDING_OPS 12u
+
+typedef struct
+{
+    node_t*         element;
+    uint32_t        count;
+    const char*     names[MAX_PENDING_OPS];
+    bool            add[MAX_PENDING_OPS];
+} pending_t;
+
+/* An element's looks of the classes changed at once (MOD_CLASSES): 0 as it is, 1 ... */
+typedef struct
+{
+    node_t*         element;
+    dmvsi_var_t     var;
+    node_t*         looks[MAX_VARIANTS - 1U];
+    uint32_t        digests[MAX_VARIANTS - 1U];
+    uint32_t        count;
+} lookvar_t;
+
+#define MAX_LOOKVARS    16u
+
 #define PASS_DOMAINS    0u      /* What the variables may hold */
 #define PASS_CHANGES    1u      /* Which changes there are */
 #define PASS_EMIT       2u      /* The actions */
@@ -812,6 +913,15 @@ typedef struct
     uint32_t        inline_depth;
     bool            returned;           /* A return reached: the rest of the function is not run */
     uint32_t        conditional;        /* Inside an IF of run time */
+    val_t           result;             /* What a return gave */
+    bool            loading;            /* The page's top level: what it does as it loads */
+    listener_t      listeners[MAX_LISTENERS];
+    uint32_t        listener_count;
+    pending_t       pending[MAX_PENDING];
+    uint32_t        pending_count;
+    lookvar_t       lookvars[MAX_LOOKVARS];
+    uint32_t        lookvar_count;
+    uint32_t        click_depth;
 } script_t;
 
 static bool same_name(const char* a, size_t an, const char* b, size_t bn)
@@ -935,7 +1045,15 @@ static void apply(script_t* sc, node_t* e, uint8_t kind, const char* name, const
     change_t* ch = change(sc, e, kind, name, value);
     if (sc->pass != PASS_EMIT || ch == NULL)
         return;
-    if (kind != MOD_STYLE)
+    if (kind == MOD_CLASSES)
+    {
+        for (uint32_t i = 0; i < sc->lookvar_count; i++)
+        {
+            if (sc->lookvars[i].element == e)
+                emit(sc, DMVSI_ACT_SET, sc->lookvars[i].var, (int32_t)ch->look_index);
+        }
+    }
+    else if (kind != MOD_STYLE)
     {
         classvar_t* cv = classvar(sc, e, name, false);
         if (cv != NULL)
@@ -954,20 +1072,108 @@ static void apply(script_t* sc, node_t* e, uint8_t kind, const char* name, const
         emit_to(sc, e->dynamic->bind[DMVSI_BIND_OPACITY], ch->opacity, ch->fade_ms, ch->fade_easing);
 }
 
+/* The classes changed of each element so far, as their changes */
+static void flush(script_t* sc)
+{
+    uint32_t count = sc->pending_count;
+    sc->pending_count = 0;
+    for (uint32_t i = 0; i < count; i++)
+    {
+        pending_t* p = &sc->pending[i];
+        if (p->count == 1)
+        {
+            apply(sc, p->element, p->add[0] ? MOD_CLASS_ADD : MOD_CLASS_REMOVE, p->names[0], NULL);
+            continue;
+        }
+        /* "+a -b ...", by the classes' names: the same changes, the same text */
+        char spec[512];
+        size_t n = 0;
+        bool used[MAX_PENDING_OPS] = { false };
+        for (uint32_t k = 0; k < p->count; k++)
+        {
+            uint32_t best = p->count;
+            for (uint32_t j = 0; j < p->count; j++)
+            {
+                if (!used[j] && (best == p->count || strcmp(p->names[j], p->names[best]) < 0))
+                    best = j;
+            }
+            used[best] = true;
+            n += (size_t)Dmod_SnPrintf(spec + n, sizeof(spec) - n, "%s%c%s", (n > 0) ? " " : "", p->add[best] ? '+' : '-', p->names[best]);
+            if (n >= sizeof(spec))
+                n = sizeof(spec) - 1U;
+        }
+        const char* name = arena_strndup(&sc->c->arena, spec, n);
+        if (name != NULL)
+            apply(sc, p->element, MOD_CLASSES, name, NULL);
+    }
+}
+
+/* A class added or removed, kept with the other classes changed of the element */
+static void class_op(script_t* sc, node_t* e, const char* name, bool add)
+{
+    pending_t* p = NULL;
+    for (uint32_t i = 0; i < sc->pending_count && p == NULL; i++)
+        p = (sc->pending[i].element == e) ? &sc->pending[i] : NULL;
+    if (p == NULL)
+    {
+        if (sc->pending_count >= MAX_PENDING)
+            flush(sc);
+        p = &sc->pending[sc->pending_count++];
+        p->element = e;
+        p->count = 0;
+    }
+    for (uint32_t i = 0; i < p->count; i++)
+    {
+        if (strcmp(p->names[i], name) == 0)
+        {
+            p->add[i] = add;            /* The last one holds */
+            return;
+        }
+    }
+    if (p->count < MAX_PENDING_OPS)
+    {
+        p->names[p->count] = name;
+        p->add[p->count++] = add;
+    }
+}
+
+/* What the handler does next depends on run time: what it changed so far first */
+static void flow(script_t* sc, uint8_t kind, dmvsi_var_t var, int32_t value)
+{
+    flush(sc);
+    if (kind == DMVSI_ACT_END)
+        emit_end(sc);
+    else
+        emit(sc, kind, var, value);
+}
+
+static void change_one(script_t* sc, node_t* e, uint8_t kind, const char* name, const char* value)
+{
+    if (kind == MOD_CLASS_ADD || kind == MOD_CLASS_REMOVE)
+        class_op(sc, e, name, kind == MOD_CLASS_ADD);
+    else
+    {
+        flush(sc);
+        apply(sc, e, kind, name, value);
+    }
+}
+
 /* A change of what a value is: one element, or each a variable may hold (at run time) */
 static void apply_to(script_t* sc, const val_t* target, uint8_t kind, const char* name, const char* value)
 {
+    if (sc->loading)
+        return;
     if (target->element != NULL)
     {
-        apply(sc, target->element, kind, name, value);
+        change_one(sc, target->element, kind, name, value);
         return;
     }
     runtime_t* rt = &sc->runtime[target->runtime - 1U];
     for (uint32_t i = 0; i < rt->domain_count; i++)
     {
-        emit(sc, DMVSI_ACT_IF_EQ, rt->var, (int32_t)rt->domain[i]->index);
-        apply(sc, rt->domain[i], kind, name, value);
-        emit_end(sc);
+        flow(sc, DMVSI_ACT_IF_EQ, rt->var, (int32_t)rt->domain[i]->index);
+        change_one(sc, rt->domain[i], kind, name, value);
+        flow(sc, DMVSI_ACT_END, 0, 0);
     }
 }
 
@@ -993,39 +1199,82 @@ static const char* text_of(script_t* sc, const val_t* v)
     return NULL;
 }
 
-/* f(args): a function of the page inlined, with its arguments' values */
-static val_t call_function(script_t* sc, const js_t* f, const js_t* args)
+/* f(args): a function of the page inlined, with its arguments' values (and, an arrow
+ * function, the variables it saw) */
+static val_t call_values(script_t* sc, const val_t* fn, const val_t* args, uint32_t count)
 {
-    if (sc->inline_depth >= MAX_INLINE)
+    const js_t* f = fn->function;
+    if (sc->inline_depth >= MAX_INLINE || f == NULL)
         return make(V_UNKNOWN);
     uint32_t saved_scope = sc->scope_count;
     bool saved_returned = sc->returned;
-    const js_t* a = args;
-    for (const js_t* p = f->list; p != NULL; p = p->next)
+    val_t saved_result = sc->result;
+    for (uint32_t i = 0; i < fn->closure_count && sc->scope_count < MAX_SCOPE; i++)
+        sc->scope[sc->scope_count++] = fn->closure[i];
+    uint32_t i = 0;
+    for (const js_t* p = f->list; p != NULL; p = p->next, i++)
     {
-        val_t v = (a != NULL) ? eval(sc, a) : make(V_UNDEFINED);
         if (sc->scope_count < MAX_SCOPE)
         {
             sc->scope[sc->scope_count].name = p->name;
             sc->scope[sc->scope_count].length = p->length;
-            sc->scope[sc->scope_count].value = v;
+            sc->scope[sc->scope_count].value = (i < count) ? args[i] : make(V_UNDEFINED);
             sc->scope_count++;
         }
-        a = (a != NULL) ? a->next : NULL;
     }
     sc->inline_depth++;
     sc->returned = false;
+    sc->result = make(V_UNDEFINED);
     uint32_t saved_conditional = sc->conditional;
     sc->conditional = 0;
-    if (f->b != NULL)
+    val_t result = make(V_UNDEFINED);
+    if (f->kind == J_FUNC && f->b == NULL)
+        result = eval(sc, f->a);        /* x => expression */
+    else if (f->b != NULL)
+    {
         run(sc, f->b);
+        result = sc->result;
+    }
     sc->conditional = saved_conditional;
     sc->inline_depth--;
     sc->returned = saved_returned;
+    sc->result = saved_result;
     sc->scope_count = saved_scope;
-    return make(V_UNDEFINED);
+    return result;
 }
 
+static val_t call_function(script_t* sc, const val_t* fn, const js_t* args)
+{
+    val_t values[8];
+    uint32_t n = 0;
+    for (const js_t* a = args; a != NULL; a = a->next)
+    {
+        val_t v = eval(sc, a);
+        if (n < 8U)
+            values[n++] = v;
+    }
+    return call_values(sc, fn, values, n);
+}
+
+/* A function as a value: an arrow function sees the variables where it is made */
+static val_t function_value(script_t* sc, const js_t* n)
+{
+    val_t v = make(V_FUNCTION);
+    v.function = n;
+    if (sc->scope_count > 0)
+    {
+        v.closure = arena_alloc(&sc->c->arena, sc->scope_count * sizeof(binding_t));
+        if (v.closure != NULL)
+        {
+            memcpy(v.closure, sc->scope, sc->scope_count * sizeof(binding_t));
+            v.closure_count = sc->scope_count;
+        }
+    }
+    return v;
+}
+
+static void run_click(script_t* sc, node_t* e);
+
 /* x.classList.add('a'), document.getElementById('a'), f(...) */
 static val_t call(script_t* sc, const js_t* n)
 {
@@ -1034,25 +1283,100 @@ static val_t call(script_t* sc, const js_t* n)
     if (f != NULL && f->kind == J_MEMBER)
     {
         val_t object = eval(sc, f->a);
-        if (object.kind == V_DOCUMENT && (is_name(f, "getElementById") || is_name(f, "querySelector")))
+        if (object.kind == V_DOCUMENT && is_name(f, "getElementById"))
         {
             val_t id = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
             if (id.kind != V_STRING)
-                return make(V_UNKNOWN);
-            const char* name = id.text;
-            if (is_name(f, "querySelector"))
             {
-                if (name[0] != '#')
-                    return make(V_UNKNOWN);
-                name++;
+                report(sc, n, "an element not known at conversion");
+                return make(V_UNKNOWN);
             }
-            node_t* e = find_id(sc->c->document, name, 0);
+            node_t* e = find_id(sc->c->document, id.text, 0);
             val_t v = make(e != NULL ? V_ELEMENT : V_NULL);
             v.element = e;
             return v;
         }
+        if ((object.kind == V_DOCUMENT || (object.kind == V_ELEMENT && object.element != NULL)) &&
+            (is_name(f, "querySelector") || is_name(f, "querySelectorAll")))
+        {
+            /* The elements of a selector: at conversion, as the page is */
+            val_t sel = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
+            if (sel.kind != V_STRING)
+            {
+                report(sc, n, "a selector not known at conversion");
+                return make(V_UNKNOWN);
+            }
+            node_t* found[MAX_DOMAIN];
+            node_t* under = (object.kind == V_ELEMENT) ? object.element : sc->c->document;
+            uint32_t count = css_select(sc->c, sel.text, under, found, MAX_DOMAIN);
+            if (is_name(f, "querySelector"))
+            {
+                val_t v = make(count > 0 ? V_ELEMENT : V_NULL);
+                v.element = (count > 0) ? found[0] : NULL;
+                return v;
+            }
+            val_t v = make(V_LIST);
+            v.items = (count > 0) ? arena_alloc(&sc->c->arena, count * sizeof(node_t*)) : NULL;
+            if (v.items != NULL)
+            {
+                memcpy(v.items, found, count * sizeof(node_t*));
+                v.count = count;
+            }
+            return v;
+        }
+        if (object.kind == V_LIST && is_name(f, "forEach"))
+        {
+            /* Each element in turn - unrolled */
+            val_t fn = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
+            if (fn.kind != V_FUNCTION)
+            {
+                report(sc, n, "forEach() of what is not a function");
+                return make(V_UNKNOWN);
+            }
+            for (uint32_t i = 0; i < object.count; i++)
+            {
+                val_t args[2] = { make(V_ELEMENT), make(V_NUMBER) };
+                args[0].element = object.items[i];
+                args[1].num = (int32_t)i * 1000;
+                (void)call_values(sc, &fn, args, 2);
+            }
+            return make(V_UNDEFINED);
+        }
+        if (object.kind == V_ELEMENT && object.element != NULL && is_name(f, "getAttribute"))
+        {
+            val_t name = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
+            const char* value = (name.kind == V_STRING) ? node_attr(object.element, name.text) : NULL;
+            if (name.kind != V_STRING)
+                return make(V_UNKNOWN);
+            val_t v = make(value != NULL ? V_STRING : V_NULL);
+            v.text = value;
+            return v;
+        }
+        if (object.kind == V_ELEMENT && object.element != NULL && is_name(f, "addEventListener"))
+        {
+            val_t type = (arg != NULL) ? eval(sc, arg) : make(V_UNKNOWN);
+            val_t fn = (arg != NULL && arg->next != NULL) ? eval(sc, arg->next) : make(V_UNKNOWN);
+            if (!sc->loading || type.kind != V_STRING || strcmp(type.text, "click") != 0 || fn.kind != V_FUNCTION)
+            {
+                report(sc, n, sc->loading ? "a listener of what is not a click" : "a listener added by a handler");
+                return make(V_UNKNOWN);
+            }
+            if (sc->listener_count < MAX_LISTENERS)
+                sc->listeners[sc->listener_count++] = (listener_t){ object.element, fn };
+            return make(V_UNDEFINED);
+        }
+        if (object.kind == V_ELEMENT && object.element != NULL && is_name(f, "click") && !sc->loading)
+        {
+            run_click(sc, object.element);   /* What clicking it does, here */
+            return make(V_UNDEFINED);
+        }
         if (object.kind == V_CLASSES && (is_name(f, "add") || is_name(f, "remove") || is_name(f, "toggle")))
         {
+            if (sc->loading)
+            {
+                report(sc, n, "what the page does when it loads");
+                return make(V_UNKNOWN);
+            }
             for (; arg != NULL; arg = arg->next)
             {
                 val_t cls = eval(sc, arg);
@@ -1072,6 +1396,7 @@ static val_t call(script_t* sc, const js_t* n)
                     report(sc, n, "classList.toggle() of a variable");
                     continue;
                 }
+                flush(sc);
                 classvar_t* cv = classvar(sc, object.element, cls.text, true);
                 (void)change(sc, object.element, MOD_CLASS_ADD, cls.text, NULL);
                 (void)change(sc, object.element, MOD_CLASS_REMOVE, cls.text, NULL);
@@ -1095,7 +1420,15 @@ static val_t call(script_t* sc, const js_t* n)
     {
         val_t* v = lookup(sc, f->name, f->length);
         if (v != NULL && v->kind == V_FUNCTION)
-            return call_function(sc, v->function, arg);
+        {
+            if (sc->loading)
+            {
+                report(sc, n, "what the page does when it loads");
+                return make(V_UNKNOWN);
+            }
+            val_t fn = *v;
+            return call_function(sc, &fn, arg);
+        }
     }
     report(sc, n, "a call");
     return make(V_UNKNOWN);
@@ -1155,6 +1488,30 @@ static val_t eval(script_t* sc, const js_t* n)
         }
         case J_CALL:
             return call(sc, n);
+        case J_FUNC:
+            return function_value(sc, n);
+        case J_ADD:
+        {
+            val_t a = eval(sc, n->a), b = eval(sc, n->b);
+            if (a.kind == V_NUMBER && b.kind == V_NUMBER)
+            {
+                a.num += b.num;
+                return a;
+            }
+            const char* ta = text_of(sc, &a);
+            const char* tb = text_of(sc, &b);
+            if ((a.kind != V_STRING && b.kind != V_STRING) || ta == NULL || tb == NULL)
+                return make(V_UNKNOWN);
+            size_t la = strlen(ta), lb = strlen(tb);
+            char* t = arena_alloc(&sc->c->arena, la + lb + 1U);
+            if (t == NULL)
+                return make(V_UNKNOWN);
+            memcpy(t, ta, la);
+            memcpy(t + la, tb, lb);
+            val_t v = make(V_STRING);
+            v.text = t;
+            return v;
+        }
         case J_ASSIGN:
         {
             const js_t* target = n->a;
@@ -1162,6 +1519,18 @@ static val_t eval(script_t* sc, const js_t* n)
             if (target != NULL && target->kind == J_MEMBER)
             {
                 val_t object = eval(sc, target->a);
+                if (object.kind == V_ELEMENT && object.element != NULL && is_name(target, "onclick") && sc->loading &&
+                    value.kind == V_FUNCTION)
+                {
+                    if (sc->listener_count < MAX_LISTENERS)
+                        sc->listeners[sc->listener_count++] = (listener_t){ object.element, value };
+                    return value;
+                }
+                if (object.kind == V_STYLE && sc->loading)
+                {
+                    report(sc, n, "what the page does when it loads");
+                    return make(V_UNKNOWN);
+                }
                 if (object.kind == V_STYLE)
                 {
                     const char* text = text_of(sc, &value);
@@ -1181,6 +1550,11 @@ static val_t eval(script_t* sc, const js_t* n)
             if (target != NULL && target->kind == J_IDENT)
             {
                 val_t* v = lookup(sc, target->name, target->length);
+                if (v != NULL && v->kind == V_RUNTIME && sc->loading)
+                {
+                    report(sc, n, "what the page does when it loads");
+                    return make(V_UNKNOWN);
+                }
                 if (v != NULL && v->kind == V_RUNTIME)
                 {
                     runtime_t* rt = &sc->runtime[v->runtime - 1U];
@@ -1359,15 +1733,20 @@ static void run(script_t* sc, const js_t* s)
                     run(sc, s->c);
                 return;
             }
+            if (sc->loading)
+            {
+                report(sc, s, "what the page does when it loads");
+                return;
+            }
             sc->conditional++;
-            emit(sc, c.equal ? DMVSI_ACT_IF_EQ : DMVSI_ACT_IF_NE, c.var, c.value);
+            flow(sc, c.equal ? DMVSI_ACT_IF_EQ : DMVSI_ACT_IF_NE, c.var, c.value);
             run(sc, s->b);
-            emit_end(sc);
+            flow(sc, DMVSI_ACT_END, 0, 0);
             if (s->c != NULL)
             {
-                emit(sc, c.equal ? DMVSI_ACT_IF_NE : DMVSI_ACT_IF_EQ, c.var, c.value);
+                flow(sc, c.equal ? DMVSI_ACT_IF_NE : DMVSI_ACT_IF_EQ, c.var, c.value);
                 run(sc, s->c);
-                emit_end(sc);
+                flow(sc, DMVSI_ACT_END, 0, 0);
             }
             sc->conditional--;
             sc->returned = false;
@@ -1377,7 +1756,10 @@ static void run(script_t* sc, const js_t* s)
             if (sc->conditional > 0)
                 report(sc, s, "a return in a condition of run time");
             else
+            {
+                sc->result = eval(sc, s->a);
                 sc->returned = true;
+            }
             return;
         case S_FUNC:
         case S_EMPTY:
@@ -1485,6 +1867,47 @@ static void declare_globals(script_t* sc, const scripts_t* scripts)
 
 /* ---- Handlers ---- */
 
+static bool listened(const script_t* sc, const node_t* e)
+{
+    for (uint32_t i = 0; i < sc->listener_count; i++)
+    {
+        if (sc->listeners[i].element == e)
+            return true;
+    }
+    return false;
+}
+
+/* What clicking e does: its onclick, then its listeners - `this` e */
+static void run_click(script_t* sc, node_t* e)
+{
+    if (sc->click_depth >= 4U)
+        return;
+    sc->click_depth++;
+    node_t* saved_self = sc->self;
+    uint32_t saved_scope = sc->scope_count;
+    bool saved_returned = sc->returned;
+    sc->self = e;
+    const char* onclick = node_attr(e, "onclick");
+    if (onclick != NULL)
+    {
+        js_t* program = parse(sc->c, onclick, strlen(onclick));
+        sc->returned = false;
+        run_list(sc, program);
+    }
+    for (uint32_t i = 0; i < sc->listener_count; i++)
+    {
+        if (sc->listeners[i].element != e)
+            continue;
+        val_t event = make(V_UNKNOWN);
+        sc->returned = false;
+        (void)call_values(sc, &sc->listeners[i].function, &event, 1);
+    }
+    sc->self = saved_self;
+    sc->scope_count = saved_scope;
+    sc->returned = saved_returned;
+    sc->click_depth--;
+}
+
 static void handlers(script_t* sc, node_t* n, uint32_t depth)
 {
     if (depth > 200U)
@@ -1493,18 +1916,18 @@ static void handlers(script_t* sc, node_t* n, uint32_t depth)
     {
         if (k->kind != NODE_ELEMENT || k->pseudo != PSEUDO_NONE)
             continue;
-        const char* onclick = node_attr(k, "onclick");
-        if (onclick != NULL && k->style != NULL && k->style->display != DISPLAY_NONE)
+        bool clicks = node_attr(k, "onclick") != NULL || listened(sc, k);
+        if (clicks && k->style != NULL && k->style->display != DISPLAY_NONE)
         {
-            js_t* program = parse(sc->c, onclick, strlen(onclick));
             if (sc->pass == PASS_CHANGES && sc->clickable_count < MAX_MODS)
                 sc->clickables[sc->clickable_count++] = k;
-            sc->self = k;
             sc->action_count = 0;
             sc->scope_count = 0;
             sc->returned = false;
             sc->conditional = 0;
-            run_list(sc, program);
+            sc->pending_count = 0;
+            run_click(sc, k);
+            flush(sc);
             if (sc->pass == PASS_EMIT && sc->action_count > 0)
             {
                 dmvsi_handler_t h = dmvsi_add_handler(sc->c->doc, sc->actions, sc->action_count);
@@ -1660,11 +2083,63 @@ static uint32_t look_of(const node_t* e)
         for (uint32_t i = 0; i < st->background_image->count; i++)
             h = mix(h, (int32_t)st->background_image->colors[i]);
     }
+    for (const char* u = st->background_url; u != NULL && *u != '\0'; u++)
+        h = mix(h, *u);
     for (const frag_t* f = e->box.frags; f != NULL; f = f->next)
         h = mix(h, f->x + f->y * 7 + (int32_t)f->length);
     return inside(e, e, h, 0);
 }
 
+/* How opaque an element is seen: not at all while it is hidden (visibility) */
+static int32_t seen_opacity(const style_t* st)
+{
+    return st->hidden ? 0 : st->opacity;
+}
+
+/* "+a -b": whether the element has all that already */
+static bool has_classes(const node_t* e, const char* spec)
+{
+    char name[128];
+    for (const char* q = spec; *q != '\0'; )
+    {
+        while (*q == ' ')
+            q++;
+        if (*q != '+' && *q != '-')
+            break;
+        bool add = *q++ == '+';
+        size_t n = 0;
+        while (q[n] != '\0' && q[n] != ' ')
+            n++;
+        size_t k = (n < sizeof(name) - 1U) ? n : sizeof(name) - 1U;
+        memcpy(name, q, k);
+        name[k] = '\0';
+        if (has_class(e, name) != add)
+            return false;
+        q += n;
+    }
+    return true;
+}
+
+/* An element a change shows that is hidden (visibility) as the page is: shown, its opacity
+ * what hides it - so that it can fade in. Its inside hidden as it is then */
+static void reveal(node_t* e, const node_t* f, uint32_t depth)
+{
+    if (e->style != NULL && f->style != NULL && e->kind == NODE_ELEMENT && depth == 0)
+        e->style->hidden = false;
+    const node_t* g = f->first;
+    for (node_t* k = e->first; k != NULL && g != NULL && depth < 200U; k = k->next, g = g->next)
+    {
+        if (k->kind != g->kind)
+            break;
+        if (k->kind == NODE_ELEMENT && k->style != NULL && g->style != NULL)
+        {
+            if (k->style->hidden && !g->style->hidden)
+                k->style->hidden = false;
+            reveal(k, g, depth + 1U);
+        }
+    }
+}
+
 /* What a change does to its element: laid out with it, against the page as it is - a move and
  * a fade (its variables), or another look (painted as it is then) */
 static int lay_out_change(script_t* sc, change_t* ch)
@@ -1672,10 +2147,11 @@ static int lay_out_change(script_t* sc, change_t* ch)
     conv_t* c = sc->c;
     node_t* e = ch->element;
     ch->laid_out = true;
-    ch->opacity = e->style->opacity;
+    ch->opacity = seen_opacity(e->style);
     const style_t* after = e->style;           /* The style it has then: its transition */
     if ((ch->mod.kind == MOD_CLASS_ADD && has_class(e, ch->mod.name)) ||
-        (ch->mod.kind == MOD_CLASS_REMOVE && !has_class(e, ch->mod.name)))
+        (ch->mod.kind == MOD_CLASS_REMOVE && !has_class(e, ch->mod.name)) ||
+        (ch->mod.kind == MOD_CLASSES && has_classes(e, ch->mod.name)))
         ch->same = true;
     else
     {
@@ -1698,7 +2174,9 @@ static int lay_out_change(script_t* sc, change_t* ch)
             view_origin(s, &sx, &sy);
             ch->dx = (f->box.ax - sx) - (e->box.ax - ox);
             ch->dy = (f->box.ay - sy) - (e->box.ay - oy);
-            ch->opacity = f->style->opacity;
+            ch->opacity = seen_opacity(f->style);
+            if (e->style->hidden && !f->style->hidden)
+                ch->reveals = f;
             if (look_of(f) != look_of(e) || !e->box.placed)
             {
                 ch->changed = true;             /* Another look */
@@ -1776,7 +2254,7 @@ static int bind_element(script_t* sc, node_t* e)
             continue;
         moves_x = moves_x || ch->dx != 0;
         moves_y = moves_y || ch->dy != 0;
-        fades = fades || ch->opacity != e->style->opacity;
+        fades = fades || ch->opacity != seen_opacity(e->style);
     }
     if (!moves_x && !moves_y && !fades)
         return 0;
@@ -1800,7 +2278,7 @@ static int bind_element(script_t* sc, node_t* e)
     if (fades)
     {
         Dmod_SnPrintf(name, sizeof(name), "%s_alpha", base);
-        e->dynamic->bind[DMVSI_BIND_OPACITY] = dmvsi_add_var(sc->c->doc, name, e->style->opacity);
+        e->dynamic->bind[DMVSI_BIND_OPACITY] = dmvsi_add_var(sc->c->doc, name, seen_opacity(e->style));
     }
     return 0;
 }
@@ -1817,18 +2295,28 @@ int script_compile(conv_t* c)
     sc->c = c;
     declare_globals(sc, &scripts);
 
-    /* The top level: what it does when the page loads is not converted */
+    /* The top level, as the page loads: the listeners it adds - what else it does is not converted */
+    sc->pass = PASS_EMIT;
+    sc->loading = true;
     for (uint32_t p = 0; p < scripts.count; p++)
     {
         for (const js_t* s = scripts.programs[p]; s != NULL; s = s->next)
         {
-            if (s->kind == S_EXPR || s->kind == S_UNKNOWN || s->kind == S_IF)
+            if (s->kind == S_EXPR && s->a != NULL && s->a->kind == J_ASSIGN && s->a->a != NULL &&
+                s->a->a->kind == J_MEMBER && s->a->a->a != NULL && is_name(s->a->a->a, "tailwind"))
+                continue;               /* tailwind.config = ...: read with the style sheets */
+            if (s->kind == S_EXPR || s->kind == S_IF)
             {
-                sc->pass = PASS_EMIT;
-                report(sc, s, "what the page does when it loads");
+                sc->scope_count = 0;
+                run(sc, s);
             }
+            else if (s->kind == S_UNKNOWN)
+                report(sc, s, "what the page does when it loads");
         }
     }
+    sc->loading = false;
+    sc->action_count = 0;
+    sc->scope_count = 0;
 
     int status = 0;
     sc->pass = PASS_DOMAINS;
@@ -1843,12 +2331,72 @@ int script_compile(conv_t* c)
         if (e->dynamic == NULL || (e->dynamic->bind[0] == 0 && e->dynamic->bind[1] == 0 && e->dynamic->bind[2] == 0))
             status = bind_element(sc, e);
     }
+    /* What fades in from hidden: shown, at its opacity's variable */
+    for (uint32_t i = 0; i < sc->change_count && status == 0; i++)
+    {
+        change_t* ch = &sc->changes[i];
+        node_t* e = ch->element;
+        if (ch->reveals != NULL && !ch->changed && e->dynamic != NULL && e->dynamic->bind[DMVSI_BIND_OPACITY] != 0)
+            reveal(e, ch->reveals, 0);
+    }
+
+    /* The looks of classes changed at once: each element's variable, a value per look */
+    for (uint32_t i = 0; i < sc->change_count && status == 0; i++)
+    {
+        change_t* ch = &sc->changes[i];
+        if (ch->mod.kind != MOD_CLASSES || !ch->changed || ch->look == NULL)
+            continue;
+        lookvar_t* lv = NULL;
+        for (uint32_t k = 0; k < sc->lookvar_count && lv == NULL; k++)
+            lv = (sc->lookvars[k].element == ch->element) ? &sc->lookvars[k] : NULL;
+        if (lv == NULL && sc->lookvar_count < MAX_LOOKVARS)
+        {
+            lv = &sc->lookvars[sc->lookvar_count++];
+            memset(lv, 0, sizeof(*lv));
+            lv->element = ch->element;
+        }
+        if (lv == NULL)
+            continue;
+        uint32_t digest = look_of(ch->look);
+        for (uint32_t k = 0; k < lv->count && ch->look_index == 0; k++)
+            ch->look_index = (lv->digests[k] == digest) ? k + 1U : 0U;
+        if (ch->look_index == 0 && lv->count < MAX_VARIANTS - 1U)
+        {
+            lv->looks[lv->count] = ch->look;
+            lv->digests[lv->count++] = digest;
+            ch->look_index = lv->count;
+        }
+        else if (ch->look_index == 0)
+            WARN(c, "script: too many looks of #%s - not converted\n", (ch->element->id != NULL) ? ch->element->id : ch->element->tag);
+    }
+    for (uint32_t i = 0; i < sc->lookvar_count && status == 0; i++)
+    {
+        lookvar_t* lv = &sc->lookvars[i];
+        node_t* e = lv->element;
+        char name[48];
+        Dmod_SnPrintf(name, sizeof(name), "%s_look", (e->id != NULL) ? e->id : e->tag);
+        if ((lv->var = dmvsi_add_var(c->doc, name, 0)) == 0 ||
+            (e->dynamic == NULL && (e->dynamic = arena_alloc(&c->arena, sizeof(dynamic_t))) == NULL))
+        {
+            status = -ENOMEM;
+            break;
+        }
+        variant_t looks[MAX_VARIANTS];
+        uint8_t n = 0;
+        looks[n++] = (variant_t){ e->box.placed ? e : NULL, lv->var, 0, -1 };
+        for (uint32_t k = 0; k < lv->count; k++)
+            looks[n++] = (variant_t){ lv->looks[k], lv->var, (int32_t)(k + 1U), -1 };
+        memcpy(e->dynamic->variants, looks, n * sizeof(variant_t));
+        e->dynamic->variant_count = n;
+    }
 
     /* Another look of a class: the class's variable, asked by the looks */
     sc->pass = PASS_CHANGES;
     for (uint32_t i = 0; i < sc->change_count; i++)
     {
         change_t* ch = &sc->changes[i];
+        if (ch->mod.kind == MOD_CLASSES)
+            continue;
         if (ch->changed && ch->mod.kind != MOD_STYLE)
             (void)classvar(sc, ch->element, ch->mod.name, true);
         else if (ch->changed)
@@ -1878,12 +2426,13 @@ int script_compile(conv_t* c)
     for (uint32_t i = 0; i < sc->change_count && status == 0; i++)
     {
         change_t* ch = &sc->changes[i];
-        bool first = ch->changed && ch->mod.kind != MOD_STYLE;
+        bool first = ch->changed && ch->mod.kind != MOD_STYLE && ch->mod.kind != MOD_CLASSES &&
+                     (ch->element->dynamic == NULL || ch->element->dynamic->variant_count == 0);
         for (uint32_t k = 0; k < i && first; k++)
             first = !(sc->changes[k].element == ch->element && sc->changes[k].changed && sc->changes[k].mod.kind != MOD_STYLE);
         if (first)
         {
-            bool pressable = c->has_active && node_attr(ch->element, "onclick") != NULL;
+            bool pressable = c->has_active && (node_attr(ch->element, "onclick") != NULL || listened(sc, ch->element));
             status = make_variants(sc, ch->element, ch, pressable);
         }
     }
diff --git a/src/style.c b/src/style.c
index b7039f8..ab22ffc 100644
--- a/src/style.c
+++ b/src/style.c
@@ -49,6 +49,7 @@ static const char g_user_agent[] =
     "text-align:center;font-size:13.333px;color:black}"
     "input,select,textarea{display:inline-block;font-size:13.333px}"
     "img,svg,video,canvas{display:inline-block}"
+    "svg *{display:none}"                                  /* Drawn as an image of the <svg> (svg.c) */
     "a{color:#0000ee}";
 
 /* ---- Lengths ---- */
@@ -1319,6 +1320,88 @@ bool style_transition(const style_t* st, uint8_t what, uint16_t* ms, int16_t* ea
     return false;
 }
 
+/* ---- Backgrounds and replaced content: url(), sizes, positions ---- */
+
+/* `what` in `s` (no strstr in a module's C library) */
+static const char* strstr_(const char* s, const char* what)
+{
+    size_t n = strlen(what);
+    for (; *s != '\0'; s++)
+        if (strncmp(s, what, n) == 0)
+            return s;
+    return NULL;
+}
+
+/* The file of the last url() of a value (a list of layers), NULL: none */
+static const char* parse_url(conv_t* c, const char* base, const char* v)
+{
+    const char* url = NULL;
+    size_t length = 0;
+    for (const char* p = v; (p = strstr_(p, "url(")) != NULL; p += 4)
+    {
+        const char* q = skip(p + 4);
+        char quote = (*q == '\'' || *q == '"') ? *q++ : '\0';
+        const char* e = q;
+        while (*e != '\0' && (quote != '\0' ? *e != quote : (*e != ')' && *e != ' ')))
+            e++;
+        url = q;
+        length = (size_t)(e - q);
+    }
+    if (url == NULL || length == 0)
+        return NULL;
+    char* path = resolve_resource(c, base, url, length);
+    if (path == NULL)
+        DMOD_LOG_WARN("dmvs_html: an image not mapped to a file - not drawn: %.*s\n", (int)((length < 120u) ? length : 120u), url);
+    return path;
+}
+
+static bool parse_fit(const char* v, uint8_t* fit)
+{
+    const char* s = skip(v);
+    if (word_is(s, "cover")) { *fit = FIT_COVER; return true; }
+    if (word_is(s, "contain")) { *fit = FIT_CONTAIN; return true; }
+    if (word_is(s, "fill")) { *fit = FIT_FILL; return true; }
+    if (word_is(s, "none") || word_is(s, "auto")) { *fit = FIT_NONE; return true; }
+    if (word_is(s, "scale-down")) { *fit = FIT_SCALE_DOWN; return true; }
+    return false;
+}
+
+/* background-position / object-position: keywords and percentages, in % */
+static void parse_position(const char* v, int16_t* x, int16_t* y)
+{
+    int16_t value[2] = { 50, 50 };
+    int axis_set[2] = { 0, 0 };
+    const char* s = skip(v);
+    for (int k = 0; k < 2 && *s != '\0' && *s != ',' && *s != '/'; k++)
+    {
+        int16_t pct = -1;
+        int axis = -1;
+        if (word_is(s, "left")) { pct = 0; axis = 0; s += 4; }
+        else if (word_is(s, "right")) { pct = 100; axis = 0; s += 5; }
+        else if (word_is(s, "top")) { pct = 0; axis = 1; s += 3; }
+        else if (word_is(s, "bottom")) { pct = 100; axis = 1; s += 6; }
+        else if (word_is(s, "center")) { pct = 50; s += 6; }
+        else if (*s >= '0' && *s <= '9')
+        {
+            int32_t n = 0;
+            while (*s >= '0' && *s <= '9')
+                n = n * 10 + (*s++ - '0');
+            while (*s != '\0' && *s != ' ' && *s != ',')
+                s++;
+            pct = (int16_t)((n > 100) ? 100 : n);
+        }
+        else
+            break;
+        if (axis < 0)
+            axis = axis_set[0] ? 1 : 0;
+        value[axis] = pct;
+        axis_set[axis] = 1;
+        s = skip(s);
+    }
+    *x = value[0];
+    *y = value[1];
+}
+
 /* ---- Applying a declaration ---- */
 
 typedef struct
@@ -1840,16 +1923,77 @@ static void apply(apply_t* a, const char* name, const char* v)
         return;
     }
     if (strcmp(name, "background-color") == 0) { const char* q = v; (void)parse_color(&q, st->color, &st->background); return; }
-    if (strcmp(name, "background-image") == 0) { st->background_image = parse_gradient(a->c, v, &a->u, st->color); return; }
+    if (strcmp(name, "background-image") == 0)
+    {
+        st->background_image = parse_gradient(a->c, v, &a->u, st->color);
+        st->background_url = parse_url(a->c, a->base, v);
+        return;
+    }
+    if (strcmp(name, "background-size") == 0) { if (!parse_fit(v, &st->background_size)) st->background_size = FIT_NONE; return; }
+    if (strcmp(name, "background-position") == 0) { parse_position(v, &st->background_x, &st->background_y); return; }
+    if (strcmp(name, "object-fit") == 0) { (void)parse_fit(v, &st->object_fit); return; }
+    if (strcmp(name, "object-position") == 0) { parse_position(v, &st->object_x, &st->object_y); return; }
     if (strcmp(name, "background") == 0)
     {
         st->background = 0;
         st->background_image = NULL;
+        st->background_url = NULL;
+        st->background_size = FIT_NONE;
+        st->background_x = st->background_y = 0;
         const char* q = s;
         if (word_is(s, "none"))
             return;
         st->background_image = parse_gradient(a->c, v, &a->u, st->color);
-        if (st->background_image != NULL)
+        st->background_url = parse_url(a->c, a->base, v);
+        const char* slash = strchr(v, '/');
+        while (slash != NULL && slash > v && slash[-1] != ' ' && slash[1] != ' ')
+            slash = strchr(slash + 1, '/');             /* "/ cover", not a URL's */
+        if (slash != NULL)
+            (void)parse_fit(slash + 1, &st->background_size);
+        if (st->background_url != NULL)
+        {
+            /* The position: its words before the size's '/', outside url() and gradients */
+            char words[64];
+            size_t k = 0;
+            int depth = 0;
+            for (const char* p = v; *p != '\0' && p != slash; p++)
+            {
+                if (*p == '(')
+                    depth++;
+                else if (*p == ')')
+                    depth--;
+                if (depth > 0 || *p == ')')
+                    continue;
+                bool start = p == v || p[-1] == ' ';
+                bool word = start && (word_is(p, "left") || word_is(p, "right") || word_is(p, "top") || word_is(p, "bottom") ||
+                            word_is(p, "center"));
+                const char* e = p;
+                if (word)
+                    while (*e >= 'a' && *e <= 'z')
+                        e++;
+                else if (start && *p >= '0' && *p <= '9')
+                {
+                    while (*e >= '0' && *e <= '9')
+                        e++;
+                    if (*e != '%')
+                        continue;
+                    e++;
+                }
+                else
+                    continue;
+                if (k + (size_t)(e - p) + 2U < sizeof(words))
+                {
+                    memcpy(words + k, p, (size_t)(e - p));
+                    k += (size_t)(e - p);
+                    words[k++] = ' ';
+                }
+                p = e - 1;
+            }
+            words[k] = '\0';
+            if (k > 0)
+                parse_position(words, &st->background_x, &st->background_y);
+        }
+        if (st->background_image != NULL || st->background_url != NULL)
             return;
         /* A color, wherever it is among the other values */
         const char* parts[6];
@@ -2202,6 +2346,9 @@ static void initial(style_t* st, const style_t* pa, int32_t vw)
     st->column_span = st->row_span = 1;
     st->opacity = 255;
     st->translate_x = st->translate_y = len_px(0);
+    st->background_size = FIT_NONE;
+    st->object_fit = FIT_FILL;
+    st->object_x = st->object_y = 50;
     if (pa != NULL)
     {
         st->color = pa->color;
@@ -2362,13 +2509,14 @@ static void add_text_child(conv_t* c, node_t* parent, const char* text, size_t l
 static void pseudo_element(conv_t* c, node_t* n, uint8_t pseudo)
 {
     style_t* st = compute(c, n, pseudo, n->style);
-    if (st == NULL || !st->has_content || st->display == DISPLAY_NONE || st->content_length == 0)
-        return;
+    if (st == NULL || !st->has_content || st->display == DISPLAY_NONE)
+        return;                         /* content: '' still makes a box - a bar, a dot */
     node_t* p = new_child(c, n, (pseudo == PSEUDO_BEFORE) ? n->first : NULL, pseudo);
     if (p == NULL)
         return;
     p->style = st;
-    add_text_child(c, p, st->content, st->content_length);
+    if (st->content_length > 0)
+        add_text_child(c, p, st->content, st->content_length);
 }
 
 static bool all_space(const node_t* t)
diff --git a/src/svg.c b/src/svg.c
new file mode 100644
index 0000000..09ff5f1
--- /dev/null
+++ b/src/svg.c
@@ -0,0 +1,255 @@
+#include "private.h"
+#include <string.h>
+
+/*
+ * Inline <svg>: a replaced element, drawn as an image. Its subtree is
+ * written into an SVG file of its own - sized as its box, the viewBox kept -
+ * which the view shows as an image (dmod's dmimg_svg rasterizes it when the
+ * view's images are converted). The file is in $TMPDIR (/tmp), named after
+ * the page and the element: <page>-svg<index>.svg.
+ *
+ * HTML's parser lowercases names; SVG's camelCase ones are restored. A
+ * value of currentColor becomes the <svg>'s color.
+ */
+
+#define DEFAULT_W       300                     /* An <svg> of no size: CSS's default replaced size */
+#define DEFAULT_H       150
+#define MAX_PATH        512u
+
+/* Text, not pointers: a module's data is not relocated (only its GOT is) */
+static const char g_names[] =
+    "|linearGradient|radialGradient|clipPath|textPath|foreignObject|viewBox|preserveAspectRatio"
+    "|gradientUnits|gradientTransform|spreadMethod|patternUnits|patternContentUnits|patternTransform"
+    "|clipPathUnits|maskUnits|maskContentUnits|pathLength|textLength|lengthAdjust|refX|refY"
+    "|markerWidth|markerHeight|markerUnits|stdDeviation|xlink:href|";
+
+typedef struct
+{
+    void*   file;
+    bool    failed;
+    char    color[8];                           /* #rrggbb of currentColor */
+} writer_t;
+
+/* A number at *s (after spaces and commas), in 1/1000; *s moves past it */
+static bool scan(const char** s, int64_t* milli)
+{
+    const char* p = *s;
+    while (*p == ' ' || *p == ',' || *p == '\t' || *p == '\n')
+        p++;
+    bool negative = *p == '-';
+    if (*p == '-' || *p == '+')
+        p++;
+    int64_t v = 0, scale = 1000;
+    bool digits = false;
+    for (; *p >= '0' && *p <= '9'; p++, digits = true)
+        v = v * 10 + (*p - '0') * 1000;
+    if (*p == '.')
+        for (p++; *p >= '0' && *p <= '9'; p++, digits = true)
+            if (scale > 1)
+                v += (*p - '0') * (scale /= 10);
+    if (!digits)
+        return false;
+    *milli = negative ? -v : v;
+    *s = p;
+    return true;
+}
+
+/* A length attribute: a number in px or of no unit, in 1/1000 px; false: none (or %, em, ...) */
+static bool number(const char* s, int64_t* milli)
+{
+    if (s == NULL || !scan(&s, milli))
+        return false;
+    if (strncmp(s, "px", 2) == 0)
+        s += 2;
+    while (*s == ' ')
+        s++;
+    return *s == '\0' && *milli > 0;
+}
+
+/* The viewBox's width and height in 1/1000 px */
+static bool view_box(const node_t* n, int64_t* w, int64_t* h)
+{
+    const char* s = node_attr(n, "viewbox");
+    int64_t v[4];
+    for (int i = 0; i < 4; i++)
+        if (s == NULL || !scan(&s, &v[i]))
+            return false;
+    if (v[2] <= 0 || v[3] <= 0)
+        return false;
+    *w = v[2];
+    *h = v[3];
+    return true;
+}
+
+bool svg_size(const node_t* n, int32_t* w, int32_t* h)
+{
+    int64_t aw, ah, vw, vh;
+    bool has_w = number(node_attr(n, "width"), &aw), has_h = number(node_attr(n, "height"), &ah);
+    bool has_box = view_box(n, &vw, &vh);
+    if (has_w && !has_h)
+        ah = has_box ? aw * vh / vw : DEFAULT_H * 1000;
+    if (has_h && !has_w)
+        aw = has_box ? ah * vw / vh : DEFAULT_W * 1000;
+    if (!has_w && !has_h)
+    {
+        aw = has_box ? vw : DEFAULT_W * 1000;
+        ah = has_box ? vh : DEFAULT_H * 1000;
+    }
+    *w = (int32_t)(aw * U / 1000);
+    *h = (int32_t)(ah * U / 1000);
+    return true;
+}
+
+/* ---- Writing ---- */
+
+static void put(writer_t* wr, const char* s, size_t length)
+{
+    if (!wr->failed && length != 0 && Dmod_FileWrite(s, 1, length, wr->file) != length)
+        wr->failed = true;
+}
+
+static void puts_(writer_t* wr, const char* s)
+{
+    put(wr, s, strlen(s));
+}
+
+/* `s` with &, <, > and " escaped; currentColor as the color */
+static void escaped(writer_t* wr, const char* s, size_t length)
+{
+    const char* end = s + length;
+    while (s < end)
+    {
+        const char* run = s;
+        while (s < end && *s != '&' && *s != '<' && *s != '>' && *s != '"' &&
+               !((size_t)(end - s) >= 12 && (*s == 'c' || *s == 'C') && strncmp(s + 1, "urrentColor", 11) == 0) &&
+               !((size_t)(end - s) >= 12 && strncmp(s, "currentcolor", 12) == 0))
+            s++;
+        put(wr, run, (size_t)(s - run));
+        if (s >= end)
+            break;
+        switch (*s)
+        {
+            case '&': puts_(wr, "&amp;"); s++; break;
+            case '<': puts_(wr, "&lt;"); s++; break;
+            case '>': puts_(wr, "&gt;"); s++; break;
+            case '"': puts_(wr, "&quot;"); s++; break;
+            default:  puts_(wr, wr->color); s += 12; break;
+        }
+    }
+}
+
+/* A name as SVG spells it */
+static void name(writer_t* wr, const char* s)
+{
+    size_t n = strlen(s);
+    for (const char* p = g_names; *p != '\0'; )
+    {
+        const char* e = strchr(p + 1, '|');
+        if (e == NULL)
+            break;
+        size_t k = (size_t)(e - p - 1);
+        if (k == n)
+        {
+            bool same = true;
+            for (size_t i = 0; i < n && same; i++)
+            {
+                char a = p[1 + i];
+                same = ((a >= 'A' && a <= 'Z') ? (char)(a - 'A' + 'a') : a) == s[i];
+            }
+            if (same)
+            {
+                put(wr, p + 1, n);
+                return;
+            }
+        }
+        p = e;
+    }
+    put(wr, s, n);
+}
+
+static void attribute(writer_t* wr, const char* n, const char* value)
+{
+    puts_(wr, " ");
+    name(wr, n);
+    puts_(wr, "=\"");
+    escaped(wr, value, strlen(value));
+    puts_(wr, "\"");
+}
+
+static void element(writer_t* wr, const node_t* n, uint32_t depth)
+{
+    if (n->kind == NODE_TEXT)
+    {
+        escaped(wr, n->text, n->length);
+        return;
+    }
+    if (n->kind != NODE_ELEMENT || n->tag == NULL || depth > 64u)
+        return;
+    puts_(wr, "<");
+    name(wr, n->tag);
+    for (const attr_t* a = n->attrs; a != NULL; a = a->next)
+        attribute(wr, a->name, (a->value != NULL) ? a->value : "");
+    if (n->first == NULL)
+    {
+        puts_(wr, "/>");
+        return;
+    }
+    puts_(wr, ">");
+    for (const node_t* k = n->first; k != NULL; k = k->next)
+        element(wr, k, depth + 1U);
+    puts_(wr, "</");
+    name(wr, n->tag);
+    puts_(wr, ">");
+}
+
+char* svg_export(conv_t* c, const node_t* n, int32_t width, int32_t height)
+{
+    char path[MAX_PATH], number_text[64];
+    const char* dir = Dmod_GetEnv("TMPDIR");
+    if (dir == NULL || *dir == '\0')
+        dir = "/tmp";
+    const char* page = strrchr(c->path, '/');
+    page = (page != NULL) ? page + 1 : c->path;
+    const char* dot = strrchr(page, '.');
+    int stem = (int)((dot != NULL && dot != page) ? (size_t)(dot - page) : strlen(page));
+    Dmod_SnPrintf(path, sizeof(path), "%s/%.*s-svg%u.svg", dir, stem, page, (unsigned)n->index);
+
+    writer_t wr;
+    memset(&wr, 0, sizeof(wr));
+    uint32_t color = (n->style != NULL) ? n->style->color : 0;
+    Dmod_SnPrintf(wr.color, sizeof(wr.color), "#%06x", (unsigned)(color & 0xFFFFFFu));
+    if ((wr.file = Dmod_FileOpen(path, "wb")) == NULL)
+    {
+        DMOD_LOG_ERROR("dmvs_html: cannot write %s\n", path);
+        return NULL;
+    }
+
+    /* The root: sized as the box; what it was drawn in, its viewBox (or its own size) */
+    puts_(&wr, "<svg xmlns=\"http://www.w3.org/2000/svg\"");
+    Dmod_SnPrintf(number_text, sizeof(number_text), " width=\"%d\" height=\"%d\"", (int)width, (int)height);
+    puts_(&wr, number_text);
+    int64_t vw, vh, aw, ah;
+    if (!view_box(n, &vw, &vh) && number(node_attr(n, "width"), &aw) && number(node_attr(n, "height"), &ah))
+    {
+        Dmod_SnPrintf(number_text, sizeof(number_text), " viewBox=\"0 0 %d.%03d %d.%03d\"",
+                      (int)(aw / 1000), (int)(aw % 1000), (int)(ah / 1000), (int)(ah % 1000));
+        puts_(&wr, number_text);
+    }
+    for (const attr_t* a = n->attrs; a != NULL; a = a->next)
+    {
+        if (strcmp(a->name, "width") != 0 && strcmp(a->name, "height") != 0 && strcmp(a->name, "class") != 0 &&
+            strcmp(a->name, "xmlns") != 0 && strcmp(a->name, "style") != 0)
+            attribute(&wr, a->name, (a->value != NULL) ? a->value : "");
+    }
+    puts_(&wr, ">");
+    for (const node_t* k = n->first; k != NULL; k = k->next)
+        element(&wr, k, 1);
+    puts_(&wr, "</svg>\n");
+    Dmod_FileClose(wr.file);
+    if (wr.failed)
+    {
+        DMOD_LOG_ERROR("dmvs_html: cannot write %s\n", path);
+        return NULL;
+    }
+    return arena_strndup(&c->arena, path, strlen(path));
+}
diff --git a/src/tailwind.c b/src/tailwind.c
index a7fb60e..248b237 100644
--- a/src/tailwind.c
+++ b/src/tailwind.c
@@ -32,7 +32,7 @@ enum
     R_PLACE_CONTENT, R_PLACE_ITEMS, R_ALIGN_CONTENT, R_ALIGN_ITEMS, R_JUSTIFY_CONTENT, R_JUSTIFY_ITEMS, R_GAP,
     R_GAP_XY, R_PLACE_SELF, R_ALIGN_SELF, R_JUSTIFY_SELF, R_OVERFLOW, R_OVERFLOW_XY, R_TEXT_OVERFLOW, R_WHITESPACE,
     R_ROUNDED, R_ROUNDED_SIDE, R_ROUNDED_CORNER, R_BORDER_WIDTH, R_BORDER_WIDTH_XY, R_BORDER_WIDTH_SIDE,
-    R_BORDER_STYLE, R_BORDER_COLOR, R_BORDER_COLOR_XY, R_BORDER_COLOR_SIDE, R_BG_COLOR, R_BG_IMAGE, R_GRADIENT_FROM,
+    R_BORDER_STYLE, R_BORDER_COLOR, R_BORDER_COLOR_XY, R_BORDER_COLOR_SIDE, R_BG_COLOR, R_BG_IMAGE, R_BG_SIZE, R_BG_POSITION, R_OBJECT_FIT, R_OBJECT_POSITION, R_GRADIENT_FROM,
     R_GRADIENT_VIA, R_GRADIENT_TO, R_PADDING, R_PADDING_XY, R_PADDING_SIDE, R_TEXT_ALIGN, R_VERTICAL_ALIGN,
     R_FONT_FAMILY, R_FONT_SIZE, R_FONT_WEIGHT, R_TEXT_TRANSFORM, R_FONT_STYLE, R_LEADING, R_TRACKING, R_TEXT_COLOR,
     R_OPACITY, R_SHADOW, R_SHADOW_COLOR, R_BLUR, R_DROP_SHADOW, R_FILTER, R_TRANSITION, R_DURATION, R_EASE, R_ARBITRARY
@@ -1055,6 +1055,147 @@ static bool backgrounds(out_t* o, const char* u, uint32_t* rank)
     return false;
 }
 
+/* ---- The page's tailwind.config ---- */
+
+static const char* skip_js(const char* s, const char* end)
+{
+    while (s < end)
+    {
+        if (*s == ' ' || *s == '\t' || *s == '\r' || *s == '\n' || *s == ',')
+            s++;
+        else if (s + 1 < end && s[0] == '/' && s[1] == '/')
+            while (s < end && *s != '\n')
+                s++;
+        else
+            break;
+    }
+    return s;
+}
+
+/* A key ("sans", 'sans' or sans) or a string: its text at *text, its length returned, 0 if none */
+static size_t js_word(const char** s, const char* end, const char** text)
+{
+    const char* p = skip_js(*s, end);
+    size_t n = 0;
+    if (p < end && (*p == '\'' || *p == '"' || *p == '`'))
+    {
+        char q = *p++;
+        *text = p;
+        while (p + n < end && p[n] != q)
+            n++;
+        *s = (p + n < end) ? p + n + 1 : end;
+        return n;
+    }
+    *text = p;
+    while (p + n < end && ((p[n] >= 'a' && p[n] <= 'z') || (p[n] >= 'A' && p[n] <= 'Z') || (p[n] >= '0' && p[n] <= '9') || p[n] == '_' || p[n] == '-' || p[n] == '$'))
+        n++;
+    *s = p + n;
+    return n;
+}
+
+/* fontFamily: { sans: ['Inter', 'sans-serif'], ... } of the theme (or its extend): what
+ * font-sans and the others are on the page, as "|sans=Inter, sans-serif|..." */
+void tailwind_config(conv_t* c, const char* text, size_t length)
+{
+    const char* end = text + length;
+    const char* s = text;
+    while (s + 15 <= end && strncmp(s, "tailwind.config", 15) != 0)
+        s++;
+    while (s + 10 <= end && strncmp(s, "fontFamily", 10) != 0)
+        s++;
+    if (s + 10 > end)
+        return;
+    s = skip_js(s + 10, end);
+    if (s >= end || *s != ':')
+        return;
+    s = skip_js(s + 1, end);
+    if (s >= end || *s != '{')
+        return;
+    s++;
+    char all[512];
+    size_t used = 0;
+    const char* old = (c->tw_fonts != NULL) ? c->tw_fonts : "|";
+    Dmod_SnPrintf(all, sizeof(all), "%s", old);
+    used = strlen(all);
+    for (;;)
+    {
+        const char* key;
+        size_t kn = js_word(&s, end, &key);
+        s = skip_js(s, end);
+        if (kn == 0 || s >= end || *s != ':')
+            break;
+        s = skip_js(s + 1, end);
+        char value[256];
+        size_t vn = 0;
+        value[0] = '\0';
+        bool list = (s < end && *s == '[');
+        if (list)
+            s++;
+        for (;;)
+        {
+            const char* f;
+            const char* before = skip_js(s, end);
+            if (before >= end || *before == ']' || *before == '}')
+                break;
+            size_t fn = js_word(&s, end, &f);
+            if (fn == 0)
+                break;
+            bool quote = false;
+            for (size_t i = 0; i < fn; i++)
+                quote = quote || f[i] == ' ';
+            if (vn + fn + 5U < sizeof(value))
+                vn += (size_t)Dmod_SnPrintf(value + vn, sizeof(value) - vn, "%s%s", (vn > 0) ? ", " : "", quote ? "'" : "");
+            if (vn + fn + 3U < sizeof(value))
+            {
+                memcpy(value + vn, f, fn);
+                vn += fn;
+                value[vn] = '\0';
+                if (quote)
+                    value[vn++] = '\'', value[vn] = '\0';
+            }
+            if (!list)
+                break;
+        }
+        s = skip_js(s, end);
+        if (list && s < end && *s == ']')
+            s++;
+        if (vn > 0 && used + kn + vn + 3U < sizeof(all))
+        {
+            memcpy(all + used, key, kn);
+            used += kn;
+            all[used++] = '=';
+            memcpy(all + used, value, vn);
+            used += vn;
+            all[used++] = '|';
+            all[used] = '\0';
+        }
+    }
+    c->tw_fonts = arena_strndup(&c->arena, all, used);
+}
+
+/* font-<name> of the page's tailwind.config */
+static bool configured_font(out_t* o, const char* u, uint32_t* rank)
+{
+    const char* name;
+    if (o->c->tw_fonts == NULL || !starts(u, "font-", &name))
+        return false;
+    size_t n = strlen(name);
+    for (const char* s = o->c->tw_fonts; *s != '\0'; s++)
+    {
+        if (s[0] == '|' && strncmp(s + 1, name, n) == 0 && s[1 + n] == '=')
+        {
+            const char* v = s + 2 + n;
+            const char* e = strchr(v, '|');
+            char value[256];
+            cut(value, sizeof(value), v, (e != NULL) ? (size_t)(e - v) : strlen(v));
+            decl(o, "font-family", value);
+            *rank = R_FONT_FAMILY;
+            return true;
+        }
+    }
+    return false;
+}
+
 static bool keywords(out_t* o, const char* u, uint32_t* rank)
 {
     static const struct { char name[20]; char decls[56]; uint32_t rank; } table[] = {
@@ -1085,6 +1226,17 @@ static bool keywords(out_t* o, const char* u, uint32_t* rank)
         { "align-text-top", "vertical-align:text-top", R_VERTICAL_ALIGN },
         { "align-text-bottom", "vertical-align:text-bottom", R_VERTICAL_ALIGN },
         { "z-auto", "z-index:auto", R_Z },
+        { "bg-cover", "background-size:cover", R_BG_SIZE }, { "bg-contain", "background-size:contain", R_BG_SIZE },
+        { "bg-auto", "background-size:auto", R_BG_SIZE },
+        { "bg-center", "background-position:center", R_BG_POSITION }, { "bg-top", "background-position:top", R_BG_POSITION },
+        { "bg-bottom", "background-position:bottom", R_BG_POSITION }, { "bg-left", "background-position:left", R_BG_POSITION },
+        { "bg-right", "background-position:right", R_BG_POSITION },
+        { "object-cover", "object-fit:cover", R_OBJECT_FIT }, { "object-contain", "object-fit:contain", R_OBJECT_FIT },
+        { "object-fill", "object-fit:fill", R_OBJECT_FIT }, { "object-none", "object-fit:none", R_OBJECT_FIT },
+        { "object-scale-down", "object-fit:scale-down", R_OBJECT_FIT },
+        { "object-center", "object-position:center", R_OBJECT_POSITION }, { "object-top", "object-position:top", R_OBJECT_POSITION },
+        { "object-bottom", "object-position:bottom", R_OBJECT_POSITION }, { "object-left", "object-position:left", R_OBJECT_POSITION },
+        { "object-right", "object-position:right", R_OBJECT_POSITION },
     };
     for (size_t i = 0; i < sizeof(table) / sizeof(table[0]); i++)
     {
@@ -1301,7 +1453,7 @@ uint32_t tailwind_class(conv_t* c, const char* name, decl_t* decls, uint32_t max
     }
 
     uint32_t r = 0;
-    bool ok = keywords(&o, u, &r) || box_sides(&o, u, 'm', "margin", negative, R_MARGIN, &r) ||
+    bool ok = configured_font(&o, u, &r) || keywords(&o, u, &r) || box_sides(&o, u, 'm', "margin", negative, R_MARGIN, &r) ||
               box_sides(&o, u, 'p', "padding", false, R_PADDING, &r) || sizes(&o, u, negative, &r) ||
               inset(&o, u, negative, &r) || texts(&o, u, &r) || backgrounds(&o, u, &r) || borders(&o, u, &r) ||
               rounded(&o, u, &r) || flexbox(&o, u, &r) || grids(&o, u, &r) || effects(&o, u, negative, &r) ||
diff --git a/tests/dmvs_html_test.c b/tests/dmvs_html_test.c
index e1c841d..beace59 100644
--- a/tests/dmvs_html_test.c
+++ b/tests/dmvs_html_test.c
@@ -349,3 +349,135 @@ DMOD_TEST_STEP(dmvs_html_switches_the_screens_of_a_page)
     DMOD_TEST_EXPECT_TRUE(home != NULL && home->bind[DMVSI_BIND_OPACITY] != 0);
     dmvsi_free(doc);
 }
+
+/* The n-th image node of the tree (in painting order) */
+static const dmvsi_node_t* image_at(const dmvsi_node_t* n, uint32_t* index)
+{
+    for (; n != NULL; n = n->next)
+    {
+        if (n->kind == DMVSI_NODE_IMAGE && (*index)-- == 0)
+            return n;
+        if (n->kind == DMVSI_NODE_GROUP)
+        {
+            const dmvsi_node_t* f = image_at(n->first, index);
+            if (f != NULL)
+                return f;
+        }
+    }
+    return NULL;
+}
+
+static const dmvsi_node_t* nth_image(dmvsi_doc_t doc, uint32_t index)
+{
+    return image_at(dmvsi_root(doc), &index);
+}
+
+static bool file_has(const char* path, const char* text)
+{
+    static char data[2048];
+    void* f = Dmod_FileOpen(path, "rb");
+    if (f == NULL)
+        return false;
+    size_t n = Dmod_FileRead(data, 1, sizeof(data) - 1U, f);
+    Dmod_FileClose(f);
+    data[n] = '\0';
+    size_t k = strlen(text);
+    for (size_t i = 0; i + k <= n; i++)
+        if (strncmp(data + i, text, k) == 0)
+            return true;
+    return false;
+}
+
+DMOD_TEST_STEP(dmvs_html_draws_svg_and_images)
+{
+    /* A PNG's signature and IHDR: 100 x 50 (dmvs_html reads only the size of an image) */
+    static const uint8_t png[33] = { 0x89, 'P', 'N', 'G', '\r', '\n', 0x1A, '\n', 0, 0, 0, 13, 'I', 'H', 'D', 'R',
+                                     0, 0, 0, 100, 0, 0, 0, 50, 8, 6, 0, 0, 0, 0, 0, 0, 0 };
+    void* f = Dmod_FileOpen(TEST_FILE("wide.png"), "wb");
+    DMOD_TEST_EXPECT_TRUE(f != NULL);
+    if (f == NULL)
+        return;
+    Dmod_FileWrite(png, 1, sizeof(png), f);
+    Dmod_FileClose(f);
+
+    int status = -1;
+    DMOD_TEST_EXPECT_TRUE(write_file(TEST_FILE("images.html"),
+        "<!DOCTYPE html><html><head><style>"
+        "body { margin: 0 } #screen { width: 200px; height: 100px }"
+        "svg { display: block; width: 40px; height: 40px }"
+        "img { display: block; width: 40px; height: 40px; object-fit: cover }"
+        "#bg { width: 40px; height: 40px; background: url('wide.png') right bottom / contain; filter: blur(4px) }"
+        "</style></head><body><div id=\"screen\">"
+        "<svg viewBox=\"0 0 10 10\"><linearGradient id=\"g\"><stop offset=\"0\" stop-color=\"red\"/></linearGradient>"
+        "<circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"currentColor\"/></svg>"
+        "<img src=\"wide.png\"><div id=\"bg\"></div>"
+        "</div></body></html>"));
+    dmvsi_doc_t doc = convert(TEST_FILE("images.html"), "screen", 0, 0, &status);
+    DMOD_TEST_EXPECT_EQ(status, 0);
+    if (doc == NULL)
+        return;
+
+    /* The <svg>: a file of its own, sized as its box, its viewBox and camelCase names kept */
+    const dmvsi_node_t* svg = nth_image(doc, 0);
+    DMOD_TEST_EXPECT_TRUE(svg != NULL && svg->u.image.rect.w == DMVSI_PX(40) && svg->u.image.rect.h == DMVSI_PX(40));
+    if (svg != NULL)
+    {
+        size_t n = strlen(svg->u.image.path);
+        DMOD_TEST_EXPECT_TRUE(n > 4 && strcmp(svg->u.image.path + n - 4, ".svg") == 0);
+        DMOD_TEST_EXPECT_TRUE(file_has(svg->u.image.path, "width=\"40\" height=\"40\" viewBox=\"0 0 10 10\""));
+        DMOD_TEST_EXPECT_TRUE(file_has(svg->u.image.path, "<linearGradient id=\"g\">"));
+        DMOD_TEST_EXPECT_TRUE(file_has(svg->u.image.path, "fill=\"#000000\""));     /* currentColor */
+    }
+
+    /* object-fit: cover - 100 x 50 into 40 x 40: 80 x 40, in the middle */
+    const dmvsi_node_t* img = nth_image(doc, 1);
+    DMOD_TEST_EXPECT_TRUE(img != NULL && img->u.image.width == DMVSI_PX(80) && img->u.image.height == DMVSI_PX(40));
+    DMOD_TEST_EXPECT_TRUE(img != NULL && img->u.image.flags == (DMVSI_IMAGE_CENTER | DMVSI_IMAGE_MIDDLE));
+
+    /* background: url() right bottom / contain, blurred - 40 x 20 at the bottom right, blur 4 px */
+    const dmvsi_node_t* bg = nth_image(doc, 2);
+    DMOD_TEST_EXPECT_TRUE(bg != NULL && bg->u.image.width == DMVSI_PX(40) && bg->u.image.height == DMVSI_PX(20));
+    DMOD_TEST_EXPECT_TRUE(bg != NULL && bg->u.image.flags == (DMVSI_IMAGE_RIGHT | DMVSI_IMAGE_BOTTOM));
+    DMOD_TEST_EXPECT_TRUE(bg != NULL && bg->u.image.blur == DMVSI_PX(4));
+    dmvsi_free(doc);
+}
+
+DMOD_TEST_STEP(dmvs_html_converts_listeners)
+{
+    int status = -1;
+    DMOD_TEST_EXPECT_TRUE(write_file(TEST_FILE("listeners.html"),
+        "<!DOCTYPE html><html><head><style>"
+        "body { margin: 0 } #screen { width: 200px; height: 100px }"
+        ".tab { width: 40px; height: 20px; background: #333 } .tab.active { background: #36f }"
+        "</style></head><body><div id=\"screen\">"
+        "<div class=\"tab active\" id=\"a\"></div><div class=\"tab\" id=\"b\"></div>"
+        "</div><script>"
+        "const tabs = document.querySelectorAll('.tab');\n"
+        "tabs.forEach(tab => {\n"
+        "  tab.addEventListener('click', () => {\n"
+        "    tabs.forEach(t => t.classList.remove('active'));\n"
+        "    tab.classList.add('active');\n"
+        "  });\n"
+        "});\n"
+        "</script></body></html>"));
+    dmvsi_doc_t doc = convert(TEST_FILE("listeners.html"), "screen", 0, 0, &status);
+    DMOD_TEST_EXPECT_EQ(status, 0);
+    if (doc == NULL)
+        return;
+    const dmvsi_node_t* root = dmvsi_root(doc);
+
+    /* forEach is unrolled: each tab is clicked with a handler of its own, and looks active by a variable */
+    const dmvsi_node_t* a = group_named(root->first, "a");
+    const dmvsi_node_t* b = group_named(root->first, "b");
+    DMOD_TEST_EXPECT_TRUE(a != NULL && b != NULL && a->click != 0 && b->click != 0 && a->click != b->click);
+    if (a != NULL && b != NULL)
+    {
+        const dmvsi_action_t* acts = NULL;
+        uint32_t n = dmvsi_handler_actions(doc, b->click, &acts);
+        bool sets = false;
+        for (uint32_t i = 0; i < n; i++)
+            sets = sets || acts[i].kind == DMVSI_ACT_SET;
+        DMOD_TEST_EXPECT_TRUE(sets);
+    }
+    dmvsi_free(doc);
+}