Share Card Export — Differential Regression Test

Systematic A/B/C/D test using FRESH FIN as the known-good control. All captures use html2canvas (the same export pipeline as production). Click Generate once, then scroll to compare LIVE DOM vs CAPTURED PNG for each test.

1. Computed Styles Differential

Property-by-property comparison between FRESH FIN (known-good) and the member name (corrupted). Differing properties are highlighted in red.

A — Known Good (FRESH FIN)

FRESH FIN

B — Suspect (Member Name)

FISH BRAINS
PropertyA (FRESH FIN)B (Name)
transformnonenone
scalenonenone
scaleX(not set)(not set)
transform-origin279px 37.5px279px 28.5938px
font-size50px52px
letter-spacing2.5px1.04px
line-height75px57.2px
width558px558px
max-widthnonenone
min-width0px0px
displayblockblock
flex0 1 auto0 1 auto
flex-shrink11
flex-directionrowrow
white-spacenowrapnowrap
overflowhiddenhidden
text-overflowellipsisellipsis
positionstaticstatic
translatenonenone
text-shadowrgb(6, 13, 15) 0px 0px 2px, rgba(6, 13, 15, 0.95) 0px 2px 6pxrgb(6, 13, 15) 0px 0px 2px, rgba(6, 13, 15, 0.95) 0px 2px 6px
filternonenone
opacity11
font-weight700700
font-family"Pixelify Sans", monospace"Pixelify Sans", monospace
font-feature-settings"ss01", "cv01""ss01", "cv01"
font-variation-settingsnormalnormal

2. A/B/C/D Differential (html2canvas captures)

CONTROL A: FRESH FIN with FRESH FIN styles (known-good).
CONTROL B: FISH BRAINS with FRESH FIN styles (same text, good styles).
TEST C: FISH BRAINS with production member-name styles (suspect).
TEST D: DARREN with production member-name styles (simpler text, same styles).

If A and B work but C and D fail → the defect is in member-name-specific styling.

CONTROL A — FRESH FIN / FRESH FIN styles

LIVE DOM

FRESH FIN

CAPTURED PNG

Pending

CONTROL B — FISH BRAINS / FRESH FIN styles

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

TEST C — FISH BRAINS / member-name styles

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

TEST D — DARREN / member-name styles

LIVE DOM

DARREN

CAPTURED PNG

Pending

3. Progressive Property Removal

Each test removes ONE property from the production member-name style. The first capture that renders correctly identifies the offending property.

C1 — Remove lineHeight

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

C2 — letterSpacing: normal

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

C3 — Fixed fontSize 50

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

C4 — letterSpacing 0.05em

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

C5 — Remove overflow/ellipsis

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

C6 — Remove textShadow

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

C7 — Bare text (font+color only)

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

4. Final Acceptance — Fixed Production Styles

Same A/B/C/D tests but with the FIXED member-name styles (lineHeight removed, letterSpacing widened to 0.04em). All four must render correctly.

A — FRESH FIN / FRESH FIN styles

LIVE DOM

FRESH FIN

CAPTURED PNG

Pending

B — FISH BRAINS / FRESH FIN styles

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

C — FISH BRAINS / FIXED name styles

LIVE DOM

FISH BRAINS

CAPTURED PNG

Pending

D — DARREN / FIXED name styles

LIVE DOM

DARREN

CAPTURED PNG

Pending

E — Long name (triggers fitting) / FIXED

LIVE DOM

MAXIMILLIAN VON SPONGEBOB

CAPTURED PNG

Pending

5. Full Production Card — FISH BRAINS 🧠 / SARD-000002 / Level 06

Live Preview (DOM)

?Pending Art
FISH BRAINS 🧠
Fresh Fin
SARD IDSARD-000002
LV06
RANKSchoolmate
ORIGINMechanic
COLLECTIONOcean
THE SCHOOLWEARESARDINES.COM$SARD

Captured PNG

PNG will appear here