Fidelity fixes for captured styles, plus pre-parsed style rules

[LuLaValva]

Five commits, each independent and each passing on its own. The four fixes were all found the same way: rendering a captured snapshot back in a browser next to the page it was captured from and diffing computed styles element by element. Two are covered by new tests in the existing jsdom suite; the other two are browser-only behaviours — see the note at the end.

fix: settle declarations by the property they write

Declarations were kept or dropped by name, but a property can be written under several. padding writes padding-left, and so does padding-inline-start; a shorthand written with a var() can't be split at all, so CSSOM enumerates its longhands with no value and only the shorthand carries one:

.a { border-radius: var(--r, 20px); border: 1px solid; }
  border-top-left-radius = ""
  border-radius          = "var(--r, 20px)"

Snapshots therefore held both the winner and the loser of one property, and since serialization sorts by name it was often the loser that took effect when the markup was rendered — a textbox padded by padding-inline-start came out with the padding: 0 it overrides. Reading an empty longhand fared worse: the name was chopped at its last dash until something answered, which walks to a different property (border-top-left-radius → border-top), so the radius was dropped and the unrelated border: 1px solid was captured as border-top: 1px solid.

Declarations are now settled per property rather than per name, against the properties each one writes — shorthands expanded, logical names resolved to physical for the element's writing mode. Both mappings are read from the browser at runtime rather than kept as a list to maintain.

Two smaller corrections belong to the same reading. Declaring the default value of an inherited property was treated as a no-op; it isn't one — line-height: normal inside a body with a line height is what stops it inheriting. And an initial is resolved rather than skipped: skipping kept shorthand noise out but also dropped background-color: initial, which is what makes a button transparent instead of UA grey.

fix: compute default styles per element rather than per tag name

Defaults were cached under the tag name, so the first <input> of a run decided the defaults for every later one:

input[type=checkbox]  border-top-style=none   background=rgba(0,0,0,0)  padding-top=0px
input[type=text]      border-top-style=inset  background=rgb(255,255,255) padding-top=1px

Capture a checkbox first and a text input's border: none, padding: 0 and background all look redundant and get dropped; its margin: 0 gets kept for the same reason inverted. The cached entry now covers attributes, which is what UA styles select on.

The same probe ran in quirks mode — a blank frame has no doctype — while the page being captured does not:

as visual-html does it : compatMode=BackCompat  box-sizing=border-box
with a doctype written : compatMode=CSS1Compat  box-sizing=content-box
page under test        : compatMode=CSS1Compat  box-sizing=border-box

so box-sizing: border-box was dropped from every input on every standards-mode page.

fix: quote attribute values so a snapshot can be parsed back

A style attribute was written with double quotes around values that often contain them — url("…"), a quoted font name — so the attribute ended at the first inner quote and every declaration after it was lost to anything parsing the snapshot. Values now take a quote they don't themselves use.

fix: capture the href that makes an anchor a link

An <a> without an href isn't a link: no underline, no link colour, no pointer cursor.

fix: read derived attributes from their content attribute

currentSrc, img.width and img.height reflect resolved and loaded state, so captures depended on network timing and on where the page was served from; poster, data and background resolve against the document's base URL. All are read from their content attributes now. srcset joins the whitelist, since currentSrc had been the only thing capturing a responsive image's source.

feat: accept pre-parsed style rules

Reading and specificity sorting the document's rules is the bulk of a capture's work and repeats per call even when nothing changed. Options.styleRules lets a suite parse once via the now-exported getDocumentStyleRules; omitting it keeps current behaviour. In a ~1,300-story suite this took a run from ~5 minutes to ~105 seconds.

Verification, and a request

After these, a captured snapshot re-rendered with only the design tokens matches the live page on every visual property for buttons, selects, textareas and switches. One known gap remains, not addressed here: when a rule set declares both a logical and a physical longhand (padding-inline-start and padding-left), both are captured and then serialized alphabetically, so the physical one wins on re-render regardless of which won in the cascade. Fixing that means resolving logical properties against the element's direction and writing mode — happy to open it separately if you want it.

Two of the four now have regression tests in the existing jsdom suite, and both fail against the code they were written for: jsdom's user agent styles distinguish a checkbox (border-box) from a text input (content-box), which catches defaults leaking between elements of the same tag, and its declarations expose an authored initial exactly as a browser does.

The other two are not expressible in jsdom — it keeps a var() shorthand under the shorthand name rather than enumerating pending-substitution longhands, and its user agent styles don't vary with quirks mode. Rather than reach for a browser I checked the alternatives: happy-dom has no user agent stylesheet at all (every computed value comes back "") and doesn't implement compatMode; linkedom has no getComputedStyle. No jsdom option changes this either. Those two are verified by rendering captures back in Chromium and diffing computed styles, and whether that belongs in CI is your call — either as a browser job, or by driving the reading logic from declaration fixtures recorded off Chrome, which needs no new runtime dependency. Happy to build whichever you prefer.

🤖 Generated with Claude Code