[ { "path": ".github/CODE_OF_CONDUCT.md", "content": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\n\nWe as members, contributors, and leaders pledge to make participation in our\ncommunity a harassment-free experience for everyone, regardless of age, body\nsize, visible or invisible disability, ethnicity, sex characteristics, gender\nidentity and expression, level of experience, education, socio-economic status,\nnationality, personal appearance, race, religion, or sexual identity\nand orientation.\n\nWe pledge to act and interact in ways that contribute to an open, welcoming,\ndiverse, inclusive, and healthy community.\n\n## Our Standards\n\nExamples of behavior that contributes to a positive environment for our\ncommunity include:\n\n* Demonstrating empathy and kindness toward other people\n* Being respectful of differing opinions, viewpoints, and experiences\n* Giving and gracefully accepting constructive feedback\n* Accepting responsibility and apologizing to those affected by our mistakes,\n and learning from the experience\n* Focusing on what is best not just for us as individuals, but for the\n overall community\n\nExamples of unacceptable behavior include:\n\n* The use of sexualized language or imagery, and sexual attention or\n advances of any kind\n* Trolling, insulting or derogatory comments, and personal or political attacks\n* Public or private harassment\n* Publishing others' private information, such as a physical or email\n address, without their explicit permission\n* Other conduct which could reasonably be considered inappropriate in a\n professional setting\n\n## Enforcement Responsibilities\n\nCommunity leaders are responsible for clarifying and enforcing our standards of\nacceptable behavior and will take appropriate and fair corrective action in\nresponse to any behavior that they deem inappropriate, threatening, offensive,\nor harmful.\n\nCommunity leaders have the right and responsibility to remove, edit, or reject\ncomments, commits, code, wiki edits, issues, and other contributions that are\nnot aligned to this Code of Conduct, and will communicate reasons for moderation\ndecisions when appropriate.\n\n## Scope\n\nThis Code of Conduct applies within all community spaces, and also applies when\nan individual is officially representing the community in public spaces.\nExamples of representing our community include using an official e-mail address,\nposting via an official social media account, or acting as an appointed\nrepresentative at an online or offline event.\n\n## Enforcement\n\nInstances of abusive, harassing, or otherwise unacceptable behavior may be\nreported to the community leaders responsible for enforcement at\nmartinmuda@gmail.com.\nAll complaints will be reviewed and investigated promptly and fairly.\n\nAll community leaders are obligated to respect the privacy and security of the\nreporter of any incident.\n\n## Enforcement Guidelines\n\nCommunity leaders will follow these Community Impact Guidelines in determining\nthe consequences for any action they deem in violation of this Code of Conduct:\n\n### 1. Correction\n\n**Community Impact**: Use of inappropriate language or other behavior deemed\nunprofessional or unwelcome in the community.\n\n**Consequence**: A private, written warning from community leaders, providing\nclarity around the nature of the violation and an explanation of why the\nbehavior was inappropriate. A public apology may be requested.\n\n### 2. Warning\n\n**Community Impact**: A violation through a single incident or series\nof actions.\n\n**Consequence**: A warning with consequences for continued behavior. No\ninteraction with the people involved, including unsolicited interaction with\nthose enforcing the Code of Conduct, for a specified period of time. This\nincludes avoiding interactions in community spaces as well as external channels\nlike social media. Violating these terms may lead to a temporary or\npermanent ban.\n\n### 3. Temporary Ban\n\n**Community Impact**: A serious violation of community standards, including\nsustained inappropriate behavior.\n\n**Consequence**: A temporary ban from any sort of interaction or public\ncommunication with the community for a specified period of time. No public or\nprivate interaction with the people involved, including unsolicited interaction\nwith those enforcing the Code of Conduct, is allowed during this period.\nViolating these terms may lead to a permanent ban.\n\n### 4. Permanent Ban\n\n**Community Impact**: Demonstrating a pattern of violation of community\nstandards, including sustained inappropriate behavior, harassment of an\nindividual, or aggression toward or disparagement of classes of individuals.\n\n**Consequence**: A permanent ban from any sort of public interaction within\nthe community.\n\n## Attribution\n\nThis Code of Conduct is adapted from the [Contributor Covenant][homepage],\nversion 2.0, available at\nhttps://www.contributor-covenant.org/version/2/0/code_of_conduct.html.\n\nCommunity Impact Guidelines were inspired by [Mozilla's code of conduct\nenforcement ladder](https://github.com/mozilla/diversity).\n\n[homepage]: https://www.contributor-covenant.org\n\nFor answers to common questions about this code of conduct, see the FAQ at\nhttps://www.contributor-covenant.org/faq. Translations are available at\nhttps://www.contributor-covenant.org/translations.\n" }, { "path": ".github/CONTRIBUTING.md", "content": "## ๐Ÿค Contributing Guide\n\nThank you for your interest in contributing to **Snapdom**! Your help makes this project better for everyone. Below youโ€™ll find some guidelines to get started.\n\n---\n\n### ๐Ÿ“ **Issues**\n\n* If you find a **bug**, please [open an issue](https://github.com/zumerlab/snapdom/issues/new) and provide as much detail as possible (steps to reproduce, expected behavior, actual behavior, etc.).\n* If you have a **feature request** or an idea for improvement:\n\n * You can [open an issue](https://github.com/zumerlab/snapdom/issues/new).\n * Or, start a [discussion](https://github.com/zumerlab/snapdom/discussions/new) to explore the idea with the community.\n\nEven small things matter โ€” if you spot a **typo** in the code, docs, or comments, please let us know or submit a fix!\n\n---\n\n### ๐Ÿ’ก **Examples**\n\nIf you build something cool using **Snapdom**, weโ€™d love to see it! Consider starting a **discussion** to share ideas and get feedback.\n\n---\n\n### ๐Ÿ’ฌ **Discussions**\n\nYouโ€™re welcome to use [GitHub Discussions](https://github.com/zumerlab/snapdom/discussions) for:\n\n* Asking questions.\n* Sharing feedback or ideas.\n* Connecting with other users and contributors.\n\nLetโ€™s keep the tone friendly and constructive!\n\n---\n\n### ๐Ÿš€ **Pull Requests (PRs)**\n\n* Before starting, itโ€™s a good idea to **discuss large changes** in an issue or discussion.\n* Fork the repo, create a branch (e.g. `fix-xyz`, `feature-abc`), and submit your PR.\n* Please make sure:\n\n * Your code follows the projectโ€™s style (we can help review).\n * You add tests or documentation if relevant.\n * You link the related issue (if any) in the PR description.\n\nAll contributions are reviewed and merged after approval. Donโ€™t worry if youโ€™re new โ€” weโ€™re happy to help!\n\n---\n\n### โšก Quick links\n\n* [Open an issue](https://github.com/zumerlab/snapdom/issues/new)\n* [Start a discussion](https://github.com/zumerlab/snapdom/discussions/new)\n* [Check open PRs](https://github.com/zumerlab/snapdom/pulls)\n" }, { "path": ".github/FUNDING.yml", "content": "# These are supported funding model platforms\n\ngithub: tinchox5\npatreon: # Replace with a single Patreon username\nopen_collective: # Replace with a single Open Collective username\nko_fi: # Replace with a single Ko-fi username\ntidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel\ncommunity_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry\nliberapay: # Replace with a single Liberapay username\nissuehunt: # Replace with a single IssueHunt username\nlfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry\npolar: # Replace with a single Polar username\nbuy_me_a_coffee: # Replace with a single Buy Me a Coffee username\nthanks_dev: # Replace with a single thanks.dev username\ncustom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug report\nabout: Create a report to help us improve\ntitle: ''\nlabels: 'bug'\nassignees: ''\n\n---\n\n### Describe it simply:\n\n\n\n### Quick demo to reproduce\n\n\n\n\n\n### Anything else we should know?\n\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "blank_issues_enabled: false\n" }, { "path": ".github/ISSUE_TEMPLATE/feature_request.md", "content": "---\nname: Feature request\nabout: Suggest an idea for this project\ntitle: ''\nlabels: 'enhancement'\nassignees: ''\n\n---\n\n**Is your feature request related to a problem? Please describe.**\n\nA clear and concise description of what the problem is. Ex. I'm always frustrated when [...]\n\n**Describe the solution you'd like**\nA clear and concise description of what you want to happen.\n\n**Describe alternatives you've considered**\nA clear and concise description of any alternative solutions or features you've considered.\n" }, { "path": ".github/labels.yml", "content": "# Priority labels\n- name: \"priority: critical\"\n color: \"B60205\"\n description: \"Core functionality broken, causes crashes or data loss, affects most users\"\n\n- name: \"priority: high\"\n color: \"D93F0B\"\n description: \"Important feature broken or significantly degraded, no practical workaround\"\n\n- name: \"priority: medium\"\n color: \"E4E669\"\n description: \"Feature partially broken or degraded, workaround exists\"\n\n- name: \"priority: low\"\n color: \"0E8A16\"\n description: \"Minor issue, cosmetic problem, or question\"\n\n# Type labels\n- name: \"bug\"\n color: \"D73A4A\"\n description: \"Something isn't working\"\n\n- name: \"enhancement\"\n color: \"A2EEEF\"\n description: \"New feature or request\"\n\n- name: \"question\"\n color: \"D876E3\"\n description: \"Further information is requested\"\n\n- name: \"documentation\"\n color: \"0075CA\"\n description: \"Improvements or additions to documentation\"\n\n# Status labels\n- name: \"๐Ÿ”ง in development\"\n color: \"FBCA04\"\n description: \"This issue is being actively worked on\"\n\n- name: \"need repro\"\n color: \"E4E669\"\n description: \"A reproducible test case is needed to investigate\"\n\n- name: \"duplicate\"\n color: \"CFD3D7\"\n description: \"This issue or pull request already exists\"\n\n- name: \"wontfix\"\n color: \"FFFFFF\"\n description: \"This will not be worked on\"\n\n- name: \"good first issue\"\n color: \"7057FF\"\n description: \"Good for newcomers\"\n\n# Browser/environment labels\n- name: \"safari-hates-me\"\n color: \"0052CC\"\n description: \"Issue specific to Safari browser\"\n\n- name: \"Fails on Firefox\"\n color: \"FF6B35\"\n description: \"Issue specific to Firefox browser\"\n\n# Feature area labels\n- name: \"plugin idea\"\n color: \"BFD4F2\"\n description: \"Could be implemented as a plugin\"\n\n- name: \"experimental\"\n color: \"F9D0C4\"\n description: \"Experimental feature or idea\"\n" }, { "path": ".github/scripts/classify-issues.js", "content": "// .github/scripts/classify-issues.js\n// Classifies all open issues by importance and applies priority labels.\n// Usage: GITHUB_TOKEN= node .github/scripts/classify-issues.js\n// Dry-run (no changes): GITHUB_TOKEN= node .github/scripts/classify-issues.js --dry-run\n\nimport https from 'https';\n\nconst repo = 'zumerlab/snapdom';\nconst [owner, repoName] = repo.split('/');\nconst token = process.env.GITHUB_TOKEN;\nconst dryRun = process.argv.includes('--dry-run');\n\nif (!token) {\n console.error('Error: GITHUB_TOKEN environment variable is required.');\n process.exit(1);\n}\n\n// โ”€โ”€โ”€ Classification rules โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n\n// Keywords for each priority tier\nconst CRITICAL_KEYWORDS = [\n 'the source image cannot be decoded',\n 'crash', 'data loss',\n 'ๆŠฅ้”™', // Chinese: \"reports an error\"\n];\n\nconst HIGH_PRIORITY_KEYWORDS = [\n 'pseudo-element', 'pseudo element',\n 'iframe',\n 'font', 'ๅญ—ไฝ“',\n 'background-image', 'background image',\n 'cross-origin', 'cross origin',\n 'checkbox',\n 'radio button', 'radio ',\n 'webkit-text-stroke', 'text-stroke',\n 'transform', 'matrix',\n 'katex',\n 'scrollbar', 'scroll position',\n 'border style',\n 'svg image',\n 'video',\n];\n\nconst LOW_KEYWORDS = [\n 'why ', 'how can', 'how do',\n 'is it possible', 'does it support',\n 'configuration option', 'timeout',\n 'cors',\n 'wicg', 'experiment',\n 'announcement', 'inactivity',\n 'plugin idea',\n];\n\nconst SAFARI_KEYWORDS = ['safari', 'ios', 'webkit', 'iphone', 'ipad', 'apple'];\nconst FIREFOX_KEYWORDS = ['firefox', 'mozilla', 'gecko'];\n\n/**\n * Determines the priority label for a given issue based on its title and body.\n * Returns one of: 'priority: critical', 'priority: high', 'priority: medium', 'priority: low'\n */\nfunction classifyPriority(issue) {\n const title = (issue.title || '').toLowerCase();\n const body = (issue.body || '').toLowerCase();\n const text = title + ' ' + body;\n\n if (CRITICAL_KEYWORDS.some(k => text.includes(k))) {\n return 'priority: critical';\n }\n\n if (LOW_KEYWORDS.some(k => text.includes(k))) {\n return 'priority: low';\n }\n\n if (HIGH_PRIORITY_KEYWORDS.some(k => text.includes(k))) {\n return 'priority: high';\n }\n\n return 'priority: medium';\n}\n\n/**\n * Additional type/browser labels to add based on content.\n */\nfunction classifyExtra(issue) {\n const title = (issue.title || '').toLowerCase();\n const body = (issue.body || '').toLowerCase();\n const text = title + ' ' + body;\n const extra = [];\n\n if (SAFARI_KEYWORDS.some(k => text.includes(k))) extra.push('safari-hates-me');\n if (FIREFOX_KEYWORDS.some(k => text.includes(k))) extra.push('Fails on Firefox');\n\n return extra;\n}\n\n// โ”€โ”€โ”€ GitHub API helpers โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n\nfunction request(method, path, body) {\n return new Promise((resolve, reject) => {\n const data = body ? JSON.stringify(body) : null;\n const options = {\n hostname: 'api.github.com',\n path,\n method,\n headers: {\n 'User-Agent': 'classify-issues-script',\n 'Accept': 'application/vnd.github.v3+json',\n 'Authorization': `token ${token}`,\n ...(data ? { 'Content-Type': 'application/json', 'Content-Length': Buffer.byteLength(data) } : {})\n }\n };\n const req = https.request(options, (res) => {\n let buf = '';\n res.on('data', c => buf += c);\n res.on('end', () => {\n if (res.statusCode >= 400) {\n reject(new Error(`HTTP ${res.statusCode}: ${buf}`));\n } else {\n resolve(buf ? JSON.parse(buf) : null);\n }\n });\n });\n req.on('error', reject);\n if (data) req.write(data);\n req.end();\n });\n}\n\nasync function fetchOpenIssues() {\n const issues = [];\n let page = 1;\n while (true) {\n const batch = await request('GET', `/repos/${owner}/${repoName}/issues?state=open&per_page=100&page=${page}`);\n if (!batch || batch.length === 0) break;\n // Exclude pull requests (GitHub includes PRs in /issues endpoint)\n issues.push(...batch.filter(i => !i.pull_request));\n if (batch.length < 100) break;\n page++;\n }\n return issues;\n}\n\nasync function addLabels(issueNumber, labels) {\n await request('POST', `/repos/${owner}/${repoName}/issues/${issueNumber}/labels`, { labels });\n}\n\n// โ”€โ”€โ”€ Main โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n\n(async () => {\n console.log(`Fetching open issues for ${repo}โ€ฆ`);\n const issues = await fetchOpenIssues();\n console.log(`Found ${issues.length} open issues.\\n`);\n\n if (dryRun) {\n console.log('DRY RUN โ€” no labels will be applied.\\n');\n }\n\n const summary = { critical: [], high: [], medium: [], low: [] };\n\n for (const issue of issues) {\n const existingLabels = issue.labels.map(l => l.name);\n const hasPriority = existingLabels.some(l => l.startsWith('priority:'));\n\n const priorityLabel = classifyPriority(issue);\n const extraLabels = classifyExtra(issue).filter(l => !existingLabels.includes(l));\n const newLabels = [\n ...(hasPriority ? [] : [priorityLabel]),\n ...extraLabels\n ];\n\n const level = priorityLabel.replace('priority: ', '');\n summary[level].push(`#${issue.number}: ${issue.title}`);\n\n if (newLabels.length === 0) {\n console.log(`#${issue.number} โ€” no new labels needed (existing: ${existingLabels.join(', ') || 'none'})`);\n continue;\n }\n\n console.log(`#${issue.number} [${priorityLabel}] โ€” adding: ${newLabels.join(', ')}`);\n\n if (!dryRun) {\n try {\n await addLabels(issue.number, newLabels);\n } catch (err) {\n console.error(` โœ— Failed to label #${issue.number}: ${err.message}`);\n }\n }\n }\n\n console.log('\\nโ”€โ”€ Classification Summary โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€');\n for (const [level, list] of Object.entries(summary)) {\n console.log(`\\n${level.toUpperCase()} (${list.length}):`);\n list.forEach(t => console.log(` ${t}`));\n }\n})();\n\n" }, { "path": ".github/scripts/update-contributors.js", "content": "// .github/scripts/update-contributors.js\nimport { writeFileSync, readFileSync } from 'fs';\nimport https from 'https';\n\nconst repo = 'zumerlab/snapdom';\nconst readmePaths = ['README.md', 'README_CN.md']; \n\nfunction fetchContributors() {\n const options = {\n hostname: 'api.github.com',\n path: `/repos/${repo}/contributors`,\n headers: { 'User-Agent': 'GitHub Action', 'Accept': 'application/vnd.github.v3+json' }\n };\n\n return new Promise((resolve, reject) => {\n https\n .get(options, (res) => {\n let body = '';\n res.on('data', (chunk) => (body += chunk));\n res.on('end', () => {\n if (res.statusCode === 200) {\n resolve(JSON.parse(body));\n } else {\n reject(new Error(`GitHub API error: ${res.statusCode}`));\n }\n });\n })\n .on('error', reject);\n });\n}\n\nfunction buildHTML(contributors) {\n return (\n '\\n

\\n' +\n contributors\n .map((c) => {\n const avatar = `\"${c.login}\"/`;\n return avatar;\n })\n .join('\\n') +\n '\\n

\\n'\n );\n}\n\nfunction updateReadmes(contributorHTML) {\n for (const path of readmePaths) {\n //try {\n const content = readFileSync(path, 'utf8');\n const updated = content.replace(\n /([\\s\\S]*?)/,\n `${contributorHTML}`\n );\n writeFileSync(path, updated);\n //} catch () {\n //}\n }\n}\n\nfetchContributors()\n .then((contributors) => {\n const filtered = contributors.filter(\n (c) => c.type !== 'Bot' && c.login !== 'github-actions[bot]'\n );\n const html = buildHTML(filtered);\n updateReadmes(html);\n })\n .catch((err) => {\n console.error('Error fetching contributors:', err);\n process.exit(1);\n });\n" }, { "path": ".github/workflows/issue-triage.yml", "content": "name: Auto-label Issues\n\non:\n issues:\n types: [opened, edited]\n\njobs:\n triage:\n runs-on: ubuntu-latest\n permissions:\n issues: write\n\n steps:\n - name: Label bug reports\n uses: actions/github-script@v7\n with:\n script: |\n const issue = context.payload.issue;\n const title = (issue.title || '').toLowerCase();\n const body = (issue.body || '').toLowerCase();\n const text = title + ' ' + body;\n const labelsToAdd = [];\n const existingLabels = issue.labels.map(l => l.name);\n\n // โ”€โ”€ Keyword patterns โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n const BUG_KEYWORDS = /bug|error|broken|crash|fail|not work|doesn't work|cannot|can't|unable|wrong|incorrect|missing|disappear|blank|empty|distort/;\n const FEATURE_KEYWORDS = /feature request|suggestion|enhancement|would like|wish|please add/;\n const QUESTION_KEYWORDS = /^(why|how|what|can you|is it possible|does it|do you)|\\bquestion\\b|\\bhelp\\b/;\n const SAFARI_KEYWORDS = /safari|ios|webkit|iphone|ipad|apple/;\n const FIREFOX_KEYWORDS = /firefox|mozilla|gecko/;\n\n const CRITICAL_KEYWORDS = /crash|data loss|cannot capture|completely broken|decode|source image/;\n const HIGH_KEYWORDS = /pseudo.?element|iframe|font|background.?image|cross.?origin|checkbox|radio|text.?stroke|transform|matrix/;\n const LOW_BUG_KEYWORDS = /configuration option|timeout setting|cors support/;\n\n // โ”€โ”€ Detect issue type โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n const isBug = BUG_KEYWORDS.test(text);\n const isFeature = FEATURE_KEYWORDS.test(text) && !isBug;\n const isQuestion = QUESTION_KEYWORDS.test(text) && !isBug;\n\n // โ”€โ”€ Apply type labels โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n if (isBug && !existingLabels.includes('bug')) labelsToAdd.push('bug');\n if (isFeature && !existingLabels.includes('enhancement')) labelsToAdd.push('enhancement');\n if (isQuestion && !existingLabels.includes('question')) labelsToAdd.push('question');\n\n // โ”€โ”€ Apply browser labels โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n if (SAFARI_KEYWORDS.test(text) && !existingLabels.includes('safari-hates-me')) labelsToAdd.push('safari-hates-me');\n if (FIREFOX_KEYWORDS.test(text) && !existingLabels.includes('Fails on Firefox')) labelsToAdd.push('Fails on Firefox');\n\n // โ”€โ”€ Assign priority for bugs (skip if already labelled) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n const hasPriority = existingLabels.some(l => l.startsWith('priority:'));\n if (isBug && !hasPriority) {\n if (CRITICAL_KEYWORDS.test(text)) {\n labelsToAdd.push('priority: critical');\n } else if (HIGH_KEYWORDS.test(text)) {\n labelsToAdd.push('priority: high');\n } else if (LOW_BUG_KEYWORDS.test(text)) {\n labelsToAdd.push('priority: low');\n } else {\n labelsToAdd.push('priority: medium');\n }\n }\n\n if (labelsToAdd.length > 0) {\n await github.rest.issues.addLabels({\n owner: context.repo.owner,\n repo: context.repo.repo,\n issue_number: issue.number,\n labels: labelsToAdd\n });\n console.log(`Added labels: ${labelsToAdd.join(', ')} to issue #${issue.number}`);\n }\n" }, { "path": ".github/workflows/label-sync.yml", "content": "name: Sync Labels\n\non:\n push:\n branches:\n - main\n paths:\n - '.github/labels.yml'\n workflow_dispatch:\n\njobs:\n sync-labels:\n runs-on: ubuntu-latest\n permissions:\n issues: write\n contents: read\n steps:\n - name: Checkout repo\n uses: actions/checkout@v4\n\n - name: Sync labels\n uses: EndBug/label-sync@v2\n with:\n config-file: .github/labels.yml\n delete-other-labels: false\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n" }, { "path": ".github/workflows/update-contributors.yml", "content": "name: Update Contributors in READMES\n\non:\n push:\n branches:\n - main\n schedule:\n - cron: '0 0 * * 0'\n workflow_dispatch:\n\njobs:\n update-contributors:\n runs-on: ubuntu-latest\n\n steps:\n - name: Checkout repo\n uses: actions/checkout@v4\n\n - name: Set up Node.js\n uses: actions/setup-node@v4\n with:\n node-version: '20'\n\n - name: Generate contributors list\n run: node .github/scripts/update-contributors.js\n\n - name: Commit and push if changed\n run: |\n git config --global user.name 'github-actions[bot]'\n git config --global user.email 'github-actions[bot]@users.noreply.github.com'\n if ! git diff --quiet; then\n git add README.md README_CN.md\n git commit -m \"chore: update contributors list\"\n git push\n fi\n" }, { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\nlerna-debug.log*\n.pnpm-debug.log*\n\n# Diagnostic reports (https://nodejs.org/api/report.html)\nreport.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json\n\n# Runtime data\npids\n*.pid\n*.seed\n*.pid.lock\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# Bower dependency directory (https://bower.io/)\nbower_components\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# Snowpack dependency directory (https://snowpack.dev/)\nweb_modules/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional npm cache directory\n.npm\n\n# Optional eslint cache\n.eslintcache\n\n# Optional stylelint cache\n.stylelintcache\n\n# Microbundle cache\n.rpt2_cache/\n.rts2_cache_cjs/\n.rts2_cache_es/\n.rts2_cache_umd/\n\n# Optional REPL history\n.node_repl_history\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# dotenv environment variable files\n.env\n.env.development.local\n.env.test.local\n.env.production.local\n.env.local\n\n# parcel-bundler cache (https://parceljs.org/)\n.cache\n.parcel-cache\n\n# Next.js build output\n.next\nout\n\n# Nuxt.js build / generate output\n.nuxt\ndist\n\n# Gatsby files\n.cache/\n# Comment in the public line in if your project uses Gatsby and not Next.js\n# https://nextjs.org/blog/next-9-1#public-directory-support\n# public\n\n# vuepress build output\n.vuepress/dist\n\n# vuepress v2.x temp and cache directory\n.temp\n.cache\n\n# vitepress build output\n**/.vitepress/dist\n\n# vitepress cache directory\n**/.vitepress/cache\n\n# Docusaurus cache and generated files\n.docusaurus\n\n# Serverless directories\n.serverless/\n\n# FuseBox cache\n.fusebox/\n\n# DynamoDB Local files\n.dynamodb/\n\n# TernJS port file\n.tern-port\n\n# Stores VSCode versions used for testing VSCode extensions\n.vscode-test\n\n# yarn v2\n.yarn/cache\n.yarn/unplugged\n.yarn/build-state.yml\n.yarn/install-state.gz\n.pnp.*\n\npackage-lock.json\n\ndrafts/\n\ndemos/\n\n__tests__/__screenshots__\n\n" }, { "path": ".vscode/settings.json", "content": "{\n \"liveServer.settings.port\": 5501\n}" }, { "path": "CHANGELOG.md", "content": "### Changelog\n\nAll notable changes to this project will be documented in this file. \n\n#### [v2.5.0](https://github.com/zumerlab/snapdom/compare/v2.1.0...v2.5.0)\n\n> 17 March 2026\n\n- fix: CSS vars perf, scrollbar styles, SVG image inline, nested line-clamp, iframe pseudos & isolation, Tailwind border (#334 #341 #348 #362 #371 #372 #386) [`#387`](https://github.com/zumerlab/snapdom/pull/387)\n- fix: enable image download on iOS via Web Share API [`#384`](https://github.com/zumerlab/snapdom/pull/384)\n- feat(scrollbar): implement custom scrollbar style collection for capture, ensuring styles are applied correctly. Closes #334 [`#334`](https://github.com/zumerlab/snapdom/issues/334)\n- feat(styles): normalize Tailwind border styles in capture and inlineAllStyles to ensure consistent output. Closes #362 [`#362`](https://github.com/zumerlab/snapdom/issues/362)\n- feat(lineClamp): introduce lineClampTree function to apply line-clamp to nested elements, enhancing ellipsis rendering. Closes #386 [`#386`](https://github.com/zumerlab/snapdom/issues/386)\n- test(styles): add tests for excluding CSS properties from snapshots, ensuring fidelity with CSS variables. Closes #348 [`#348`](https://github.com/zumerlab/snapdom/issues/348)\n- test(capture): add test for iframe CSS isolation to ensure wrapper div does not inherit iframe styles. Closes #372 [`#372`](https://github.com/zumerlab/snapdom/issues/372)\n- refactor(capture): replace getComputedStyle with getStyle for improved iframe support and consistency across style retrieval. Closes #371 [`#371`](https://github.com/zumerlab/snapdom/issues/371)\n- feat(pseudo): implement suppression of native ::before/::after pseudo-elements in cloned styles to prevent double rendering. Closes #359 [`#359`](https://github.com/zumerlab/snapdom/issues/359)\n- fix(capture): update Safari padding logic to avoid edge clipping by applying padding only when necessary based on bounding box transforms. Closes #333 [`#333`](https://github.com/zumerlab/snapdom/issues/333)\n- test(fonts): add test for cross-origin CSS support in embedCustomFonts function, verifying correct handling of custom CDN stylesheets. Closes #309 [`#309`](https://github.com/zumerlab/snapdom/issues/309)\n- feat(fonts): add fontStylesheetDomains option to support cross-origin CSS fetching, enhancing font loading capabilities. Closes #309, closes #370 [`#309`](https://github.com/zumerlab/snapdom/issues/309) [`#370`](https://github.com/zumerlab/snapdom/issues/370)\n- feat(styles): add support for capturing -webkit-text-stroke properties in Safari to enhance style snapshot accuracy. Closes #340 [`#340`](https://github.com/zumerlab/snapdom/issues/340)\n- fix(styles): normalize inline styles to ensure !important rules in stylesheets correctly override inline styles in clones. Fixes #328. [`#328`](https://github.com/zumerlab/snapdom/issues/328)\n- refactor: improve dimension handling in deepClone and createCheckboxRadioReplacement functions for better accuracy and consistency. Closes #321. See #378 [`#321`](https://github.com/zumerlab/snapdom/issues/321)\n- refactor: enhance checkbox/radio replacement for Firefox with SVG implementation for consistent rendering and improved styling. Closes #290 [`#290`](https://github.com/zumerlab/snapdom/issues/290)\n- fix(background): resolve relative URLs and fallback to `background` shorthand for url() when background-image is empty. Closes #343 [`#343`](https://github.com/zumerlab/snapdom/issues/343)\n- fix: enable image download on iOS via Web Share API [`#383`](https://github.com/zumerlab/snapdom/issues/383)\n- feat(tests): add comprehensive test coverage for various modules including exporters, utils, and modules to improve overall code reliability [`06cc896`](https://github.com/zumerlab/snapdom/commit/06cc8962709e5ce651b54b67c63c38fe5ecc498d)\n- feat(debug): introduce debug option to log suppressed errors for troubleshooting, enhancing error visibility during capture processes [`f107bbe`](https://github.com/zumerlab/snapdom/commit/f107bbef52521fdd92b77987b44b512313f3b88d)\n- fix: Firefox checkbox radio replacement [`b97e553`](https://github.com/zumerlab/snapdom/commit/b97e5539849d08dc871b9a2e486c9505bdfc081e)\n- refactor(cache): implement EvictingMap for cache management to limit memory usage and improve performance [`212cd4f`](https://github.com/zumerlab/snapdom/commit/212cd4f0471613b68a47427a1e23f7d076d303de)\n- refactor(styles): improve height handling for transparent wrappers to support margin collapsing and enhance layout stability [`c50ccef`](https://github.com/zumerlab/snapdom/commit/c50ccefe931e4809d12c8993dde6aba3f9b46a54)\n- fix(styles): prevent overriding border styles when using border-image, and improve getStyle fallback handling [`a5857c5`](https://github.com/zumerlab/snapdom/commit/a5857c5c49febe3d39729f214ca29914928af34a)\n- feat(images): add support for inlining SVG <image> elements as data URLs, addressing #341. [`f7d4616`](https://github.com/zumerlab/snapdom/commit/f7d46160913bcf5dad26be0103ef01dc7d29243c)\n- feat(safari): implement font and image decode warmup for Safari to address WebKit Bug #219770, enhancing capture reliability [`ad450ce`](https://github.com/zumerlab/snapdom/commit/ad450ce8a10a7094ecbde0ee20db626fabe78423)\n- test(getStyle): add tests to ensure getStyle never returns undefined for elements and pseudo-elements [`83c3854`](https://github.com/zumerlab/snapdom/commit/83c3854dc520a0e944a6cf1d23dbc5cdaf8e520a)\n- refactor(snapdom): streamline plugin exports by consolidating export functions into a loop for improved maintainability [`ca35387`](https://github.com/zumerlab/snapdom/commit/ca353871b2b696252ddd21572ae31106b39d3c76)\n- feat(capture): enhance DOM capture dimensions for root elements by measuring scroll dimensions and using a temporary container for accurate height and width calculations [`31e50f2`](https://github.com/zumerlab/snapdom/commit/31e50f27b3069527cc83f1fe8990c3a8c376e35c)\n- fix(css): enhance getWindowForElement and getStyle functions to handle cross-document scenarios and improve fallback logic [`b0fbc8d`](https://github.com/zumerlab/snapdom/commit/b0fbc8d44745811a7c5627e34ef764e02ff188f7)\n- refactor(context): remove inline cache policy normalization and import from cache module for improved code organization [`0492756`](https://github.com/zumerlab/snapdom/commit/04927566faf919c7a3df07287f799b152e5d4c8f)\n- feat(safari): add `safariWarmupAttempts` option to optimize font and image decoding for improved capture performance [`2474c05`](https://github.com/zumerlab/snapdom/commit/2474c0528051940e503c08ca52861042e57cc880)\n- fix(styles): prevent width constraints on inline and specific tags to avoid text wrapping issues [`674ef27`](https://github.com/zumerlab/snapdom/commit/674ef276bcad8e4107c57fee3e976083590a5dd0)\n- chore: update contributors list [`b30de75`](https://github.com/zumerlab/snapdom/commit/b30de75ab66cac137334a0ef68ca2bf9133f88c4)\n- docs: update README files to replace NPM version badge with weekly downloads badge [`8e12d01`](https://github.com/zumerlab/snapdom/commit/8e12d01fbeb861989eb1d60c534596c55ce9207a)\n- chore(.gitignore): add 'demos/' directory to .gitignore to exclude demo files from version control [`fa34905`](https://github.com/zumerlab/snapdom/commit/fa34905450d889e48b9b943c941f29386627acc5)\n- refactor(prepare): simplify deepClone call by removing redundant element argument for cleaner code [`399bfaf`](https://github.com/zumerlab/snapdom/commit/399bfaf127bb4416200068334dc069a5bfcef2ab)\n- fix(styles): adjust inline style for timestamp demo to prevent text wrapping [`b88e8d7`](https://github.com/zumerlab/snapdom/commit/b88e8d74f67fe67e3ac610972c53ff49752f6b74)\n- fix(snapdom): remove redundant safariWarmup reset to improve iteration logic [`72d3fb7`](https://github.com/zumerlab/snapdom/commit/72d3fb72968d136f1c71d234d57272ce0f3fb6e1)\n- Merge PR #384: enable image download on iOS via Web Share API [`05bc67c`](https://github.com/zumerlab/snapdom/commit/05bc67c76dbe6cc02946773de8413d48e314b3d9)\n- Merge main into dev (2.1.0) [`5f5ab34`](https://github.com/zumerlab/snapdom/commit/5f5ab345194832225e311421d177963ce3c4c59e)\n\n#### [v2.1.0](https://github.com/zumerlab/snapdom/compare/v2.0.2...v2.1.0)\n\n> 10 March 2026\n\n- fix(background): inline background-image inside shadow DOM hosts [`#379`](https://github.com/zumerlab/snapdom/pull/379)\n- Update URL handling to use location.origin in fonts.js [`#380`](https://github.com/zumerlab/snapdom/pull/380)\n- fix: use nodeMap for source-clone alignment in inlinePseudoElements [`#381`](https://github.com/zumerlab/snapdom/pull/381)\n- fix(background): properly inline background-image inside shadow DOM hosts [`#318`](https://github.com/zumerlab/snapdom/issues/318)\n- update demo site [`4de1850`](https://github.com/zumerlab/snapdom/commit/4de1850d84d1698e8574fe405007fb47d6a677ea)\n- feat: classify open issues by importance with priority labels and triage workflows [`246a4c4`](https://github.com/zumerlab/snapdom/commit/246a4c43eef13fe8b654e297f52a639a7ad670b1)\n- fix: Enhanced font embedding functionality for dynamically injected stylesheets [`3d4985a`](https://github.com/zumerlab/snapdom/commit/3d4985a6d40963c30ff188207a62ac1e287709ba)\n- fix: resolve CSS transform double-scale bug (issue #321) [`d41504b`](https://github.com/zumerlab/snapdom/commit/d41504b8dcf94454a331337c49d74928d533f49a)\n- fix: improve demo capture functionality with Safari support and locking mechanism [`2cb3856`](https://github.com/zumerlab/snapdom/commit/2cb3856e55f0f1d8e0d2ac050d549705203fc6ae)\n- refactor: update build configuration for legacy and ESM outputs, removing module structure and adding subpath exports [`94f6289`](https://github.com/zumerlab/snapdom/commit/94f62897054f37923c5cd3e4e2d3a57a0fde8db4)\n- docs: update README to reflect changes in SnapDOM ESM build structure and usage instructions [`8e5a710`](https://github.com/zumerlab/snapdom/commit/8e5a7103b45ae2d326a93218c977a371407d8cec)\n- fix: only change to location.origin when treating inline styles in font.js [`94c91c6`](https://github.com/zumerlab/snapdom/commit/94c91c61d57b79a083c75d27aa3025beb1dcb535)\n- fix: validate fallback image data before setting source [`2c754fe`](https://github.com/zumerlab/snapdom/commit/2c754fec37e3ce18c512ff3ee61e386fcf780589)\n- fix: ensure image is only appended if data URL is valid [`46957c5`](https://github.com/zumerlab/snapdom/commit/46957c51c49d766db5ad60357f5664a7cf500049)\n- fix: ensure valid CSS text is fetched for font links [`201209f`](https://github.com/zumerlab/snapdom/commit/201209faad857dd21a01ebc2ae5dc740a33819ce)\n- Merge pull request #301 from Amyuan23/fix/svg-root-font-size [`5bd53ba`](https://github.com/zumerlab/snapdom/commit/5bd53ba4887dba4664589b51651747809a89f8ab)\n- Merge pull request #350 from ZiuChen/fix/remote-katex-font [`3cbbd57`](https://github.com/zumerlab/snapdom/commit/3cbbd577eae0c751fbac41cd3b3ff0aeb251ca0e)\n- Merge pull request #378 from FlavioLimaMindera/fix-scale-image-issue-321 [`e53f2f8`](https://github.com/zumerlab/snapdom/commit/e53f2f8c4a83617a14c168c0c2615bde283d4696)\n- Fix: Inherit root font-size in SVG output [`3bdf300`](https://github.com/zumerlab/snapdom/commit/3bdf300ce417d56b928ea3c1b7258103a35f2445)\n- Merge pull request #374 from kohaiy/patch-1 [`0b21142`](https://github.com/zumerlab/snapdom/commit/0b21142b87d1874aaaa88bc7fc9630eb506ab958)\n\n#### [v2.0.2](https://github.com/zumerlab/snapdom/compare/v2.0.1...v2.0.2)\n\n> 20 January 2026\n\n- Fix bug when captured element is SVG. Closes #324 [`#324`](https://github.com/zumerlab/snapdom/issues/324)\n- Improve docs for blob [`#352`](https://github.com/zumerlab/snapdom/issues/352)\n\n#### [v2.0.1](https://github.com/zumerlab/snapdom/compare/v2.0.0...v2.0.1)\n\n> 26 November 2025\n\n- Fix spaces. Closes #326 [`#326`](https://github.com/zumerlab/snapdom/issues/326)\n- Fix download options. Closes #323 [`#323`](https://github.com/zumerlab/snapdom/issues/323)\n- Fix Safari Image Issue. See #330 [`ba80b6f`](https://github.com/zumerlab/snapdom/commit/ba80b6f66393886298cdb2fc7ce134d1824184f7)\n- Minify mjs version [`9155d4f`](https://github.com/zumerlab/snapdom/commit/9155d4fa2e2fc4bb6a0e3d7a991fc75818644084)\n- Add a re-export for preCache. See #332 [`acc5b79`](https://github.com/zumerlab/snapdom/commit/acc5b79a0c8d38de9f6dea5b98bf1179b54ef671)\n\n\n### [v2.0.0](https://github.com/zumerlab/snapdom/compare/v2.0.0-dev.4...v2.0.0)\n\n> 18 November 2025\n\n- V2 release!! [`#319`](https://github.com/zumerlab/snapdom/pull/319)\n\n\n#### [v2.0.0-dev.4](https://github.com/zumerlab/snapdom/compare/v2.0.0-dev.3...v2.0.0-dev.4)\n\n> 18 November 2025\n\n- Feature enable tree-shakeable code [`ebb7b6a`](https://github.com/zumerlab/snapdom/commit/ebb7b6add3b47c75a450e0264d628837303def5d)\n- Fix bug when img has height with % units. Closes #268 [`#268`](https://github.com/zumerlab/snapdom/issues/268)\n- Fix regression to process MathJax [`7ef116c`](https://github.com/zumerlab/snapdom/commit/7ef116cdbbfcba0793cd918b2ba8ad94e063f74f)\n- Fix bug See #316 [`7efbede`](https://github.com/zumerlab/snapdom/commit/7efbede5970ed09982c06f8cfa3fe45d990d8fdf)\n\n#### [v2.0.0-dev.3](https://github.com/zumerlab/snapdom/compare/v2.0.0-dev.2...v2.0.0-dev.3)\n\n> 11 November 2025\n\n- Reorganice helper functions [`d1fd982`](https://github.com/zumerlab/snapdom/commit/d1fd98240459f07897311a42e09c1ad3e3a48c62)\n- Perf improvement [`daf0eca`](https://github.com/zumerlab/snapdom/commit/daf0eca47c0d11828e1a702b6d64d8ab7450581d)\n- Fix placeholder dimensions when image loading fails [`e44b9d9`](https://github.com/zumerlab/snapdom/commit/e44b9d947efaf28fec8976dc13b398788d461d52)\n\n\n#### [v2.0.0-dev.2](https://github.com/zumerlab/snapdom/compare/v2.0.0-dev.1...v2.0.0-dev.2)\n\n> 9 November 2025\n\n- Integrate createBackground into toCanvas. Closes #297 [`#297`](https://github.com/zumerlab/snapdom/issues/297)\n- Add Chinese translation of README.md (readme_cn.md) [`#298`](https://github.com/zumerlab/snapdom/issues/298)\n- Adjust final dimensions when excludeMode: remove. See #294 [`a860827`](https://github.com/zumerlab/snapdom/commit/a8608271ffd9b891ec815fa7e3130c0e1be45307)\n- Improve material icon / symbols. See #304 [`526c4c8`](https://github.com/zumerlab/snapdom/commit/526c4c8e6874b2dab6110c8ac3361a29b1dc91de)\n- Add XHTML sanitize. See #282 [`0039301`](https://github.com/zumerlab/snapdom/commit/003930196ed6e11c5dd54fce75d814046a36637d)\n- Add detection to Baidu on iOS. Also detect other apps/browsers on iOS. See #295 [`97e6dff`](https://github.com/zumerlab/snapdom/commit/97e6dffa34440d157b0b2b1afc5267d7b15c1d7b)\n- add support for text-underline-offset. See #303 [`fb603bc`](https://github.com/zumerlab/snapdom/commit/fb603bca971a10577215c436b73ba5468a4255ae)\n- add support for text-underline-offset. See#303 [`0b93c0d`](https://github.com/zumerlab/snapdom/commit/0b93c0de7a720a7c6708a50a153de86ba6f2684e)\n- fix: improve CSS src property parsing in font faces [`dbe52a1`](https://github.com/zumerlab/snapdom/commit/dbe52a121a7d68441570c02ae32c607907e188dc)\n\n\n#### [v2.0.0-dev.1](https://github.com/zumerlab/snapdom/compare/v2.0.0-dev.0...v2.0.0-dev.1)\n\n> 23 October 2025\n\n- Add basic support for icons with ligature such as material-icons. Closes #275 [`#275`](https://github.com/zumerlab/snapdom/issues/275)\n- Replace straighten with outerTransforms, and noShadows with outerShadows [`902f032`](https://github.com/zumerlab/snapdom/commit/902f032a43ed4919701765d89818c7782902b403)\n- Fix straighten regression [`60c6569`](https://github.com/zumerlab/snapdom/commit/60c6569ebcfbc9ea562c9bddfe9f01c6ea4136db)\n\n\n#### [v2.0.0-dev.0](https://github.com/zumerlab/snapdom/compare/v1.9.14...v2.0.0-dev.0)\n\n> 14 October 2025\n\n- Document plugin system [`d87ac01`](https://github.com/zumerlab/snapdom/commit/d87ac01fcf0beb8779afbe2be709aa1b35cf7113)\n- First plugin and exporter draft [`5da0948`](https://github.com/zumerlab/snapdom/commit/5da09483b82e18ca0fc6873393b9d6830632fcfc)\n- Fix subpixel bug. See #261 [`465950b`](https://github.com/zumerlab/snapdom/commit/465950b18e68ce0faf94b229bd65511128cd18a7)\n- Update demos with plugins [`50e6c4f`](https://github.com/zumerlab/snapdom/commit/50e6c4f85d74bb769fcd7f753f92a3c5be4536c6)\n- Update plugin system [`4e21b47`](https://github.com/zumerlab/snapdom/commit/4e21b475fdc42c6eade9cb4dada5bb5ffeb71978)\n- Enhance external SVG defs. See #262 [`cd4a7fb`](https://github.com/zumerlab/snapdom/commit/cd4a7fbf0e2d9fc1651c06d5c5f5a3a8f0f54329)\n- First plugin system draft [`9c6b91b`](https://github.com/zumerlab/snapdom/commit/9c6b91bc4352de3d323c0746a4e3040058dad519)\n- Fix complex canvas render on Safari. See #263 [`2697207`](https://github.com/zumerlab/snapdom/commit/2697207c98373867bcbb91d4afb73d3820c878d3)\n- Enhance CSS vars detection. See #262 [`6655303`](https://github.com/zumerlab/snapdom/commit/665530377bceff05ff9c1570301019bd95370a9c)\n- Fix counter CSS reset and bug when exist background-image. See #265 [`3c29997`](https://github.com/zumerlab/snapdom/commit/3c299978e2a4cd4c2daf07d64de5772b28e880b8)\n- FIx excludeFonts defs. See #260 [`84b1770`](https://github.com/zumerlab/snapdom/commit/84b1770dd2e6e487e22afcd04c2d34cd0490528c)\n- Fix local register [`9c4508e`](https://github.com/zumerlab/snapdom/commit/9c4508e0cdeb445b76babd71483fe154e0e2ee3e)\n- Enable use built-in exporters in custom exporter [`5c6fe36`](https://github.com/zumerlab/snapdom/commit/5c6fe367101d8dfec710372d2b0a7362da3597a3)\n- Fix background-repeat. See #259 [`0ad5fa4`](https://github.com/zumerlab/snapdom/commit/0ad5fa4ee56e417016ce495ea299cf4a3c586f6a)\n- Fix export name format jpg -> jpeg [`47d532a`](https://github.com/zumerlab/snapdom/commit/47d532a98be096829b592295527c1a6428d6a5d8)\n- Update roadmap [`dff59b9`](https://github.com/zumerlab/snapdom/commit/dff59b9ea62fed09a9146fd1e9d897dace30a37b)\n- Fix local plugin registration [`0997618`](https://github.com/zumerlab/snapdom/commit/0997618fb2e716ead23bfbe4824bb8365987ccd4)\n\n\n#### [v1.9.14](https://github.com/zumerlab/snapdom/compare/v1.9.13...v1.9.14)\n\n> 5 October 2025\n\n- Recompile builds [`fca9e00`](https://github.com/zumerlab/snapdom/commit/fca9e00d49bb675d6b6103ba2de3f898c85c5578)\n\n\n#### [v1.9.13](https://github.com/zumerlab/snapdom/compare/v1.9.12-dev.4...v1.9.13)\n\n> 5 October 2025\n\n- Improve CSS vars detection. Closes #255 [`#255`](https://github.com/zumerlab/snapdom/issues/255)\n- Fix toImg() dimensions when scale==1. Closes #254 [`#254`](https://github.com/zumerlab/snapdom/issues/254)\n- Enhance web fonts detection on deph relative paths. See #253 [`e2a8c45`](https://github.com/zumerlab/snapdom/commit/e2a8c454fbab7590f39f77da544193f8e5af13ab)\n- Add two new options to control transforms and shadows on root element [`8c9a75f`](https://github.com/zumerlab/snapdom/commit/8c9a75f77940221107a6005e458514cca981b2eb)\n- Add toSvg() in replacement of toImg() [`10e2043`](https://github.com/zumerlab/snapdom/commit/10e2043182672b42dfbda4268fb17f75bc3b561a), [`122317e`](https://github.com/zumerlab/snapdom/commit/122317eb0301f8375cc23ea8f3fd2361d1b759a4)\n- Improve relative path detection. See #253 [`34158e0`](https://github.com/zumerlab/snapdom/commit/34158e0f5cf8f797cd49416f090d06d2d233542d)\n- Lint code [`c754981`](https://github.com/zumerlab/snapdom/commit/c7549812a018d28809e0e2b314c973abe0cd542c)\n- Lint tests [`ee974ed`](https://github.com/zumerlab/snapdom/commit/ee974ede694f324f674b688aa7cce16f7ec30a90)\n\n\n#### [v1.9.12-dev.4](https://github.com/zumerlab/snapdom/compare/v1.9.12-dev.3...v1.9.12-dev.4)\n\n> 30 September 2025\n\n- Add basic support to sticky elements. See #232 [`02893e6`](https://github.com/zumerlab/snapdom/commit/02893e60e7f3244c1274d64232e7dbf338a283ec)\n- Update types [`19317e6`](https://github.com/zumerlab/snapdom/commit/19317e6ff34599028e627f891ae5a2d28036bac1)\n- fix formating [`58ca761`](https://github.com/zumerlab/snapdom/commit/58ca7616e3e82ec81122804264466f33d79c45c2)\n- Enhance browser detection. See #251 [`cfe753c`](https://github.com/zumerlab/snapdom/commit/cfe753c280ab0c0cda8aca88978a550257caf23f)\n- Fix pseudo capture. See #252 [`e85678e`](https://github.com/zumerlab/snapdom/commit/e85678e54fac6736c3dac8a0eaac8f1607dcbb6a)\n- Merge pull request #249 from K1ender/dev [`e497bba`](https://github.com/zumerlab/snapdom/commit/e497bbae30e2c539c53715f9dd0bed585d10cf9a)\n\n\n\n#### [v1.9.12-dev.3](https://github.com/zumerlab/snapdom/compare/v1.9.12-dev.2...v1.9.12-dev.3)\n\n> 26 September 2025\n\n- Captures CSS shadows [`050365f`](https://github.com/zumerlab/snapdom/commit/050365f8ab2087a912c71c468b4b1c234b21dd6a)\n- Improve counter simulation [`4c9e21d`](https://github.com/zumerlab/snapdom/commit/4c9e21d6bc0135614b882e1940ce31b64c5e40b2)\n- Fix scale, width, height options [`8ef48cb`](https://github.com/zumerlab/snapdom/commit/8ef48cb2e038c286eea9b7ce2baafac30c062a5e)\n- Just run safariWarmup if it is needed [`a32846d`](https://github.com/zumerlab/snapdom/commit/a32846d6f48ab8c583b1f26c41d19f3cff67ab55)\n- Safari, in case of scale, width or height options use png to ensure fidelity [`0711a77`](https://github.com/zumerlab/snapdom/commit/0711a7774f6f545cd05e0cce86f3354fe377b02d)\n- Sanitize container [`a6ba396`](https://github.com/zumerlab/snapdom/commit/a6ba396c52406bf9c5dd0ffd27f9460cd34b028e)\n\n\n#### [v1.9.12-dev.2](https://github.com/zumerlab/snapdom/compare/v1.9.12-dev.1...v1.9.12-dev.2)\n\n> 22 September 2025\n\n- Fix margin collapsing in some cases. See #243 [`7fe0a3f`](https://github.com/zumerlab/snapdom/commit/7fe0a3ffe6e9827b276f0c0337c60c8c02c4129c)\n\n\n\n#### [v1.9.12-dev.1](https://github.com/zumerlab/snapdom/compare/v1.9.12-dev.0...v1.9.12-dev.1)\n\n> 20 September 2025\n\n- Modularize counters [`024a7f9`](https://github.com/zumerlab/snapdom/commit/024a7f9b2d1b4805c7b12b5cbb62f0200295cc8f)\n- Improve CSS counter() and counters() handling. See #120, see #235 [`8fb0385`](https://github.com/zumerlab/snapdom/commit/8fb03859301075ea9b096197ec5b4dbca4223a95)\n- Feat lineClamp. See #241 [`4082cd6`](https://github.com/zumerlab/snapdom/commit/4082cd6c39ff43bcb842a81768e11b858c5e8559)\n- Fix width/height options [`7cd2111`](https://github.com/zumerlab/snapdom/commit/7cd21114d1337e48b5d743cb94989feb1a1a0d20)\n- Fix bug that hangs snapDOM on some browsers. See #236 [`bc3c400`](https://github.com/zumerlab/snapdom/commit/bc3c400356a6f32f8d1d8a986c9a427e6dd13c7f)\n- Fix bug that overrides options.width/heigth. See #241 [`49fbb63`](https://github.com/zumerlab/snapdom/commit/49fbb63ac6c28a66a8e6d9076618bee7b6beab62)\n- Improve webFonts render. See #229 [`3082a3a`](https://github.com/zumerlab/snapdom/commit/3082a3ae019f424e127f3c065cbcfa7bad59bb39)\n- Feat. detect wechat browser. See #223 [`e7c4723`](https://github.com/zumerlab/snapdom/commit/e7c4723a24ad3a9c52da5a2e021c115b354bcf66)\n- Ensure donwload file measure. See #241 [`eed1995`](https://github.com/zumerlab/snapdom/commit/eed1995a56664c0ace5d94422ba6bb8b5ef82324)\n- Add iframe support [`ec59e4b`](https://github.com/zumerlab/snapdom/commit/ec59e4bad3dbb639cde37aed929dccb42b54e6b5)\n\n#### [v1.9.12-dev.0](https://github.com/zumerlab/snapdom/compare/v1.9.11...v1.9.12-dev.0)\n\n> 11 September 2025\n\n- Try fix fallback images [`67bedd3`](https://github.com/zumerlab/snapdom/commit/67bedd3c7cb6bda3e2291fe494805a58263e6dce)\n- Two separate mode: filterMode and excludeMode [`394e7f4`](https://github.com/zumerlab/snapdom/commit/394e7f4ca2171fb1028eb382b2331d4718f6a350)\n- Workaround Safari See #231 [`593ad59`](https://github.com/zumerlab/snapdom/commit/593ad59383d0b3adbcb139f6892ae321a08c60d5)\n- Try new approach for solve Safari fonts/images decoding [`5b77738`](https://github.com/zumerlab/snapdom/commit/5b7773847f02809826a9ed459321100cfbd50518)\n\n\n#### [v1.9.11](https://github.com/zumerlab/snapdom/compare/v1.9.10...v1.9.11)\n\n> 9 September 2025\n\n- Fix Safari bug that prevents capture [`6a43e59`](https://github.com/zumerlab/snapdom/commit/6a43e59d1c311452c7d16e1adc9bb12bb89132b4)\n\n\n#### [v1.9.10](https://github.com/zumerlab/snapdom/compare/v1.9.10-dev.2...v1.9.10)\n\n> 9 September 2025\n\n- Merge dev branch [`#225`](https://github.com/zumerlab/snapdom/pull/225)\n- Strip dev comments [`e02066b`](https://github.com/zumerlab/snapdom/commit/e02066b6ef8e6c2b1d50b86096500f914ac025af)\n- increase test coverage [`0c59fa0`](https://github.com/zumerlab/snapdom/commit/0c59fa0d276b7899cf2b721d32e7934e701df76b)\n- Update types defs [`648f4a9`](https://github.com/zumerlab/snapdom/commit/648f4a965106c58c6f63d384bf8db600a661146c)\n- Improves mask handling [`f3915ea`](https://github.com/zumerlab/snapdom/commit/f3915ea919b927b5f2ff0a9f3c865beb7b08b231)\n- fix backgroundColor regression [`21a6a39`](https://github.com/zumerlab/snapdom/commit/21a6a3923d81d2f733d6bc61136a9d4eda8f1a62)\n\n\n#### [v1.9.10-dev.2](https://github.com/zumerlab/snapdom/compare/v1.9.10-dev.1...v1.9.10-dev.2)\n\n> 8 September 2025\n\n- Fix cache disabled bug. Closes #221 [`#221`](https://github.com/zumerlab/snapdom/issues/221)\n- Add extra margin when element has transform [`6688eee`](https://github.com/zumerlab/snapdom/commit/6688eee661de2d91249f9db28948629f421b14b4)\n- Feat. handkles css trasnforms and scale rotate new props. Ref #216 [`d151da1`](https://github.com/zumerlab/snapdom/commit/d151da1993f1374d2bae16ed1a076a05f9ff8d45)\n- Add same-origin iframe support .See #222 [`f50720f`](https://github.com/zumerlab/snapdom/commit/f50720fe76d8d114c1de31ffe802ade1edd7060e)\n- Fix regression that doesnt reset origial translate [`800c427`](https://github.com/zumerlab/snapdom/commit/800c427d327f41fbcc9703dfa5a3e99b9b7c789f)\n- Fix duplicated values on textArea [`0915f8d`](https://github.com/zumerlab/snapdom/commit/0915f8d4f1b9e58800407ba28ad86e16b6cc4621)\n- ๅขžๅผบๅ›พๅƒๅค„็†ๅŠŸ่ƒฝ๏ผŒๆทปๅŠ ๅ›พๅƒๅŠ ่ฝฝๅคฑ่ดฅๆ—ถ็š„ๅŽๅค‡ๅ›พๅƒๆบๆ”ฏๆŒ๏ผŒๅนถ่ฎฐๅฝ•ๅŽŸๅง‹ๅ›พๅƒๅฐบๅฏธไปฅไพฟไบŽไฝฟ็”จใ€‚ๆ›ดๆ–ฐ็ฑปๅž‹ๅฎšไน‰ไปฅๅŒ…ๅซๆ–ฐ้€‰้กนใ€‚ [`011620a`](https://github.com/zumerlab/snapdom/commit/011620a3c8dbabed9c2e509766c4516205fbad66)\n- โœจ feat: [`e3a4556`](https://github.com/zumerlab/snapdom/commit/e3a4556a4085c0968bcce9f54d7d0fb9bbcfc6a7)\n- remove iframe limitation [`77abf8f`](https://github.com/zumerlab/snapdom/commit/77abf8f617fd1942565ee141406757c3704f45ae)\n- Merge pull request #220 from Jarvis2018/main [`adb6455`](https://github.com/zumerlab/snapdom/commit/adb6455fd6ff9db128dda5a59ac7556a16c851fa)\n- Merge pull request #215 from xiaobai-web715/dev [`37be327`](https://github.com/zumerlab/snapdom/commit/37be327f7c55ae20ee65001a8469f59284dbe12f)\n\n\n#### [v1.9.10-dev.1](https://github.com/zumerlab/snapdom/compare/v1.9.10-dev.0...v1.9.10-dev.1)\n\n> 3 September 2025\n\n- Fix flickering on Safari. Closes #197 [`#197`](https://github.com/zumerlab/snapdom/issues/197)\n- Prevents default svg values overwrite custom ones. Closes #217 [`#217`](https://github.com/zumerlab/snapdom/issues/217)\n- Feature: add placeholders option to disable rendered placeholder for iframes and fallback images. Closes #137 [`#137`](https://github.com/zumerlab/snapdom/issues/137)\n- FIx textarea styles. Closes #212 [`#212`](https://github.com/zumerlab/snapdom/issues/212)\n\n\n#### [v1.9.10-dev.0](https://github.com/zumerlab/snapdom/compare/v1.9.9...v1.9.10-dev.0)\n\n> 29 August 2025\n\n- Code refactor, cache improve, options centralized [`3bd7182`](https://github.com/zumerlab/snapdom/commit/3bd71822cf72614b3bb5993039482fdb05833ceb)\n- Improve performance and cache [`8882025`](https://github.com/zumerlab/snapdom/commit/88820259d4000fd36dbf4f59bb4940a6e12e6611)\n- Enhance font handling [`cb1e04a`](https://github.com/zumerlab/snapdom/commit/cb1e04af0551f097b44eeb84ba64a97e869b6f60)\n- Improve capture fidelity [`e05f027`](https://github.com/zumerlab/snapdom/commit/e05f027b8eb3b5b90e22a9d8ce7a7279f7b1614b)\n- fix font fetching [`70dd092`](https://github.com/zumerlab/snapdom/commit/70dd092adb14899031f0596d83ec354c9ab023b9)\n- Set compress as default [`7e5ab00`](https://github.com/zumerlab/snapdom/commit/7e5ab007f653f995b09ecbbf7711d69937fdef4a)\n- optimice code [`df52437`](https://github.com/zumerlab/snapdom/commit/df524379288fcb08dd19b8957d627a24b898685e)\n- Core update: increase X3 speed capture compared 1.9.9 [`94bc57d`](https://github.com/zumerlab/snapdom/commit/94bc57dc53cb63d82532467b4a041ab26da7481a)\n- Ensure custom fonts are capured [`8125689`](https://github.com/zumerlab/snapdom/commit/81256893249b2313edfebacb9d68ec6ed4fa9ed2)\n- Fix first custom font bug on Safari [`971d976`](https://github.com/zumerlab/snapdom/commit/971d9762dd73263689057e16fb47c00d2e0eba1b)\n- Fix bug that affects overall capture fidelity [`35539a5`](https://github.com/zumerlab/snapdom/commit/35539a50da67c30e28c39272a4c1efefbf24a2e2)\n- update to avoid vitest issues [`51ef80d`](https://github.com/zumerlab/snapdom/commit/51ef80d24b693ceee3e33d75e2b64ba7037e49ea)\n\n\n#### [v1.9.9](https://github.com/zumerlab/snapdom/compare/v1.9.8...v1.9.9)\n\n> 14 August 2025\n\n- Improves external fonts handling. Closes #139, closes #146, closes #186 [`#139`](https://github.com/zumerlab/snapdom/issues/139) [`#146`](https://github.com/zumerlab/snapdom/issues/146) [`#186`](https://github.com/zumerlab/snapdom/issues/186)\n- Handles srcset. Closes #190 [`#190`](https://github.com/zumerlab/snapdom/issues/190)\n- Fix speed regression. [`542ed00`](https://github.com/zumerlab/snapdom/commit/542ed003e3f35c19bd51fd5317f5572c12ba1ac8)\n- Handles Blob scr [`fe27239`](https://github.com/zumerlab/snapdom/commit/fe27239ac3efef9a0e9e7f0feeb223dd74fd9086). Closes [`#169`](https://github.com/zumerlab/snapdom/issues/169) \n\n\n#### [v1.9.8](https://github.com/zumerlab/snapdom/compare/v1.9.7...v1.9.8)\n\n> 10 August 2025\n\n- fix(types): update `preCache` [`#166`](https://github.com/zumerlab/snapdom/pull/166)\n- Fix defs & symbols outside captured element and hidden visibility, closes #178. Stabilize layout before cloning, closes #179. Fix inline styles, closes #177 [`#178`](https://github.com/zumerlab/snapdom/issues/178) [`#177`](https://github.com/zumerlab/snapdom/issues/177) [`#179`](https://github.com/zumerlab/snapdom/issues/179)\n- Fix icontFont alignment and rendered size. Closes #176 [`#176`](https://github.com/zumerlab/snapdom/issues/176)\n- Ensure skip empty pseudo elements. Closes #168 [`#168`](https://github.com/zumerlab/snapdom/issues/168)\n- Add basic border-image support. Closes #159 [`#159`](https://github.com/zumerlab/snapdom/issues/159)\n- Fix input css styles. Closes #144, closes #147 [`#144`](https://github.com/zumerlab/snapdom/issues/144) [`#147`](https://github.com/zumerlab/snapdom/issues/147)\n\n\n#### [v1.9.7](https://github.com/zumerlab/snapdom/compare/v1.9.6...v1.9.7)\n\n> 27 July 2025\n\n- Fix input css styles. Closes #144, closes #147 [`#144`](https://github.com/zumerlab/snapdom/issues/144) [`#147`](https://github.com/zumerlab/snapdom/issues/147)\n- Fix Safari scale. Closes #133 [`#133`](https://github.com/zumerlab/snapdom/issues/133)\n- Fix @font-face. Closes #145 [`#145`](https://github.com/zumerlab/snapdom/issues/145)\n- Fix edge case that generates blank images on Safari. Closes #129 [`#129`](https://github.com/zumerlab/snapdom/issues/129)\n- Improve pseudo elements detection. Closes # 143 [`539e488`](https://github.com/zumerlab/snapdom/commit/539e488c018a1bf7be05e0d9d969e350c9ed4291)\n- Remove default backgroundColor on download(). Ref dissussion #142 [`a875fe3`](https://github.com/zumerlab/snapdom/commit/a875fe31c1c1fc9a1d0d59ef2934b5930a6b7c88)\n- Update docs, thanks @kohaiy[`e38d67b`](https://github.com/zumerlab/snapdom/commit/e38d67b0102edf75a9f6e742bd45eacc43be51c1)\n\n#### [v1.9.6](https://github.com/zumerlab/snapdom/compare/v1.9.5...v1.9.6)\n\n> 20 July 2025\n\n- Add options argument to toBlob function. Thanks @rbbydotdev [`#118`](https://github.com/zumerlab/snapdom/pull/118)\n- Keep canvas CSS style. Fixes #121. [`#121`](https://github.com/zumerlab/snapdom/issues/121)\n- Improve: handles local() source font. See #114 [`c088aa0`](https://github.com/zumerlab/snapdom/commit/c088aa01422bf6ea6c1be70a88d09d540eae5038)\n- Improve webcomponent clone [`a0f37a5`](https://github.com/zumerlab/snapdom/commit/a0f37a57079057548e97a973bc6c734b4141769d)\n- Perf: unifies cache [`fe3a368`](https://github.com/zumerlab/snapdom/commit/fe3a3680ddef2736fc0176dcbc210fc760149038)\n- Improve cache handling. [`183ae2f`](https://github.com/zumerlab/snapdom/commit/183ae2f90debfb472164df01616f2558136a9f8f)\n- Adjust cache reset [`ff33ed3`](https://github.com/zumerlab/snapdom/commit/ff33ed374dcc02272225ca0154a84c304e6fc19a)\n- Improve regex [`1b4d5ad`](https://github.com/zumerlab/snapdom/commit/1b4d5ada356bce55caecd008df746f891d379c48)\n- Add primitive support to css counter. See #120 [`160bc2e`](https://github.com/zumerlab/snapdom/commit/160bc2eaf984051e23031664040ea91166bca061)\n- Fix bug background-color on export formats. See #90 [`47a34a9`](https://github.com/zumerlab/snapdom/commit/47a34a971cc875ec4d9eab772266df81a94438e7)\n- Fix regression textArea duplication [`1759fd0`](https://github.com/zumerlab/snapdom/commit/1759fd0ae1681e17df946d507ae4d704efff1b18)\n- Prevent process local ids. See #128 [`659e862`](https://github.com/zumerlab/snapdom/commit/659e8627bb6545f7843de1bcf808dc6bfb4dff3e)\n- Add node version and improve docs. See #123. Thanks @miusuncle [`e457bf6`](https://github.com/zumerlab/snapdom/commit/e457bf64ca2b4294aaf237c165f865ea50cc0c14)\n\n\n#### [v1.9.5](https://github.com/zumerlab/snapdom/compare/v1.9.3...v1.9.5)\n\n> 14 July 2025\n\n Fix: add type def for `SnapOptions`. Thanks @simon1uo [`#111`](https://github.com/zumerlab/snapdom/pull/111)\n- Add `checkbox.indeterminate`. Thanks @titoBouzout [`#104`](https://github.com/zumerlab/snapdom/pull/104)\n- Add mask-image CSS detection (closes #106) [`#106`](https://github.com/zumerlab/snapdom/issues/106)\n- Add slot detection (closes # 97) / Fix textarea content duplication (closes #110) [`#110`](https://github.com/zumerlab/snapdom/issues/110)\n- Add html-to-image to benchmark. Closes #103 [`#103`](https://github.com/zumerlab/snapdom/issues/103)\n\n#### [v1.8.0](https://github.com/zumerlab/snapdom/compare/v1.7.1...v1.8.0)\n\n> 30 June 2025\n\n- fix: encode same uri multiple times [`#65`](https://github.com/zumerlab/snapdom/pull/65)\n- Add Lucide to icon font detection [`#50`](https://github.com/zumerlab/snapdom/pull/50)\n- Avoid background-image logic duplication, closes #66 [`#66`](https://github.com/zumerlab/snapdom/issues/66)\n- Feat: sanitize rootElement to avoid CSS layout conflicts. Fixes #56, fixes #24 [`#56`](https://github.com/zumerlab/snapdom/issues/56) [`#24`](https://github.com/zumerlab/snapdom/issues/24)\n- Fix: canvas style props, closes #63 [`#63`](https://github.com/zumerlab/snapdom/issues/63)\n- Feat: handling @import and optimice cache, closes #61 [`#61`](https://github.com/zumerlab/snapdom/issues/61)\n- Compile .js to es2015, closes #58 [`#58`](https://github.com/zumerlab/snapdom/issues/58)\n- Fix background image handling, closes #57 [`#57`](https://github.com/zumerlab/snapdom/issues/57)\n- Improve inlinePseudoElements() to handle decorative properties, closes #55 [`#55`](https://github.com/zumerlab/snapdom/issues/55)\n- Add ::first-letter detection, closes #52 [`#52`](https://github.com/zumerlab/snapdom/issues/52)\n- test: increases coverage [`7ebc871`](https://github.com/zumerlab/snapdom/commit/7ebc87143101a9e5c8573f5ae76ede2884b59eb8)\n- Increase test coverage [`0c63478`](https://github.com/zumerlab/snapdom/commit/0c634785157ca9f611973976000b2f25ba7c9549)\n- Improve split multiple backgrounds [`0e67a9b`](https://github.com/zumerlab/snapdom/commit/0e67a9b72fb1ea7ea4a625d5f6dc2eb40438d7cd)\n- chore: update contributors list [`da22404`](https://github.com/zumerlab/snapdom/commit/da2240490b46ff4a0747f7db741b822dbc6ba3c4)\n- chore: update contributors list [`ec7c275`](https://github.com/zumerlab/snapdom/commit/ec7c27590318df95e7aa903ec7cbd92112b6c2e8)\n- Add check [`bf9a888`](https://github.com/zumerlab/snapdom/commit/bf9a888525e99dd663c17455755bb1478f1cb9d7)\n- Create update-contributors.js [`453dff0`](https://github.com/zumerlab/snapdom/commit/453dff07d0fd8f333627ed22a6e8a64373dbd62d)\n- Document width and height options [`0f7fb7a`](https://github.com/zumerlab/snapdom/commit/0f7fb7a02d9159a831a1dfc4cfbd9f6f3420bca7)\n- Create update-contributors.yml [`b48e334`](https://github.com/zumerlab/snapdom/commit/b48e334043e2a18212620df413b8742d72959468)\n- Update [`7da2892`](https://github.com/zumerlab/snapdom/commit/7da2892e69d04903111bbd24421a574e0034a83b)\n- Bumped version [`f322f51`](https://github.com/zumerlab/snapdom/commit/f322f51e2369bfdbbc1218c15e8375b0858bf73d)\n- Update README.md [`99c51a8`](https://github.com/zumerlab/snapdom/commit/99c51a89e2b486bbfc2810d94350428cbc9595f2)\n- Update update-contributors.js [`46a868b`](https://github.com/zumerlab/snapdom/commit/46a868baa45bd068be687b19bbd50cb06ceb9cf0)\n- Update update-contributors.js [`2a77e4c`](https://github.com/zumerlab/snapdom/commit/2a77e4c82dab36803b005cc6bceab06689a0e52c)\n- chore: update contributors list [`020eff8`](https://github.com/zumerlab/snapdom/commit/020eff873c18fc601c145f957bdc566403e18649)\n- Update update-contributors.js [`b4cf877`](https://github.com/zumerlab/snapdom/commit/b4cf87709f632be2e03f40b0af5661393f8f8793)\n- chore: update contributors list [`a2d28d9`](https://github.com/zumerlab/snapdom/commit/a2d28d952b18787d8e7aabf1b6d12cd8e45fa436)\n- Update doc [`7cf19de`](https://github.com/zumerlab/snapdom/commit/7cf19de5df40735b17958359251c481c1b517d8c)\n- Update update-contributors.js [`962c7c6`](https://github.com/zumerlab/snapdom/commit/962c7c6a4e23d5b8a0ef4c72111a617ffac3add4)\n- Update README.md [`183de8c`](https://github.com/zumerlab/snapdom/commit/183de8ce06c8df35fcbc3a32bb4204c14a657310)\n- Update README.md [`4352ae7`](https://github.com/zumerlab/snapdom/commit/4352ae75fb445857c14c64eb9a2ea7dbe82733c3)\n- Update update-contributors.js [`7dca4a1`](https://github.com/zumerlab/snapdom/commit/7dca4a1d3bbaacc14295f0e891095db1b39a76d0)\n- Update README.md [`ebb7f32`](https://github.com/zumerlab/snapdom/commit/ebb7f3204892d0d42713e7a2a14d261177a24d31)\n- Clean transform RootElement prop [`f293e5b`](https://github.com/zumerlab/snapdom/commit/f293e5be0e3ca6a97d43467976d80175d988916d)\n- Check if getStyle is iterable [`24dfe05`](https://github.com/zumerlab/snapdom/commit/24dfe056f6d35fe56ab39325b9c4492f84e64cd5)\n- chore: update contributors list [`8ac4aa1`](https://github.com/zumerlab/snapdom/commit/8ac4aa1f5a21373e73f86b22d0cdad8def37a8ea)\n- chore: update contributors list [`9987328`](https://github.com/zumerlab/snapdom/commit/9987328a796bb3eb70eb45cda4485dc8f5906688)\n- Update README.md [`4b52b87`](https://github.com/zumerlab/snapdom/commit/4b52b87e33b6a2f5d34460b2bff13e47ad011a73)\n\n#### [v1.7.1](https://github.com/zumerlab/snapdom/compare/v1.3.0...v1.7.1)\n\n> 19 June 2025\n\n- Improve inlineBackgroundImages to support multiple background-image values. [`#46`](https://github.com/zumerlab/snapdom/pull/46)\n- Add @font-face / FontFace() deteccion, closes #43 [`#43`](https://github.com/zumerlab/snapdom/issues/43)\n- update [`7c5441e`](https://github.com/zumerlab/snapdom/commit/7c5441ed4b2c602bcee60b314162f10412b260c5)\n- Add benchmark against html2canvas [`f196afe`](https://github.com/zumerlab/snapdom/commit/f196afeb43b23624680a77e52a80222a476f055d)\n- Add description [`bcae4af`](https://github.com/zumerlab/snapdom/commit/bcae4af3ce9e0953fea8410303e6d77fe3e01e3e)\n- Update issue templates [`352dba3`](https://github.com/zumerlab/snapdom/commit/352dba3e53452f09fb5d056a0c5fb9216701a0f4)\n- add options.crossOrigin [`49f8ac6`](https://github.com/zumerlab/snapdom/commit/49f8ac6524e3f54e67505d048a4ad34c529ab6c9)\n- Update issue templates [`d832dbd`](https://github.com/zumerlab/snapdom/commit/d832dbd14df70f07d3f3ec9b62016dc4d19d8c9a)\n- Create CONTRIBUTING.md [`9a7be15`](https://github.com/zumerlab/snapdom/commit/9a7be151f6b36abd5a582aebbcaacfe759716c3a)\n- handle multiple background image in inlineBackgroundImages function [`95a5490`](https://github.com/zumerlab/snapdom/commit/95a5490f2de5a139f39c0286111eb4e84990fd00)\n- Update issue templates [`b69b5a4`](https://github.com/zumerlab/snapdom/commit/b69b5a4cb72e3bd0ca5f8ae5b43448c8aab95752)\n- update [`57d6b15`](https://github.com/zumerlab/snapdom/commit/57d6b1529c56e890a43cc427f817c731784f6ca0)\n- Update index.html [`f002bca`](https://github.com/zumerlab/snapdom/commit/f002bca6ee6330ae9d6f2550d36ce59414de29b0)\n- Update issue templates [`24d478f`](https://github.com/zumerlab/snapdom/commit/24d478f32795b42b13f70b4319b5e2cd0ba3fa70)\n- Bumped version [`d109fd7`](https://github.com/zumerlab/snapdom/commit/d109fd739197bbc37089f5acfe65ed10a6f48050)\n- Add files via upload [`0aecf4e`](https://github.com/zumerlab/snapdom/commit/0aecf4e46093743ca854397509a8be91e08cb666)\n- update [`e444762`](https://github.com/zumerlab/snapdom/commit/e444762ddb173d283b761e13a1e5e16c8853e325)\n- Update index.html [`997dab3`](https://github.com/zumerlab/snapdom/commit/997dab3293df81dc906116acbf7b4f388a270b39)\n- update [`0355286`](https://github.com/zumerlab/snapdom/commit/035528627f957213d35f1c63d9f73528deb972cf)\n- Prevent erasing non url background [`0d626cb`](https://github.com/zumerlab/snapdom/commit/0d626cb32b8958afd7e7fd6f96d5a71c6795113b)\n- docs: add @jhbae200 as contributor for PR #46 [`afe3094`](https://github.com/zumerlab/snapdom/commit/afe3094360f14712a55c1be134ab993c094a670b)\n- Merge pull request #44 from elliots/support-use-credentials-on-images [`005f23e`](https://github.com/zumerlab/snapdom/commit/005f23e529962d73e7550f9f20e92bdc7c8eb8ab)\n- Update index.html [`25d970f`](https://github.com/zumerlab/snapdom/commit/25d970fb1142c07bf10c8d9eba491ecdb3bf3e37)\n- update [`ea624c3`](https://github.com/zumerlab/snapdom/commit/ea624c362acb7c0f953f3c202dd78f83c84742ce)\n- update [`1cf93b7`](https://github.com/zumerlab/snapdom/commit/1cf93b7e25eaa39878f2334e9c240e98ed98f847)\n- update [`3a547df`](https://github.com/zumerlab/snapdom/commit/3a547dfccc46e835ac585057d80b03ef5b324e7b)\n- update [`2d4380b`](https://github.com/zumerlab/snapdom/commit/2d4380b4c900d3230a44a5af0380d149e55caca9)\n- Update index.html [`bedf815`](https://github.com/zumerlab/snapdom/commit/bedf815299c421e3fe810a480f32bb291aae40b1)\n- Update issue templates [`48a56fb`](https://github.com/zumerlab/snapdom/commit/48a56fb7f5006b20e64de6a592ec38c7a59b3cd8)\n- Create config.yml [`51700c4`](https://github.com/zumerlab/snapdom/commit/51700c4457abb070df34520887991508ce32ad7f)\n- update image [`0ec788c`](https://github.com/zumerlab/snapdom/commit/0ec788c562011990a008edb2b8f9b0cf18da8940)\n\n#### [v1.3.0](https://github.com/zumerlab/snapdom/compare/v1.2.5...v1.3.0)\n\n> 14 June 2025\n\n- fix: double scaled images [`#38`](https://github.com/zumerlab/snapdom/pull/38)\n- Fix: background img & img base64 in pseudo elements, closes #36 [`#36`](https://github.com/zumerlab/snapdom/issues/36)\n- Feat: captures input values, closes #35 [`#35`](https://github.com/zumerlab/snapdom/issues/35)\n- Improve: Device Pixel Ratio handling, thanks @jswhisperer [`1a14f69`](https://github.com/zumerlab/snapdom/commit/1a14f69d340e935126b5388febe5d711c4b94e14)\n- Bumped version [`489be08`](https://github.com/zumerlab/snapdom/commit/489be081e6c7e50f1e4ba08d932d79c0ae242d45)\n- Update description [`4db784b`](https://github.com/zumerlab/snapdom/commit/4db784b4250b6eac6da8932e651872147fbc8bc1)\n\n#### [v1.2.5](https://github.com/zumerlab/snapdom/compare/v1.2.2...v1.2.5)\n\n> 9 June 2025\n\n- Fix duplicated font-icon when embedFonts is true, closes #30 [`#30`](https://github.com/zumerlab/snapdom/issues/30)\n- Fix url with encode url, closes #29 [`#29`](https://github.com/zumerlab/snapdom/issues/29)\n- Fix .toCanvas scale [`fb47284`](https://github.com/zumerlab/snapdom/commit/fb4728463a65620bd4f4f8f50cd8b2263ba7bbe7)\n- Bumped version [`75b917a`](https://github.com/zumerlab/snapdom/commit/75b917a4fefc5fa9b55da3c028c43955f0656087)\n- Update cdn [`37533a2`](https://github.com/zumerlab/snapdom/commit/37533a2c2a858000e93d8d33009241a4be5f8726)\n- add homepage [`aa85c5d`](https://github.com/zumerlab/snapdom/commit/aa85c5d9f1777c437b07e624d874f7f1a0fac6a9)\n\n#### [v1.2.2](https://github.com/zumerlab/snapdom/compare/v1.2.1...v1.2.2)\n\n> 4 June 2025\n\n- Patch: type script definitions, closes #23 [`#23`](https://github.com/zumerlab/snapdom/issues/23)\n- Bumped version [`548d7f3`](https://github.com/zumerlab/snapdom/commit/548d7f30a889d34ae4dac28a8dedc43262089325)\n\n#### [v1.2.1](https://github.com/zumerlab/snapdom/compare/v1.1.0...v1.2.1)\n\n> 31 May 2025\n\n- feat(embedFonts): also embed icon fonts when embedFonts is true [`#18`](https://github.com/zumerlab/snapdom/issues/18)\n- Fix expose snapdom and preCache on browser compilation, closes #26 [`#26`](https://github.com/zumerlab/snapdom/issues/26)\n- Improve icon-font conversion [`7bac4ee`](https://github.com/zumerlab/snapdom/commit/7bac4ee3b152d6364c218aaa6d2bed4ad9997943)\n- Fix compress mode [`652cfe9`](https://github.com/zumerlab/snapdom/commit/652cfe9a8947029e31db6b089829fe8da87c0b42)\n- Bumped version [`0cd7973`](https://github.com/zumerlab/snapdom/commit/0cd797320b92310d86df0ce6296706d1f7f0ad5d)\n- Remove some logs [`4348b39`](https://github.com/zumerlab/snapdom/commit/4348b390ab8bb88c59ba9b0d24adbe58051b277a)\n- Chore: delete old comments [`ff81a40`](https://github.com/zumerlab/snapdom/commit/ff81a40e8a1b4baa8bacca2ed2ec59124df40b6e)\n- Chore: add dry bump script [`5c421c7`](https://github.com/zumerlab/snapdom/commit/5c421c75a1775a3b8c1fbd6a688fcfe409f676af)\n\n#### [v1.1.0](https://github.com/zumerlab/snapdom/compare/v1.0.0...v1.1.0)\n\n> 28 May 2025\n\n- Add typescript declaration, closes #23 [`#23`](https://github.com/zumerlab/snapdom/issues/23)\n- Feat. support scrolling state, closes #20 [`#20`](https://github.com/zumerlab/snapdom/issues/20)\n- Fix bug by removing trim spaces, closes #21 [`#21`](https://github.com/zumerlab/snapdom/issues/21)\n- fix margin on mobile [`36297c8`](https://github.com/zumerlab/snapdom/commit/36297c89c085f605922f88ac5113f2f176c6a1a9)\n- mobile friendly [`42dada8`](https://github.com/zumerlab/snapdom/commit/42dada88bdbe886033890071e8e76499358a6b91)\n- Update index.html [`1bf3bc1`](https://github.com/zumerlab/snapdom/commit/1bf3bc1b15f4d28b50363c73410cea25ad589cda)\n- Create FUNDING.yml [`ddf914c`](https://github.com/zumerlab/snapdom/commit/ddf914c96727b3a82bbea4694d19dc0eb2b518e3)\n- Bumped version [`7a9f3d8`](https://github.com/zumerlab/snapdom/commit/7a9f3d8662099d15bcc2046ba88043eb3d3b1bfb)\n- add ga [`6d8a73f`](https://github.com/zumerlab/snapdom/commit/6d8a73fd52997e9e1a91944bd9a46d95c8c8507c)\n- Update index.html [`46e4b41`](https://github.com/zumerlab/snapdom/commit/46e4b41209c44766425e96fb9be94e1d1c08b6ae)\n- Update index.html [`1a2a04c`](https://github.com/zumerlab/snapdom/commit/1a2a04cbb3f4e81e2713d823d5b8dcdeb508591d)\n- Ignore generated screenshots tests [`cce8ead`](https://github.com/zumerlab/snapdom/commit/cce8ead47c470280761a34f7c98f9a2fd0796a34)\n- Update index.html [`5dd6749`](https://github.com/zumerlab/snapdom/commit/5dd67495df0a5cd48eda168565a81969d5639f40)\n- FIx bug that prevent scale on png format [`77a5265`](https://github.com/zumerlab/snapdom/commit/77a52651bd0ea8ccb451f199bd3d8f9e2478bf84)\n- Update README.md [`d8440f3`](https://github.com/zumerlab/snapdom/commit/d8440f3864931509f1b369d7e301d6ecccb63b14)\n- update [`ffa3a9a`](https://github.com/zumerlab/snapdom/commit/ffa3a9ad942987a5b52a7c9080914bed912db558)\n- Update README.md [`9c79e6e`](https://github.com/zumerlab/snapdom/commit/9c79e6e406ff9cb4df1539480e057b6828ef1788)\n- Update index.html [`7585674`](https://github.com/zumerlab/snapdom/commit/7585674ed21bb7009b84d1f948ceed2d5ed5ae69)\n- Update index.html [`8f4fb95`](https://github.com/zumerlab/snapdom/commit/8f4fb95a8f839159bd00c3338c7c3dc9fb23071c)\n- Update index.html [`eebc2bc`](https://github.com/zumerlab/snapdom/commit/eebc2bc01a6581f25995d5a9e946aa6bde08dfdc)\n\n### [v1.0.0](https://github.com/zumerlab/snapdom/compare/v1.0.0-pre.1747581859131...v1.0.0)\n\n> 19 May 2025\n\n- format code [`146fd95`](https://github.com/zumerlab/snapdom/commit/146fd95ec93d6b842acb28272aad43f787dc954a)\n- new demo gallery [`b8b2b6e`](https://github.com/zumerlab/snapdom/commit/b8b2b6eb4373999af5e67fc87418d6c6ab96199f)\n- Update code documentation [`6f933bc`](https://github.com/zumerlab/snapdom/commit/6f933bca3f1e9a9054f2e0e63807dfd52dda6270)\n- Add benchmarks section [`6becbb1`](https://github.com/zumerlab/snapdom/commit/6becbb12014d3cf33ec49264ca088486f08a5ce1)\n- Update documentation - add precache() [`a689566`](https://github.com/zumerlab/snapdom/commit/a6895665858f9eb574b0195dc918cef680c1651b)\n- Bumped version [`50d48c0`](https://github.com/zumerlab/snapdom/commit/50d48c05458e971a16375ca89da08eedad049e0c)\n- chore [`9f76e0c`](https://github.com/zumerlab/snapdom/commit/9f76e0cb1e7761604693588092ac8b1796cc892e)\n- update [`d84d395`](https://github.com/zumerlab/snapdom/commit/d84d39599abbd8fbd31727ff3a6650278ec0e28c)\n\n#### [v1.0.0-pre.1747581859131](https://github.com/zumerlab/snapdom/compare/v0.9.9...v1.0.0-pre.1747581859131)\n\n> 18 May 2025\n\n- Fix retina and scale bug, closes #15 [`#15`](https://github.com/zumerlab/snapdom/issues/15)\n- Improve public API, closes #16 [`#16`](https://github.com/zumerlab/snapdom/issues/16)\n- Fix bug to render canvas with precache compress mode, closes #13 [`#13`](https://github.com/zumerlab/snapdom/issues/13)\n- Update to reflect new public API [`b6024cb`](https://github.com/zumerlab/snapdom/commit/b6024cb800b848103411d4e8f4be9a7ffdb84f48)\n- Update tests and benckmarks [`f06a0f8`](https://github.com/zumerlab/snapdom/commit/f06a0f835e42036a19761152cf5bf941b53d2f27)\n- Add helper to check Safari [`6c9ee04`](https://github.com/zumerlab/snapdom/commit/6c9ee0484c598dd56d52e62f3de37499024ad5e5)\n- Remove preWarm [`d3bd582`](https://github.com/zumerlab/snapdom/commit/d3bd582c144775617fc6221c4504466eb4cd6bef)\n- Bumped version [`fb0855d`](https://github.com/zumerlab/snapdom/commit/fb0855d55eafdbcae79f537b7e1a51e2cd4d1dfc)\n\n#### [v0.9.9](https://github.com/zumerlab/snapdom/compare/v0.9.8...v0.9.9)\n\n> 14 May 2025\n\n- Bumped version [`676b00d`](https://github.com/zumerlab/snapdom/commit/676b00d71b5b51ea3a90c1aa95776a9b226378a3)\n- Fix bug on collectUsedTagNames() [`d627f18`](https://github.com/zumerlab/snapdom/commit/d627f18b6c0512545ab695bfae660cac8f64a9f0)\n- update [`c0e64d0`](https://github.com/zumerlab/snapdom/commit/c0e64d00905898660db68f054f5f5598c3fb9581)\n- Fix menu options [`8e87681`](https://github.com/zumerlab/snapdom/commit/8e876810c721fa0306c0f7d1b427ba6b111f8afe)\n\n#### [v0.9.8](https://github.com/zumerlab/snapdom/compare/v0.9.7...v0.9.8)\n\n> 14 May 2025\n\n- Add font example [`26c59c8`](https://github.com/zumerlab/snapdom/commit/26c59c864aeaae80b54c22ace32e96396cb9eae6)\n- Bumped version [`0819d89`](https://github.com/zumerlab/snapdom/commit/0819d89bc52af1417e31b54e695af8491b709969)\n- update tests [`3cd5b70`](https://github.com/zumerlab/snapdom/commit/3cd5b70427613d7d595dd15736cb545db6411d88)\n- Fix capture output format [`2afa36a`](https://github.com/zumerlab/snapdom/commit/2afa36a1c41ff798ded5b7f8ecef1632e08ab716)\n- Update index.html [`0345fb1`](https://github.com/zumerlab/snapdom/commit/0345fb1f177297db0e17141c5737f9b3b510e6ca)\n- Add demo site [`88d0faa`](https://github.com/zumerlab/snapdom/commit/88d0faa1b27db0d305e8b78c7280c8a5e83384a5)\n- Disable user zoom [`3813580`](https://github.com/zumerlab/snapdom/commit/381358028159c51b9ed0da11e25928da490170fb)\n\n#### [v0.9.7](https://github.com/zumerlab/snapdom/compare/v0.9.2...v0.9.7)\n\n> 14 May 2025\n\n- Update Dev branch [`#11`](https://github.com/zumerlab/snapdom/pull/11)\n- Delete functions [`c5040d9`](https://github.com/zumerlab/snapdom/commit/c5040d90b6276daa04e919ca4b0ecdf205f73af9)\n- improve cache handling [`27d7b19`](https://github.com/zumerlab/snapdom/commit/27d7b19cfafeed83f4b30a824638ee7edd63e10b)\n- add some examples [`3ce9dd2`](https://github.com/zumerlab/snapdom/commit/3ce9dd2807c8b84ed927c186621850a2518dfd2a)\n- Reorganice and add helpers [`c4f4182`](https://github.com/zumerlab/snapdom/commit/c4f4182a3e9ce636a2a263a05d75e64b33b25d7b)\n- Add tests [`455e7f2`](https://github.com/zumerlab/snapdom/commit/455e7f20e8a72f6a646a7d1e900f41fb22a18666)\n- Check if element to capture exists [`dfa96f2`](https://github.com/zumerlab/snapdom/commit/dfa96f2f720238fdff5df6e24b4572691ad6198f)\n- Improve capture logic [`79ab1b9`](https://github.com/zumerlab/snapdom/commit/79ab1b9e165dd08a34338fe0d837b0330be48539)\n- Update readme [`fdc2877`](https://github.com/zumerlab/snapdom/commit/fdc2877fd9e6fb73bc5d7bc9cf1f4a405f088be0)\n- Add preCache [`48bd910`](https://github.com/zumerlab/snapdom/commit/48bd910743a638ae8ce35ab7d617ad05a75d29a2)\n- Optimice [`cc638e7`](https://github.com/zumerlab/snapdom/commit/cc638e7f0f2e63a24eeee65ab4d87755e7207dec)\n- Bumped version [`3b26632`](https://github.com/zumerlab/snapdom/commit/3b266324c747c4bc139b99e4978493df79a5555c)\n- update [`111fdb4`](https://github.com/zumerlab/snapdom/commit/111fdb444b3c6d61dcb0e6bb2e21c871f5e73587)\n- Add cache Maps [`091484c`](https://github.com/zumerlab/snapdom/commit/091484c00941822684afc9148a59cb23e4b34627)\n- update [`bdbba7a`](https://github.com/zumerlab/snapdom/commit/bdbba7aeff458a60d5a83b5ead2d4f9402492fd3)\n- Update README.md [`c1756a9`](https://github.com/zumerlab/snapdom/commit/c1756a9192f8e3af90fd66da7e19c5fb883dbe0a)\n- Expose preCache [`1e96db1`](https://github.com/zumerlab/snapdom/commit/1e96db14c6c4e697361ceed2fb6f9c618801a138)\n- Chore [`38c08c0`](https://github.com/zumerlab/snapdom/commit/38c08c0c5a9eda486619855b9df47f33f490a921)\n- fix url [`bebec7f`](https://github.com/zumerlab/snapdom/commit/bebec7fd70141b3a82d41a5f6cc0849dcfb0c715)\n- Update README.md [`fb0ab3a`](https://github.com/zumerlab/snapdom/commit/fb0ab3ae528d4b37223e4eef03135e9be6a62b0b)\n- Update README.md [`1a76186`](https://github.com/zumerlab/snapdom/commit/1a76186d938a7a776a33c0e42ecc6813e86a9262)\n- Update README.md [`90d18a1`](https://github.com/zumerlab/snapdom/commit/90d18a165725ca3369fb5ebf48c281e0dd1377ae)\n\n#### [v0.9.2](https://github.com/zumerlab/snapdom/compare/v0.9.2-pre.1746130901718...v0.9.2)\n\n> 1 May 2025\n\n- chore [`2f788af`](https://github.com/zumerlab/snapdom/commit/2f788afd3b25ae6391af6a41086e0b5c3595a701)\n\n#### [v0.9.2-pre.1746130901718](https://github.com/zumerlab/snapdom/compare/v0.9.1...v0.9.2-pre.1746130901718)\n\n> 1 May 2025\n\n- This PR dramatically improves the speed and accuracy of snapDOM. It increases the result size and may produce some long tasks, but it provides a solid foundation to address these side effects in the future. [`#6`](https://github.com/zumerlab/snapdom/pull/6)\n- Add as draft new default approach - not implemented [`6f4ec41`](https://github.com/zumerlab/snapdom/commit/6f4ec41c7146525c9db5cfce103e131bb3f19616)\n- Add tests [`bdd5a7f`](https://github.com/zumerlab/snapdom/commit/bdd5a7f491561966cd04bf72ca74185dc8e5a766)\n- Feat: captures icon fonts [`7b39e5f`](https://github.com/zumerlab/snapdom/commit/7b39e5fb964bc023f6d6fad555b357de5ab113f0)\n- Omit process default styles - temporary [`2953196`](https://github.com/zumerlab/snapdom/commit/2953196e00aa6bf9d026df95089d3fc81812f24d)\n- update to v.0.9.2 [`e0179a1`](https://github.com/zumerlab/snapdom/commit/e0179a160e361a1e7d58ee5e83747f385cacb887)\n- Add options as Object and allow bgColor on jpg and webp [`e5abaa7`](https://github.com/zumerlab/snapdom/commit/e5abaa72de77f75ebe6901935c5f539cda253db2)\n- Update commented docs [`cfd2272`](https://github.com/zumerlab/snapdom/commit/cfd2272b065e8c11fff1a729c6cbec1f14000668)\n- Update README.md [`fef6751`](https://github.com/zumerlab/snapdom/commit/fef6751ffa90d379c8d829998277825daddc27b8)\n- update [`26ff7ea`](https://github.com/zumerlab/snapdom/commit/26ff7ea0528d569820bed8748520a7d02c6506cd)\n- Update README.md [`3fda999`](https://github.com/zumerlab/snapdom/commit/3fda999bbdefb5aa32186bb07c59249f9a86e7e9)\n- Update README.md [`8ee616b`](https://github.com/zumerlab/snapdom/commit/8ee616baf0059eefcf7e83e7930f5ab8f3850eb5)\n- Omit delay function - temporary [`0f04721`](https://github.com/zumerlab/snapdom/commit/0f04721c458ba921694ee38117b8e0b8231a8c1a)\n- update unpkg url [`13ce66b`](https://github.com/zumerlab/snapdom/commit/13ce66bfee83802c32edfd9019959540d260cf84)\n- Bumped version [`9e4f518`](https://github.com/zumerlab/snapdom/commit/9e4f51885bddebd5364fb4ca96647233304e0dc7)\n- Update README.md [`3733476`](https://github.com/zumerlab/snapdom/commit/373347665ca89249244038eaf48731f6d7ee37b8)\n- Update README.md [`00c74b0`](https://github.com/zumerlab/snapdom/commit/00c74b07881373275d8c0e5144696d594b031e7e)\n- Update README.md [`dd2c9c5`](https://github.com/zumerlab/snapdom/commit/dd2c9c5dd507a432e4dc75e67c5d2d311073e791)\n- Update README.md [`d271cf7`](https://github.com/zumerlab/snapdom/commit/d271cf77f5747ee69df07785fef34e8c5e63649e)\n- Update README.md [`02bf650`](https://github.com/zumerlab/snapdom/commit/02bf6506ae7e3cf03507e10d8f76983c07f39c66)\n\n#### [v0.9.1](https://github.com/zumerlab/snapdom/compare/v0.9.0...v0.9.1)\n\n> 27 April 2025\n\n- update [`d90fcb9`](https://github.com/zumerlab/snapdom/commit/d90fcb97bdeb75a2adaaa14b25bd6ebced4a70e2)\n- Bumped version [`99c286a`](https://github.com/zumerlab/snapdom/commit/99c286a8883ede66ff93aa96a62d008411e4ded0)\n- fix change files prop [`548adbe`](https://github.com/zumerlab/snapdom/commit/548adbe9490b0ed4fd7e9fb77e7d6e69a6dc28c9)\n- update [`f70a917`](https://github.com/zumerlab/snapdom/commit/f70a9173c7b11d659e6bf80c6ef60b9f71e652b7)\n\n#### v0.9.0\n\n> 27 April 2025\n\n- first public version [`aac1d99`](https://github.com/zumerlab/snapdom/commit/aac1d997836362dd008d6372173c9dd84a76197f)\n- Initial commit [`fb1c063`](https://github.com/zumerlab/snapdom/commit/fb1c06307b4b822bb898477beca46f88109ac196)" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2025 ZumerLab\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "

\n \n \n \n

\n\n

\n \n \"NPM\n \n \n \"NPM\n \n \n \"GitHub\n \n \n \"GitHub\n \n \n \"GitHub\n \n \n \"Sponsor\n \n\n \n \"License\"\n \n

\n\n

English | ็ฎ€ไฝ“ไธญๆ–‡

\n\n# SnapDOM\n\n**SnapDOM** is a next-generation **DOM Capture Engine** โ€” ultra-fast, modular, and extensible. \nIt converts any DOM subtree into a self-contained representation that can be exported to SVG, PNG, JPG, WebP, Canvas, Blob, or **any custom format** through plugins.\n\n* Full DOM capture\n* Embedded styles, pseudo-elements, and fonts\n* Export to SVG, PNG, JPG, WebP, `canvas`, or Blob\n* โšก Ultra fast, no dependencies\n* 100% based on standard Web APIs\n* Support same-origin `รฌframe`\n* Support CSS counter() and CSS counters()\n* Support `...` line-clamp\n\n## Demo\n\n[https://snapdom.dev](https://snapdom.dev)\n\n\n## Quick Start\n\n**Capture any DOM element to PNG in one line:**\n\n```js\nimport { snapdom } from '@zumer/snapdom';\n\nconst img = await snapdom.toPng(document.querySelector('#card'));\ndocument.body.appendChild(img);\n```\n\n**Reusable capture** (one clone, multiple exports):\n\n```js\nconst result = await snapdom(document.querySelector('#card'));\nawait result.toPng(); // โ†’ HTMLImageElement\nawait result.toSvg(); // โ†’ SVG as Image\nawait result.download({ format: 'jpg', filename: 'card.jpg' });\n```\n\n---\n\n## Capture Flow\n\nSnapDOM transforms your DOM element through these stages:\n\n```\nDOM Element\n โ†“\nClone\n โ†“\nStyles & Pseudo\n โ†“\nImages & Backgrounds\n โ†“\nFonts\n โ†“\nSVG foreignObject\n โ†“\ndata:image/svg+xml\n โ†“\ntoPng / toSvg / toBlob / download\n```\n\n| Stage | What happens |\n|-------|--------------|\n| **Clone** | Deep clone with styles, Shadow DOM, iframes. Exclude/filter nodes. |\n| **Styles & Pseudo** | Inline `::before`/`::after` as elements, resolve `counter()`/`counters()`. |\n| **Images & Backgrounds** | Fetch and inline external images/backgrounds as data URLs. |\n| **Fonts** | Embed `@font-face` (optional) and icon fonts. |\n| **SVG** | Wrap clone in ``, serialize to `data:image/svg+xml`. |\n| **Export** | Convert SVG to PNG/JPG/WebP/Blob or trigger download. |\n\nPlugin hooks: `beforeSnap` โ†’ `beforeClone` โ†’ `afterClone` โ†’ `beforeRender` โ†’ `afterRender` โ†’ `beforeExport` โ†’ `afterExport`.\n\n\n## Table of Contents\n\n- [Quick Start](#quick-start)\n- [Capture Flow](#capture-flow)\n- [Installation](#installation)\n - [NPM / Yarn (stable)](#npm--yarn-stable)\n - [NPM / Yarn (dev builds)](#npm--yarn-dev-builds)\n - [CDN (stable)](#cdn-stable)\n - [CDN (dev builds)](#cdn-dev-builds)\n- [Build Outputs](#build-outputs--tree-shaking)\n- [Usage](#usage)\n - [Reusable capture](#reusable-capture)\n - [One-step shortcuts](#one-step-shortcuts)\n- [API](#api)\n - [snapdom(el, options?)](#snapdomel-options)\n - [Shortcut methods](#shortcut-methods)\n- [Options](#options)\n - [debug](#debug)\n - [Fallback image on `` load failure](#fallback-image-on-img-load-failure)\n - [Dimensions (`scale`, `width`, `height`)](#dimensions-scale-width-height)\n - [Cross-Origin Images & Fonts (`useProxy`)](#cross-origin-images--fonts-useproxy)\n - [Fonts](#fonts)\n - [embedFonts](#embedfonts)\n - [localFonts](#localfonts)\n - [iconFonts](#iconfonts)\n - [excludeFonts](#excludefonts)\n - [Filtering nodes: `exclude` vs `filter`](#filtering-nodes-exclude-vs-filter)\n - [outerTransforms](#outerTransforms)\n - [outerShadows](#no-shadows)\n - [Cache control](#cache-control)\n- [preCache](#precache--optional-helper)\n- [Plugins (BETA)](#plugins-beta)\n - [Registering Plugins](#registering-plugins)\n - [Plugin Lifecycle Hooks](#plugin-lifecycle-hooks)\n - [Context Object](#context-object)\n - [Custom Exports via Plugins](#custom-exports-via-plugins)\n - [Example: Overlay Filter Plugin](#example-overlay-filter-plugin)\n - [Full Plugin Template](#full-plugin-template)\n- [Limitations](#limitations)\n- [โšก Performance Benchmarks (Chromium)](#performance-benchmarks)\n - [Simple elements](#simple-elements)\n - [Complex elements](#complex-elements)\n - [Run the benchmarks](#run-the-benchmarks)\n- [Roadmap](#roadmap)\n- [Development](#development)\n- [Contributors ๐Ÿ™Œ](#contributors)\n- [๐Ÿ’– Sponsors](#sponsors)\n- [Star History](#star-history)\n- [License](#license)\n\n\n\n## Installation\n\n### NPM / Yarn (stable)\n\n```bash\nnpm i @zumer/snapdom\nyarn add @zumer/snapdom\n```\n\n### NPM / Yarn (dev builds)\n\nFor early access to new features and fixes:\n\n```bash\nnpm i @zumer/snapdom@dev\nyarn add @zumer/snapdom@dev\n```\n\nโš ๏ธ The `@dev` tag usually includes improvements before they reach production, but may be less stable.\n\n\n### CDN (stable)\n\n```html\n\n\n\n\n\n```\n\n### CDN (dev builds)\n\n```html\n\n\n\n\n\n```\n\n## Build Outputs\n\n| Variant | File | Use case |\n|---------|------|----------|\n| **ESM** (tree-shakeable) | `dist/snapdom.mjs` | Bundlers (Vite, webpack), `import` |\n| **IIFE** (global) | `dist/snapdom.js` | Script tag, legacy `require` |\n\n**Bundler (npm):**\n```js\nimport { snapdom } from '@zumer/snapdom'; // โ†’ dist/snapdom.mjs\n```\n\n**Script tag (CDN):**\n```html\n\n\n```\n\n**Subpath imports** (lighter bundle if you only need one):\n```js\nimport { preCache } from '@zumer/snapdom/preCache';\nimport { plugins } from '@zumer/snapdom/plugins';\n```\n\n\n## Usage\n\n| Pattern | When to use |\n|---------|-------------|\n| **Reusable** `snapdom(el)` | One clone โ†’ many exports (PNG + JPG + download). |\n| **Shortcuts** `snapdom.toPng(el)` | Single export, less code. |\n\n### Reusable capture\n\nCapture once, export many times (no re-clone):\n\n```js\nconst el = document.querySelector('#target');\nconst result = await snapdom(el);\n\nconst img = await result.toPng();\ndocument.body.appendChild(img);\nawait result.download({ format: 'jpg', filename: 'my-capture.jpg' });\n```\n\n### One-step shortcuts\n\nDirect export when you need a single format:\n\n```js\nconst png = await snapdom.toPng(el);\nconst blob = await snapdom.toBlob(el);\ndocument.body.appendChild(png);\n```\n\n## API\n\n### `snapdom(el, options?)`\n\nReturns an object with reusable export methods:\n\n```js\n{\n url: string;\n toRaw(): string;\n toImg(): Promise; // deprecated \n toSvg(): Promise;\n toCanvas(): Promise;\n toBlob(options?): Promise;\n toPng(options?): Promise;\n toJpg(options?): Promise;\n toWebp(options?): Promise;\n download(options?): Promise;\n}\n```\n\n### Shortcut methods\n\n| Method | Description |\n| ------------------------------ | --------------------------------- |\n| `snapdom.toImg(el, options?)` | Returns an SVG `HTMLImageElement` (deprecated) |\n| `snapdom.toSvg(el, options?)` | Returns an SVG `HTMLImageElement` |\n| `snapdom.toCanvas(el, options?)` | Returns a `Canvas` |\n| `snapdom.toBlob(el, options?)` | Returns an SVG or raster `Blob` |\n| `snapdom.toPng(el, options?)` | Returns a PNG image |\n| `snapdom.toJpg(el, options?)` | Returns a JPG image |\n| `snapdom.toWebp(el, options?)` | Returns a WebP image |\n| `snapdom.download(el, options?)` | Triggers a download |\n\n### Exporter-specific options\n\nSome exporters accept a small set of **export-only options** in addition to the global capture options.\n\n#### `download()` \n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `filename` | `string` | `snapdom` | Download name. |\n| `format` | `\"png\" \\| \"jpeg\" \\| \"jpg\" \\| \"webp\" \\| \"svg\"` | `\"png\"` | Output format for the downloaded file. |\n\n**Example:**\n\n```js\nawait result.download({\n format: 'jpg',\n quality: 0.92,\n filename: 'my-capture'\n});\n```\n\n#### `toBlob()`\n\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `type` | `\"svg\" \\| \"png\" \\| \"jpeg\" \\| \"jpg\" \\| \"webp\"` | `\"svg\"` | Blob type to generate. |\n\n**Example:**\n\n```js\nconst blob = await result.toBlob({ type: 'jpeg', quality: 0.92 });\n```\n\n## Options\n\nAll capture methods accept an `options` object:\n\n\n| Option | Type | Default | Description |\n| ----------------- | -------- | -------- | ----------------------------------------------- |\n| `debug` | boolean | `false` | When `true`, logs suppressed errors to `console.warn` for troubleshooting |\n| `fast` | boolean | `true` | Skips small idle delays for faster results |\n| `embedFonts` | boolean | `false` | Inlines non-icon fonts (icon fonts always on) |\n| `localFonts` | array | `[]` | Local fonts `{ family, src, weight?, style? }` |\n| `iconFonts` | string\\|RegExp\\|Array | `[]` | Extra icon font matchers |\n| `excludeFonts` | object | `{}` | Exclude families/domains/subsets during embedding |\n| `scale` | number | `1` | Output scale multiplier |\n| `dpr` | number | `devicePixelRatio` | Device pixel ratio |\n| `width` | number | - | Output width |\n| `height` | number | - | Output height |\n| `backgroundColor` | string | `\"#fff\"` | Fallback color for JPG/WebP |\n| `quality` | number | `1` | Quality for JPG/WebP (0 to 1) |\n| `useProxy` | string | `''` | Proxy base for CORS fallbacks |\n| `exclude` | string[] | - | CSS selectors to exclude |\n| `excludeMode` | `\"hide\"`\\|`\"remove\"` | `\"hide\"` | How `exclude` is applied |\n| `filter` | function | - | Custom predicate `(el) => boolean` |\n| `filterMode` | `\"hide\"`\\|`\"remove\"` | `\"hide\"` | How `filter` is applied |\n| `cache` | string | `\"soft\"` | `disabled` \\| `soft` \\| `auto` \\| `full` |\n| `placeholders` | boolean | `true` | Show placeholders for images/CORS iframes |\n| `fallbackURL` | string \\| function | - | Fallback image for `` load failure |\n| `outerTransforms` | boolean | `true` | When `false` removes `translate/rotate` but preserves `scale/skew`, producing a flat, reusable capture |\n| `outerShadows` | boolean | `false` | Do not expand the rootโ€™s bounding box for shadows/blur/outline, and strip those visual effects from the cloned root |\n\n| `safariWarmupAttempts` | number | `3` | Safari only: iterations to prime font/decode (WebKit #219770). Use `1` if 3 causes lag |\n\n### debug\n\nWhen `debug: true`, SnapDOM logs normally suppressed errors to `console.warn` (with the `[snapdom]` prefix). Useful for troubleshooting capture issues (canvas failures, blob resolution, style stripping, etc.) without noisy output in production.\n\n```js\nawait snapdom.toPng(el, { debug: true });\n```\n\n### Fallback image on `` load failure\n\nProvide a default image for failed `` loads. You can pass a fixed URL or a callback that receives measured dimensions and returns a URL (handy to generate dynamic placeholders).\n\n```js\n// 1) Fixed URL fallback\nawait snapdom.toSvg(element, {\n fallbackURL: '/images/fallback.png'\n});\n\n// 2) Dynamic placeholder via callback\nawait snapdom.toSvg(element, {\n fallbackURL: ({ width: 300, height: 150 }) =>\n `https://placehold.co/${width}x${height}`\n});\n\n// 3) With proxy (if your fallback host has no CORS)\nawait snapdom.toSvg(element, {\n fallbackURL: ({ width = 300, height = 150 }) =>\n `https://dummyimage.com/${width}x${height}/cccccc/666.png&text=img`,\n useProxy: 'https://proxy.corsfix.com/?'\n});\n```\n\nNotes:\n- If the fallback image also fails to load, snapDOM replaces the `` with a placeholder block preserving width/height.\n- Width/height used by the callback are gathered from the original element (dataset, style/attrs, etc.) when available.\n\n\n### Dimensions (`scale`, `width`, `height`)\n\n* If `scale` is provided, it **takes precedence** over `width`/`height`.\n* If only `width` is provided, height scales proportionally (and vice versa).\n* Providing both `width` and `height` forces an exact size (may distort).\n\n### Cross-Origin Images & Fonts (`useProxy`)\n\nBy default snapDOM tries `crossOrigin=\"anonymous\"` (or `use-credentials` for same-origin). If an asset is CORS-blocked, you can set `useProxy` to a prefix URL that forwards the actual `src`:\n\n```js\nawait snapdom.toPng(el, {\n useProxy: 'https://proxy.corsfix.com/?' // Note: Any cors proxy could be used 'https://proxy.corsfix.com/?'\n});\n```\n\n\n* The proxy is only used as a **fallback**; same-origin and CORS-enabled assets skip it.\n\n### Fonts\n\n#### `embedFonts`\nWhen `true`, snapDOM embeds **non-icon** `@font-face` rules detected as used within the captured subtree. Icon fonts (Font Awesome, Material Icons, etc.) are embedded **always**.\n\n#### `localFonts`\nIf you serve fonts yourself or have data URLs, you can declare them here to avoid extra CSS discovery:\n\n```js\nawait snapdom.toPng(el, {\n embedFonts: true,\n localFonts: [\n { family: 'Inter', src: '/fonts/Inter-Variable.woff2', weight: 400, style: 'normal' },\n { family: 'Inter', src: '/fonts/Inter-Italic.woff2', style: 'italic' }\n ]\n});\n```\n\n#### `iconFonts`\nAdd custom icon families (names or regex matchers). Useful for private icon sets:\n\n```js\nawait snapdom.toPng(el, {\n iconFonts: ['MyIcons', /^(Remix|Feather) Icons?$/i]\n});\n```\n\n#### `excludeFonts`\nSkip specific non-icon fonts to speed up capture or avoid unnecessary downloads.\n\n```js\nawait snapdom.toPng(el, {\n embedFonts: true,\n excludeFonts: {\n families: ['Noto Serif', 'SomeHeavyFont'], // skip by family name\n domains: ['fonts.gstatic.com', 'cdn.example'], // skip by source host\n subsets: ['cyrillic-ext'] // skip by unicode-range subset tag\n }\n});\n```\n*Notes*\n- `excludeFonts` only applies to **non-icon** fonts. Icon fonts are always embedded.\n- Matching is case-insensitive for `families`. Hosts are matched by substring against the resolved URL.\n\n\n#### Filtering nodes: `exclude` vs `filter`\n\n* `exclude`: remove by **selector**.\n* `excludeMode`: `hide` applies `visibility:hidden` CSS rule on excluded nodes and the layout remains as the original. `remove` do not clone excluded nodes at all.\n* `filter`: advanced predicate per element (return `false` to drop).\n* `filterMode`: `hide` applies `visibility:hidden` CSS rule on filtered nodes and the layout remains as the original. `remove` do not clone filtered nodes at all.\n\n**Example: filter out elements with `display:none`:**\n```js\n/**\n * Example filter: skip elements with display:none\n * @param {Element} el\n * @returns {boolean} true = keep, false = exclude\n */\nfunction filterHidden(el) {\n const cs = window.getComputedStyle(el);\n if (cs.display === 'none') return false;\n return true;\n}\n\nawait snapdom.toPng(document.body, { filter: filterHidden });\n```\n\n**Example with `exclude`:** remove banners or tooltips by selector\n```js\nawait snapdom.toPng(el, {\n exclude: ['.cookie-banner', '.tooltip', '[data-test=\"debug\"]']\n});\n```\n\n### outerTransforms \n\nWhen capturing rotated or translated elements, you may want use **outerTransforms: false** option if you want to eliminate those external transforms. So, the output is **flat, upright, and ready** to use elsewhere.\n\n- **`outerTransforms: true (default)`** \n **Keeps the original `transforms` and `rotate`**. \n \n\n### outerShadows\n- **`outerShadows: false (default)`** \n Prevents expanding the bounding box for shadows, blur, or outline on the root, and also strips `box-shadow`, `text-shadow`, `filter: blur()/drop-shadow()`, and `outline` from the cloned root. \n\n> ๐Ÿ’ก **Tip:** Using both (`outerTransforms: false` + `outerShadows: false`) produces a strict, minimal bounding box with no visual bleed.\n\n**Example**\n\n```js\n// outerTransforms and remove shadow bleed\nawait snapdom.toSvg(el, { outerTransforms: true, outerShadows: true });\n```\n\n## Cache control\n\nSnapDOM maintains internal caches for images, backgrounds, resources, styles, and fonts.\nYou can control how they are cleared between captures using the `cache` option:\n\n| Mode | Description |\n| ----------- | --------------------------------------------------------------------------- |\n| `\"disabled\"`| No cache |\n| `\"soft\"` | Clears session caches (`styleMap`, `nodeMap`, `styleCache`) _(default)_ |\n| `\"auto\"` | Minimal cleanup: only clears transient maps |\n| `\"full\"` | Keeps all caches (nothing is cleared, maximum performance) |\n\n**Examples:**\n\n```js\n// Use minimal but fast cache\nawait snapdom.toPng(el, { cache: 'auto' });\n\n// Keep everything in memory between captures\nawait snapdom.toPng(el, { cache: 'full' });\n\n// Force a full cleanup on every capture\nawait snapdom.toPng(el, { cache: 'disabled' });\n```\n\n## `preCache()` โ€“ Optional helper\n\nPreloads external resources to avoid first-capture stalls (helpful for big/complex trees).\n\n```js\nimport { preCache } from '@zumer/snapdom';\n\nawait preCache({\n root: document.body,\n embedFonts: true,\n localFonts: [{ family: 'Inter', src: '/fonts/Inter.woff2', weight: 400 }],\n useProxy: 'https://proxy.corsfix.com/?'\n});\n```\n\n## Plugins (BETA)\n\nSnapDOM includes a lightweight **plugin system** that allows you to extend or override behavior at any stage of the capture and export process โ€” without touching the core library.\n\nA plugin is a simple object with a unique `name` and one or more lifecycle **hooks**.\nHooks can be synchronous or `async`, and they receive a shared **`context`** object.\n\n### Registering Plugins\n\n**Global registration** (applies to all captures):\n\n```js\nimport { snapdom } from '@zumer/snapdom';\n\n// You can register instances, factories, or [factory, options]\nsnapdom.plugins(\n myPluginInstance,\n [myPluginFactory, { optionA: true }],\n { plugin: anotherFactory, options: { level: 2 } }\n);\n```\n\n**Per-capture registration** (only for that specific call):\n\n```js\nconst out = await snapdom(element, {\n plugins: [\n [overlayFilterPlugin, { color: 'rgba(0,0,0,0.25)' }],\n [myFullPlugin, { providePdf: true }]\n ]\n});\n```\n\n* **Execution order = registration order** (first registered, first executed).\n* **Per-capture plugins** run **before** global ones.\n* Duplicates are automatically skipped by `name`; a per-capture plugin with the same `name` overrides its global version.\n\n### Plugin Lifecycle Hooks\n\nHooks run in capture order (see [Capture Flow](#capture-flow)):\n\n| Hook | Stage | Purpose |\n|------|-------|---------|\n| `beforeSnap` | Start | Adjust options before any work. |\n| `beforeClone` | Pre-clone | Before DOM clone (modify live DOM carefully). |\n| `afterClone` | Post-clone | Modify cloned tree safely (e.g. inject overlay). |\n| `beforeRender` | Pre-serialize | Right before SVG โ†’ data URL. |\n| `afterRender` | Post-serialize | Inspect `context.svgString` / `context.dataURL`. |\n| `beforeExport` | Per export | Before each `toPng`, `toSvg`, etc. |\n| `afterExport` | Per export | Transform returned result. |\n| `afterSnap` | Once | After first export; cleanup. |\n| `defineExports` | Setup | Add custom exporters (e.g. `toPdf`). |\n\n> Returned values from `afterExport` are chained to the next plugin (transform pipeline).\n\n### Context Object\n\nEvery hook receives a single `context` object that contains normalized capture state:\n\n* **Input & options:**\n `element`, `debug`, `fast`, `scale`, `dpr`, `width`, `height`, `backgroundColor`, `quality`, `useProxy`, `cache`, `outerTransforms`, `outerShadows`, `safariWarmupAttempts`, `embedFonts`, `localFonts`, `iconFonts`, `excludeFonts`, `exclude`, `excludeMode`, `filter`, `filterMode`, `fallbackURL`.\n\n* **Intermediate values (depending on stage):**\n `clone`, `classCSS`, `styleCache`, `fontsCSS`, `baseCSS`, `svgString`, `dataURL`.\n\n* **During export:**\n `context.export = { type, options, url }`\n where `type` is the exporter name (`\"png\"`, `\"jpeg\"`, `\"svg\"`, `\"blob\"`, etc.), and `url` is the serialized SVG base.\n\n> You may safely modify `context` (e.g., override `backgroundColor` or `quality`) โ€” but do so early (`beforeSnap`) for global effects or in `beforeExport` for single-export changes.\n\n\n## Custom Exports via Plugins\n\nPlugins can add new exports using `defineExports(context)`.\nFor each export key you return (e.g., `\"pdf\"`), SnapDOM automatically exposes a helper method named **`toPdf()`** on the capture result.\n\n**Register the plugin (global or per capture):**\n\n```js\nimport { snapdom } from '@zumer/snapdom';\n\n// global\nsnapdom.plugins(pdfExportPlugin());\n\n// or per capture\nconst out = await snapdom(element, { plugins: [pdfExportPlugin()] });\n```\n\n**Call the custom export:**\n\n```js\nconst out = await snapdom(document.querySelector('#report'));\n\n// because the plugin returns { pdf: async (ctx, opts) => ... }\nconst pdfBlob = await out.toPdf({\n // exporter-specific options (width, height, quality, filename, etc.)\n});\n```\n\n### Example: Overlay Filter Plugin\n\nAdds a translucent overlay or color filter **only** to the captured clone (not your live DOM).\nUseful for highlighting or dimming sections before export.\n\n```js\n/**\n * Ultra-simple overlay filter for SnapDOM (HTML-only).\n * Inserts a full-size
overlay on the cloned root.\n *\n * @param {{ color?: string; blur?: number }} [options]\n * color: overlay color (rgba/hex/hsl). Default: 'rgba(0,0,0,0.25)'\n * blur: optional blur in px (default: 0)\n */\nexport function overlayFilterPlugin(options = {}) {\n const color = options.color ?? 'rgba(0,0,0,0.25)';\n const blur = Math.max(0, options.blur ?? 0);\n\n return {\n name: 'overlay-filter',\n\n /**\n * Add a full-coverage overlay to the cloned HTML root.\n * @param {any} context\n */\n async afterClone(context) {\n const root = context.clone;\n if (!(root instanceof HTMLElement)) return; // HTML-only\n\n // Ensure containing block so absolute overlay anchors to the root\n if (getComputedStyle(root).position === 'static') {\n root.style.position = 'relative';\n }\n\n const overlay = document.createElement('div');\n overlay.style.position = 'absolute';\n overlay.style.left = '0';\n overlay.style.top = '0';\n overlay.style.right = '0';\n overlay.style.bottom = '0';\n overlay.style.background = color;\n overlay.style.pointerEvents = 'none';\n if (blur) overlay.style.filter = `blur(${blur}px)`;\n\n root.appendChild(overlay);\n }\n };\n}\n\n```\n\n**Usage:**\n\n```js\nimport { snapdom } from '@zumer/snapdom';\n\n// Global registration\nsnapdom.plugins([overlayFilterPlugin, { color: 'rgba(0,0,0,0.3)', blur: 2 }]);\n\n// Per-capture\nconst out = await snapdom(document.querySelector('#card'), {\n plugins: [[overlayFilterPlugin, { color: 'rgba(255,200,0,0.15)' }]]\n});\n\nconst png = await out.toPng();\ndocument.body.appendChild(png);\n```\n\n> The overlay is injected **only in the cloned tree**, never in your live DOM, ensuring perfect fidelity and zero flicker.\n\n\n### Full Plugin Template\n\nUse this as a starting point for custom logic or exporters.\n\n```js\nexport function myPlugin(options = {}) {\n return {\n /** Unique name used for de-duplication/overrides */\n name: 'my-plugin',\n\n /** Early adjustments before any clone/style work. */\n async beforeSnap(context) {},\n\n /** Before subtree cloning (use sparingly if touching the live DOM). */\n async beforeClone(context) {},\n\n /** After subtree cloning (safe to modify the cloned tree). */\n async afterClone(context) {},\n\n /** Right before serialization (SVG/dataURL). */\n async beforeRender(context) {},\n\n /** After serialization; inspect context.svgString/context.dataURL if needed. */\n async afterRender(context) {},\n\n /** Before EACH export call (toPng/toSvg/toBlob/...). */\n async beforeExport(context) {},\n\n /**\n * After EACH export call.\n * If you return a value, it becomes the result for the next plugin (chaining).\n */\n async afterExport(context, result) { return result; },\n\n /**\n * Define custom exporters (auto-added as helpers like out.toPdf()).\n * Return a map { [key: string]: (ctx:any, opts:any) => Promise }.\n */\n async defineExports(context) { return {}; },\n\n /** Runs ONCE after the FIRST export finishes (cleanup). */\n async afterSnap(context) {}\n };\n}\n```\n\n**Quick recap:**\n\n* Plugins can modify capture behavior (`beforeSnap`, `afterClone`, etc.).\n* You can inject visuals or transformations safely into the cloned tree.\n* New exporters defined in `defineExports()` automatically become helpers like `out.toPdf()`.\n* All hooks can be asynchronous, run in order, and share the same `context`.\n\n\n## Limitations\n\n* External images should be CORS-accessible (use `useProxy` option for handling CORS denied)\n* When WebP format is used on Safari, it will fallback to PNG rendering.\n* `@font-face` CSS rule is well supported, but if need to use JS `FontFace()`, see this workaround [`#43`](https://github.com/zumerlab/snapdom/issues/43)\n* **Safari**: captures with `embedFonts` or background/mask images run slower due to [WebKit #219770](https://bugs.webkit.org/show_bug.cgi?id=219770) (font decode timing). SnapDOM does pre-captures + `drawImage` to prime the pipeline; configurable via `safariWarmupAttempts` (default 3).\n* **Custom scrollbar styles** (`::-webkit-scrollbar`): Applied only when the element has *not* been scrolled. When scrolled, the viewport content is captured without the scrollbar.\n\n\n## Performance Benchmarks\n\n**Setup.** Vitest benchmarks on Chromium, repo tests. Hardware may affect results.\nValues are **average capture time (ms)** โ†’ lower is better.\n\n### Simple elements\n\n| Scenario | SnapDOM current | SnapDOM v1.9.9 | html2canvas | html-to-image |\n| ------------------------ | --------------- | -------------- | ----------- | ------------- |\n| Small (200ร—100) | **0.5 ms** | 0.8 ms | 67.7 ms | 3.1 ms |\n| Modal (400ร—300) | **0.5 ms** | 0.8 ms | 75.5 ms | 3.6 ms |\n| Page View (1200ร—800) | **0.5 ms** | 0.8 ms | 114.2 ms | 3.3 ms |\n| Large Scroll (2000ร—1500) | **0.5 ms** | 0.8 ms | 186.3 ms | 3.2 ms |\n| Very Large (4000ร—2000) | **0.5 ms** | 0.9 ms | 425.9 ms | 3.3 ms |\n\n\n### Complex elements\n\n| Scenario | SnapDOM current | SnapDOM v1.9.9 | html2canvas | html-to-image |\n| ------------------------ | --------------- | -------------- | ----------- | ------------- |\n| Small (200ร—100) | **1.6 ms** | 3.3 ms | 68.0 ms | 14.3 ms |\n| Modal (400ร—300) | **2.9 ms** | 6.8 ms | 87.5 ms | 34.8 ms |\n| Page View (1200ร—800) | **17.5 ms** | 50.2 ms | 178.0 ms | 429.0 ms |\n| Large Scroll (2000ร—1500) | **54.0 ms** | 201.8 ms | 735.2 ms | 984.2 ms |\n| Very Large (4000ร—2000) | **171.4 ms** | 453.7 ms | 1,800.4 ms | 2,611.9 ms |\n\n\n### Run the benchmarks\n\n```sh\ngit clone https://github.com/zumerlab/snapdom.git\ncd snapdom\nnpm install\nnpm run test:benchmark\n```\n\n\n## Roadmap\n\nPlanned improvements for future versions of SnapDOM:\n\n* [X] **Implement plugin system**\n SnapDOM will support external plugins to extend or override internal behavior (e.g. custom node transformers, exporters, or filters).\n\n* [ ] **Refactor to modular architecture**\n Internal logic will be split into smaller, focused modules to improve maintainability and code reuse.\n\n* [X] **Decouple internal logic from global options**\n Functions will be redesigned to avoid relying directly on `options`. A centralized capture context will improve clarity, autonomy, and testability. See [`next` branch](https://github.com/zumerlab/snapdom/tree/main)\n\n* [X] **Expose cache control**\n Users will be able to manually clear image and font caches or configure their own caching strategies.\n\n* [X] **Auto font preloading**\n Required fonts will be automatically detected and preloaded before capture, reducing the need for manual `preCache()` calls.\n\n* [X] **Document plugin development**\n A full guide will be provided for creating and registering custom SnapDOM plugins.\n\n* [ ] **Make export utilities tree-shakeable**\n Export functions like `toPng`, `toJpg`, `toBlob`, etc. will be restructured into independent modules to support tree shaking and minimal builds.\n\nHave ideas or feature requests?\nFeel free to share suggestions or feedback in [GitHub Discussions](https://github.com/zumerlab/snapdom/discussions).\n\n\n## Development\n\n**Source layout:**\n- `src/api/` โ€“ Public API (`snapdom`, `preCache`)\n- `src/core/` โ€“ Capture pipeline, clone, prepare, plugins\n- `src/modules/` โ€“ Images, fonts, pseudo-elements, backgrounds, SVG\n- `src/exporters/` โ€“ toPng, toSvg, toBlob, etc.\n- `dist/` โ€“ Build output (`snapdom.js`, `snapdom.mjs`, `preCache.mjs`, `plugins.mjs`)\n\n**Build:**\n```sh\ngit clone https://github.com/zumerlab/snapdom.git\ncd snapdom\ngit checkout dev\nnpm install\nnpm run compile\n```\n\n**Test:**\n```sh\nnpx playwright install # Required for browser tests\nnpm test\nnpm run test:benchmark\n```\n\nFor detailed guidelines, see [CONTRIBUTING](https://github.com/zumerlab/snapdom/blob/main/CONTRIBUTING.md).\n\n\n## Contributors\n\n\n

\n\"tinchox5\"/\n\"Jarvis2018\"/\n\"tarwin\"/\n\"Amyuan23\"/\n\"airamhr9\"/\n\"FlavioLimaMindera\"/\n\"jswhisperer\"/\n\"K1ender\"/\n\"kohaiy\"/\n\"17biubiu\"/\n\"av01d\"/\n\"CHOYSEN\"/\n\"pedrocateexte\"/\n\"domialex\"/\n\"elliots\"/\n\"stypr\"/\n\"mon-jai\"/\n\"sharuzzaman\"/\n\"simon1uo\"/\n\"titoBouzout\"/\n\"ZiuChen\"/\n\"harshasiddartha\"/\n\"karasHou\"/\n\"jhbae200\"/\n\"xiaobai-web715\"/\n\"miusuncle\"/\n\"rbbydotdev\"/\n\"zhanghaotian2018\"/\n

\n\n\n## Sponsors\n\nSpecial thanks to [@megaphonecolin](https://github.com/megaphonecolin), [@sdraper69](https://github.com/sdraper69), [@reynaldichernando](https://github.com/reynaldichernando), [@gamma-app](https://github.com/gamma-app) and [@jrjohnson](https://github.com/jrjohnson),for supporting this project!\n\nIf you'd like to support this project too, you can [become a sponsor](https://github.com/sponsors/tinchox5).\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=zumerlab/snapdom&type=Date)](https://www.star-history.com/#zumerlab/snapdom&Date)\n\n## License\n\nMIT ยฉ Zumerlab" }, { "path": "README_CN.md", "content": "

\n \n \n \n

\n\n

\n \n \"NPM\n \n \n \"NPM\n \n \n \"GitHub\n \n \n \"GitHub\n \n \n \"GitHub\n \n \n \"Sponsor\n \n\n \n \"License\"\n \n

\n

English | ็ฎ€ไฝ“ไธญๆ–‡

\n\n# snapDOM\n\n**SnapDOM** ๆ˜ฏๆ–ฐไธ€ไปฃ็š„ **DOM ๆ•่Žทๅผ•ๆ“Ž๏ผˆDOM Capture Engine๏ผ‰**โ€”โ€”่ถ…้ซ˜้€Ÿใ€ๆจกๅ—ๅŒ–ใ€ๅฏๆ‰ฉๅฑ•ใ€‚ \nๅฎƒๅฏไปฅๅฐ†ไปปๆ„ DOM ๅญๆ ‘่ฝฌๆขไธบ่‡ชๅŒ…ๅซ็š„็ป“ๆž„๏ผŒๅนถๅฏผๅ‡บไธบ SVGใ€PNGใ€JPGใ€WebPใ€Canvasใ€Blob๏ผŒๆˆ–้€š่ฟ‡ๆ’ไปถ็ณป็ปŸ็”Ÿๆˆ **ไปปไฝ•่‡ชๅฎšไน‰ๆ ผๅผ**ใ€‚\n\nSnapDOM ไผšไฟ็•™ๆ ทๅผใ€ๅญ—ไฝ“ใ€่ƒŒๆ™ฏๅ›พๅƒใ€ไผชๅ…ƒ็ด ใ€Shadow DOM ็ญ‰ๆ‰€ๆœ‰่ง†่ง‰็‰นๆ€ง๏ผŒๅนถ้€š่ฟ‡ๅฏๆ‰ฉๅฑ•็š„ๆžถๆž„ๅฎž็Žฐๅผบๅคง็š„็ตๆดปๆ€งๅ’Œๆœ€้ซ˜็บงๅˆซ็š„ๆ•่Žท่ดจ้‡ใ€‚\n\n\n* ๅฎŒๆ•ด็š„ DOM ๆ•่Žท\n* ๅ†…ๅตŒๆ ทๅผใ€ไผชๅ…ƒ็ด ๅ’Œๅญ—ไฝ“\n* ๅฏผๅ‡บไธบ SVGใ€PNGใ€JPGใ€WebPใ€`canvas` ๆˆ– Blob\n* โšก ่ถ…ๅฟซ้€Ÿๅบฆ๏ผŒๆ— ไพ่ต–\n* 100% ๅŸบไบŽๆ ‡ๅ‡† Web API\n* ๆ”ฏๆŒๅŒๆบ `iframe`\n* ๆ”ฏๆŒ CSS counter() ๅ’Œ CSS counters()\n* ๆ”ฏๆŒ `...` ๆ–‡ๆœฌๆˆชๆ–ญ๏ผˆline-clamp๏ผ‰\n\n## ๆผ”็คบ\n\n[https://snapdom.dev](https://snapdom.dev)\n\n\n## ๅฟซ้€Ÿๅผ€ๅง‹\n\n**ไธ€่กŒไปฃ็ ๅฐ†ไปปๆ„ DOM ๅ…ƒ็ด ๅฏผๅ‡บไธบ PNG๏ผš**\n\n```js\nimport { snapdom } from '@zumer/snapdom';\n\nconst img = await snapdom.toPng(document.querySelector('#card'));\ndocument.body.appendChild(img);\n```\n\n**ๅฏๅค็”จๆ•่Žท**๏ผˆไธ€ๆฌกๅ…‹้š†๏ผŒๅคšๆฌกๅฏผๅ‡บ๏ผ‰๏ผš\n\n```js\nconst result = await snapdom(document.querySelector('#card'));\nawait result.toPng(); // โ†’ HTMLImageElement\nawait result.toSvg(); // โ†’ SVG ๅ›พ็‰‡\nawait result.download({ format: 'jpg', filename: 'card.jpg' });\n```\n\n---\n\n## ๆ•่Žทๆต็จ‹\n\nSnapDOM ๅฐ† DOM ๅ…ƒ็ด ๆŒ‰ไปฅไธ‹้˜ถๆฎต่ฝฌๆข๏ผš\n\n```\nDOM Element\n โ†“\nClone\n โ†“\nStyles & Pseudo\n โ†“\nImages & Backgrounds\n โ†“\nFonts\n โ†“\nSVG foreignObject\n โ†“\ndata:image/svg+xml\n โ†“\ntoPng / toSvg / toBlob / download\n```\n\n| ้˜ถๆฎต | ่ฏดๆ˜Ž |\n|------|------|\n| **Clone** | ๆทฑๅบฆๅ…‹้š†๏ผŒๅซๆ ทๅผใ€Shadow DOMใ€iframeใ€‚ๆŽ’้™ค/่ฟ‡ๆปค่Š‚็‚นใ€‚ |\n| **Styles & Pseudo** | ๅฐ† `::before`/`::after` ๅ†…่”ไธบๅ…ƒ็ด ๏ผŒ่งฃๆž `counter()`/`counters()`ใ€‚ |\n| **Images & Backgrounds** | ๆ‹‰ๅ–ๅนถๅ†…่”ๅค–้ƒจๅ›พ็‰‡/่ƒŒๆ™ฏไธบ data URLใ€‚ |\n| **Fonts** | ๅตŒๅ…ฅ `@font-face`๏ผˆๅฏ้€‰๏ผ‰ๅŠๅ›พๆ ‡ๅญ—ไฝ“ใ€‚ |\n| **SVG** | ๅฐ†ๅ…‹้š†ๅŒ…่ฃนๅœจ `` ไธญ๏ผŒๅบๅˆ—ๅŒ–ไธบ `data:image/svg+xml`ใ€‚ |\n| **Export** | ่ฝฌๆขไธบ PNG/JPG/WebP/Blob ๆˆ–่งฆๅ‘ไธ‹่ฝฝใ€‚ |\n\nๆ’ไปถ้’ฉๅญ้กบๅบ๏ผš`beforeSnap` โ†’ `beforeClone` โ†’ `afterClone` โ†’ `beforeRender` โ†’ `afterRender` โ†’ `beforeExport` โ†’ `afterExport`ใ€‚\n\n\n## ็›ฎๅฝ•\n\n- [ๅฟซ้€Ÿๅผ€ๅง‹](#ๅฟซ้€Ÿๅผ€ๅง‹)\n- [ๆ•่Žทๆต็จ‹](#ๆ•่Žทๆต็จ‹)\n- [ๅฎ‰่ฃ…](#ๅฎ‰่ฃ…)\n - [NPM / Yarn (็จณๅฎš็‰ˆ)](#npm--yarn-็จณๅฎš็‰ˆ)\n - [NPM / Yarn (ๅผ€ๅ‘็‰ˆ)](#npm--yarn-ๅผ€ๅ‘็‰ˆ)\n - [CDN (็จณๅฎš็‰ˆ)](#cdn-็จณๅฎš็‰ˆ)\n - [CDN (ๅผ€ๅ‘็‰ˆ)](#cdn-ๅผ€ๅ‘็‰ˆ)\n- [ๆž„ๅปบไบง็‰ฉ](#ๆž„ๅปบไบง็‰ฉไธŽๆ‘‡ๆ ‘ไผ˜ๅŒ–)\n- [็”จๆณ•](#ๅŸบๆœฌ็”จๆณ•)\n - [ๅฏๅค็”จ็š„ๆ•่Žท](#ๅฏๅค็”จ็š„ๆ•่Žท)\n - [ไธ€ๆญฅๅผๅฟซๆทๆ–นๆณ•](#ไธ€ๆญฅๅผๅฟซๆทๆ–นๆณ•)\n- [API](#api)\n - [snapdom(el, options?)](#snapdomel-options)\n - [ๅฟซๆทๆ–นๆณ•](#ๅฟซๆทๆ–นๆณ•)\n- [้€‰้กน](#้€‰้กน)\n - [debug](#debug)\n - [`` ๅŠ ่ฝฝๅคฑ่ดฅๆ—ถ็š„ๅค‡็”จๅ›พ็‰‡](#img-ๅŠ ่ฝฝๅคฑ่ดฅๆ—ถ็š„ๅค‡็”จๅ›พ็‰‡)\n - [ๅฐบๅฏธ (`scale`, `width`, `height`)](#ๅฐบๅฏธ-scale-width-height)\n - [่ทจๅŸŸๅ›พ็‰‡ๅ’Œๅญ—ไฝ“ (`useProxy`)](#่ทจๅŸŸๅ›พ็‰‡ๅ’Œๅญ—ไฝ“-useproxy)\n - [ๅญ—ไฝ“](#ๅญ—ไฝ“)\n - [embedFonts](#embedfonts)\n - [localFonts](#localfonts)\n - [iconFonts](#iconfonts)\n - [excludeFonts](#excludefonts)\n - [่Š‚็‚น่ฟ‡ๆปค๏ผš`exclude` vs `filter`](#่Š‚็‚น่ฟ‡ๆปค-exclude-vs-filter)\n - [outerTransforms](#outertransforms)\n - [outerShadows](#outerShadows)\n - [็ผ“ๅญ˜ๆŽงๅˆถ](#็ผ“ๅญ˜ๆŽงๅˆถ)\n- [preCache](#precache--ๅฏ้€‰่พ…ๅŠฉๅ‡ฝๆ•ฐ)\n- [ๆ’ไปถ๏ผˆๆต‹่ฏ•็‰ˆ๏ผ‰](#ๆ’ไปถๆต‹่ฏ•็‰ˆ)\n - [ๆณจๅ†Œๆ’ไปถ](#ๆณจๅ†Œๆ’ไปถ)\n - [ๆ’ไปถ็”Ÿๅ‘ฝๅ‘จๆœŸ้’ฉๅญ](#ๆ’ไปถ็”Ÿๅ‘ฝๅ‘จๆœŸ้’ฉๅญ)\n - [ไธŠไธ‹ๆ–‡ๅฏน่ฑก](#ไธŠไธ‹ๆ–‡ๅฏน่ฑก)\n - [้€š่ฟ‡ๆ’ไปถ่‡ชๅฎšไน‰ๅฏผๅ‡บ](#้€š่ฟ‡ๆ’ไปถ่‡ชๅฎšไน‰ๅฏผๅ‡บ)\n - [็คบไพ‹๏ผšๅ ๅŠ ๆปค้•œๆ’ไปถ](#็คบไพ‹ๅ ๅŠ ๆปค้•œๆ’ไปถ)\n - [ๅฎŒๆ•ดๆ’ไปถๆจกๆฟ](#ๅฎŒๆ•ดๆ’ไปถๆจกๆฟ)\n- [้™ๅˆถ](#้™ๅˆถ)\n- [โšก ๆ€ง่ƒฝๅŸบๅ‡†ๆต‹่ฏ•๏ผˆChromium๏ผ‰](#ๆ€ง่ƒฝๅŸบๅ‡†ๆต‹่ฏ•chromium)\n - [็ฎ€ๅ•ๅ…ƒ็ด ](#็ฎ€ๅ•ๅ…ƒ็ด )\n - [ๅคๆ‚ๅ…ƒ็ด ](#ๅคๆ‚ๅ…ƒ็ด )\n - [่ฟ่กŒๅŸบๅ‡†ๆต‹่ฏ•](#่ฟ่กŒๅŸบๅ‡†ๆต‹่ฏ•)\n- [่ทฏ็บฟๅ›พ](#่ทฏ็บฟๅ›พ)\n- [ๅผ€ๅ‘](#ๅผ€ๅ‘)\n- [่ดก็Œฎ่€… ๐Ÿ™Œ](#่ดก็Œฎ่€…)\n- [๐Ÿ’– ่ตžๅŠฉ่€…](#่ตžๅŠฉ่€…)\n- [Star ๅŽ†ๅฒ](#star-ๅŽ†ๅฒ)\n- [่ฎธๅฏ่ฏ](#่ฎธๅฏ่ฏ)\n\n\n## ๅฎ‰่ฃ…\n\n### NPM / Yarn (็จณๅฎš็‰ˆ)\n\n```bash\nnpm i @zumer/snapdom\nyarn add @zumer/snapdom\n```\n\n### NPM / Yarn (ๅผ€ๅ‘็‰ˆ)\n\nๆƒณ่ฆๆๅ‰ไฝ“้ชŒๆ–ฐๅŠŸ่ƒฝๅ’Œไฟฎๅค๏ผš\n\n```bash\nnpm i @zumer/snapdom@dev\nyarn add @zumer/snapdom@dev\n```\n\nโš ๏ธ `@dev` ๆ ‡็ญพ้€šๅธธๅŒ…ๅซๅœจๆญฃๅผๅ‘ๅธƒๅ‰็š„ๆ”น่ฟ›๏ผŒไฝ†ๅฏ่ƒฝไธๅคŸ็จณๅฎšใ€‚\n\n### CDN (็จณๅฎš็‰ˆ)\n\n```html\n\n\n\n\n\n```\n\n### CDN (ๅผ€ๅ‘็‰ˆ)\n\n```html\n\n\n\n\n\n```\n\n\n## ๆž„ๅปบไบง็‰ฉ\n\n| ๅ˜ไฝ“ | ๆ–‡ไปถ | ไฝฟ็”จๅœบๆ™ฏ |\n|------|------|----------|\n| **ESM**๏ผˆๅฏๆ‘‡ๆ ‘๏ผ‰ | `dist/snapdom.mjs` | ๆ‰“ๅŒ…ๅทฅๅ…ท๏ผˆViteใ€webpack๏ผ‰๏ผŒ`import` |\n| **IIFE**๏ผˆๅ…จๅฑ€๏ผ‰ | `dist/snapdom.js` | script ๆ ‡็ญพใ€ไผ ็ปŸ `require` |\n\n**ๆ‰“ๅŒ…ๅทฅๅ…ท (npm)๏ผš**\n```js\nimport { snapdom } from '@zumer/snapdom'; // โ†’ dist/snapdom.mjs\n```\n\n**script ๆ ‡็ญพ (CDN)๏ผš**\n```html\n\n\n```\n\n**ๅญ่ทฏๅพ„ๅฏผๅ…ฅ**๏ผˆไป…้œ€้ƒจๅˆ†ๅŠŸ่ƒฝๆ—ถๅฏๅ‡ๅฐไฝ“็งฏ๏ผ‰๏ผš\n```js\nimport { preCache } from '@zumer/snapdom/preCache';\nimport { plugins } from '@zumer/snapdom/plugins';\n```\n\n\n## ๅŸบๆœฌ็”จๆณ•\n\n| ๆจกๅผ | ้€‚็”จๅœบๆ™ฏ |\n|------|----------|\n| **ๅฏๅค็”จ** `snapdom(el)` | ไธ€ๆฌกๅ…‹้š† โ†’ ๅคšๆฌกๅฏผๅ‡บ๏ผˆPNG + JPG + ไธ‹่ฝฝ๏ผ‰ใ€‚ |\n| **ๅฟซๆท** `snapdom.toPng(el)` | ๅ•ๆฌกๅฏผๅ‡บ๏ผŒไปฃ็ ๆ›ด็ฎ€ๆดใ€‚ |\n\n### ๅฏๅค็”จ็š„ๆ•่Žท\n\nไธ€ๆฌกๆ•่Žท๏ผŒๅคšๆฌกๅฏผๅ‡บ๏ผˆไธไผš้‡ๆ–ฐๅ…‹้š†๏ผ‰๏ผš\n\n```js\nconst el = document.querySelector('#target');\nconst result = await snapdom(el);\n\nconst img = await result.toPng();\ndocument.body.appendChild(img);\nawait result.download({ format: 'jpg', filename: 'my-capture.jpg' });\n```\n\n### ไธ€ๆญฅๅผๅฟซๆทๆ–นๆณ•\n\n็›ดๆŽฅๅฏผๅ‡บๅ•ไธ€ๆ ผๅผ๏ผš\n\n```js\nconst png = await snapdom.toPng(el);\nconst blob = await snapdom.toBlob(el);\ndocument.body.appendChild(png);\n```\n\n## API\n\n### `snapdom(el, options?)`\n\n่ฟ”ๅ›žไธ€ไธชๅŒ…ๅซๅฏๅค็”จๅฏผๅ‡บๆ–นๆณ•็š„ๅฏน่ฑก๏ผš\n\n```js\n{\n url: string;\n toRaw(): string;\n toImg(): Promise; // ๅทฒๅบŸๅผƒ \n toSvg(): Promise;\n toCanvas(): Promise;\n toBlob(options?): Promise;\n toPng(options?): Promise;\n toJpg(options?): Promise;\n toWebp(options?): Promise;\n download(options?): Promise;\n}\n```\n\n### ๅฟซๆทๆ–นๆณ•\n\n| ๆ–นๆณ• | ๆ่ฟฐ |\n| ------------------------------ | --------------------------------- |\n| `snapdom.toImg(el, options?)` | ่ฟ”ๅ›žไธ€ไธช SVG `HTMLImageElement`๏ผˆๅทฒๅบŸๅผƒ๏ผ‰ |\n| `snapdom.toSvg(el, options?)` | ่ฟ”ๅ›žไธ€ไธช SVG `HTMLImageElement` |\n| `snapdom.toCanvas(el, options?)` | ่ฟ”ๅ›žไธ€ไธช `Canvas` |\n| `snapdom.toBlob(el, options?)` | ่ฟ”ๅ›žไธ€ไธช SVG ๆˆ–ๅ…‰ๆ … `Blob` |\n| `snapdom.toPng(el, options?)` | ่ฟ”ๅ›žไธ€ไธช PNG ๅ›พ็‰‡ |\n| `snapdom.toJpg(el, options?)` | ่ฟ”ๅ›žไธ€ไธช JPG ๅ›พ็‰‡ |\n| `snapdom.toWebp(el, options?)` | ่ฟ”ๅ›žไธ€ไธช WebP ๅ›พ็‰‡ |\n| `snapdom.download(el, options?)` | ่งฆๅ‘ไธ‹่ฝฝ |\n\n### ๅฏผๅ‡บๅ™จไธ“็”จ้€‰้กน\n\n้™คไบ†ๅ…จๅฑ€็š„ๆ•่Žท้€‰้กนไน‹ๅค–๏ผŒ้ƒจๅˆ†ๅฏผๅ‡บๅ™จ่ฟ˜ๆ”ฏๆŒไธ€ๅฐ็ป„ **ไป…็”จไบŽๅฏผๅ‡บ** ็š„้€‰้กนใ€‚\n\n#### `download()`\n\n| Option | Type | Default | Description |\n| ---------- | --------------------------------------------- | --------- | ----------- |\n| `filename` | `string` | `snapdom` | ไธ‹่ฝฝๆ–‡ไปถๅใ€‚ |\n| `format` | `\"png\" \\| \"jpeg\" \\| \"jpg\" \\| \"webp\" \\| \"svg\"` | `\"png\"` | ไธ‹่ฝฝๆ–‡ไปถ็š„่พ“ๅ‡บๆ ผๅผใ€‚ |\n\n**็คบไพ‹๏ผš**\n\n```js\nawait result.download({\n format: 'jpg',\n quality: 0.92,\n filename: 'my-capture'\n});\n```\n\n#### `toBlob()`\n\n| Option | Type | Default | Description |\n| ------ | --------------------------------------------- | ------- | ------------ |\n| `type` | `\"svg\" \\| \"png\" \\| \"jpeg\" \\| \"jpg\" \\| \"webp\"` | `\"svg\"` | ็”Ÿๆˆ็š„ Blob ็ฑปๅž‹ใ€‚ |\n\n**็คบไพ‹๏ผš**\n\n```js\nconst blob = await result.toBlob({ type: 'jpeg', quality: 0.92 });\n```\n\n\n## ้€‰้กน\n\nๆ‰€ๆœ‰ๆ•่Žทๆ–นๆณ•้ƒฝๆŽฅๅ—ไธ€ไธช `options` ๅฏน่ฑก๏ผš\n\n\n| ้€‰้กน | ็ฑปๅž‹ | ้ป˜่ฎคๅ€ผ | ๆ่ฟฐ |\n| ----------------- | -------- | -------- | ----------------------------------------------- |\n| `debug` | boolean | `false` | ่ฎพไธบ `true` ๆ—ถ๏ผŒๅฐ†้™้ป˜ๅค„็†็š„้”™่ฏฏ่พ“ๅ‡บๅˆฐ `console.warn`๏ผŒไพฟไบŽๆŽ’ๆŸฅ้—ฎ้ข˜ |\n| `fast` | boolean | `true` | ่ทณ่ฟ‡ๅฐ็š„็ฉบ้—ฒๅปถ่ฟŸไปฅ่Žทๅพ—ๆ›ดๅฟซ็š„็ป“ๆžœ |\n| `embedFonts` | boolean | `false` | ๅ†…ๅตŒ้žๅ›พๆ ‡ๅญ—ไฝ“๏ผˆๅ›พๆ ‡ๅญ—ไฝ“ๅง‹็ปˆๅ†…ๅตŒ๏ผ‰ |\n| `localFonts` | array | `[]` | ๆœฌๅœฐๅญ—ไฝ“ `{ family, src, weight?, style? }` |\n| `iconFonts` | string\\|RegExp\\|Array | `[]` | ้ขๅค–็š„ๅ›พๆ ‡ๅญ—ไฝ“ๅŒน้…ๅ™จ |\n| `excludeFonts` | object | `{}` | ๅœจๅตŒๅ…ฅๆ—ถๆŽ’้™คๅญ—ไฝ“ๆ—/ๅŸŸๅ/ๅญ้›† |\n| `scale` | number | `1` | ่พ“ๅ‡บ็ผฉๆ”พๅ€ๆ•ฐ |\n| `dpr` | number | `devicePixelRatio` | ่ฎพๅค‡ๅƒ็ด ๆฏ” |\n| `width` | number | - | ่พ“ๅ‡บๅฎฝๅบฆ |\n| `height` | number | - | ่พ“ๅ‡บ้ซ˜ๅบฆ |\n| `backgroundColor` | string | `\"#fff\"` | JPG/WebP ็š„ๅค‡็”จ้ขœ่‰ฒ |\n| `quality` | number | `1` | JPG/WebP ็š„่ดจ้‡๏ผˆ0 ๅˆฐ 1๏ผ‰ |\n| `useProxy` | string | `''` | CORS ๅค‡็”จไปฃ็†ๅŸบ็ก€ URL |\n| `exclude` | string[] | - | ่ฆๆŽ’้™ค็š„ CSS ้€‰ๆ‹ฉๅ™จ |\n| `excludeMode` | `\"hide\"`\\|`\"remove\"` | `\"hide\"` | `exclude` ็š„ๅบ”็”จๆ–นๅผ |\n| `filter` | function | - | ่‡ชๅฎšไน‰่ฐ“่ฏๅ‡ฝๆ•ฐ `(el) => boolean` |\n| `filterMode` | `\"hide\"`\\|`\"remove\"` | `\"hide\"` | `filter` ็š„ๅบ”็”จๆ–นๅผ |\n| `cache` | string | `\"soft\"` | `disabled` \\| `soft` \\| `auto` \\| `full` |\n| `placeholders` | boolean | `true` | ไธบๅ›พ็‰‡/CORS iframe ๆ˜พ็คบๅ ไฝ็ฌฆ |\n| `fallbackURL` | string \\| function | - | `` ๅŠ ่ฝฝๅคฑ่ดฅๆ—ถ็š„ๅค‡็”จๅ›พ็‰‡ |\n| `outerTransforms` | boolean | `true` | ๅฝ“ไธบ `false` ๆ—ถ็งป้™ค `translate/rotate` ไฝ†ไฟ็•™ `scale/skew`๏ผŒไบง็”Ÿๆ‰ๅนณใ€ๅฏๅค็”จ็š„ๆ•่Žท |\n| `outerShadows` | boolean | `false` | ไธไธบๆ นๅ…ƒ็ด ็š„้˜ดๅฝฑ/ๆจก็ณŠ/่ฝฎๅป“ๆ‰ฉๅฑ•่พน็•Œๆก†๏ผŒๅนถไปŽๅ…‹้š†็š„ๆ นๅ…ƒ็ด ไธญ็งป้™ค่ฟ™ไบ›่ง†่ง‰ๆ•ˆๆžœ |\n| `safariWarmupAttempts` | number | `3` | ไป… Safari๏ผš้ข„็ƒญ็š„่ฟญไปฃๆฌกๆ•ฐ๏ผˆWebKit #219770๏ผ‰ใ€‚่‹ฅ 3 ๆฌก่ฟ‡ๆ…ขๅฏ่ฎพไธบ `1` |\n\n### debug\n\nๅฝ“ `debug: true` ๆ—ถ๏ผŒSnapDOM ไผšๅฐ†้€šๅธธ้™้ป˜ๅค„็†็š„้”™่ฏฏ่พ“ๅ‡บๅˆฐ `console.warn`๏ผˆๅธฆ `[snapdom]` ๅ‰็ผ€๏ผ‰ใ€‚ไพฟไบŽๆŽ’ๆŸฅๆ•่Žท้—ฎ้ข˜๏ผˆๅฆ‚ canvas ๅคฑ่ดฅใ€blob ่งฃๆžใ€ๆ ทๅผๅ‰ฅ็ฆป็ญ‰๏ผ‰๏ผŒ่€Œๆ— ้œ€ๅœจ็”Ÿไบง็Žฏๅขƒไธญไบง็”Ÿๅ†—ไฝ™่พ“ๅ‡บใ€‚\n\n```js\nawait snapdom.toPng(el, { debug: true });\n```\n\n### `` ๅŠ ่ฝฝๅคฑ่ดฅๆ—ถ็š„ๅค‡็”จๅ›พ็‰‡\n\nไธบๅคฑ่ดฅ็š„ `` ๅŠ ่ฝฝๆไพ›้ป˜่ฎคๅ›พ็‰‡ใ€‚ๆ‚จๅฏไปฅไผ ้€’ไธ€ไธชๅ›บๅฎš URL ๆˆ–ไธ€ไธชๆŽฅๆ”ถๆต‹้‡ๅฐบๅฏธๅนถ่ฟ”ๅ›ž URL ็š„ๅ›ž่ฐƒๅ‡ฝๆ•ฐ๏ผˆไพฟไบŽ็”ŸๆˆๅŠจๆ€ๅ ไฝ็ฌฆ๏ผ‰ใ€‚\n\n```js\n// 1) ๅ›บๅฎš URL ๅค‡็”จ\nawait snapdom.toSvg(element, {\n fallbackURL: '/images/fallback.png'\n});\n\n// 2) ้€š่ฟ‡ๅ›ž่ฐƒ็”ŸๆˆๅŠจๆ€ๅ ไฝ็ฌฆ\nawait snapdom.toSvg(element, {\n fallbackURL: ({ width: 300, height: 150 }) =>\n `https://placehold.co/${width}x${height}`\n});\n\n// 3) ไฝฟ็”จไปฃ็†๏ผˆๅฆ‚ๆžœๆ‚จ็š„ๅค‡็”จๅ›พ็‰‡ไธปๆœบๆฒกๆœ‰ CORS๏ผ‰\nawait snapdom.toSvg(element, {\n fallbackURL: ({ width = 300, height = 150 }) =>\n `https://dummyimage.com/${width}x${height}/cccccc/666.png&text=img`,\n useProxy: 'https://proxy.corsfix.com/?'\n});\n```\n\nๆณจๆ„๏ผš\n- ๅฆ‚ๆžœๅค‡็”จๅ›พ็‰‡ไนŸๅŠ ่ฝฝๅคฑ่ดฅ๏ผŒsnapDOM ไผš็”จไฟ็•™ๅฎฝๅบฆ/้ซ˜ๅบฆ็š„ๅ ไฝ็ฌฆๅ—ๆ›ฟๆข ``ใ€‚\n- ๅ›ž่ฐƒไฝฟ็”จ็š„ๅฎฝๅบฆ/้ซ˜ๅบฆไปŽๅŽŸๅง‹ๅ…ƒ็ด ๏ผˆdatasetใ€style/attrs ็ญ‰๏ผ‰ไธญๆ”ถ้›†๏ผˆๅฆ‚ๆžœๅฏ็”จ๏ผ‰ใ€‚\n\n### ๅฐบๅฏธ (`scale`, `width`, `height`)\n\n* ๅฆ‚ๆžœๆไพ›ไบ† `scale`๏ผŒๅฎƒๅฐ†**ไผ˜ๅ…ˆไบŽ** `width`/`height`ใ€‚\n* ๅฆ‚ๆžœๅชๆไพ› `width`๏ผŒ้ซ˜ๅบฆๆŒ‰ๆฏ”ไพ‹็ผฉๆ”พ๏ผˆๅไน‹ไบฆ็„ถ๏ผ‰ใ€‚\n* ๅŒๆ—ถๆไพ› `width` ๅ’Œ `height` ไผšๅผบๅˆถไฝฟ็”จ็ฒพ็กฎๅฐบๅฏธ๏ผˆๅฏ่ƒฝไผšๅคฑ็œŸ๏ผ‰ใ€‚\n\n### ่ทจๅŸŸๅ›พ็‰‡ๅ’Œๅญ—ไฝ“ (`useProxy`)\n\n้ป˜่ฎคๆƒ…ๅ†ตไธ‹๏ผŒsnapDOM ๅฐ่ฏ•ไฝฟ็”จ `crossOrigin=\"anonymous\"`๏ผˆๆˆ–ๅŒๆบๆ—ถไฝฟ็”จ `use-credentials`๏ผ‰ใ€‚ๅฆ‚ๆžœ่ต„ๆบ่ขซ CORS ้˜ปๆญข๏ผŒๆ‚จๅฏไปฅๅฐ† `useProxy` ่ฎพ็ฝฎไธบ่ฝฌๅ‘ๅฎž้™… `src` ็š„ๅ‰็ผ€ URL๏ผš\n\n```js\nawait snapdom.toPng(el, {\n useProxy: 'https://proxy.corsfix.com/?' // ๆณจๆ„๏ผšๅฏไปฅไฝฟ็”จไปปไฝ• CORS ไปฃ็† 'https://proxy.corsfix.com/?'\n});\n```\n\n\n* ไปฃ็†ไป…็”จไฝœ**ๅค‡็”จ**๏ผ›ๅŒๆบๅ’Œๅฏ็”จ CORS ็š„่ต„ๆบไผš่ทณ่ฟ‡ๅฎƒใ€‚\n\n### ๅญ—ไฝ“\n\n#### `embedFonts`\nๅฝ“ไธบ `true` ๆ—ถ๏ผŒsnapDOM ไผšๅตŒๅ…ฅๅœจๆ•่Žทๅญๆ ‘ไธญๆฃ€ๆต‹ๅˆฐไฝฟ็”จ็š„**้žๅ›พๆ ‡** `@font-face` ่ง„ๅˆ™ใ€‚ๅ›พๆ ‡ๅญ—ไฝ“๏ผˆFont Awesomeใ€Material Icons ็ญ‰๏ผ‰**ๅง‹็ปˆ**่ขซๅตŒๅ…ฅใ€‚\n\n#### `localFonts`\nๅฆ‚ๆžœๆ‚จ่‡ชๅทฑๆไพ›ๅญ—ไฝ“ๆˆ–ๆ‹ฅๆœ‰ data URL๏ผŒๅฏไปฅๅœจๆญคๅค„ๅฃฐๆ˜Žๅฎƒไปฌไปฅ้ฟๅ…้ขๅค–็š„ CSS ๅ‘็Žฐ๏ผš\n\n```js\nawait snapdom.toPng(el, {\n embedFonts: true,\n localFonts: [\n { family: 'Inter', src: '/fonts/Inter-Variable.woff2', weight: 400, style: 'normal' },\n { family: 'Inter', src: '/fonts/Inter-Italic.woff2', style: 'italic' }\n ]\n});\n```\n\n#### `iconFonts`\nๆทปๅŠ ่‡ชๅฎšไน‰ๅ›พๆ ‡ๅญ—ไฝ“ๆ—๏ผˆๅ็งฐๆˆ–ๆญฃๅˆ™่กจ่พพๅผๅŒน้…ๅ™จ๏ผ‰ใ€‚ๅฏน็งๆœ‰ๅ›พๆ ‡้›†ๅพˆๆœ‰็”จ๏ผš\n\n```js\nawait snapdom.toPng(el, {\n iconFonts: ['MyIcons', /^(Remix|Feather) Icons?$/i]\n});\n```\n\n#### `excludeFonts`\n่ทณ่ฟ‡็‰นๅฎš็š„้žๅ›พๆ ‡ๅญ—ไฝ“ไปฅๅŠ ๅฟซๆ•่Žท้€Ÿๅบฆๆˆ–้ฟๅ…ไธๅฟ…่ฆ็š„ไธ‹่ฝฝใ€‚\n\n```js\nawait snapdom.toPng(el, {\n embedFonts: true,\n excludeFonts: {\n families: ['Noto Serif', 'SomeHeavyFont'], // ๆŒ‰ๅญ—ไฝ“ๆ—ๅ็งฐ่ทณ่ฟ‡\n domains: ['fonts.gstatic.com', 'cdn.example'], // ๆŒ‰ๆบไธปๆœบ่ทณ่ฟ‡\n subsets: ['cyrillic-ext'] // ๆŒ‰ unicode-range ๅญ้›†ๆ ‡็ญพ่ทณ่ฟ‡\n }\n});\n```\n*ๆณจๆ„*\n- `excludeFonts` ไป…้€‚็”จไบŽ**้žๅ›พๆ ‡**ๅญ—ไฝ“ใ€‚ๅ›พๆ ‡ๅญ—ไฝ“ๅง‹็ปˆ่ขซๅตŒๅ…ฅใ€‚\n- `families` ็š„ๅŒน้…ไธๅŒบๅˆ†ๅคงๅฐๅ†™ใ€‚ไธปๆœบ้€š่ฟ‡ๅญๅญ—็ฌฆไธฒไธŽ่งฃๆžๅŽ็š„ URL ่ฟ›่กŒๅŒน้…ใ€‚\n\n\n#### ่Š‚็‚น่ฟ‡ๆปค๏ผš`exclude` vs `filter`\n\n* `exclude`: ้€š่ฟ‡**้€‰ๆ‹ฉๅ™จ**็งป้™คใ€‚\n* `excludeMode`: `hide` ๅฏนๆŽ’้™ค็š„่Š‚็‚นๅบ”็”จ `visibility:hidden` CSS ่ง„ๅˆ™๏ผŒๅธƒๅฑ€ไฟๆŒๅŽŸๆ ทใ€‚`remove` ๅฎŒๅ…จไธๅ…‹้š†ๆŽ’้™ค็š„่Š‚็‚นใ€‚\n* `filter`: ๆฏไธชๅ…ƒ็ด ็š„้ซ˜็บง่ฐ“่ฏๅ‡ฝๆ•ฐ๏ผˆ่ฟ”ๅ›ž `false` ไปฅไธขๅผƒ๏ผ‰ใ€‚\n* `filterMode`: `hide` ๅฏน่ฟ‡ๆปค็š„่Š‚็‚นๅบ”็”จ `visibility:hidden` CSS ่ง„ๅˆ™๏ผŒๅธƒๅฑ€ไฟๆŒๅŽŸๆ ทใ€‚`remove` ๅฎŒๅ…จไธๅ…‹้š†่ฟ‡ๆปค็š„่Š‚็‚นใ€‚\n\n**็คบไพ‹๏ผš่ฟ‡ๆปคๆŽ‰ `display:none` ็š„ๅ…ƒ็ด ๏ผš**\n```js\n/**\n * ็คบไพ‹่ฟ‡ๆปคๅ™จ๏ผš่ทณ่ฟ‡ display:none ็š„ๅ…ƒ็ด \n * @param {Element} el\n * @returns {boolean} true = ไฟ็•™, false = ๆŽ’้™ค\n */\nfunction filterHidden(el) {\n const cs = window.getComputedStyle(el);\n if (cs.display === 'none') return false;\n return true;\n}\n\nawait snapdom.toPng(document.body, { filter: filterHidden });\n```\n\n**ไฝฟ็”จ `exclude` ็š„็คบไพ‹๏ผš** ้€š่ฟ‡้€‰ๆ‹ฉๅ™จ็งป้™คๆจชๅน…ๆˆ–ๅทฅๅ…ทๆ็คบ\n```js\nawait snapdom.toPng(el, {\n exclude: ['.cookie-banner', '.tooltip', '[data-test=\"debug\"]']\n});\n```\n\n### outerTransforms \n\nๆ•่Žทๆ—‹่ฝฌๆˆ–ๅนณ็งป็š„ๅ…ƒ็ด ๆ—ถ๏ผŒๅฆ‚ๆžœๆ‚จๆƒณๆถˆ้™ค่ฟ™ไบ›ๅค–้ƒจๅ˜ๆข๏ผŒๅฏไปฅไฝฟ็”จ **outerTransforms: false** ้€‰้กนใ€‚่ฟ™ๆ ท๏ผŒ่พ“ๅ‡บๆ˜ฏ**ๆ‰ๅนณใ€็›ด็ซ‹ไธ”ๅฏ็›ดๆŽฅ**ๅœจๅ…ถไป–ๅœฐๆ–นไฝฟ็”จ็š„ใ€‚\n\n- **`outerTransforms: true (้ป˜่ฎค)`** \n **ไฟ็•™ๅŽŸๅง‹็š„ `transforms` ๅ’Œ `rotate`**ใ€‚ \n \n\n### outerShadows\n- **`outerShadows: false (้ป˜่ฎค)`** \n ้˜ฒๆญขไธบๆ นๅ…ƒ็ด ็š„้˜ดๅฝฑใ€ๆจก็ณŠๆˆ–่ฝฎๅป“ๆ‰ฉๅฑ•่พน็•Œๆก†๏ผŒๅนถไปŽๅ…‹้š†็š„ๆ นๅ…ƒ็ด ไธญ็งป้™ค `box-shadow`ใ€`text-shadow`ใ€`filter: blur()/drop-shadow()` ๅ’Œ `outline`ใ€‚ \n\n> ๐Ÿ’ก **ๆ็คบ๏ผš** ๅŒๆ—ถไฝฟ็”จไธค่€…๏ผˆ`outerTransforms: false` + `outerShadows: false`๏ผ‰ไผšไบง็”Ÿไธฅๆ ผใ€ๆœ€ๅฐๅŒ–็š„่พน็•Œๆก†๏ผŒๆฒกๆœ‰่ง†่ง‰ๆบขๅ‡บใ€‚\n\n**็คบไพ‹**\n\n```js\n// outerTransforms ๅ’Œ็งป้™ค้˜ดๅฝฑๆบขๅ‡บ\nawait snapdom.toSvg(el, { outerTransforms: true, outerShadows: true });\n```\n\n## ็ผ“ๅญ˜ๆŽงๅˆถ\n\nSnapDOM ไธบๅ›พ็‰‡ใ€่ƒŒๆ™ฏใ€่ต„ๆบใ€ๆ ทๅผๅ’Œๅญ—ไฝ“็ปดๆŠคๅ†…้ƒจ็ผ“ๅญ˜ใ€‚\nๆ‚จๅฏไปฅไฝฟ็”จ `cache` ้€‰้กนๆŽงๅˆถๅฎƒไปฌๅœจๆ•่Žทไน‹้—ด็š„ๆธ…้™คๆ–นๅผ๏ผš\n\n| ๆจกๅผ | ๆ่ฟฐ |\n| ----------- | --------------------------------------------------------------------------- |\n| `\"disabled\"`| ๆ— ็ผ“ๅญ˜ |\n| `\"soft\"` | ๆธ…้™คไผš่ฏ็ผ“ๅญ˜๏ผˆ`styleMap`ใ€`nodeMap`ใ€`styleCache`๏ผ‰_(้ป˜่ฎค)_ |\n| `\"auto\"` | ๆœ€ๅฐๆธ…็†๏ผšไป…ๆธ…้™คไธดๆ—ถๆ˜ ๅฐ„ |\n| `\"full\"` | ไฟ็•™ๆ‰€ๆœ‰็ผ“ๅญ˜๏ผˆไธๆธ…้™คไปปไฝ•ๅ†…ๅฎน๏ผŒๆœ€ๅคงๆ€ง่ƒฝ๏ผ‰ |\n\n**็คบไพ‹๏ผš**\n\n```js\n// ไฝฟ็”จๆœ€ๅฐไฝ†ๅฟซ้€Ÿ็š„็ผ“ๅญ˜\nawait snapdom.toPng(el, { cache: 'auto' });\n\n// ๅœจๆ•่Žทไน‹้—ดๅฐ†ๆ‰€ๆœ‰ๅ†…ๅฎนไฟ็•™ๅœจๅ†…ๅญ˜ไธญ\nawait snapdom.toPng(el, { cache: 'full' });\n\n// ๅผบๅˆถๅœจๆฏๆฌกๆ•่Žทๆ—ถๅฎŒๅ…จๆธ…็†\nawait snapdom.toPng(el, { cache: 'disabled' });\n```\n\n## `preCache()` โ€“ ๅฏ้€‰่พ…ๅŠฉๅ‡ฝๆ•ฐ\n\n้ข„ๅŠ ่ฝฝๅค–้ƒจ่ต„ๆบไปฅ้ฟๅ…้ฆ–ๆฌกๆ•่Žทๆ—ถ็š„ๅœ้กฟ๏ผˆๅฏนๅคงๅž‹/ๅคๆ‚ๆ ‘ๅพˆๆœ‰ๅธฎๅŠฉ๏ผ‰ใ€‚\n\n```js\nimport { preCache } from '@zumer/snapdom';\n\nawait preCache({\n root: document.body,\n embedFonts: true,\n localFonts: [{ family: 'Inter', src: '/fonts/Inter.woff2', weight: 400 }],\n useProxy: 'https://proxy.corsfix.com/?'\n});\n```\n\n## ๆ’ไปถ๏ผˆๆต‹่ฏ•็‰ˆ๏ผ‰\n\nSnapDOM ๅŒ…ๅซไธ€ไธช่ฝป้‡็บง**ๆ’ไปถ็ณป็ปŸ**๏ผŒๅ…่ฎธๆ‚จๅœจๆ•่Žทๅ’Œๅฏผๅ‡บ่ฟ‡็จ‹็š„ไปปไฝ•้˜ถๆฎตๆ‰ฉๅฑ•ๆˆ–่ฆ†็›–่กŒไธบโ€”โ€”ๆ— ้œ€ไฟฎๆ”นๆ ธๅฟƒๅบ“ใ€‚\n\nๆ’ไปถๆ˜ฏไธ€ไธช็ฎ€ๅ•็š„ๅฏน่ฑก๏ผŒๅ…ทๆœ‰ๅ”ฏไธ€็š„ `name` ๅ’Œไธ€ไธชๆˆ–ๅคšไธช็”Ÿๅ‘ฝๅ‘จๆœŸ**้’ฉๅญ**ใ€‚\n้’ฉๅญๅฏไปฅๆ˜ฏๅŒๆญฅ็š„ๆˆ– `async`๏ผŒๅฎƒไปฌๆŽฅๆ”ถไธ€ไธชๅ…ฑไบซ็š„ **`context`** ๅฏน่ฑกใ€‚\n\n### ๆณจๅ†Œๆ’ไปถ\n\n**ๅ…จๅฑ€ๆณจๅ†Œ**๏ผˆ้€‚็”จไบŽๆ‰€ๆœ‰ๆ•่Žท๏ผ‰๏ผš\n\n```js\nimport { snapdom } from '@zumer/snapdom';\n\n// ๆ‚จๅฏไปฅๆณจๅ†Œๅฎžไพ‹ใ€ๅทฅๅŽ‚ๅ‡ฝๆ•ฐๆˆ– [ๅทฅๅŽ‚ๅ‡ฝๆ•ฐ, ้€‰้กน]\nsnapdom.plugins(\n myPluginInstance,\n [myPluginFactory, { optionA: true }],\n { plugin: anotherFactory, options: { level: 2 } }\n);\n```\n\n**ๅ•ๆฌกๆ•่Žทๆณจๅ†Œ**๏ผˆไป…้€‚็”จไบŽ่ฏฅ็‰นๅฎš่ฐƒ็”จ๏ผ‰๏ผš\n\n```js\nconst out = await snapdom(element, {\n plugins: [\n [overlayFilterPlugin, { color: 'rgba(0,0,0,0.25)' }],\n [myFullPlugin, { providePdf: true }]\n ]\n});\n```\n\n* **ๆ‰ง่กŒ้กบๅบ = ๆณจๅ†Œ้กบๅบ**๏ผˆๅ…ˆๆณจๅ†Œ๏ผŒๅ…ˆๆ‰ง่กŒ๏ผ‰ใ€‚\n* **ๅ•ๆฌกๆ•่Žทๆ’ไปถ**ๅœจๅ…จๅฑ€ๆ’ไปถ**ไน‹ๅ‰**่ฟ่กŒใ€‚\n* ้‡ๅค้กน้€š่ฟ‡ `name` ่‡ชๅŠจ่ทณ่ฟ‡๏ผ›ๅ…ทๆœ‰็›ธๅŒ `name` ็š„ๅ•ๆฌกๆ•่Žทๆ’ไปถไผš่ฆ†็›–ๅ…ถๅ…จๅฑ€็‰ˆๆœฌใ€‚\n\n### ๆ’ไปถ็”Ÿๅ‘ฝๅ‘จๆœŸ้’ฉๅญ\n\n้’ฉๅญๆŒ‰ๆ•่Žท้กบๅบๆ‰ง่กŒ๏ผˆ่ง[ๆ•่Žทๆต็จ‹](#ๆ•่Žทๆต็จ‹)๏ผ‰๏ผš\n\n| ้’ฉๅญ | ้˜ถๆฎต | ็›ฎ็š„ |\n|------|------|------|\n| `beforeSnap` | ๅผ€ๅง‹ | ไปปไฝ•ๅทฅไฝœไน‹ๅ‰่ฐƒๆ•ด้€‰้กนใ€‚ |\n| `beforeClone` | ๅ…‹้š†ๅ‰ | DOM ๅ…‹้š†ไน‹ๅ‰๏ผˆ่ฐจๆ…Žไฟฎๆ”นๅฎžๆ—ถ DOM๏ผ‰ใ€‚ |\n| `afterClone` | ๅ…‹้š†ๅŽ | ๅฎ‰ๅ…จไฟฎๆ”นๅ…‹้š†ๆ ‘๏ผˆๅฆ‚ๆณจๅ…ฅๅ ๅŠ ๅฑ‚๏ผ‰ใ€‚ |\n| `beforeRender` | ๅบๅˆ—ๅŒ–ๅ‰ | SVG ่ฝฌ data URL ไน‹ๅ‰ใ€‚ |\n| `afterRender` | ๅบๅˆ—ๅŒ–ๅŽ | ๆฃ€ๆŸฅ `context.svgString` / `context.dataURL`ใ€‚ |\n| `beforeExport` | ๆฏๆฌกๅฏผๅ‡บๅ‰ | ๆฏๆฌก `toPng`ใ€`toSvg` ็ญ‰ไน‹ๅ‰ใ€‚ |\n| `afterExport` | ๆฏๆฌกๅฏผๅ‡บๅŽ | ่ฝฌๆข่ฟ”ๅ›ž็ป“ๆžœใ€‚ |\n| `afterSnap` | ไธ€ๆฌก | ็ฌฌไธ€ๆฌกๅฏผๅ‡บๅŽ๏ผ›ๆธ…็†ใ€‚ |\n| `defineExports` | ่ฎพ็ฝฎ | ๆทปๅŠ ่‡ชๅฎšไน‰ๅฏผๅ‡บๅ™จ๏ผˆๅฆ‚ `toPdf`๏ผ‰ใ€‚ |\n\n> `afterExport` ็š„่ฟ”ๅ›žๅ€ผไผš้“พๆŽฅๅˆฐไธ‹ไธ€ไธชๆ’ไปถ๏ผˆ่ฝฌๆข็ฎก้“๏ผ‰ใ€‚\n\n### ไธŠไธ‹ๆ–‡ๅฏน่ฑก\n\nๆฏไธช้’ฉๅญ้ƒฝๆŽฅๆ”ถไธ€ไธชๅŒ…ๅซ่ง„่ŒƒๅŒ–ๆ•่Žท็Šถๆ€็š„ `context` ๅฏน่ฑก๏ผš\n\n* **่พ“ๅ…ฅๅ’Œ้€‰้กน๏ผš**\n `element`, `debug`, `fast`, `scale`, `dpr`, `width`, `height`, `backgroundColor`, `quality`, `useProxy`, `cache`, `outerTransforms`, `outerShadows`, `safariWarmupAttempts`, `embedFonts`, `localFonts`, `iconFonts`, `excludeFonts`, `exclude`, `excludeMode`, `filter`, `filterMode`, `fallbackURL`ใ€‚\n\n* **ไธญ้—ดๅ€ผ๏ผˆๅ–ๅ†ณไบŽ้˜ถๆฎต๏ผ‰๏ผš**\n `clone`, `classCSS`, `styleCache`, `fontsCSS`, `baseCSS`, `svgString`, `dataURL`ใ€‚\n\n* **ๅฏผๅ‡บๆœŸ้—ด๏ผš**\n `context.export = { type, options, url }`\n ๅ…ถไธญ `type` ๆ˜ฏๅฏผๅ‡บๅ™จๅ็งฐ๏ผˆ`\"png\"`ใ€`\"jpeg\"`ใ€`\"svg\"`ใ€`\"blob\"` ็ญ‰๏ผ‰๏ผŒ`url` ๆ˜ฏๅบๅˆ—ๅŒ–็š„ SVG ๅŸบ็ก€ใ€‚\n\n> ๆ‚จๅฏไปฅๅฎ‰ๅ…จๅœฐไฟฎๆ”น `context`๏ผˆไพ‹ๅฆ‚๏ผŒ่ฆ†็›– `backgroundColor` ๆˆ– `quality`๏ผ‰โ€”โ€”ไฝ†่ฆๅœจๆ—ฉๆœŸ๏ผˆ`beforeSnap`๏ผ‰่ฟ›่กŒไปฅ่Žทๅพ—ๅ…จๅฑ€ๆ•ˆๆžœ๏ผŒๆˆ–ๅœจ `beforeExport` ไธญ่ฟ›่กŒไปฅ่Žทๅพ—ๅ•ๆฌกๅฏผๅ‡บๆ›ดๆ”นใ€‚\n\n## ้€š่ฟ‡ๆ’ไปถ่‡ชๅฎšไน‰ๅฏผๅ‡บ\n\nๆ’ไปถๅฏไปฅไฝฟ็”จ `defineExports(context)` ๆทปๅŠ ๆ–ฐ็š„ๅฏผๅ‡บใ€‚\nๅฏนไบŽๆ‚จ่ฟ”ๅ›ž็š„ๆฏไธชๅฏผๅ‡บ้”ฎ๏ผˆไพ‹ๅฆ‚๏ผŒ`\"pdf\"`๏ผ‰๏ผŒSnapDOM ไผšๅœจๆ•่Žท็ป“ๆžœไธŠ่‡ชๅŠจๅ…ฌๅผ€ไธ€ไธชๅไธบ **`toPdf()`** ็š„่พ…ๅŠฉๆ–นๆณ•ใ€‚\n\n**ๆณจๅ†Œๆ’ไปถ๏ผˆๅ…จๅฑ€ๆˆ–ๅ•ๆฌกๆ•่Žท๏ผ‰๏ผš**\n\n```js\nimport { snapdom } from '@zumer/snapdom';\n\n// ๅ…จๅฑ€\nsnapdom.plugins(pdfExportPlugin());\n\n// ๆˆ–ๅ•ๆฌกๆ•่Žท\nconst out = await snapdom(element, { plugins: [pdfExportPlugin()] });\n```\n\n**่ฐƒ็”จ่‡ชๅฎšไน‰ๅฏผๅ‡บ๏ผš**\n\n```js\nconst out = await snapdom(document.querySelector('#report'));\n\n// ๅ› ไธบๆ’ไปถ่ฟ”ๅ›ž { pdf: async (ctx, opts) => ... }\nconst pdfBlob = await out.toPdf({\n // ๅฏผๅ‡บๅ™จ็‰นๅฎš้€‰้กน๏ผˆwidth, height, quality, filename ็ญ‰๏ผ‰\n});\n```\n\n### ็คบไพ‹๏ผšๅ ๅŠ ๆปค้•œๆ’ไปถ\n\nไป…ๅœจๆ•่Žท็š„ๅ…‹้š†ไธญๆทปๅŠ ๅŠ้€ๆ˜Žๅ ๅŠ ๅฑ‚ๆˆ–้ขœ่‰ฒๆปค้•œ๏ผˆไธๅœจๆ‚จ็š„ๅฎžๆ—ถ DOM ไธญ๏ผ‰ใ€‚\nๅœจๅฏผๅ‡บๅ‰็”จไบŽ้ซ˜ไบฎๆ˜พ็คบๆˆ–ๅ˜ๆš—้ƒจๅˆ†ๅพˆๆœ‰็”จใ€‚\n\n```js\n/**\n * SnapDOM ็š„่ถ…็ฎ€ๅ•ๅ ๅŠ ๆปค้•œ๏ผˆไป… HTML๏ผ‰ใ€‚\n * ๅœจๅ…‹้š†็š„ๆ นๅ…ƒ็ด ไธŠๆ’ๅ…ฅๅ…จๅฐบๅฏธ
ๅ ๅŠ ๅฑ‚ใ€‚\n *\n * @param {{ color?: string; blur?: number }} [options]\n * color: ๅ ๅŠ ้ขœ่‰ฒ๏ผˆrgba/hex/hsl๏ผ‰ใ€‚้ป˜่ฎค: 'rgba(0,0,0,0.25)'\n * blur: ๅฏ้€‰็š„ๆจก็ณŠๅƒ็ด ๅ€ผ๏ผˆ้ป˜่ฎค: 0๏ผ‰\n */\nexport function overlayFilterPlugin(options = {}) {\n const color = options.color ?? 'rgba(0,0,0,0.25)';\n const blur = Math.max(0, options.blur ?? 0);\n\n return {\n name: 'overlay-filter',\n\n /**\n * ๅœจๅ…‹้š†็š„ HTML ๆ นๅ…ƒ็ด ไธŠๆทปๅŠ ๅ…จ่ฆ†็›–ๅ ๅŠ ๅฑ‚ใ€‚\n * @param {any} context\n */\n async afterClone(context) {\n const root = context.clone;\n if (!(root instanceof HTMLElement)) return; // ไป… HTML\n\n // ็กฎไฟๅŒ…ๅซๅ—๏ผŒไปฅไพฟ็ปๅฏนๅฎšไฝ็š„ๅ ๅŠ ๅฑ‚้”šๅฎšๅˆฐๆ นๅ…ƒ็ด \n if (getComputedStyle(root).position === 'static') {\n root.style.position = 'relative';\n }\n\n const overlay = document.createElement('div');\n overlay.style.position = 'absolute';\n overlay.style.left = '0';\n overlay.style.top = '0';\n overlay.style.right = '0';\n overlay.style.bottom = '0';\n overlay.style.background = color;\n overlay.style.pointerEvents = 'none';\n if (blur) overlay.style.filter = `blur(${blur}px)`;\n\n root.appendChild(overlay);\n }\n };\n}\n\n```\n\n**็”จๆณ•๏ผš**\n\n```js\nimport { snapdom } from '@zumer/snapdom';\n\n// ๅ…จๅฑ€ๆณจๅ†Œ\nsnapdom.plugins([overlayFilterPlugin, { color: 'rgba(0,0,0,0.3)', blur: 2 }]);\n\n// ๅ•ๆฌกๆ•่Žท\nconst out = await snapdom(document.querySelector('#card'), {\n plugins: [[overlayFilterPlugin, { color: 'rgba(255,200,0,0.15)' }]]\n});\n\nconst png = await out.toPng();\ndocument.body.appendChild(png);\n```\n\n> ๅ ๅŠ ๅฑ‚ไป…ๆณจๅ…ฅๅˆฐ**ๅ…‹้š†็š„ๆ ‘ไธญ**๏ผŒๆฐธ่ฟœไธไผšๆณจๅ…ฅๅˆฐๆ‚จ็š„ๅฎžๆ—ถ DOM ไธญ๏ผŒ็กฎไฟๅฎŒ็พŽไฟ็œŸๅบฆๅ’Œ้›ถ้—ช็ƒใ€‚\n\n### ๅฎŒๆ•ดๆ’ไปถๆจกๆฟ\n\nไฝฟ็”จๆญคๆจกๆฟไฝœไธบ่‡ชๅฎšไน‰้€ป่พ‘ๆˆ–ๅฏผๅ‡บๅ™จ็š„่ตท็‚นใ€‚\n\n```js\nexport function myPlugin(options = {}) {\n return {\n /** ็”จไบŽๅŽป้‡/่ฆ†็›–็š„ๅ”ฏไธ€ๅ็งฐ */\n name: 'my-plugin',\n\n /** ๅœจไปปไฝ•ๅ…‹้š†/ๆ ทๅผๅทฅไฝœไน‹ๅ‰็š„ๆ—ฉๆœŸ่ฐƒๆ•ดใ€‚ */\n async beforeSnap(context) {},\n\n /** ๅญๆ ‘ๅ…‹้š†ไน‹ๅ‰๏ผˆๅฆ‚ๆžœ่งฆๅŠๅฎžๆ—ถ DOM๏ผŒ่ฏท่ฐจๆ…Žไฝฟ็”จ๏ผ‰ใ€‚ */\n async beforeClone(context) {},\n\n /** ๅญๆ ‘ๅ…‹้š†ไน‹ๅŽ๏ผˆๅฏไปฅๅฎ‰ๅ…จๅœฐไฟฎๆ”นๅ…‹้š†็š„ๆ ‘๏ผ‰ใ€‚ */\n async afterClone(context) {},\n\n /** ๅบๅˆ—ๅŒ–ไน‹ๅ‰๏ผˆSVG/dataURL๏ผ‰ใ€‚ */\n async beforeRender(context) {},\n\n /** ๅบๅˆ—ๅŒ–ไน‹ๅŽ๏ผ›ๅฆ‚ๆžœ้œ€่ฆ๏ผŒๆฃ€ๆŸฅ context.svgString/context.dataURLใ€‚ */\n async afterRender(context) {},\n\n /** ๆฏๆฌกๅฏผๅ‡บ่ฐƒ็”จไน‹ๅ‰๏ผˆtoPng/toSvg/toBlob/...๏ผ‰ใ€‚ */\n async beforeExport(context) {},\n\n /**\n * ๆฏๆฌกๅฏผๅ‡บ่ฐƒ็”จไน‹ๅŽใ€‚\n * ๅฆ‚ๆžœๆ‚จ่ฟ”ๅ›žไธ€ไธชๅ€ผ๏ผŒๅฎƒๅฐ†ๆˆไธบไธ‹ไธ€ไธชๆ’ไปถ็š„็ป“ๆžœ๏ผˆ้“พๅผ๏ผ‰ใ€‚\n */\n async afterExport(context, result) { return result; },\n\n /**\n * ๅฎšไน‰่‡ชๅฎšไน‰ๅฏผๅ‡บๅ™จ๏ผˆ่‡ชๅŠจๆทปๅŠ ไธบ่พ…ๅŠฉๆ–นๆณ•๏ผŒๅฆ‚ out.toPdf()๏ผ‰ใ€‚\n * ่ฟ”ๅ›žๆ˜ ๅฐ„ { [key: string]: (ctx:any, opts:any) => Promise }ใ€‚\n */\n async defineExports(context) { return {}; },\n\n /** ๅœจ็ฌฌไธ€ๆฌกๅฏผๅ‡บๅฎŒๆˆๅŽ่ฟ่กŒไธ€ๆฌก๏ผˆๆธ…็†๏ผ‰ใ€‚ */\n async afterSnap(context) {}\n };\n}\n```\n\n**ๅฟซ้€Ÿๅ›ž้กพ๏ผš**\n\n* ๆ’ไปถๅฏไปฅไฟฎๆ”นๆ•่Žท่กŒไธบ๏ผˆ`beforeSnap`ใ€`afterClone` ็ญ‰๏ผ‰ใ€‚\n* ๆ‚จๅฏไปฅๅฎ‰ๅ…จๅœฐๅฐ†่ง†่ง‰ๆ•ˆๆžœๆˆ–่ฝฌๆขๆณจๅ…ฅๅˆฐๅ…‹้š†็š„ๆ ‘ไธญใ€‚\n* ๅœจ `defineExports()` ไธญๅฎšไน‰็š„ๆ–ฐๅฏผๅ‡บๅ™จไผš่‡ชๅŠจๆˆไธบ่พ…ๅŠฉๆ–นๆณ•๏ผŒๅฆ‚ `out.toPdf()`ใ€‚\n* ๆ‰€ๆœ‰้’ฉๅญ้ƒฝๅฏไปฅๆ˜ฏๅผ‚ๆญฅ็š„๏ผŒๆŒ‰้กบๅบ่ฟ่กŒ๏ผŒๅนถๅ…ฑไบซ็›ธๅŒ็š„ `context`ใ€‚\n\n\n## ้™ๅˆถ\n\n* ๅค–้ƒจๅ›พ็‰‡ๅบ”่ฏฅๆ˜ฏ CORS ๅฏ่ฎฟ้—ฎ็š„๏ผˆไฝฟ็”จ `useProxy` ้€‰้กนๅค„็† CORS ๆ‹’็ป๏ผ‰\n* ๅœจ Safari ไธŠไฝฟ็”จ WebP ๆ ผๅผๆ—ถ๏ผŒๅฐ†ๅ›ž้€€ๅˆฐ PNG ๆธฒๆŸ“ใ€‚\n* `@font-face` CSS ่ง„ๅˆ™ๅพ—ๅˆฐ่‰ฏๅฅฝๆ”ฏๆŒ๏ผŒไฝ†ๅฆ‚ๆžœ้œ€่ฆไฝฟ็”จ JS `FontFace()`๏ผŒ่ฏทๅ‚้˜…ๆญค่งฃๅ†ณๆ–นๆกˆ [`#43`](https://github.com/zumerlab/snapdom/issues/43)\n* **Safari**๏ผšๅฏ็”จ `embedFonts` ๆˆ–ๅŒ…ๅซ่ƒŒๆ™ฏ/่’™็‰ˆๅ›พ็‰‡็š„ๆ•่Žทไผš่พƒๆ…ข๏ผŒๅ›  [WebKit #219770](https://bugs.webkit.org/show_bug.cgi?id=219770)๏ผˆๅญ—ไฝ“่งฃ็ ๆ—ถๆœบ๏ผ‰ใ€‚SnapDOM ้€š่ฟ‡้ข„ๆ•่Žทๅ’Œ `drawImage` ้ข„็ƒญ็ฎก้“๏ผ›ๅฏ้€š่ฟ‡ `safariWarmupAttempts` ่ฐƒๆ•ด๏ผˆ้ป˜่ฎค 3๏ผ‰ใ€‚\n* **่‡ชๅฎšไน‰ๆปšๅŠจๆกๆ ทๅผ**๏ผˆ`::-webkit-scrollbar`๏ผ‰๏ผšไป…ๅœจๅ…ƒ็ด *ๆœชๆปšๅŠจ*ๆ—ถ็”Ÿๆ•ˆใ€‚่‹ฅๅทฒๆปšๅŠจ๏ผŒๅฐ†ๆ•่Žท่ง†ๅฃๅ†…ๅฎนไธ”ไธๆ˜พ็คบๆปšๅŠจๆกใ€‚\n\n\n## โšก ๆ€ง่ƒฝๅŸบๅ‡†ๆต‹่ฏ•๏ผˆChromium๏ผ‰\n\n**่ฎพ็ฝฎ่ฏดๆ˜Žใ€‚** ๅœจ Chromium ไธŠไฝฟ็”จ Vitest ๅŸบๅ‡†ๆต‹่ฏ•๏ผŒไป“ๅบ“ๆต‹่ฏ•ใ€‚็กฌไปถๅฏ่ƒฝๅฝฑๅ“็ป“ๆžœใ€‚\nๆ•ฐๅ€ผไธบ**ๅนณๅ‡ๆ•่Žทๆ—ถ้—ด๏ผˆๆฏซ็ง’๏ผ‰** โ†’ ่ถŠไฝŽ่ถŠๅฅฝใ€‚\n\n### ็ฎ€ๅ•ๅ…ƒ็ด \n\n| ๅœบๆ™ฏ | SnapDOM ๅฝ“ๅ‰็‰ˆๆœฌ | SnapDOM v1.9.9 | html2canvas | html-to-image |\n| ------------------------ | --------------- | -------------- | ----------- | ------------- |\n| ๅฐๅฐบๅฏธ (200ร—100) | **0.5 ms** | 0.8 ms | 67.7 ms | 3.1 ms |\n| ๆจกๆ€ๆก† (400ร—300) | **0.5 ms** | 0.8 ms | 75.5 ms | 3.6 ms |\n| ้กต้ข่ง†ๅ›พ (1200ร—800) | **0.5 ms** | 0.8 ms | 114.2 ms | 3.3 ms |\n| ๅคงๆปšๅŠจ (2000ร—1500) | **0.5 ms** | 0.8 ms | 186.3 ms | 3.2 ms |\n| ่ถ…ๅคงๅฐบๅฏธ (4000ร—2000) | **0.5 ms** | 0.9 ms | 425.9 ms | 3.3 ms |\n\n\n### ๅคๆ‚ๅ…ƒ็ด \n\n| ๅœบๆ™ฏ | SnapDOM ๅฝ“ๅ‰็‰ˆๆœฌ | SnapDOM v1.9.9 | html2canvas | html-to-image |\n| ------------------------ | --------------- | -------------- | ----------- | ------------- |\n| ๅฐๅฐบๅฏธ (200ร—100) | **1.6 ms** | 3.3 ms | 68.0 ms | 14.3 ms |\n| ๆจกๆ€ๆก† (400ร—300) | **2.9 ms** | 6.8 ms | 87.5 ms | 34.8 ms |\n| ้กต้ข่ง†ๅ›พ (1200ร—800) | **17.5 ms** | 50.2 ms | 178.0 ms | 429.0 ms |\n| ๅคงๆปšๅŠจ (2000ร—1500) | **54.0 ms** | 201.8 ms | 735.2 ms | 984.2 ms |\n| ่ถ…ๅคงๅฐบๅฏธ (4000ร—2000) | **171.4 ms** | 453.7 ms | 1,800.4 ms | 2,611.9 ms |\n\n\n### ่ฟ่กŒๅŸบๅ‡†ๆต‹่ฏ•\n\n```sh\ngit clone https://github.com/zumerlab/snapdom.git\ncd snapdom\nnpm install\nnpm run test:benchmark\n```\n\n\n## ่ทฏ็บฟๅ›พ\n\nSnapDOM ๆœชๆฅ็‰ˆๆœฌ็š„่ฎกๅˆ’ๆ”น่ฟ›๏ผš\n\n* [X] **ๅฎž็Žฐๆ’ไปถ็ณป็ปŸ**\n SnapDOM ๅฐ†ๆ”ฏๆŒๅค–้ƒจๆ’ไปถไปฅๆ‰ฉๅฑ•ๆˆ–่ฆ†็›–ๅ†…้ƒจ่กŒไธบ๏ผˆไพ‹ๅฆ‚่‡ชๅฎšไน‰่Š‚็‚น่ฝฌๆขๅ™จใ€ๅฏผๅ‡บๅ™จๆˆ–่ฟ‡ๆปคๅ™จ๏ผ‰ใ€‚\n\n* [ ] **้‡ๆž„ไธบๆจกๅ—ๅŒ–ๆžถๆž„**\n ๅ†…้ƒจ้€ป่พ‘ๅฐ†่ขซๆ‹†ๅˆ†ไธบๆ›ดๅฐใ€ๆ›ดไธ“ๆณจ็š„ๆจกๅ—๏ผŒไปฅๆ้ซ˜ๅฏ็ปดๆŠคๆ€งๅ’Œไปฃ็ ๅค็”จใ€‚\n\n* [X] **ๅฐ†ๅ†…้ƒจ้€ป่พ‘ไธŽๅ…จๅฑ€้€‰้กน่งฃ่€ฆ**\n ๅ‡ฝๆ•ฐๅฐ†้‡ๆ–ฐ่ฎพ่ฎกไปฅ้ฟๅ…็›ดๆŽฅไพ่ต– `options`ใ€‚้›†ไธญๅผๆ•่ŽทไธŠไธ‹ๆ–‡ๅฐ†ๆ้ซ˜ๆธ…ๆ™ฐๅบฆใ€่‡ชไธปๆ€งๅ’Œๅฏๆต‹่ฏ•ๆ€งใ€‚ๅ‚่ง [`next` ๅˆ†ๆ”ฏ](https://github.com/zumerlab/snapdom/tree/main)\n\n* [X] **ๆšด้œฒ็ผ“ๅญ˜ๆŽงๅˆถ**\n ็”จๆˆทๅฐ†่ƒฝๅคŸๆ‰‹ๅŠจๆธ…้™คๅ›พ็‰‡ๅ’Œๅญ—ไฝ“็ผ“ๅญ˜ๆˆ–้…็ฝฎ่‡ชๅทฑ็š„็ผ“ๅญ˜็ญ–็•ฅใ€‚\n\n* [X] **่‡ชๅŠจๅญ—ไฝ“้ข„ๅŠ ่ฝฝ**\n ๆ‰€้œ€็š„ๅญ—ไฝ“ๅฐ†ๅœจๆ•่Žทๅ‰่‡ชๅŠจๆฃ€ๆต‹ๅ’Œ้ข„ๅŠ ่ฝฝ๏ผŒๅ‡ๅฐ‘ๆ‰‹ๅŠจ่ฐƒ็”จ `preCache()` ็š„้œ€่ฆใ€‚\n\n* [X] **ๆ–‡ๆกฃๅŒ–ๆ’ไปถๅผ€ๅ‘**\n ๅฐ†ๆไพ›ๅฎŒๆ•ด็š„ๆŒ‡ๅ—๏ผŒ็”จไบŽๅˆ›ๅปบๅ’Œๆณจๅ†Œ่‡ชๅฎšไน‰ SnapDOM ๆ’ไปถใ€‚\n\n* [ ] **ไฝฟๅฏผๅ‡บๅทฅๅ…ทๆ”ฏๆŒ tree-shaking**\n `toPng`ใ€`toJpg`ใ€`toBlob` ็ญ‰ๅฏผๅ‡บๅ‡ฝๆ•ฐๅฐ†่ขซ้‡ๆž„ไธบ็‹ฌ็ซ‹ๆจกๅ—๏ผŒไปฅๆ”ฏๆŒ tree shaking ๅ’Œๆœ€ๅฐๅŒ–ๆž„ๅปบใ€‚\n\nๆœ‰ๆƒณๆณ•ๆˆ–ๅŠŸ่ƒฝ่ฏทๆฑ‚๏ผŸ\nๆฌข่ฟŽๅœจ [GitHub Discussions](https://github.com/zumerlab/snapdom/discussions) ไธญๅˆ†ไบซๅปบ่ฎฎๆˆ–ๅ้ฆˆใ€‚\n\n\n## ๅผ€ๅ‘\n\n**ๆบ็ ็ป“ๆž„๏ผš**\n- `src/api/` โ€“ ๅ…ฌๅ…ฑ API๏ผˆ`snapdom`ใ€`preCache`๏ผ‰\n- `src/core/` โ€“ ๆ•่Žทๆต็จ‹ใ€ๅ…‹้š†ใ€ๅ‡†ๅค‡ใ€ๆ’ไปถ\n- `src/modules/` โ€“ ๅ›พ็‰‡ใ€ๅญ—ไฝ“ใ€ไผชๅ…ƒ็ด ใ€่ƒŒๆ™ฏใ€SVG\n- `src/exporters/` โ€“ toPngใ€toSvgใ€toBlob ็ญ‰\n- `dist/` โ€“ ๆž„ๅปบไบง็‰ฉ๏ผˆ`snapdom.js`ใ€`snapdom.mjs`ใ€`preCache.mjs`ใ€`plugins.mjs`๏ผ‰\n\n**ๆž„ๅปบ๏ผš**\n```sh\ngit clone https://github.com/zumerlab/snapdom.git\ncd snapdom\ngit checkout dev\nnpm install\nnpm run compile\n```\n\n**ๆต‹่ฏ•๏ผš**\n```sh\nnpx playwright install # ๆต่งˆๅ™จๆต‹่ฏ•ๆ‰€้œ€\nnpm test\nnpm run test:benchmark\n```\n\n่ฏฆ็ป†ๆŒ‡ๅ—่ฏทๅ‚้˜… [CONTRIBUTING](https://github.com/zumerlab/snapdom/blob/main/CONTRIBUTING.md)ใ€‚\n\n\n## ่ดก็Œฎ่€… ๐Ÿ™Œ\n\n\n

\n\"tinchox5\"/\n\"Jarvis2018\"/\n\"tarwin\"/\n\"Amyuan23\"/\n\"airamhr9\"/\n\"FlavioLimaMindera\"/\n\"jswhisperer\"/\n\"K1ender\"/\n\"kohaiy\"/\n\"17biubiu\"/\n\"av01d\"/\n\"CHOYSEN\"/\n\"pedrocateexte\"/\n\"domialex\"/\n\"elliots\"/\n\"stypr\"/\n\"mon-jai\"/\n\"sharuzzaman\"/\n\"simon1uo\"/\n\"titoBouzout\"/\n\"ZiuChen\"/\n\"harshasiddartha\"/\n\"karasHou\"/\n\"jhbae200\"/\n\"xiaobai-web715\"/\n\"miusuncle\"/\n\"rbbydotdev\"/\n\"zhanghaotian2018\"/\n

\n\n\n## ๐Ÿ’– ่ตžๅŠฉ่€…\n\n็‰นๅˆซๆ„Ÿ่ฐข [@megaphonecolin](https://github.com/megaphonecolin)ใ€[@sdraper69](https://github.com/sdraper69)ใ€[@reynaldichernando](https://github.com/reynaldichernando) ๅ’Œ [@gamma-app](https://github.com/gamma-app)๏ผŒๆ„Ÿ่ฐขไป–ไปฌๅฏนๆœฌ้กน็›ฎ็š„ๆ”ฏๆŒ๏ผ\n\nๅฆ‚ๆžœๆ‚จไนŸๆƒณๆ”ฏๆŒ่ฟ™ไธช้กน็›ฎ๏ผŒๆ‚จๅฏไปฅ[ๆˆไธบ่ตžๅŠฉ่€…](https://github.com/sponsors/tinchox5)ใ€‚\n\n## Star ๅŽ†ๅฒ\n\n[![Star History Chart](https://api.star-history.com/svg?repos=zumerlab/snapdom&type=Date)](https://www.star-history.com/#zumerlab/snapdom&Date)\n\n## ่ฎธๅฏ่ฏ\n\nMIT ยฉ Zumerlab\n" }, { "path": "__tests__/api.preCache.more.test.js", "content": "// __tests__/api.preCache.more.test.js\nimport { describe, it, expect, vi, beforeEach } from 'vitest'\n\nvi.mock('../src/utils', async () => {\n const actual = await vi.importActual('../src/utils')\n return {\n ...actual,\n fetchImage: vi.fn(async () => 'data:image/png;base64,iVBORw0KGgo='),\n precacheCommonTags: vi.fn(),\n isSafari: vi.fn(() => false), // queda como vi.fn() invocable\n }\n})\n\n// preCache importa inlineBackgroundImages desde ../modules/background.js\n// (si en tu cรณdigo real lo seguรญs importando desde ../utils, cambiรก esta ruta acรก)\nvi.mock('../src/modules/background.js', () => ({\n inlineBackgroundImages: vi.fn(async () => {}),\n}))\n\nvi.mock('../src/modules/fonts.js', () => ({\n embedCustomFonts: vi.fn(async () => ''),\n collectUsedFontVariants: vi.fn(() => new Set(['Mansalva__700__italic__100'])),\n collectUsedCodepoints: vi.fn(() => new Set([65])),\n ensureFontsReady: vi.fn(async () => {}),\n}))\n\n// โฌ‡๏ธ reciรฉn ahora importamos SUT + sรญmbolos mocked\nimport { preCache } from '../src/api/preCache.js'\nimport { cache } from '../src/core/cache.js'\nimport * as utils from '../src/utils'\nimport { inlineBackgroundImages } from '../src/modules/background.js'\nimport {\n embedCustomFonts,\n collectUsedFontVariants,\n collectUsedCodepoints,\n ensureFontsReady,\n} from '../src/modules/fonts.js'\n\ndescribe('preCache โ€“ lรญneas difรญciles', () => {\n beforeEach(() => {\n vi.clearAllMocks()\n utils.isSafari.mockReset?.()\n utils.isSafari.mockReturnValue(false)\n if (!cache.session) cache.session = {}\n cache.session.styleCache = new WeakMap()\n })\n\n it('pasa cache.session.styleCache a inlineBackgroundImages (lรญneas 49โ€“50)', async () => {\n const root = document.createElement('div')\n const ref = cache.session.styleCache\n\n await expect(preCache(root, { embedFonts: false })).resolves.toBeUndefined()\n\n expect(inlineBackgroundImages).toHaveBeenCalledTimes(1)\n const args = inlineBackgroundImages.mock.calls[0] // [source, mirror, styleCache, options]\n expect(args[0]).toBe(root)\n expect(args[2]).toStrictEqual(ref) // MISMA referencia => cubre 49โ€“50\n expect(args[3]).toMatchObject({ useProxy: '' })\n })\n\n it('si inlineBackgroundImages falla, preCache resuelve igual (catch 56โ€“65)', async () => {\n inlineBackgroundImages.mockRejectedValueOnce(new Error('boom'))\n const el = document.createElement('section')\n\n await expect(preCache(el, { embedFonts: false })).resolves.toBeUndefined()\n })\n\n it('Safari warmup + embed de fuentes con params correctos (84โ€“91)', async () => {\n utils.isSafari.mockReturnValue(true)\n\n const root = document.createElement('div')\n const excludeFonts = { subsets: ['latin'], domains: ['bad.example'] }\n const localFonts = [{ family: 'Foo', src: 'data:font/woff2;base64,AA==' }]\n\n await preCache(root, {\n embedFonts: true,\n useProxy: '/proxy/',\n excludeFonts,\n localFonts,\n })\n\n expect(ensureFontsReady).toHaveBeenCalledTimes(1)\n const [families, reps] = ensureFontsReady.mock.calls[0]\n expect(families instanceof Set).toBe(true)\n expect(Array.from(families)).toContain('Mansalva')\n expect(reps).toBe(3)\n\n expect(embedCustomFonts).toHaveBeenCalledTimes(1)\n const call = embedCustomFonts.mock.calls[0][0]\n expect(call.required).toEqual(collectUsedFontVariants())\n expect(call.usedCodepoints).toEqual(collectUsedCodepoints())\n expect(call.exclude).toEqual(excludeFonts)\n expect(call.localFonts).toEqual(localFonts)\n expect(call.useProxy).toBe('/proxy/')\n })\n\n it('crea styleCache si no existe y lo inyecta a inlineBackgroundImages (49โ€“50)', async () => {\n // Aseguramos estado inicial sin styleCache\n cache.session = cache.session || {}\n delete cache.session.styleCache\n\n const root = document.createElement('main')\n\n await expect(preCache(root, { embedFonts: false })).resolves.toBeUndefined()\n\n // Se llamรณ una vez y con el WeakMap reciรฉn creado\n expect(inlineBackgroundImages).toHaveBeenCalledTimes(1)\n const args = inlineBackgroundImages.mock.calls[0] // [source, mirror, styleCache, options]\n expect(args[0]).toBe(root)\n\n // preCache debiรณ crear y colgar el WeakMap en cache.session.styleCache\n expect(cache.session.styleCache).toBeInstanceOf(WeakMap)\n expect(args[2]).toBe(cache.session.styleCache) // MISMA referencia => cubre 49โ€“50\n})\n\nit('si inlineBackgroundImages lanza (throw sync), preCache resuelve igual (56โ€“65)', async () => {\n // Lanzar sincrรณnico para entrar al try/catch de preCache\n inlineBackgroundImages.mockImplementationOnce(() => { throw new Error('sync-boom') })\n\n const el = document.createElement('section')\n await expect(preCache(el, { embedFonts: false })).resolves.toBeUndefined()\n\n // (Opcional) el resto del flujo no debe romperse\n expect(inlineBackgroundImages).toHaveBeenCalledTimes(1)\n})\n\n})\n" }, { "path": "__tests__/api.preCache.test.js", "content": "import { describe, it, expect, beforeEach, vi } from 'vitest'\nimport { preCache } from '../src/api/preCache.js'\nimport { cache } from '../src/core/cache.js'\nimport { safeEncodeURI } from '../src/utils/helpers.js' // ajustรก el path si difiere\n\nbeforeEach(() => {\n vi.restoreAllMocks()\n cache.image?.clear?.()\n cache.background?.clear?.()\n document.body.innerHTML = ''\n})\n\ndescribe('preCache โ€“ extra coverage', () => {\n it('prefetches SVG background via proxy fallback and dedupes repeated URL', async () => {\n const PROXY = 'https://proxy.example.com/?u='\n const DIRECT = 'https://cdn.example.com/icon.svg'\n const svg = ''\n\n globalThis.fetch = vi.fn((url) => {\n const u = String(url)\n if (u.startsWith(PROXY)) {\n return Promise.resolve({\n ok: true,\n text: () => Promise.resolve(svg),\n blob: () => Promise.resolve(new Blob([svg], { type: 'image/svg+xml' })),\n })\n }\n // En el contrato nuevo, no se deberรญa llegar acรก si useProxy estรก seteado\n return Promise.reject(new Error('network fail'))\n })\n\n const root = document.createElement('div')\n const a = document.createElement('div')\n const b = document.createElement('div')\n a.style.backgroundImage = `url(${DIRECT})`\n b.style.backgroundImage = `url(${DIRECT})`\n root.appendChild(a)\n root.appendChild(b)\n document.body.appendChild(root)\n\n await preCache(root, { useProxy: PROXY })\n\n const calls = vi.mocked(globalThis.fetch).mock.calls.map(([u]) => String(u))\n const proxyCalls = calls.filter(u => u.startsWith(PROXY))\n const directCalls = calls.filter(u => u === DIRECT)\n\n // (1) EXACTAMENTE una llamada proxied (in-flight + cache dedupe)\n expect(proxyCalls.length).toBe(1)\n\n // (2) Con proxy activo, NO hay intentos directos en el nuevo snapFetch\n expect(directCalls.length).toBe(0)\n\n // (3) Dedupe en cache.background: una sola entrada para ese URL\n const key = safeEncodeURI(DIRECT)\n expect(cache.background.has(key)).toBe(true)\n expect([...cache.background.keys()].filter(k => k === key).length).toBe(1)\n\n document.body.removeChild(root)\n})\n\n it('handles mixed background layers (gradient + url) and only processes the URL layer', async () => {\n // No contamos fetch acรก porque raster usa Image() y puede ser 0.\n globalThis.fetch = vi.fn() // por si algo intenta fetch (no deberรญa)\n\n const URL = 'https://assets.test/a.svg' // usamos SVG para que sรญ pase por fetch en tu impl\n // Si querรฉs testear raster, cambiรก asserts a cache.image; con SVG comprobamos background.\n const svg = ''\n vi.mocked(globalThis.fetch).mockResolvedValue({\n ok: true,\n text: () => Promise.resolve(svg),\n blob: () => Promise.resolve(new Blob([svg], { type: 'image/svg+xml' })),\n })\n\n const el = document.createElement('div')\n el.style.backgroundImage = `linear-gradient(90deg, #000, #fff), url(${URL})`\n document.body.appendChild(el)\n\n await preCache(el)\n\n // Verificamos que SOLO la capa url(...) fue procesada y quedรณ cacheada\n const key = safeEncodeURI(URL)\n expect(cache.background.has(key)).toBe(true)\n\n // No exigimos conteo de fetch: puede ser 0 si fuese raster.\n // Si mantenรฉs SVG como arriba, opcionalmente:\n // expect(globalThis.fetch).toHaveBeenCalledTimes(1);\n\n document.body.removeChild(el)\n })\n\n it('walks the subtree and preloads child backgrounds', async () => {\n const svg = ''\n globalThis.fetch = vi.fn().mockResolvedValue({\n ok: true,\n text: () => Promise.resolve(svg),\n blob: () => Promise.resolve(new Blob([svg], { type: 'image/svg+xml' })),\n })\n\n const root = document.createElement('div')\n const child = document.createElement('span')\n const CHILD_URL = 'https://x.test/nested.svg'\n child.style.backgroundImage = `url(${CHILD_URL})`\n root.appendChild(child)\n document.body.appendChild(root)\n\n await preCache(root)\n\n // Comprobamos que el hijo fue visto y cacheado\n const key = safeEncodeURI(CHILD_URL)\n expect(cache.background.has(key)).toBe(true)\n\n document.body.removeChild(root)\n })\n})\n" }, { "path": "__tests__/api.snapdom.more.test.js", "content": "// __tests__/api.snapdom.more.test.js โ€“ snapdom.js extra coverage\nimport { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'\nimport { snapdom } from '../src/index.js'\n\nvi.mock('../src/utils/browser', { spy: true })\nimport * as browser from '../src/utils/browser'\n\nbeforeEach(() => {\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n vi.mocked(browser.isSafari).mockReturnValue(false)\n})\n\nafterEach(() => {\n document.body.innerHTML = ''\n})\n\ndescribe('snapdom โ€“ error handling', () => {\n it('throws when element is null', async () => {\n await expect(snapdom(null)).rejects.toThrow(/cannot be null/)\n })\n it('throws when element is undefined', async () => {\n await expect(snapdom(undefined)).rejects.toThrow(/cannot be null/)\n })\n})\n\ndescribe('snapdom โ€“ result.to()', () => {\n it('throws for unknown export type', async () => {\n const el = document.createElement('div')\n el.textContent = 'x'\n document.body.appendChild(el)\n const result = await snapdom(el)\n await expect(result.to('unknownType')).rejects.toThrow(/Unknown export type/)\n })\n})\n\ndescribe('snapdom โ€“ result helpers', () => {\n it('result has all expected export methods', async () => {\n const el = document.createElement('div')\n el.style.width = '50px'\n el.style.height = '50px'\n el.textContent = 'x'\n document.body.appendChild(el)\n const result = await snapdom(el)\n expect(typeof result.toPng).toBe('function')\n expect(typeof result.toSvg).toBe('function')\n expect(typeof result.toCanvas).toBe('function')\n expect(typeof result.download).toBe('function')\n })\n})\n" }, { "path": "__tests__/api.snapdom.test.js", "content": "import { describe, it, expect, vi } from 'vitest'\nimport { snapdom } from '../src/api/snapdom.js'\n\ndescribe('snapdom API (direct)', () => {\n it('throws on null element', async () => {\n await expect(snapdom(null)).rejects.toThrow()\n })\n\n it('snapdom returns export methods', async () => {\n const el = document.createElement('div')\n el.style.width = '100px'\n el.style.height = '50px'\n document.body.appendChild(el)\n const result = await snapdom(el)\n expect(result).toHaveProperty('toRaw')\n expect(result).toHaveProperty('toImg')\n expect(result).toHaveProperty('download')\n document.body.removeChild(el)\n })\n\n it('snapdom.toRaw, toImg, toCanvas, toBlob, toPng, toJpg, toWebp, download', async () => {\n const el = document.createElement('div')\n el.style.width = '100px'\n el.style.height = '50px'\n document.body.appendChild(el)\n await snapdom.toRaw(el)\n await snapdom.toImg(el)\n await snapdom.toCanvas(el)\n await snapdom.toBlob(el)\n await snapdom.toPng(el)\n await snapdom.toJpg(el)\n await snapdom.toWebp(el)\n await snapdom.download(el, { format: 'png', filename: 'test' })\n document.body.removeChild(el)\n })\n\n it('cubre rama Safari en toImg', async () => {\n vi.resetModules()\n vi.mock('../utils', async () => {\n const actual = await vi.importActual('../utils')\n return { ...actual, isSafari: true }\n })\n const { snapdom } = await import('../src/api/snapdom.js')\n const el = document.createElement('div')\n el.style.width = '10px'\n el.style.height = '10px'\n document.body.appendChild(el)\n // Forzar un SVG dataURL simple\n const img = new Image()\n img.width = 10\n img.height = 10\n img.decode = () => Promise.resolve()\n globalThis.Image = function() { return img }\n const res = await snapdom(el)\n await res.toImg()\n document.body.removeChild(el)\n vi.resetModules()\n })\n\n it('cubre rama de download SVG', async () => {\n const el = document.createElement('div')\n el.style.width = '10px'\n el.style.height = '10px'\n document.body.appendChild(el)\n // Mock a.click y URL.createObjectURL\n const a = document.createElement('a')\n document.body.appendChild(a)\n const origCreate = URL.createObjectURL\n URL.createObjectURL = () => 'blob:url'\n const origClick = a.click\n a.click = () => {}\n HTMLAnchorElement.prototype.click = () => {}\n const { snapdom } = await import('../src/api/snapdom.js')\n await snapdom.download(el, { format: 'svg', filename: 'testsvg' })\n URL.createObjectURL = origCreate\n a.click = origClick\n document.body.removeChild(a)\n document.body.removeChild(el)\n })\n\n it('snapdom.toBlob supports type options ', async () => {\n const el = document.createElement('div')\n el.style.width = '50px'\n el.style.height = '30px'\n document.body.appendChild(el)\n\n const result = await snapdom(el)\n\n const pngBlob = await result.toBlob({ type: 'png' })\n expect(pngBlob).toBeInstanceOf(Blob)\n expect(pngBlob.type).toBe('image/png')\n\n const jpgBlob = await result.toBlob({ type: 'jpeg', quality: 0.8 })\n expect(jpgBlob).toBeInstanceOf(Blob)\n expect(jpgBlob.type).toBe('image/jpeg')\n\n const webpBlob = await result.toBlob({ type: 'webp', quality: 0.9 })\n expect(webpBlob).toBeInstanceOf(Blob)\n expect(webpBlob.type).toBe('image/webp')\n\n // default fallback\n const svgBlob = await result.toBlob()\n expect(svgBlob).toBeInstanceOf(Blob)\n expect(svgBlob.type).toBe('image/svg+xml')\n\n document.body.removeChild(el)\n})\n\nit('toPng, toJpg, toWebp return HTMLImageElement with URLs', async () => {\n const el = document.createElement('div')\n el.style.width = '60px'\n el.style.height = '40px'\n document.body.appendChild(el)\n const snap = await snapdom(el)\n\n const pngImg = await snap.toPng()\n expect(pngImg).toBeInstanceOf(HTMLImageElement)\n expect(typeof pngImg.src).toBe('string')\nexpect(pngImg.src.startsWith('data:image/png')).toBe(true)\n\n const jpgImg = await snap.toJpg()\n expect(jpgImg).toBeInstanceOf(HTMLImageElement)\n expect(typeof jpgImg.src).toBe('string')\nexpect(jpgImg.src.startsWith('data:image/jpeg')).toBe(true)\n\n const webpImg = await snap.toWebp()\n expect(webpImg).toBeInstanceOf(HTMLImageElement)\n expect(typeof webpImg.src).toBe('string')\nexpect(webpImg.src.startsWith('data:image/webp')).toBe(true)\n document.body.removeChild(el)\n})\n\nit('snapdom should support exclude option to filter out elements by CSS selectors', async () => {\n const el = document.createElement('div')\n el.innerHTML = `\n

Title

\n
Should be excluded
\n
Private data
\n

This should remain

\n `\n document.body.appendChild(el)\n\n const result = await snapdom(el, { exclude: ['.exclude-me', '[data-private]'] })\n\n const svg = result.toRaw()\n const decoded = decodeURIComponent(svg.split(',')[1])\n expect(decoded).not.toContain('Should be excluded')\n expect(decoded).not.toContain('Private data')\n expect(decoded).toContain('Title')\n expect(decoded).toContain('This should remain')\n})\n\nit('snapdom should support filter option to exclude elements with custom logic', async () => {\n const el = document.createElement('div')\n el.innerHTML = `\n
Level 1\n
Level 2\n
Level 3
\n
\n
\n `\n document.body.appendChild(el)\n const result = await snapdom(el, {\n filter: (element) => !element.classList.contains('level-3')\n })\n\n const svg = result.toRaw()\n const decoded = decodeURIComponent(svg.split(',')[1])\n expect(decoded).toContain('Level 1')\n expect(decoded).toContain('Level 2')\n expect(decoded).not.toContain('Level 3')\n})\n\nit('snapdom should support combining exclude and filter options', async () => {\n const el = document.createElement('div')\n el.innerHTML = `\n
Exclude by selector
\n
Exclude by filter
\n
Keep this content
\n `\n document.body.appendChild(el)\n\n const result = await snapdom(el, {\n exclude: ['.exclude-by-selector'],\n filter: (element) => !element.classList.contains('exclude-by-filter')\n })\n\n const svg = result.toRaw()\n const decoded = decodeURIComponent(svg.split(',')[1])\n expect(decoded).not.toContain('Exclude by selector')\n expect(decoded).not.toContain('Exclude by filter')\n expect(decoded).toContain('Keep this content')\n})\n\n})\n" }, { "path": "__tests__/core.cache.test.js", "content": "// __tests__/core.cache.test.js\nimport { describe, it, expect, beforeEach } from 'vitest'\nimport { cache, normalizeCachePolicy, applyCachePolicy } from '../src/core/cache.js'\n\n/**\n * Snapshot helpers to assert identity changes.\n */\nfunction snapshotRefs() {\n return {\n image: cache.image,\n background: cache.background,\n resource: cache.resource,\n defaultStyle: cache.defaultStyle,\n baseStyle: cache.baseStyle,\n computedStyle: cache.computedStyle,\n font: cache.font,\n session_styleMap: cache.session.styleMap,\n session_styleCache: cache.session.styleCache,\n session_nodeMap: cache.session.nodeMap,\n }\n}\n\nfunction seedSomeData() {\n cache.image.set('k', 1)\n cache.background.set('b', 2)\n cache.resource.set('r', 3)\n cache.defaultStyle.set('d', 4)\n cache.baseStyle.set('bs', 5)\n cache.computedStyle.set({}, { c: 6 })\n cache.font.add('Inter__400')\n cache.session.styleMap.set('x', 'y')\n cache.session.styleCache.set({}, { sc: 1 })\n cache.session.nodeMap.set({}, document.createElement('div'))\n}\n\ndescribe('normalizeCachePolicy', () => {\n it('maps booleans and known strings, defaults to \"soft\"', () => {\n expect(normalizeCachePolicy(true)).toBe('soft')\n expect(normalizeCachePolicy(false)).toBe('disabled')\n expect(normalizeCachePolicy('auto')).toBe('auto')\n expect(normalizeCachePolicy('full')).toBe('full')\n expect(normalizeCachePolicy('soft')).toBe('soft')\n expect(normalizeCachePolicy('disabled')).toBe('disabled')\n // unknown โ†’ soft (default)\n expect(normalizeCachePolicy('weird')).toBe('soft')\n expect(normalizeCachePolicy(undefined)).toBe('soft')\n expect(normalizeCachePolicy(123)).toBe('soft')\n })\n})\n\ndescribe('applyCachePolicy', () => {\n beforeEach(() => {\n // Re-crear contenedores para que cada test sea independiente.\n cache.image = new Map()\n cache.background = new Map()\n cache.resource = new Map()\n cache.defaultStyle = new Map()\n cache.baseStyle = new Map()\n cache.computedStyle = new WeakMap()\n cache.font = new Set()\n cache.session.styleMap = new Map()\n cache.session.styleCache = new WeakMap()\n cache.session.nodeMap = new Map()\n })\n\n it('auto: resets only session.styleMap and session.nodeMap', () => {\n seedSomeData()\n const before = snapshotRefs()\n\n applyCachePolicy('auto')\n\n const after = snapshotRefs()\n // Reemplaza solo estos dos\n expect(after.session_styleMap).not.toBe(before.session_styleMap)\n expect(after.session_nodeMap).not.toBe(before.session_nodeMap)\n // Mantiene styleCache y resto\n expect(after.session_styleCache).toBe(before.session_styleCache)\n expect(after.image).toBe(before.image)\n expect(after.background).toBe(before.background)\n expect(after.resource).toBe(before.resource)\n expect(after.defaultStyle).toBe(before.defaultStyle)\n expect(after.baseStyle).toBe(before.baseStyle)\n expect(after.computedStyle).toBe(before.computedStyle)\n expect(after.font).toBe(before.font)\n\n // Nuevos maps estรกn vacรญos\n expect(cache.session.styleMap.size).toBe(0)\n expect(cache.session.nodeMap.size).toBe(0)\n })\n\n it('soft: resets toda la sesiรณn (styleMap, nodeMap, styleCache) y deja globales', () => {\n seedSomeData()\n const before = snapshotRefs()\n\n applyCachePolicy('soft')\n\n const after = snapshotRefs()\n // Reemplaza los tres de sesiรณn\n expect(after.session_styleMap).not.toBe(before.session_styleMap)\n expect(after.session_nodeMap).not.toBe(before.session_nodeMap)\n expect(after.session_styleCache).not.toBe(before.session_styleCache)\n\n // Globales se mantienen (misma identidad)\n expect(after.image).toBe(before.image)\n expect(after.background).toBe(before.background)\n expect(after.resource).toBe(before.resource)\n expect(after.defaultStyle).toBe(before.defaultStyle)\n expect(after.baseStyle).toBe(before.baseStyle)\n expect(after.computedStyle).toBe(before.computedStyle)\n expect(after.font).toBe(before.font)\n\n // Sesiรณn estรก vacรญa\n expect(cache.session.styleMap.size).toBe(0)\n expect(cache.session.nodeMap.size).toBe(0)\n })\n\n it('full: no limpia nada (mantiene identidades y contenidos)', () => {\n seedSomeData()\n const before = snapshotRefs()\n\n applyCachePolicy('full')\n\n const after = snapshotRefs()\n // Todo igual\n expect(after.image).toBe(before.image)\n expect(after.background).toBe(before.background)\n expect(after.resource).toBe(before.resource)\n expect(after.defaultStyle).toBe(before.defaultStyle)\n expect(after.baseStyle).toBe(before.baseStyle)\n expect(after.computedStyle).toBe(before.computedStyle)\n expect(after.font).toBe(before.font)\n expect(after.session_styleMap).toBe(before.session_styleMap)\n expect(after.session_styleCache).toBe(before.session_styleCache)\n expect(after.session_nodeMap).toBe(before.session_nodeMap)\n\n // Y siguen con datos\n expect(cache.image.size).toBeGreaterThan(0)\n expect(cache.session.styleMap.size).toBeGreaterThan(0)\n })\n\n it('disabled: reinstancia TODO (global + sesiรณn) y deja todo vacรญo', () => {\n seedSomeData()\n const before = snapshotRefs()\n\n applyCachePolicy('disabled')\n\n const after = snapshotRefs()\n // Todo debe ser nuevo\n expect(after.image).not.toBe(before.image)\n expect(after.background).not.toBe(before.background)\n expect(after.resource).not.toBe(before.resource)\n expect(after.defaultStyle).not.toBe(before.defaultStyle)\n expect(after.baseStyle).not.toBe(before.baseStyle)\n expect(after.computedStyle).not.toBe(before.computedStyle)\n expect(after.font).not.toBe(before.font)\n expect(after.session_styleMap).not.toBe(before.session_styleMap)\n expect(after.session_styleCache).not.toBe(before.session_styleCache)\n expect(after.session_nodeMap).not.toBe(before.session_nodeMap)\n\n // Vacรญos\n expect(cache.image.size).toBe(0)\n expect(cache.background.size).toBe(0)\n expect(cache.resource.size).toBe(0)\n expect(cache.defaultStyle.size).toBe(0)\n expect(cache.baseStyle.size).toBe(0)\n expect(cache.font.size).toBe(0)\n expect(cache.session.styleMap.size).toBe(0)\n expect(cache.session.nodeMap.size).toBe(0)\n })\n\n it('default (input desconocido): cae en soft', () => {\n seedSomeData()\n const before = snapshotRefs()\n\n // Polรญtica inexistente provoca rama default โ†’ soft\n applyCachePolicy('unknown-policy')\n\n const after = snapshotRefs()\n // Reemplaza los de sesiรณn\n expect(after.session_styleMap).not.toBe(before.session_styleMap)\n expect(after.session_nodeMap).not.toBe(before.session_nodeMap)\n expect(after.session_styleCache).not.toBe(before.session_styleCache)\n // Mantiene globales\n expect(after.image).toBe(before.image)\n expect(after.baseStyle).toBe(before.baseStyle)\n expect(after.defaultStyle).toBe(before.defaultStyle)\n expect(after.computedStyle).toBe(before.computedStyle)\n expect(after.font).toBe(before.font)\n })\n})\n" }, { "path": "__tests__/core.capture.more.test.js", "content": "import { describe, it, expect, vi, afterEach } from 'vitest'\n\n/**\n * Decode the SVG XML text from a data URL returned by captureDOM.\n * @param {string} dataUrl\n * @returns {string}\n */\nfunction decodeSvg(dataUrl) {\n const [, encoded] = dataUrl.split(',', 2)\n return decodeURIComponent(encoded)\n}\n\n/**\n * Creates a stable DOMRect for BCR stubs.\n * @param {number} x\n * @param {number} y\n * @param {number} w\n * @param {number} h\n * @returns {DOMRect}\n */\nfunction rect(x, y, w, h) {\n return new DOMRect(x, y, w, h)\n}\n\nafterEach(() => {\n vi.restoreAllMocks()\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Edge cases (los que ya tenรญas, sin cambios)\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM edge cases', () => {\n it('throws for unsupported element (unknown nodeType)', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n const fakeNode = { nodeType: 999 }\n await expect(captureDOM(fakeNode)).rejects.toThrow()\n })\n\n it('throws if element is null', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n await expect(captureDOM(null)).rejects.toThrow()\n })\n\n it('throws error if getBoundingClientRect fails', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockImplementation(() => { throw new Error('fail') })\n\n const el = document.createElement('div')\n await expect(captureDOM(el, { fast: true })).rejects.toThrow(/fail/)\n })\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Functional & overflow rules\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM functional', () => {\n it('returns a data:image/svg+xml and includes overflow visible rules', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(\n rect(0, 0, 80, 40)\n )\n\n const el = document.createElement('div')\n el.textContent = 'test'\n const url = await captureDOM(el, { fast: true, embedFonts: false })\n expect(url.startsWith('data:image/svg+xml')).toBe(true)\n\n const svg = decodeSvg(url)\n expect(svg).toMatch(/svg\\{overflow:visible;?\\}/)\n expect(svg).toMatch(/foreignObject\\{overflow:visible;?\\}/)\n })\n\n it('supports scale and width/height options (wrapper sizing behavior)', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(\n rect(10, 20, 100, 50) // aspect = 2\n )\n\n const el = document.createElement('div')\n\n // scale โ†’ mantiene tamaรฑo natural en , usa viewBox y no agrega transform: scale(...)\n const svg1 = decodeSvg(await captureDOM(el, { fast: true, scale: 2, embedFonts: false }))\n expect(svg1).toContain('width=\"100\"')\n expect(svg1).toContain('height=\"50\"')\n expect(svg1).toContain('viewBox=\"0 0 100 50\"')\n expect(svg1).toMatch(/]*style=\"[^\"]*width:\\s*100px/)\n expect(svg1).toMatch(/]*style=\"[^\"]*height:\\s*50px/)\n expect(/transform:[^\"]*scale\\(/.test(svg1)).toBe(false)\n\n // width only โ†’ el adopta 200x100; el wrapper interno permanece 100x50 (natural)\n const svg2 = decodeSvg(await captureDOM(el, { fast: true, width: 200, embedFonts: false }))\n expect(svg2).toContain('width=\"200\"')\n expect(svg2).toContain('height=\"100\"')\n expect(svg2).toContain('viewBox=\"0 0 100 50\"')\n expect(svg2).toMatch(/]*style=\"[^\"]*width:\\s*100px/)\n expect(svg2).toMatch(/]*style=\"[^\"]*height:\\s*50px/)\n\n // height only โ†’ el adopta 200x100; el wrapper permanece 100x50 (natural)\n const svg3 = decodeSvg(await captureDOM(el, { fast: true, height: 100, embedFonts: false }))\n expect(svg3).toContain('width=\"200\"')\n expect(svg3).toContain('height=\"100\"')\n expect(svg3).toContain('viewBox=\"0 0 100 50\"')\n expect(svg3).toMatch(/]*style=\"[^\"]*width:\\s*100px/)\n expect(svg3).toMatch(/]*style=\"[^\"]*height:\\s*50px/)\n })\n\n it('supports fast=false (idle scheduling path)', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 10, 10))\n const el = document.createElement('div')\n const url = await captureDOM(el, { fast: false, embedFonts: false })\n expect(url.startsWith('data:image/svg+xml')).toBe(true)\n })\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// BaseCSS presence (sin espiar ESM): solo verificamos reglas base\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM โ€“ baseCSS presence (no ESM spies)', () => {\n it('includes base overflow rules on repeated calls', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 120, 60))\n\n const el1 = document.createElement('div')\n const el2 = document.createElement('div')\n\n const s1 = decodeSvg(await captureDOM(el1, { fast: true, embedFonts: false }))\n const s2 = decodeSvg(await captureDOM(el2, { fast: true, embedFonts: false }))\n\n expect(s1).toMatch(/svg\\{overflow:visible;?\\}/)\n expect(s1).toMatch(/foreignObject\\{overflow:visible;?\\}/)\n expect(s2).toMatch(/svg\\{overflow:visible;?\\}/)\n expect(s2).toMatch(/foreignObject\\{overflow:visible;?\\}/)\n })\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Width/Height/Scale branches (precise, alineado a tu implementaciรณn actual)\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM โ€“ width/height/scale branches (precise)', () => {\n it('natural rect used when no width/height/scale given', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 100, 50))\n const el = document.createElement('div')\n const svg = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n expect(svg).toContain('width=\"100\"')\n expect(svg).toContain('height=\"50\"')\n })\n\n it('width only โ†’ SVG 200x100; wrapper queda 100x50; viewBox natural', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 100, 50))\n const el = document.createElement('div')\n const svg = decodeSvg(await captureDOM(el, { fast: true, width: 200, embedFonts: false }))\n expect(svg).toContain('width=\"200\"')\n expect(svg).toContain('height=\"100\"')\n expect(svg).toContain('viewBox=\"0 0 100 50\"')\n expect(svg).toMatch(/]*style=\"[^\"]*width:\\s*100px/)\n expect(svg).toMatch(/]*style=\"[^\"]*height:\\s*50px/)\n })\n\n it('height only โ†’ SVG 200x100; wrapper queda 100x50; viewBox natural', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 100, 50))\n const el = document.createElement('div')\n const svg = decodeSvg(await captureDOM(el, { fast: true, height: 100, embedFonts: false }))\n expect(svg).toContain('width=\"200\"')\n expect(svg).toContain('height=\"100\"')\n expect(svg).toContain('viewBox=\"0 0 100 50\"')\n expect(svg).toMatch(/]*style=\"[^\"]*width:\\s*100px/)\n expect(svg).toMatch(/]*style=\"[^\"]*height:\\s*50px/)\n })\n\n it('scale only โ†’ keeps natural width/height; uses viewBox; no transform', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 100, 50))\n const el = document.createElement('div')\n const svg = decodeSvg(await captureDOM(el, { fast: true, scale: 2, embedFonts: false }))\n expect(svg).toContain('width=\"100\"')\n expect(svg).toContain('height=\"50\"')\n expect(svg).toContain('viewBox=\"0 0 100 50\"')\n expect(/transform:[^\"]*scale\\(/.test(svg)).toBe(false)\n })\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Viewport path (sin tocar utils): solo afirmamos x/y presentes (0 o valores)\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM โ€“ viewport path sanity', () => {\n it('foreignObject has x/y attributes (tx/ty), even if 0', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(5, 7, 80, 30))\n const el = document.createElement('div')\n const svg = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n\n // No imponemos un cรกlculo exacto; validamos la presencia de x=\"\" y y=\"\" numรฉricos.\n expect(svg).toMatch(/]*\\sx=\"[-\\d]+\"/)\n expect(svg).toMatch(/]*\\sy=\"[-\\d]+\"/)\n })\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// #348: CSS vars excluded from snapshot โ€“ fidelity preserved (var() resolved)\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM โ€“ #348 CSS vars fidelity', () => {\n it('color: var(--x) resolves to computed value in output', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n const wrap = document.createElement('div')\n wrap.innerHTML = `\n \n
red text
\n `\n document.body.appendChild(wrap)\n const el = wrap.querySelector('.t348')\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 80, 20))\n\n const url = await captureDOM(el, { fast: true, embedFonts: false })\n document.body.removeChild(wrap)\n\n const svg = decodeSvg(url)\n expect(svg).toMatch(/rgb\\(255,\\s*0,\\s*0\\)|#[fF]{2}0000/)\n })\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// #372: iframe CSS isolation โ€“ wrapper div must not inherit iframe cascade\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM โ€“ #372 iframe CSS isolation', () => {\n it('wrapper div has all:initial to block iframe cascade (e.g. div { border: 10px solid red })', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n const iframe = document.createElement('iframe')\n iframe.srcdoc = `\n \n \n
content
\n `\n iframe.style.width = '100px'\n iframe.style.height = '80px'\n document.body.appendChild(iframe)\n\n await new Promise((resolve) => { iframe.onload = resolve })\n\n const doc = iframe.contentDocument\n const root = doc.documentElement\n const url = await captureDOM(root, { fast: true, embedFonts: false })\n document.body.removeChild(iframe)\n\n const svg = decodeSvg(url)\n // Wrapper div (container) inside foreignObject must be isolated from iframe CSS (#372).\n // Browser expands all:initial to individual props (border: initial, position: initial, etc.)\n expect(svg).toContain('box-sizing: border-box')\n expect(svg).toMatch(/border:\\s*initial|position:\\s*initial/)\n })\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// #362: Tailwind * { border: 0 solid } โ€“ normalize to border: none in capture\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM โ€“ #362 canvas Tailwind border', () => {\n it('elements with border-width 0 get border:none in output (not border: 0 solid)', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n const wrap = document.createElement('div')\n wrap.innerHTML = `\n \n \n `\n document.body.appendChild(wrap)\n const canvas = wrap.querySelector('#c362')\n const ctx = canvas.getContext('2d')\n ctx.fillStyle = 'red'\n ctx.fillRect(0, 0, 80, 40)\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(\n new DOMRect(0, 0, 80, 40)\n )\n\n const url = await captureDOM(wrap, { fast: true, embedFonts: false })\n document.body.removeChild(wrap)\n\n const svg = decodeSvg(url)\n // Canvas becomes img; snapshot should normalize border: 0 solid โ†’ border: none\n expect(svg).toMatch(/\\bborder:\\s*none\\b/)\n })\n})\n\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Transform handling (lenient, effect-only)\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\ndescribe('captureDOM โ€“ transform handling (lenient heuristic)', () => {\n it('when element has a rotate transform, output stays valid and exposes transform-related styles', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n const el = document.createElement('div')\n el.style.transform = 'rotate(30deg)'\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockReturnValue(new DOMRect(0, 0, 120, 60))\n\n const svg = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n\n // 1) SVG vรกlido\n expect(svg.startsWith(' {\n it('inline style in output includes individual transform properties', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n const el = document.createElement('div')\n el.style.transform = 'rotate(10deg)'\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 100, 100))\n\n const svg = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n\n // Aceptamos presencia inline o, si la implementaciรณn normaliza, resets en CSS base.\n const hasInlineAny = /style=\"[^\"]*(?:rotate|scale|translate):/.test(svg)\n const hasBaseResets = /\\b(rotate|scale|translate):\\s*none\\b/.test(svg)\n expect(hasInlineAny || hasBaseResets).toBe(true)\n\n // transform-origin suele estar presente\n expect(svg).toMatch(/transform-origin:\\s*[\\d.]+px\\s+[\\d.]+px/)\n })\n})\n\n//\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// embedFonts branch: no espiamos ESM; solo verificamos que no rompa y que\n// potencialmente inserte CSS de fuentes si el pipeline interno lo decide.\n// (Sin red real, aceptamos ambas salidas.)\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n//\ndescribe('captureDOM โ€“ embedFonts=true (no spies, effect-only)', () => {\n it('does not throw and may inject fonts CSS', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 50, 20))\n\n const el = document.createElement('div')\n el.textContent = 'Hello'\n\n const svg = decodeSvg(await captureDOM(el, { fast: true, embedFonts: true }))\n\n // No afirmamos siempre la presencia de CSS de fuentes (depende de IO/hints),\n // pero sรญ que sea SVG vรกlido.\n expect(svg.startsWith(' {\n it('cleans up the offscreen sandbox', async () => {\n const sandbox = document.createElement('div')\n sandbox.id = 'snapdom-sandbox'\n sandbox.style.position = 'absolute'\n document.body.appendChild(sandbox)\n\n const { captureDOM } = await import('../src/core/capture.js')\n vi.spyOn(Element.prototype, 'getBoundingClientRect').mockReturnValue(rect(0, 0, 10, 10))\n\n const el = document.createElement('div')\n const url = await captureDOM(el, { fast: true })\n expect(url.startsWith('data:image/svg+xml')).toBe(true)\n expect(document.getElementById('snapdom-sandbox')).toBeNull()\n })\n})\n\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Width & Height together -> container may use non-uniform scale OR set wrapper size\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\ndescribe('captureDOM โ€“ width & height together apply size (scale or wrapper size)', () => {\n it('adopts requested SVG width/height; implementation may use non-uniform scale, wrapper sizing, or viewBox-only', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n // Natural rect = 100x50 (aspect 2)\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockReturnValue(new DOMRect(0, 0, 100, 50))\n\n const el = document.createElement('div')\n\n // Ask for 150x120\n const svg = decodeSvg(await captureDOM(el, {\n fast: true,\n width: 150,\n height: 120,\n embedFonts: false,\n }))\n\n // SVG header adopta el tamaรฑo pedido\n expect(svg).toContain('width=\"150\"')\n expect(svg).toContain('height=\"120\"')\n\n // Implementaciรณn puede elegir:\n // A) non-uniform scale en container\n const hasScale = /transform:[^\"]*scale\\(\\s*1\\.5[0-9]*\\s*,\\s*2\\.4[0-9]*\\s*\\)/.test(svg)\n // B) explicit wrapper sizing via style width/height\n const hasWrapperSize =\n /]*style=\"[^\"]*width:\\s*150px[^\"]*height:\\s*120px/.test(svg) ||\n /]*style=\"[^\"]*height:\\s*120px[^\"]*width:\\s*150px/.test(svg)\n // C) solo viewBox natural con wrapper natural (lo que estรกs emitiendo)\n const usesViewBoxOnly =\n svg.includes('viewBox=\"0 0 100 50\"') &&\n /]*style=\"[^\"]*width:\\s*100px/.test(svg) &&\n /]*style=\"[^\"]*height:\\s*50px/.test(svg)\n\n expect(hasScale || hasWrapperSize || usesViewBoxOnly).toBe(true)\n })\n})\n\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Fractional viewport: tolerate ceil rounding and just require numeric x/y\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\ndescribe('captureDOM โ€“ fractional viewport sizes and tx/ty computation', () => {\n it('emits valid SVG with numeric width/height and numeric foreignObject x/y', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n // BCR con fracciones\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockReturnValue(new DOMRect(10.3, 20.6, 100.4, 50.6))\n\n const el = document.createElement('div')\n const svg = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n\n // Algunas implementaciones conservan fracciones; otras hacen ceil.\n // Aceptamos '100.4' o '101' y '50.6' o '51'.\n expect(/width=\"(100\\.4|101)\"/.test(svg)).toBe(true)\n expect(/height=\"(50\\.6|51)\"/.test(svg)).toBe(true)\n\n // x/y del foreignObject: solo exigimos que existan y sean numรฉricos (con o sin signo/decimales)\n expect(/]*\\sx=\"[-\\d.]+\"/.test(svg)).toBe(true)\n expect(/]*\\sy=\"[-\\d.]+\"/.test(svg)).toBe(true)\n })\n})\n\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Cache policy path (no internal assert, but forces applyCachePolicy branch)\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\ndescribe('captureDOM โ€“ honors cache policy \"none\"', () => {\n it('works with cache: \"none\" and still returns a valid SVG data URL', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockReturnValue(new DOMRect(0, 0, 64, 32))\n\n const el = document.createElement('div')\n const url = await captureDOM(el, { fast: true, cache: 'none', embedFonts: false })\n expect(url.startsWith('data:image/svg+xml')).toBe(true)\n\n const svg = decodeSvg(url)\n expect(svg.startsWith('deg), scale array, translate array, + fallback de strings.\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\ndescribe('captureDOM โ€“ Typed OM readIndividualTransforms', () => {\n it('reads rotate/scale/translate from computedStyleMap (Typed OM) and propagates to clone', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n // BCR estรกndar\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockReturnValue(new DOMRect(0, 0, 100, 50))\n\n const el = document.createElement('div')\n\n // Stub Typed OM en el elemento\n el.computedStyleMap = () => ({\n // rotate: รกngulo en radianes โ†’ debe convertirse a deg\n get(prop) {\n if (prop === 'rotate') {\n return { angle: { value: Math.PI / 2, unit: 'rad' } } // 90deg\n }\n if (prop === 'scale') {\n // array-like con sx, sy\n return [{ value: 2 }, { value: 3 }]\n }\n if (prop === 'translate') {\n return [{ value: 4, unit: 'px' }, { value: 5, unit: 'px' }]\n }\n return null\n },\n })\n\n const svg = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n\n // Si el pipeline mapea Typed OM, veremos los valores inlineโ€ฆ\n const gotInlineRot = /style=\"[^\"]*rotate:\\s*90deg/.test(svg)\n const gotInlineScale = /style=\"[^\"]*scale:\\s*2\\s+3/.test(svg)\n const gotInlineTrans = /style=\"[^\"]*translate:\\s*4px\\s+5px/.test(svg)\n\n // โ€ฆsi no, aceptamos resets en CSS base.\n const hasBaseResets =\n /\\brotate:\\s*none\\b/.test(svg) &&\n /\\bscale:\\s*none\\b/.test(svg) &&\n /\\btranslate:\\s*none\\b/.test(svg)\n\n expect((gotInlineRot && gotInlineScale && gotInlineTrans) || hasBaseResets).toBe(true)\n })\n})\n\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Strict path: ensure element is attached so computedStyle picks transforms\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\ndescribe('captureDOM โ€“ strict path uses measure host and matrix pipeline', () => {\n it('creates snapdom-measure-slot once and reuses it; output includes transform work', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n // Fuerza bbox-transform: matrix con rotaciรณn + translate (no es translate puro)\n const el = document.createElement('div')\n el.style.transform = 'matrix(0.9396926,0.3420201,-0.3420201,0.9396926,5,-7)'\n\n // โš ๏ธ Importante: anclar al DOM para que getComputedStyle refleje transform\n document.body.appendChild(el)\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockReturnValue(new DOMRect(0, 0, 120, 60))\n\n // 1ยช captura: deberรญa crear el host de mediciรณn\n const svg1 = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n const host1 = document.getElementById('snapdom-measure-slot')\n expect(host1).toBeTruthy()\n\n // Debe haber algรบn transform aplicado en el container (cancel/scale/etc.)\n expect(/style=\"[^\"]*transform:[^\"]+/.test(svg1)).toBe(true)\n\n // 2ยช captura: reutiliza el mismo host (no duplica nodos)\n const beforeCount = document.querySelectorAll('#snapdom-measure-slot').length\n const svg2 = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n const afterCount = document.querySelectorAll('#snapdom-measure-slot').length\n expect(afterCount).toBe(beforeCount)\n\n // Sigue habiendo transform en el container\n expect(/style=\"[^\"]*transform:[^\"]+/.test(svg2)).toBe(true)\n\n // Limpieza\n el.remove()\n })\n})\n\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n// Pure translate NO afecta bbox: ejercita rama identity/pure-translate de\n// hasBBoxAffectingTransform (310โ€“312) sin tocar exports internos.\n// โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\ndescribe('captureDOM โ€“ pure translate does not trigger strict path', () => {\n it('keeps viewport path semantics for translate-only transforms (no extra cancel)', async () => {\n const { captureDOM } = await import('../src/core/capture.js')\n\n const el = document.createElement('div')\n // translate puro โ†’ should be treated as non-bbox-affecting\n el.style.transform = 'translate(8px, 9px)'\n\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockReturnValue(new DOMRect(10, 20, 100, 50))\n\n const svg = decodeSvg(await captureDOM(el, { fast: true, embedFonts: false }))\n\n // Viewport path: el tamaรฑo del refleja el rect (ceil), sin obligaciรณn de transform en container.\n expect(svg).toContain('width=\"100\"')\n expect(svg).toContain('height=\"50\"')\n\n // Aceptamos que el container NO tenga transform o solo tenga transform-origin.\n // Si por implementaciรณn hubiese un transform, igual no deberรญa contener translate de \"cancelaciรณn\".\n const hasTransform = /style=\"[^\"]*transform:[^\"]+/.test(svg)\n if (hasTransform) {\n // No esperarรญamos un translate(...) de cancelaciรณn (estrict path) en este caso.\n expect(/transform:[^\"]*translate\\(/.test(svg)).toBe(false)\n }\n })\n})\n" }, { "path": "__tests__/core.capture.test.js", "content": "import { describe, it, expect, vi, afterEach } from 'vitest'\nimport { captureDOM } from '../src/core/capture.js'\n\nafterEach(() => vi.restoreAllMocks())\n\ndescribe('captureDOM edge cases', () => {\n it('throws for unsupported element (unknown nodeType)', async () => {\n const fakeNode = { nodeType: 999 }\n await expect(captureDOM(fakeNode)).rejects.toThrow()\n })\n\n it('throws if element is null', async () => {\n await expect(captureDOM(null)).rejects.toThrow()\n })\n\n it('throws error if getBoundingClientRect fails', async () => {\n vi.spyOn(Element.prototype, 'getBoundingClientRect')\n .mockImplementation(() => { throw new Error('fail') })\n\n const el = document.createElement('div')\n await expect(captureDOM(el, { fast: true })).rejects.toThrow(/fail/)\n })\n})\n\ndescribe('captureDOM functional', () => {\n it('captures a simple div and returns an SVG dataURL', async () => {\n const el = document.createElement('div')\n el.textContent = 'test'\n const url = await captureDOM(el, { fast: true, embedFonts: false })\n expect(url.startsWith('data:image/svg+xml')).toBe(true)\n })\n\n it('supports scale and width/height options', async () => {\n const el = document.createElement('div')\n el.style.width = '100px'\n el.style.height = '50px'\n await captureDOM(el, { fast: true, scale: 2 })\n await captureDOM(el, { fast: true, width: 200 })\n await captureDOM(el, { fast: true, height: 100 })\n })\n\n it('supports fast=false', async () => {\n const el = document.createElement('div')\n await captureDOM(el, { fast: false, embedFonts: false })\n })\n\n it('supports embedFonts (stubbed)', async () => {\n // opcional: stub para que no haga IO real\n // const mod = await import('../src/modules/fonts.js');\n // vi.spyOn(mod, 'embedCustomFonts').mockResolvedValue('/* inlined */');\n\n const el = document.createElement('div')\n await captureDOM(el, { fast: true, embedFonts: true })\n })\n})\n" }, { "path": "__tests__/core.clone.more.test.js", "content": "// __tests__/core.clone.more.test.js\nimport { describe, it, expect, vi, beforeEach } from 'vitest'\nimport { deepClone } from '../src/core/clone.js'\nimport { cache } from '../src/core/cache.js'\nimport { NO_CAPTURE_TAGS } from '../src/utils/css.js'\n\n// fresh session cache each test\nconst makeSession = () => ({\n styleMap: cache.session.styleMap,\n styleCache: cache.session.styleCache,\n nodeMap: cache.session.nodeMap,\n})\n\ndescribe('deepClone โ€“ extra coverage', () => {\n let session\n\n beforeEach(() => {\n // reset-ish session structures if available\n if (cache.session?.styleMap?.clear) cache.session.styleMap.clear()\n if (cache.session?.styleCache?.clear) cache.session.styleCache = new WeakMap()\n if (cache.session?.nodeMap?.clear) cache.session.nodeMap = new Map()\n session = makeSession()\n })\n\n it('clones a Text node (TEXT_NODE path)', async () => {\n const t = document.createTextNode('hello')\n const c = await deepClone(t, session, {})\n expect(c.nodeType).toBe(Node.TEXT_NODE)\n expect(c.nodeValue).toBe('hello')\n expect(c).not.toBe(t)\n })\n\n it('freezes srcset using src (no currentSrc) and strips srcset/sizes', async () => {\n const img = document.createElement('img')\n // supply a concrete src so freeze picks it\n img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACw='\n img.setAttribute('srcset', 'a.png 1x, b.png 2x')\n img.setAttribute('sizes', '(max-width: 600px) 100vw, 600px')\n\n const clone = await deepClone(img, session, {})\n expect(clone.tagName).toBe('IMG')\n // chosen copied to src\n expect(clone.getAttribute('src')).toContain('data:image/')\n // stripped by freezeImgSrcset\n expect(clone.hasAttribute('srcset')).toBe(false)\n expect(clone.hasAttribute('sizes')).toBe(false)\n // eager/sync hints applied\n expect(clone.loading).toBe('eager')\n expect(clone.decoding).toBe('sync')\n })\n\n it('does not freeze when no chosen URL (keeps srcset/sizes)', async () => {\n const img = document.createElement('img')\n img.setAttribute('srcset', 'a.png 1x')\n img.setAttribute('sizes', '100vw')\n // leave src and currentSrc empty\n\n const clone = await deepClone(img, session, {})\n // no src chosen => still has original responsive attributes\n expect(clone.hasAttribute('src')).toBe(false)\n expect(clone.getAttribute('srcset')).toBe('a.png 1x')\n expect(clone.getAttribute('sizes')).toBe('100vw')\n })\n\n it('does not exclude when selector is invalid; only warns', async () => {\n const el = document.createElement('div')\n const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})\n\n const out = await deepClone(el, session, { exclude: ['::bad('] })\n\n expect(out).toBeInstanceOf(HTMLElement)\n expect(out.tagName).toBe('DIV')\n // It should not return the hidden spacer for invalid selector\n expect(out.style.visibility).not.toBe('hidden')\n expect(warn).toHaveBeenCalled()\n\n warn.mockRestore()\n})\n\nit('exclude by selector with excludeMode = \"remove\" skips element from clonning', async () => {\n const el = document.createElement('div')\n el.classList.add('exclude-me')\n const out = await deepClone(el, session, { exclude: ['.exclude-me'], excludeMode: 'remove' })\n expect(out).not.toBeInstanceOf(HTMLElement)\n})\n\n it('excludes by custom filter returning false; and handles filter error', async () => {\n // filter false -> spacer\n const a = document.createElement('p')\n const out1 = await deepClone(a, session, { filter: () => false, filterMode: 'hide' })\n expect(out1).toBeInstanceOf(HTMLElement)\n expect(out1.style.visibility).toBe('hidden')\n\n // filter throws -> warn + spacer\n const b = document.createElement('p')\n const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})\n const out2 = await deepClone(b, session, { filter: () => { throw new Error('boom') } })\n expect(out2).toBeInstanceOf(HTMLElement)\n expect(warn).toHaveBeenCalled()\n warn.mockRestore()\n })\n\n it ('custom filter with filterMode = \"remove\" skips element from clonning', async () => {\n // filter false -> null\n const a = document.createElement('p')\n const out1 = await deepClone(a, session, { filter: () => false, filterMode: 'remove' })\n expect(out1).not.toBeInstanceOf(HTMLElement)\n })\n\n it('IFRAME fallback uses gradient style and element size', async () => {\n const frame = document.createElement('iframe')\n // JSDOM offset* are not layouted; provide getters\n Object.defineProperty(frame, 'offsetWidth', { configurable: true, get: () => 123 })\n Object.defineProperty(frame, 'offsetHeight', { configurable: true, get: () => 45 })\n\n const fallback = await deepClone(frame, session, { placeholders: true })\n expect(fallback.tagName).toBe('DIV')\n expect(fallback.style.width).toBe('123px')\n expect(fallback.style.height).toBe('45px')\n expect(fallback.style.backgroundImage).toContain('repeating-linear-gradient')\n })\n\n it('throws and logs when base clone (node.cloneNode) fails', async () => {\n const el = document.createElement('div')\n const err = new Error('fail')\n const spy = vi.spyOn(el, 'cloneNode').mockImplementation(() => { throw err })\n const log = vi.spyOn(console, 'error').mockImplementation(() => {})\n await expect(() => deepClone(el, session, {})).rejects.toThrow('fail')\n expect(log).toHaveBeenCalled()\n spy.mockRestore()\n log.mockRestore()\n })\n\n it('textarea keeps value and explicit size via getBoundingClientRect', async () => {\n const ta = document.createElement('textarea')\n ta.value = 'hello'\n vi.spyOn(ta, 'getBoundingClientRect').mockReturnValue({ width: 80, height: 30 })\n const clone = await deepClone(ta, session, {})\n expect(clone.value).toBe('hello')\n expect(clone.style.width).toBe('80px')\n expect(clone.style.height).toBe('30px')\n })\n\n it('input copies value/checked/attributes and select applies selected on options', async () => {\n // input\n const input = document.createElement('input')\n input.type = 'checkbox'\n input.checked = true\n input.value = 'abc'\n const c1 = await deepClone(input, session, {})\n expect(c1.value).toBe('abc')\n expect(c1.checked).toBe(true)\n expect(c1.getAttribute('value')).toBe('abc')\n expect(c1.hasAttribute('checked')).toBe(true)\n\n // select\n const sel = document.createElement('select')\n const o1 = document.createElement('option'); o1.value = 'a'; sel.appendChild(o1)\n const o2 = document.createElement('option'); o2.value = 'b'; sel.appendChild(o2)\n sel.value = 'b'\n const c2 = await deepClone(sel, session, {})\n expect(c2.value).toBe('b')\n expect([...c2.options].find(o => o.value === 'b')?.hasAttribute('selected')).toBe(true)\n expect([...c2.options].find(o => o.value === 'a')?.hasAttribute('selected')).toBe(false)\n })\n\n it('ShadowRoot with only stores STYLE css into styleCache (no content clone)', async () => {\n const host = document.createElement('div')\n const sr = host.attachShadow({ mode: 'open' })\n const style = document.createElement('style')\n style.textContent = '.x{color:red}'\n const slot = document.createElement('slot')\n sr.appendChild(style)\n sr.appendChild(slot)\n\n const clone = await deepClone(host, session, {})\n // nuevo comportamiento: se inyecta un '\n )\n const canvas = await toCanvas(svgWithBoxShadow, {})\n expect(canvas).toBeInstanceOf(HTMLCanvasElement)\n })\n})\n" }, { "path": "__tests__/exporter.toCanvas.test.js", "content": "// __tests__/exporters.toCanvas.more.test.js\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n// IMPORTANT: in Browser Mode we cannot spy on ESM exports directly.\n// Use { spy: true } so we can override implementations safely.\nvi.mock('../src/utils/browser', { spy: true })\nimport * as browser from '../src/utils/browser'\n\nimport { toCanvas } from '../src/exporters/toCanvas.js'\n\nconst ONE_BY_ONE_PNG =\n 'data:image/png;base64,' +\n 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMBCd4/7mEAAAAASUVORK5CYII='\n\nbeforeEach(() => {\n // clean up DOM between tests\n document.body.innerHTML = ''\n vi.restoreAllMocks()\n})\n\nafterEach(() => {\n document.body.innerHTML = ''\n})\n\ndescribe('toCanvas (Browser Mode)', () => {\n it('renders to canvas (non-Safari path) without appending the ', async () => {\n // Non-Safari path\n vi.mocked(browser.isSafari).mockReturnValue(false)\n\n // Make sure no IMG remains in the DOM after execution (should never append)\n const beforeImgs = document.querySelectorAll('img').length\n\n const canvas = await toCanvas(ONE_BY_ONE_PNG, { scale: 2, dpr: 1.5 })\n expect(canvas).toBeInstanceOf(HTMLCanvasElement)\n\n // For a 1x1 image with scale=2 and dpr=1.5:\n // CSS size: 2x2, backing store: ceil(2 * 1.5) = 3\n expect(canvas.style.width).toBe('2px')\n expect(canvas.style.height).toBe('2px')\n expect(canvas.width).toBe(3)\n expect(canvas.height).toBe(3)\n\n const afterImgs = document.querySelectorAll('img').length\n expect(afterImgs - beforeImgs).toBe(0) // nothing appended\n })\n\n it('appends and removes and waits 100ms on Safari path', async () => {\n vi.mocked(browser.isSafari).mockReturnValue(true)\n\n // Spy setTimeout so the promise resolves immediately and we can assert the delay\n const origSetTimeout = globalThis.setTimeout\n const calls = []\n const stoSpy = vi\n .spyOn(globalThis, 'setTimeout')\n .mockImplementation((cb, ms, ...args) => {\n calls.push(ms)\n // Trigger callback ASAP so the awaited promise resolves\n return origSetTimeout(cb, 0, ...args)\n })\n\n // Spy on Element.prototype.remove to ensure the appended is removed\n const rmSpy = vi.spyOn(Element.prototype, 'remove')\n\n const imgCountBefore = document.querySelectorAll('img').length\n const canvas = await toCanvas(ONE_BY_ONE_PNG, { scale: 1, dpr: 2 })\n expect(canvas).toBeInstanceOf(HTMLCanvasElement)\n\n const imgCountAfter = document.querySelectorAll('img').length\n expect(imgCountAfter).toBe(imgCountBefore) // no stray left in the DOM\n\n stoSpy.mockRestore()\n rmSpy.mockRestore()\n })\n})\n" }, { "path": "__tests__/exporter.toImg.test.js", "content": "// __tests__/exporter.toImg.test.js โ€“ toImg.js coverage\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\nvi.mock('../src/utils', async () => {\n const actual = await vi.importActual('../src/utils')\n return { ...actual, isSafari: vi.fn() }\n})\nimport { isSafari } from '../src/utils'\nimport { toImg } from '../src/exporters/toImg.js'\n\nconst DATA_PNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMBCd4/7mEAAAAASUVORK5CYII='\nconst DATA_SVG = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('')\n\nbeforeEach(() => {\n vi.mocked(isSafari).mockReturnValue(false)\n})\n\nafterEach(() => {\n vi.restoreAllMocks()\n})\n\ndescribe('toImg', () => {\n it('uses width and height when both provided', async () => {\n const img = await toImg(DATA_PNG, { width: 100, height: 50 })\n expect(img.style.width).toBe('100px')\n expect(img.style.height).toBe('50px')\n })\n\n it('uses width only (scales height)', async () => {\n const img = await toImg(DATA_PNG, { width: 80 })\n expect(img.style.width).toBe('80px')\n expect(img.style.height).toBeDefined()\n })\n\n it('uses height only (scales width)', async () => {\n const img = await toImg(DATA_PNG, { height: 60 })\n expect(img.style.height).toBe('60px')\n expect(img.style.width).toBeDefined()\n })\n\n it('uses meta.w0/meta.h0 when provided', async () => {\n const img = await toImg(DATA_PNG, { width: 50, meta: { w0: 10, h0: 5 } })\n expect(img.style.width).toBe('50px')\n expect(img.style.height).toBe('25px')\n })\n\n it('uses scale for non-SVG', async () => {\n const img = await toImg(DATA_PNG, { scale: 2 })\n expect(img.style.width).toBe('2px')\n expect(img.style.height).toBe('2px')\n })\n\n it('patches SVG dimensions when scale !== 1', async () => {\n const img = await toImg(DATA_SVG, { scale: 2 })\n expect(img.style.width).toBe('40px')\n expect(img.style.height).toBe('20px')\n expect(decodeURIComponent(img.src)).toContain('width=\"40\"')\n })\n\n it('uses rasterize path on Safari when wantsScale', async () => {\n vi.mocked(isSafari).mockReturnValue(true)\n const img = await toImg(DATA_PNG, { scale: 2 })\n expect(img).toBeDefined()\n })\n})\n" }, { "path": "__tests__/exporters.jpg-png-svg-webp.test.js", "content": "// __tests__/exporters.jpg-png-svg-webp.test.js โ€“ direct exporter calls (0% โ†’ covered)\nimport { describe, it, expect } from 'vitest'\n\nconst DATA_PNG = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMBCd4/7mEAAAAASUVORK5CYII='\n\ndescribe('toJpg (direct)', () => {\n it('returns rasterized output when given data URL (string path)', async () => {\n const { toJpg } = await import('../src/exporters/toJpg.js')\n const out = await toJpg(DATA_PNG, { scale: 1 })\n expect(out).toBeDefined()\n expect(out instanceof HTMLImageElement || out instanceof HTMLCanvasElement || typeof out === 'string' || out instanceof Blob).toBe(true)\n })\n})\n\ndescribe('toPng (direct)', () => {\n it('returns rasterized output when given data URL', async () => {\n const { toPng } = await import('../src/exporters/toPng.js')\n const out = await toPng(DATA_PNG)\n expect(out).toBeDefined()\n })\n})\n\ndescribe('toSvg (direct)', () => {\n const DATA_SVG = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('')\n\n it('re-exports toImg as toSvg and returns Image when given SVG data URL', async () => {\n const { toSvg } = await import('../src/exporters/toSvg.js')\n const out = await toSvg(DATA_SVG, { scale: 1 })\n expect(out).toBeInstanceOf(HTMLImageElement)\n expect(out.src).toMatch(/^data:image\\/svg\\+xml/)\n })\n})\n\ndescribe('toWebp (direct)', () => {\n it('returns rasterized output when given data URL', async () => {\n const { toWebp } = await import('../src/exporters/toWebp.js')\n const out = await toWebp(DATA_PNG)\n expect(out).toBeDefined()\n })\n})\n" }, { "path": "__tests__/index.browser.test.js", "content": "import { it, expect } from 'vitest'\nimport * as snapdom from '../src/index.browser.js'\n\nit('should import the browser bundle without errors', () => {\n expect(snapdom).toBeDefined()\n})\n" }, { "path": "__tests__/module.background.test.js", "content": "import { describe, it, expect, beforeEach, afterEach } from 'vitest'\nimport { inlineBackgroundImages } from '../src/modules/background.js'\n\ndescribe('inlineBackgroundImages', () => {\n let source, clone\n beforeEach(() => {\n source = document.createElement('div')\n clone = document.createElement('div')\n document.body.appendChild(source)\n document.body.appendChild(clone)\n })\n afterEach(() => {\n document.body.removeChild(source)\n document.body.removeChild(clone)\n })\n\n it('does not fail if there is no background-image', async () => {\n source.style.background = 'none'\n await expect(inlineBackgroundImages(source, clone, new WeakMap())).resolves.toBeUndefined()\n })\n\n it('processes a valid background-image', async () => {\n source.style.backgroundImage = 'url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/w8AAn8B9p6Q2wAAAABJRU5ErkJggg==\")'\n await expect(inlineBackgroundImages(source, clone, new WeakMap())).resolves.toBeUndefined()\n })\n})\n" }, { "path": "__tests__/module.changeCSS.test.js", "content": "// __tests__/module.changeCSS.test.js โ€“ freezeSticky coverage\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\nimport { freezeSticky } from '../src/modules/changeCSS.js'\n\nbeforeEach(() => {\n document.body.innerHTML = ''\n})\n\nafterEach(() => {\n document.body.innerHTML = ''\n})\n\ndescribe('freezeSticky', () => {\n it('returns early for null roots', () => {\n const clone = document.createElement('div')\n expect(() => freezeSticky(null, clone)).not.toThrow()\n expect(() => freezeSticky(document.createElement('div'), null)).not.toThrow()\n })\n\n it('returns early when scrollTop is 0', () => {\n const orig = document.createElement('div')\n orig.style.height = '200px'\n orig.style.overflow = 'auto'\n const sticky = document.createElement('div')\n sticky.style.position = 'sticky'\n sticky.style.top = '0'\n orig.appendChild(sticky)\n document.body.appendChild(orig)\n const clone = orig.cloneNode(true)\n freezeSticky(orig, clone)\n expect(clone.querySelector('[data-snap-ph]')).toBeNull()\n })\n\n it('freezes sticky elements when scrollTop > 0', async () => {\n const orig = document.createElement('div')\n orig.style.cssText = 'height:100px; overflow:auto; position:relative;'\n const sticky = document.createElement('div')\n sticky.style.cssText = 'position:sticky; top:0; height:24px; min-height:24px;'\n sticky.textContent = 'sticky'\n orig.appendChild(sticky)\n const filler = document.createElement('div')\n filler.style.height = '200px'\n filler.textContent = 'filler'\n orig.appendChild(filler)\n document.body.appendChild(orig)\n orig.scrollTop = 50\n await new Promise(r => requestAnimationFrame(r))\n const clone = orig.cloneNode(true)\n document.body.appendChild(clone)\n freezeSticky(orig, clone)\n const cloneSticky = Array.from(clone.children).find(c => !c.hasAttribute('data-snap-ph'))\n if (cloneSticky) {\n expect(cloneSticky.style.position).toBe('absolute')\n }\n expect(clone.querySelector('[data-snap-ph=\"1\"]')).toBeTruthy()\n })\n})\n" }, { "path": "__tests__/module.counter.test.js", "content": "// __tests__/module.counter.test.js โ€“ counter.js coverage\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\nimport {\n hasCounters,\n unquoteDoubleStrings,\n buildCounterContext,\n resolveCountersInContent,\n deriveCounterCtxForPseudo,\n resolvePseudoContent\n} from '../src/modules/counter.js'\n\nbeforeEach(() => {\n document.body.innerHTML = ''\n})\n\nafterEach(() => {\n document.body.innerHTML = ''\n})\n\ndescribe('hasCounters', () => {\n it('detects counter()', () => {\n expect(hasCounters('content: counter(x)')).toBe(true)\n expect(hasCounters('counter(x)')).toBe(true)\n })\n it('detects counters()', () => {\n expect(hasCounters('content: counters(x, \".\")')).toBe(true)\n expect(hasCounters('counters(name, sep)')).toBe(true)\n })\n it('returns false for non-counter content', () => {\n expect(hasCounters('content: \"foo\"')).toBe(false)\n expect(hasCounters('')).toBe(false)\n expect(hasCounters(null)).toBe(false)\n })\n})\n\ndescribe('unquoteDoubleStrings', () => {\n it('removes double quotes from strings', () => {\n expect(unquoteDoubleStrings('\"hello\"')).toBe('hello')\n expect(unquoteDoubleStrings('before \"mid\" after')).toBe('before mid after')\n })\n it('handles null/empty', () => {\n expect(unquoteDoubleStrings(null)).toBe('')\n expect(unquoteDoubleStrings('')).toBe('')\n })\n})\n\ndescribe('buildCounterContext', () => {\n it('returns get and getStack for a node', () => {\n const root = document.createElement('div')\n root.innerHTML = ''\n document.body.appendChild(root)\n const ctx = buildCounterContext(root)\n expect(typeof ctx.get).toBe('function')\n expect(typeof ctx.getStack).toBe('function')\n expect(ctx.get(root.querySelector('span'), 'x')).toBe(0)\n expect(ctx.getStack(root.querySelector('span'), 'x')).toEqual([])\n })\n\n it('applies counter-reset and counter-increment', () => {\n const root = document.createElement('div')\n const child = document.createElement('span')\n child.style.counterReset = 'section 1'\n child.style.counterIncrement = 'section'\n root.appendChild(child)\n document.body.appendChild(root)\n const ctx = buildCounterContext(root)\n expect(ctx.get(child, 'section')).toBe(2)\n })\n\n it('handles LI with value attribute via counter-reset', () => {\n const ol = document.createElement('ol')\n const li = document.createElement('li')\n li.setAttribute('value', '10')\n li.style.counterReset = 'list-item 9'\n li.style.counterIncrement = 'list-item'\n li.textContent = 'x'\n ol.appendChild(li)\n document.body.appendChild(ol)\n const ctx = buildCounterContext(ol)\n expect(ctx.get(li, 'list-item')).toBe(10)\n })\n\n it('accepts Document as root', () => {\n const ctx = buildCounterContext(document)\n expect(ctx.get(document.documentElement, 'x')).toBe(0)\n })\n})\n\ndescribe('resolveCountersInContent', () => {\n it('resolves counter(name) with decimal style', () => {\n const root = document.createElement('div')\n const span = document.createElement('span')\n span.style.counterIncrement = 'step'\n root.appendChild(span)\n document.body.appendChild(root)\n const ctx = buildCounterContext(root)\n expect(resolveCountersInContent('counter(step)', span, ctx)).toBe('1')\n })\n it('resolves counter with upper-alpha', () => {\n const root = document.createElement('div')\n const span = document.createElement('span')\n span.style.counterReset = 'a 3'\n span.style.counterIncrement = 'a'\n root.appendChild(span)\n document.body.appendChild(root)\n const ctx = buildCounterContext(root)\n expect(resolveCountersInContent('counter(a, upper-alpha)', span, ctx)).toBe('D')\n })\n it('returns raw for none', () => {\n expect(resolveCountersInContent('none', null, null)).toBe('none')\n })\n it('returns empty for empty', () => {\n expect(resolveCountersInContent('', null, null)).toBe('')\n })\n it('resolves counters(name, sep)', () => {\n const root = document.createElement('div')\n const inner = document.createElement('span')\n inner.style.counterReset = 'x 1'\n inner.style.counterIncrement = 'x'\n root.appendChild(inner)\n document.body.appendChild(root)\n const ctx = buildCounterContext(root)\n expect(resolveCountersInContent('counters(x, \". \")', inner, ctx)).toBe('2')\n })\n})\n\ndescribe('deriveCounterCtxForPseudo', () => {\n it('applies pseudo counter-reset/increment', () => {\n const span = document.createElement('span')\n span.style.counterReset = 'item 0'\n document.body.appendChild(span)\n const baseCtx = buildCounterContext(span)\n const pseudoStyle = {\n counterReset: 'item 5',\n counterIncrement: 'item'\n }\n const derived = deriveCounterCtxForPseudo(span, pseudoStyle, baseCtx)\n expect(derived.get(span, 'item')).toBe(6)\n })\n})\n\ndescribe('resolvePseudoContent', () => {\n it('returns empty for none/normal', () => {\n const span = document.createElement('span')\n document.body.appendChild(span)\n const ctx = buildCounterContext(span)\n expect(resolvePseudoContent(span, '::before', ctx)).toBe('')\n })\n})\n" }, { "path": "__tests__/module.fonts.katex.test.js", "content": "// __tests__/module.fonts.katex.test.js\nimport { describe, it, expect, vi, beforeEach } from 'vitest'\n\n/**\n * Test for issue #344: KaTeX font embedding with dynamically injected stylesheets\n * Validates that the isLikelyFontStylesheet function recognizes KaTeX CDN URLs\n */\n\nvi.mock('../src/utils/helpers', async () => {\n const actual = await vi.importActual('../src/utils/helpers')\n return {\n ...actual,\n extractURL: actual.extractURL,\n fetchResource: vi.fn(actual.fetchResource)\n }\n})\n\nvi.mock('../src/modules/iconFonts.js', () => ({\n isIconFont: vi.fn(() => false)\n}))\n\nvi.mock('../src/modules/snapFetch.js', () => ({\n snapFetch: vi.fn(async (url, opts = {}) => {\n if (opts.as === 'text') {\n // Return minimal KaTeX CSS with @font-face\n return {\n ok: true,\n data: `\n @font-face {\n font-family: 'KaTeX_Main';\n font-style: normal;\n font-weight: 400;\n src: url(fonts/KaTeX_Main-Regular.woff2) format('woff2');\n }\n `,\n status: 200,\n url,\n fromCache: false\n }\n }\n return {\n ok: true,\n data: 'data:font/woff2;base64,AA==',\n status: 200,\n url,\n fromCache: false,\n mime: 'font/woff2'\n }\n })\n}))\n\nimport { embedCustomFonts } from '../src/modules/fonts.js'\nimport { cache } from '../src/core/cache.js'\nimport { snapFetch } from '../src/modules/snapFetch.js'\n\nfunction addLink(href) {\n const link = document.createElement('link')\n link.rel = 'stylesheet'\n link.href = href\n document.head.appendChild(link)\n return link\n}\n\nconst req = (...keys) => new Set(keys)\nconst cps = (t) => new Set([...t].map((ch) => ch.codePointAt(0)))\n\nbeforeEach(() => {\n if (typeof cache.reset === 'function') cache.reset()\n if (typeof cache.resetCache === 'function') cache.resetCache()\n cache.font?.clear?.()\n cache.resource?.clear?.()\n vi.clearAllMocks()\n document.querySelectorAll('style,link[rel=\"stylesheet\"]').forEach((n) => n.remove())\n})\n\ndescribe('embedCustomFonts - KaTeX CDN support (issue #344)', () => {\n it('recognizes and processes KaTeX CSS from registry.npmmirror.com', async () => {\n const href = 'https://registry.npmmirror.com/katex/0.16.25/files/dist/katex.min.css'\n addLink(href)\n\n const required = req('KaTeX_Main__400__normal__100')\n const usedCodepoints = cps('abc123')\n\n const result = await embedCustomFonts({\n required,\n usedCodepoints\n })\n\n // Should have called snapFetch to fetch the stylesheet\n expect(snapFetch).toHaveBeenCalledWith(href, expect.objectContaining({ as: 'text' }))\n\n // Should include the font-face in the result\n expect(result).toContain('@font-face')\n expect(result).toContain('KaTeX_Main')\n })\n\n it('recognizes KaTeX CSS from unpkg.com', async () => {\n const href = 'https://unpkg.com/katex@0.16.8/dist/katex.min.css'\n addLink(href)\n\n const required = req('KaTeX_Main__400__normal__100')\n const usedCodepoints = cps('abc123')\n\n const result = await embedCustomFonts({\n required,\n usedCodepoints\n })\n\n expect(snapFetch).toHaveBeenCalledWith(href, expect.objectContaining({ as: 'text' }))\n expect(result).toContain('@font-face')\n })\n\n it('recognizes KaTeX CSS from cdn.jsdelivr.net', async () => {\n const href = 'https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css'\n addLink(href)\n\n const required = req('KaTeX_Main__400__normal__100')\n const usedCodepoints = cps('abc123')\n\n const result = await embedCustomFonts({\n required,\n usedCodepoints\n })\n\n expect(snapFetch).toHaveBeenCalledWith(href, expect.objectContaining({ as: 'text' }))\n expect(result).toContain('@font-face')\n })\n\n it('recognizes cross-origin CSS when fontStylesheetDomains allows custom CDN (#309)', async () => {\n const href = 'https://cdn.example.com/styles.css'\n addLink(href)\n\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: `\n @font-face {\n font-family: 'CustomFont';\n src: url(./CustomFont.woff2) format('woff2');\n }\n `,\n status: 200,\n url: href,\n fromCache: false\n })\n\n const required = req('CustomFont__400__normal__100')\n const usedCodepoints = cps('abc')\n\n const result = await embedCustomFonts({\n required,\n usedCodepoints,\n fontStylesheetDomains: ['cdn.example.com']\n })\n\n expect(snapFetch).toHaveBeenCalledWith(href, expect.objectContaining({ as: 'text' }))\n expect(result).toContain('@font-face')\n expect(result).toContain('CustomFont')\n })\n\n it('recognizes MathJax CSS from CDN', async () => {\n const href = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/output/chtml/fonts/woff-v2/mathjax.css'\n addLink(href)\n\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: `\n @font-face {\n font-family: 'MJX';\n src: url(MathJax_Main.woff2) format('woff2');\n }\n `,\n status: 200,\n url: href,\n fromCache: false\n })\n\n const required = req('MJX__400__normal__100')\n const usedCodepoints = cps('abc123')\n\n const result = await embedCustomFonts({\n required,\n usedCodepoints\n })\n\n expect(snapFetch).toHaveBeenCalledWith(href, expect.objectContaining({ as: 'text' }))\n expect(result).toContain('@font-face')\n })\n})\n" }, { "path": "__tests__/module.fonts.more.more.test.js", "content": "// __tests__/module.fonts.more.more.test.js\nimport { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'\n\n// ====== Mocks HOISTED-SAFE ======\n// helpers: dejamos extractURL real si querรฉs, pero acรก no dependemos de fetchResource.\nvi.mock('../src/utils/helpers', async () => {\n const actual = await vi.importActual('../src/utils/helpers')\n return {\n ...actual,\n extractURL: actual.extractURL ?? ((cssUrlFn) => {\n const m = String(cssUrlFn).match(/url\\(([\"']?)([^\"')]+)\\1\\)/i)\n return m ? m[2] : ''\n }),\n fetchResource: vi.fn(async () => ({\n async blob () { return new Blob([new Uint8Array([0x77, 0x6F, 0x32])], { type: 'font/woff2' }) },\n async text () { return '' }\n })),\n }\n})\n\n// iconFonts siempre falso para no excluir\nvi.mock('../src/modules/iconFonts.js', () => ({\n isIconFont: vi.fn(() => false),\n}))\n\n// ๐Ÿ”ด Nuevo: mock de snapFetch (API no-throw)\nvi.mock('../src/modules/snapFetch.js', () => ({\n snapFetch: vi.fn(async (url, opts = {}) => {\n if (opts.as === 'text') {\n return { ok: true, data: '', status: 200, url, fromCache: false }\n }\n // default: devolvemos una dataURL mรญnima de woff2\n return {\n ok: true,\n data: 'data:font/woff2;base64,AA==',\n status: 200,\n url,\n fromCache: false,\n mime: 'font/woff2',\n }\n }),\n}))\n\n// ====== SUT + deps ======\nimport { embedCustomFonts } from '../src/modules/fonts.js'\nimport { cache } from '../src/core/cache.js'\nimport * as helpers from '../src/utils/helpers'\nimport { snapFetch } from '../src/modules/snapFetch.js'\n\n// ====== utilidades locales ======\nfunction addStyle (css) {\n const s = document.createElement('style')\n s.setAttribute('data-test', 'fonts-extra')\n s.textContent = css\n document.head.appendChild(s)\n return s\n}\nfunction cleanInjectedStuff () {\n document.querySelectorAll('link[rel=\"stylesheet\"]').forEach(n => n.remove())\n document.querySelectorAll('link[data-snapdom=\"injected-import\"]').forEach(n => n.remove())\n document.querySelectorAll('style[data-test=\"fonts-extra\"]').forEach(n => n.remove())\n // Limpia styles con @import colgados de otras suites\n document.querySelectorAll('style').forEach(n => {\n if ((n.textContent || '').includes('@import')) n.remove()\n })\n}\n\n/** Mock mรญnimo de document.fonts */\nfunction setDocumentFonts (fontsArray = []) {\n const items = [...fontsArray]\n const iter = function * () { yield * items }\n const fakeSet = {\n [Symbol.iterator]: iter,\n values: iter,\n entries: function * () { for (const it of items) yield [it.family, it] },\n forEach (cb, thisArg) { for (const it of items) cb.call(thisArg, it, it, fakeSet) },\n has (ff) { return items.includes(ff) },\n add (ff) { items.push(ff) },\n delete (ff) { const i = items.indexOf(ff); if (i >= 0) items.splice(i, 1) },\n clear () { items.length = 0 },\n ready: Promise.resolve(),\n size: items.length\n }\n Object.defineProperty(document, 'fonts', {\n configurable: true,\n get () { return fakeSet },\n set () {}\n })\n return () => { delete document.fonts }\n}\n\nlet restoreFonts = () => {}\n\n// ====== setup/teardown ======\nbeforeEach(() => {\n vi.restoreAllMocks()\n\n // helpers mocks ya estรกn instalados; limpiamos counters\n helpers.fetchResource?.mockClear?.()\n\n // limpiar caches y DOM\n try { cache.resource?.clear?.() } catch {}\n try { cache.font?.clear?.() } catch {}\n cleanInjectedStuff()\n\n // document.fonts vacรญo por default\n restoreFonts?.()\n restoreFonts = setDocumentFonts([])\n\n // reset de snapFetch mock por si algรบn test setea respuestas especรญficas\n vi.mocked(snapFetch).mockImplementation(async (url, opts = {}) => {\n if (opts.as === 'text') {\n return { ok: true, data: '', status: 200, url, fromCache: false }\n }\n return {\n ok: true,\n data: 'data:font/woff2;base64,AA==',\n status: 200,\n url,\n fromCache: false,\n mime: 'font/woff2',\n }\n })\n})\n\nafterEach(() => {\n restoreFonts?.()\n cleanInjectedStuff()\n})\n\n/* ----------------- unicode-range & helpers ------------------ */\ndescribe('embedCustomFonts โ€“ unicode-range & helpers', () => {\n it('incluye la face cuando usedCodepoints intersecta el unicode-range', async () => {\n const url = 'https://cdn.example.com/cyr.woff2'\n addStyle(`\n @font-face {\n font-family: 'CyrillicOnly';\n font-style: normal;\n font-weight: 400;\n font-stretch: 100%;\n unicode-range: U+0400-04FF;\n src: url(${url}) format('woff2');\n }`)\n\n // asegurar que el fetch de la fuente devuelva una dataURL conocida\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true, data: 'data:font/woff2;base64,CCC=', status: 200, url, fromCache: false, mime: 'font/woff2'\n })\n\n const css = await embedCustomFonts({\n required: new Set(['CyrillicOnly__400__normal__100']),\n usedCodepoints: new Set([0x0410]) // 'ะ' cirรญlica โ‡’ intersecta\n })\n\n expect(css).toMatch(/font-family:\\s*['\"]?CyrillicOnly['\"]?/)\n expect(css).toMatch(/url\\([\"']?data:/)\n })\n})\n\n/* ----------------- cache.resource short-circuit ------------------ */\ndescribe('embedCustomFonts โ€“ cache.resource short-circuit', () => {\n it('usa cache.resource para inlining y evita snapFetch', async () => {\n const fontUrl = 'https://cdn.example.com/foo.woff2'\n const b64 = 'data:font/woff2;base64,AAA'\n cache.resource.set(fontUrl, b64)\n\n addStyle(`\n @font-face {\n font-family: 'Foo';\n font-style: normal;\n font-weight: 400;\n font-stretch: 100%;\n src: url(${fontUrl}) format('woff2');\n }`)\n\n const css = await embedCustomFonts({\n required: new Set(['Foo__400__normal__100']),\n usedCodepoints: new Set([0x41])\n })\n\n expect(css).toMatch(/font-family:\\s*['\"]?Foo['\"]?/)\n expect(css).toMatch(/url\\([\"']?data:font\\/woff2;base64,AAA/)\n expect(snapFetch).not.toHaveBeenCalled()\n })\n})\n\n/* ----------------- document.fonts con _snapdomSrc ------------------ */\ndescribe('document.fonts con _snapdomSrc', () => {\n it('descarga _snapdomSrc (no data:) y lo inyecta como @font-face', async () => {\n // simular un font cargado dinรกmico\n restoreFonts?.()\n restoreFonts = setDocumentFonts([\n { family: 'DynFont', status: 'loaded', style: 'normal', weight: '400', _snapdomSrc: 'https://cdn.example.com/dyn.woff2' }\n ])\n\n // se espera 1 fetch โ†’ dataURL\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true, data: 'data:font/woff2;base64,DYN=', status: 200,\n url: 'https://cdn.example.com/dyn.woff2', fromCache: false, mime: 'font/woff2'\n })\n\n const css = await embedCustomFonts({\n required: new Set(['DynFont__400__normal__100']),\n usedCodepoints: new Set([0x41])\n })\n\n expect(css).toMatch(/font-family:\\s*['\"]?DynFont['\"]?/)\n expect(css).toMatch(/url\\([\"']?data:/)\n expect(snapFetch).toHaveBeenCalledTimes(1)\n })\n\n it('si _snapdomSrc ya es data:, no hace fetch', async () => {\n restoreFonts?.()\n restoreFonts = setDocumentFonts([\n { family: 'DynData', status: 'loaded', style: 'normal', weight: '400', _snapdomSrc: 'data:font/woff2;base64,ZZ==' }\n ])\n\n const css = await embedCustomFonts({\n required: new Set(['DynData__400__normal__100']),\n usedCodepoints: new Set([0x41])\n })\n\n expect(css).toMatch(/DynData/)\n expect(css).toMatch(/url\\(['\"]?data:/)\n expect(snapFetch).not.toHaveBeenCalled()\n })\n\n it('si snapFetch devuelve ok:false, continรบa sin romper', async () => {\n restoreFonts?.()\n restoreFonts = setDocumentFonts([\n { family: 'DynFail', status: 'loaded', style: 'normal', weight: '400', _snapdomSrc: 'https://cdn.example.com/fail.woff2' }\n ])\n\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: false, data: null, status: 0, url: 'https://cdn.example.com/fail.woff2', fromCache: false, reason: 'network'\n })\n\n const css = await embedCustomFonts({\n required: new Set(['DynFail__400__normal__100']),\n usedCodepoints: new Set([0x41])\n })\n\n // Puede no incluir DynFail si no pudo inlinear โ€” lo importante es que no explote y sea string.\n expect(typeof css).toBe('string')\n })\n})\n" }, { "path": "__tests__/module.fonts.more.test.js", "content": "// __tests__/module.fonts.more.test.js\nimport { describe, it, expect, vi, beforeEach } from 'vitest'\n\n/**\n * Mocks\n * - helpers: mantenemos extractURL real; fetchResource queda spied pero ya no lo usa fonts.js\n * - iconFonts: forzado a false (no excluir)\n * - snapFetch: API nueva (no-throw) โ†’ devolvemos {ok,data,...}\n */\nvi.mock('../src/utils/helpers', async () => {\n const actual = await vi.importActual('../src/utils/helpers')\n return {\n ...actual,\n extractURL: actual.extractURL,\n fetchResource: vi.fn(actual.fetchResource),\n }\n})\n\nvi.mock('../src/modules/iconFonts.js', () => ({\n isIconFont: vi.fn(() => false),\n}))\n\nvi.mock('../src/modules/snapFetch.js', () => ({\n snapFetch: vi.fn(async (url, opts = {}) => {\n if (opts.as === 'text') {\n return { ok: true, data: '', status: 200, url, fromCache: false }\n }\n return {\n ok: true,\n data: 'data:font/woff2;base64,AA==',\n status: 200,\n url,\n fromCache: false,\n mime: 'font/woff2',\n }\n }),\n}))\n\nimport { embedCustomFonts, ensureFontsReady } from '../src/modules/fonts.js'\nimport { cache } from '../src/core/cache.js'\nimport { snapFetch } from '../src/modules/snapFetch.js'\n\n/* ----------------- helpers dom & utils ------------------ */\nfunction addLink(href) {\n const link = document.createElement('link')\n link.rel = 'stylesheet'\n link.href = href\n document.head.appendChild(link)\n return link\n}\nfunction addStyle(css) {\n const s = document.createElement('style')\n s.textContent = css\n document.head.appendChild(s)\n return s\n}\nconst req = (...keys) => new Set(keys)\nconst cps = (t) => new Set([...t].map(ch => ch.codePointAt(0)))\n\nbeforeEach(() => {\n if (typeof cache.reset === 'function') cache.reset()\n if (typeof cache.resetCache === 'function') cache.resetCache()\n cache.font?.clear?.()\n cache.resource?.clear?.()\n vi.clearAllMocks()\n document.querySelectorAll('style,link[rel=\"stylesheet\"]').forEach(n => n.remove())\n})\n\n/* ----------------- External links & heuristics ------------------ */\ndescribe('embedCustomFonts - external links & heuristics', () => {\n it('fetches cross-origin Google Fonts link and inlines @font-face', async () => {\n const href = 'https://fonts.googleapis.com/css2?family=Unbounded:wght@400'\n addLink(href)\n\n // 1) CSS del \n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: `\n @font-face {\n font-family: 'Unbounded';\n font-style: normal;\n font-weight: 400;\n font-stretch: 100%;\n unicode-range: U+000-5FF;\n src: url(https://fonts.gstatic.com/s/unbounded/v1/a.woff2) format('woff2');\n }\n `,\n status: 200,\n url: href,\n fromCache: false,\n })\n // 2) Blob โ†’ DataURL\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: 'data:font/woff2;base64,ABC=',\n status: 200,\n url: 'https://fonts.gstatic.com/s/unbounded/v1/a.woff2',\n fromCache: false,\n mime: 'font/woff2',\n })\n\n const css = await embedCustomFonts({\n required: req('Unbounded__400__normal__100'),\n usedCodepoints: cps('A'),\n })\n\n expect(css).toMatch(/font-family:\\s*['\"]?Unbounded['\"]?/)\n expect(css).toMatch(/url\\([\"']?data:/)\n expect(snapFetch).toHaveBeenCalledTimes(2)\n })\n\n it('allows cross-origin by family token in URL (e.g., family=) and inlines font blob', async () => {\n const href = 'https://cdn.example.com/css?family=My+Fancy+Font'\n addLink(href)\n\n addStyle(`@font-face{\n font-family:'My Fancy Font';\n font-style:normal;font-weight:400;font-stretch:100%;\n src:url(https://cdn.example.com/mff.woff2) format('woff2');\n }`)\n\n // 1) CSS del \n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: '@font-face{font-family:\\'My Fancy Font\\';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://cdn.example.com/mff.woff2) format(\\'woff2\\');}',\n status: 200,\n url: href,\n fromCache: false,\n })\n // 2) Fuente โ†’ DataURL\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: 'data:font/woff2;base64,ABC=',\n status: 200,\n url: 'https://cdn.example.com/mff.woff2',\n fromCache: false,\n mime: 'font/woff2',\n })\n\n const css = await embedCustomFonts({\n required: new Set(['My Fancy Font__400__normal__100']),\n usedCodepoints: new Set(['B'.codePointAt(0)]),\n })\n\n expect(css).toMatch(/My Fancy Font/)\n expect(css).toMatch(/url\\([\"']?data:/)\n expect(snapFetch).toHaveBeenCalledTimes(2)\n })\n})\n\n/* ----------------- Cache hits & fetch errors (CSSOM path, deterministic) ------------------ */\ndescribe('embedCustomFonts - cache hits & fetch errors', () => {\n it('uses cache.resource for URL already in cache (no refetch)', async () => {\n addStyle(`@font-face{\n font-family:'Foo';\n font-style:normal;font-weight:400;font-stretch:100%;\n src:url(https://fonts.gstatic.com/foo.woff2) format('woff2');\n }`)\n\n cache.resource.set('https://fonts.gstatic.com/foo.woff2', 'data:font/woff2;base64,AAA')\n\n const css = await embedCustomFonts({\n required: req('Foo__400__normal__100'),\n usedCodepoints: cps('A'),\n })\n\n expect(css).toMatch(/url\\([\"']?data:font\\/woff2;base64,AAA/)\n expect(snapFetch).not.toHaveBeenCalled()\n })\n\n it('continues when font fetch fails (ok:false)', async () => {\n addStyle(`@font-face{\n font-family:'Bar';\n font-style:normal;font-weight:400;font-stretch:100%;\n src:url(https://fonts.gstatic.com/bar.woff2) format('woff2');\n }`)\n\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: false, data: null, status: 0,\n url: 'https://fonts.gstatic.com/bar.woff2',\n fromCache: false, reason: 'network'\n })\n\n const css = await embedCustomFonts({\n required: new Set(['Bar__400__normal__100']),\n usedCodepoints: new Set(['C'.codePointAt(0)]),\n })\n\n expect(typeof css).toBe('string')\n expect(snapFetch).toHaveBeenCalled()\n })\n})\n\n/* ----------------- @import injection & dedupe ------------------ */\ndescribe('embedCustomFonts - @import injection & dedupe', () => {\n it('injects for @import urls and does not duplicate', async () => {\n const imported = 'https://fonts.googleapis.com/css2?family=Inter:wght@400'\n addStyle(`@import url(\"${imported}\");`)\n\n // 1) CSS importado\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: '@font-face{font-family:\\'Inter\\';font-style:normal;font-weight:400;font-stretch:100%;src:url(https://fonts.gstatic.com/s/inter/v1/a.woff2) format(\\'woff2\\');}',\n status: 200,\n url: imported,\n fromCache: false,\n })\n // 2) Fuente โ†’ DataURL\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: 'data:font/woff2;base64,QQ==',\n status: 200,\n url: 'https://fonts.gstatic.com/s/inter/v1/a.woff2',\n fromCache: false,\n mime: 'font/woff2',\n })\n\n const css = await embedCustomFonts({\n required: req('Inter__400__normal__100'),\n usedCodepoints: cps('A'),\n })\n\n const links = [...document.querySelectorAll(`link[rel=\"stylesheet\"][href=\"${imported}\"]`)]\n expect(links.length).toBe(1)\n expect(links[0].getAttribute('data-snapdom')).toBe('injected-import')\n\n expect(css).toMatch(/font-family:\\s*['\"]?Inter['\"]?/)\n expect(css).toMatch(/url\\([\"']?data:/)\n\n // dedupe: segunda llamada no duplica faces\n const css2 = await embedCustomFonts({\n required: req('Inter__400__normal__100'),\n usedCodepoints: cps('A'),\n })\n const facesCount = (css2.match(/@font-face/g) || []).length\n expect(facesCount).toBe(1)\n })\n})\n\n/* ----------------- Relative URL inlining ------------------ */\ndescribe('embedCustomFonts - relative URL inlining', () => {\n it('inlines relative url(...) using base from location.href', async () => {\n addStyle(`@font-face{\n font-family:'RelFace';\n font-style:normal;font-weight:400;font-stretch:100%;\n src:url(./rel.woff2) format('woff2');\n }`)\n\n let seenUrl = ''\n vi.mocked(snapFetch).mockImplementation(async (url, opts = {}) => {\n if (opts.as === 'text') {\n return { ok: true, data: '', status: 200, url, fromCache: false }\n }\n seenUrl = String(url)\n return { ok: true, data: 'data:font/woff2;base64,QQ==', status: 200, url, fromCache: false, mime: 'font/woff2' }\n })\n\n const css = await embedCustomFonts({\n required: req('RelFace__400__normal__100'),\n usedCodepoints: cps('B'),\n })\n\n expect(seenUrl).toContain(new URL('./rel.woff2', location.href).href)\n expect(css).toMatch(/RelFace/)\n expect(css).toMatch(/url\\([\"']?data:/)\n })\n})\n\n/* ----------------- Weight fallback & ranges ------------------ */\ndescribe('embedCustomFonts - nearest weight fallback & ranges', () => {\n it('selects face 400 when required 700 (nearest fallback)', async () => {\n addStyle(`@font-face{\n font-family:'Nearest';\n font-style:normal;font-weight:400;font-stretch:100%;\n src:url(data:font/woff2;base64,AA==) format('woff2');\n }`)\n\n const css = await embedCustomFonts({\n required: req('Nearest__700__normal__100'),\n usedCodepoints: cps('A'),\n })\n expect(css).toMatch(/font-family:\\s*['\"]?Nearest['\"]?/)\n expect(css).toMatch(/font-weight:\\s*400/)\n })\n\n it('accepts faces that declare weight and stretch ranges', async () => {\n addStyle(`@font-face{\n font-family:'Ranges';\n font-style:normal;font-weight:100 700;font-stretch:75% 125%;\n src:url(data:font/woff2;base64,QQ==) format('woff2');\n unicode-range: U+000-5FF;\n }`)\n const css = await embedCustomFonts({\n required: req('Ranges__500__normal__100'),\n usedCodepoints: cps('Z'),\n })\n expect(css).toMatch(/font-family:\\s*['\"]?Ranges['\"]?/)\n expect(css).toMatch(/font-weight:\\s*100 700|font-weight:\\s*100\\s+700/i)\n })\n})\n\n/* ----------------- Exclude knobs ------------------ */\ndescribe('embedCustomFonts - exclude by families/domains/subsets', () => {\n it('excludes by family name', async () => {\n addStyle(`@font-face{\n font-family:'Excluded';\n font-weight:400;font-style:normal;font-stretch:100%;\n src:url(data:font/woff2;base64,AA==);\n }`)\n const css = await embedCustomFonts({\n required: req('Excluded__400__normal__100'),\n usedCodepoints: cps('A'),\n exclude: { families: ['excluded'] },\n })\n expect(css).not.toMatch(/Excluded/)\n })\n\n it('excludes by domain host', async () => {\n addStyle(`@font-face{\n font-family:'DomainFace';\n font-weight:400;font-style:normal;font-stretch:100%;\n src:url(https://blocked.example.org/font.woff2) format('woff2');\n }`)\n const css = await embedCustomFonts({\n required: req('DomainFace__400__normal__100'),\n usedCodepoints: cps('B'),\n exclude: { domains: ['blocked.example.org'] },\n })\n expect(css).not.toMatch(/DomainFace/)\n })\n\n it('excludes by subset detection from unicode-range (e.g., cyrillic)', async () => {\n addStyle(`@font-face{\n font-family:'Subsets';\n font-weight:400;font-style:normal;font-stretch:100%;\n unicode-range: U+0400-04FF;\n src:url(data:font/woff2;base64,AA==);\n }`)\n const css = await embedCustomFonts({\n required: req('Subsets__400__normal__100'),\n usedCodepoints: new Set([0x0410]), // 'ะ'\n exclude: { subsets: ['cyrillic'] },\n })\n expect(css).not.toMatch(/Subsets/)\n })\n})\n\n/* ----------------- Cache key hit ------------------ */\ndescribe('embedCustomFonts - cache key hit', () => {\n it('returns cached CSS on second identical call (no extra fetch)', async () => {\n addStyle(`@font-face{\n font-family:'CacheFace';\n font-weight:400;font-style:normal;font-stretch:100%;\n src:url(https://cdn.example.com/cache.woff2) format('woff2');\n }`)\n\n // Primera llamada: 1 fetch (dataURL)\n vi.mocked(snapFetch).mockResolvedValueOnce({\n ok: true,\n data: 'data:font/woff2;base64,ABC=',\n status: 200,\n url: 'https://cdn.example.com/cache.woff2',\n fromCache: false,\n mime: 'font/woff2',\n })\n\n const opts = {\n required: req('CacheFace__400__normal__100'),\n usedCodepoints: cps('A'),\n }\n\n const css1 = await embedCustomFonts(opts)\n expect(css1).toMatch(/url\\([\"']?data:/)\n expect(snapFetch).toHaveBeenCalledTimes(1)\n\n // Segunda llamada idรฉntica โ†’ sale del cache.resource por cacheKey\n vi.mocked(snapFetch).mockClear()\n const css2 = await embedCustomFonts(opts)\n expect(css2).toBe(css1)\n expect(snapFetch).not.toHaveBeenCalled()\n })\n})\n\n/* ----------------- ensureFontsReady (smoke) ------------------ */\ndescribe('ensureFontsReady (smoke)', () => {\n it('awaits fonts.ready and cleans up warmup container', async () => {\n const items = []\n const fakeSet = {\n [Symbol.iterator]: function* () { yield* items },\n ready: Promise.resolve(),\n add(ff) { items.push(ff) }\n }\n Object.defineProperty(document, 'fonts', { configurable: true, get: () => fakeSet })\n\n const raf = vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {\n cb(performance.now())\n return 1\n })\n\n await ensureFontsReady(['WarmupFam'], 1)\n expect(document.querySelector('[data-warmup]')).toBeFalsy()\n\n raf.mockRestore()\n delete document.fonts\n })\n})\n" }, { "path": "__tests__/module.fonts.test.js", "content": "import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\nimport { iconToImage, embedCustomFonts } from '../src/modules/fonts.js'\nimport { cache } from '../src/core/cache.js'\n\n// === helpers locales ===\nfunction cleanFontEnvironment() {\n document\n .querySelectorAll('style[data-test-font], link[data-test-font]')\n .forEach(el => el.remove())\n}\n\nfunction addStyleTag(css) {\n const style = document.createElement('style')\n style.setAttribute('data-test-font', 'true')\n style.textContent = css\n document.head.appendChild(style)\n return style\n}\n\n// Helpers nuevos para la API smart\nfunction makeRequired(family, weight='400', style='normal', stretchPct=100) {\n const key = `${family}__${weight}__${style}__${stretchPct}`\n return new Set([key])\n}\n\nfunction makeUsedCodepoints(text='A') {\n const s = new Set()\n for (const ch of text) s.add(ch.codePointAt(0))\n return s\n}\n\n/**\n * Mock seguro de document.fonts (FontFaceSet \"mรญnimo pero compatible\")\n * @param {Array<{ family:string, status:string, weight?:string, style?:string, _snapdomSrc?:string }>} fontsArray\n */\nfunction setDocumentFonts(fontsArray = []) {\n const items = [...fontsArray]\n\n // iterables y helpers tรญpicos\n const iter = function* () { yield* items }\n const fakeSet = {\n // iterator por defecto\n [Symbol.iterator]: iter,\n // API parecida a FontFaceSet\n values: iter,\n entries: function* () { for (const it of items) yield [it.family, it] },\n forEach(cb, thisArg) { for (const it of items) cb.call(thisArg, it, it, fakeSet) },\n has(ff) { return items.includes(ff) },\n add(ff) { items.push(ff) },\n delete(ff) { const i = items.indexOf(ff); if (i >= 0) items.splice(i, 1) },\n clear() { items.length = 0 },\n ready: Promise.resolve(),\n // extra mรญnimo\n size: items.length\n }\n\n Object.defineProperty(document, 'fonts', {\n configurable: true,\n get() { return fakeSet },\n set() {}\n })\n\n return () => { delete document.fonts }\n}\n\nlet restoreFonts = () => {}\n\nbeforeEach(() => {\n // cache.reset() o resetCache() segรบn exista\n if (typeof cache.reset === 'function') cache.reset()\n if (typeof cache.resetCache === 'function') cache.resetCache()\n if (cache.font?.clear) cache.font.clear?.()\n if (cache.resource?.clear) cache.resource.clear?.()\n\n cleanFontEnvironment()\n vi.restoreAllMocks()\n restoreFonts = setDocumentFonts([]) // mock vacรญo por defecto\n})\n\nafterEach(() => {\n restoreFonts?.()\n})\n\n// ========== iconToImage ==========\ndescribe('iconToImage', () => {\n let ctxSpy, toDataURLSpy\n\n afterEach(() => {\n ctxSpy?.mockRestore?.()\n toDataURLSpy?.mockRestore?.()\n })\n\n it('devuelve un data URL vรกlido con dimensiones > 0', async () => {\n ctxSpy = vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockImplementation(() => ({\n scale: vi.fn(),\n font: '',\n textBaseline: '',\n fillStyle: '',\n fillText: vi.fn(),\n }))\n toDataURLSpy = vi.spyOn(HTMLCanvasElement.prototype, 'toDataURL').mockImplementation(() => 'data:image/png;base64,TEST')\n\n const { dataUrl, width, height } = await iconToImage('A', 'Arial', '400', 16, '#000')\n expect(dataUrl).toMatch(/^data:image\\/png;base64,/)\n expect(width).toBeGreaterThan(0)\n expect(height).toBeGreaterThan(0)\n })\n})\n\n// ========== embedCustomFonts ==========\ndescribe('embedCustomFonts', () => {\n it('conserva @font-face con solo local() en src', async () => {\n const style = addStyleTag(`\n @font-face {\n font-family: 'OnlyLocal';\n src: local(\"Arial\");\n font-style: normal;\n font-weight: 400;\n }\n `)\n\n const css = await embedCustomFonts({\n required: makeRequired('OnlyLocal', '400', 'normal', 100),\n usedCodepoints: makeUsedCodepoints('abc')\n })\n expect(css).toMatch(/font-family:\\s*['\"]?OnlyLocal['\"]?/)\n expect(css).toMatch(/src:\\s*local\\([\"']Arial[\"']\\)/)\n document.head.removeChild(style)\n })\n\n it('filtra @font-face no utilizados segun document.fonts', async () => {\n restoreFonts?.() // reemplazamos con fuentes usadas\n restoreFonts = setDocumentFonts([\n { family: 'UsedFont', status: 'loaded', weight: 'normal', style: 'normal' },\n ])\n\n addStyleTag(`\n @font-face { font-family: 'UsedFont'; src: url(data:font/woff;base64,AA==); }\n @font-face { font-family: 'UnusedFont'; src: url(data:font/woff;base64,BB==); }\n `)\n\n const css = await embedCustomFonts({\n required: makeRequired('UsedFont', '400', 'normal', 100),\n usedCodepoints: makeUsedCodepoints('A')\n })\n expect(css).toMatch(/UsedFont/)\n expect(css).not.toMatch(/UnusedFont/)\n })\n\n it('embebe fuentes locales provistas', async () => {\n const css = await embedCustomFonts({\n required: makeRequired('MyLocal', '400', 'normal', 100),\n usedCodepoints: makeUsedCodepoints('A'),\n localFonts: [{ family: 'MyLocal', src: 'data:font/woff;base64,AA==' }],\n })\n expect(css).toMatch(/font-family:\\s*['\"]?MyLocal['\"]?/)\n expect(css).toMatch(/AA==/)\n })\n\n it('usa _snapdomSrc para nuevas fuentes', async () => {\n restoreFonts?.()\n restoreFonts = setDocumentFonts([\n { family: 'DynFont', status: 'loaded', weight: 'normal', style: 'normal', _snapdomSrc: 'data:font/woff;base64,CC==' },\n ])\n\n const css = await embedCustomFonts({\n required: makeRequired('DynFont', '400', 'normal', 100),\n usedCodepoints: makeUsedCodepoints('A'),\n })\n expect(css).toMatch(/font-family:\\s*['\"]?DynFont['\"]?/)\n expect(css).toMatch(/CC==/)\n })\n\n it('conserva @font-face con local() y sin url()', async () => {\n const style = addStyleTag(`\n @font-face {\n font-family: LocalFont;\n src: local('MyFont'), local('FallbackFont');\n font-style: italic;\n font-weight: bold;\n }\n `)\n\n const css = await embedCustomFonts({\n required: makeRequired('LocalFont', '700', 'italic', 100),\n usedCodepoints: makeUsedCodepoints('Z')\n })\n expect(css).toMatch(/font-family:\\s*['\"]?LocalFont['\"]?/)\n expect(css).toMatch(/src:\\s*local\\(['\"]MyFont['\"]\\),\\s*local\\(['\"]FallbackFont['\"]\\)/)\n expect(css).toMatch(/font-style:\\s*italic/)\n document.head.removeChild(style)\n })\n})\n\n/**\n * Ensures that when a family only publishes a single weight (e.g., 400),\n * and the required variant asks for 700, we still embed the available 400 face\n * (browser will synthesize bold). This covers families like \"Mansalva\".\n */\ndescribe('embedCustomFonts - single weight fallback', () => {\n it('embeds the 400 @font-face when 700 is required (fallback)', async () => {\n // Prepare a minimal @font-face for \"Mansalva\" with only weight 400\n const style = document.createElement('style')\n style.textContent = `\n @font-face {\n font-family: 'Mansalva';\n font-style: normal;\n font-weight: 400;\n font-stretch: 100%;\n unicode-range: U+000-5FF;\n src: local('Mansalva'),\n url(data:font/woff2;base64,AA==) format('woff2');\n }\n `\n document.head.appendChild(style)\n\n // Required variants:\n // ask for 700 normal stretch=100% (our faceMatchesRequired must accept nearest=400)\n const required = new Set(['Mansalva__700__normal__100'])\n\n // Used codepoints: any latin char; we keep within declared unicode-range\n const usedCodepoints = new Set([65]) // 'A'\n\n const css = await embedCustomFonts({\n required,\n usedCodepoints,\n // no excludes, no proxy\n })\n\n // Expectations:\n expect(css).toMatch(/font-family:\\s*['\"]?Mansalva['\"]?/)\n // It must embed the available 400 face (we accept nearest)\n expect(css).toMatch(/font-weight:\\s*400/)\n // And keep the inlined data URL we provided\n expect(css).toMatch(/data:font\\/woff2;base64,AA==/)\n\n document.head.removeChild(style)\n })\n})\n" }, { "path": "__tests__/module.iconFonts.more.test.js", "content": "// __tests__/module.iconFonts.more.test.js โ€“ extend iconFonts coverage (34% โ†’ higher)\nimport { describe, it, expect, beforeEach, vi } from 'vitest'\n\nlet mod\n\nbeforeEach(async () => {\n vi.restoreAllMocks()\n vi.resetModules()\n mod = await import('../src/modules/iconFonts.js')\n})\n\ndescribe('isMaterialFamily', () => {\n it('returns true for \"Material Icons\"', () => {\n expect(mod.isMaterialFamily('Material Icons')).toBe(true)\n })\n it('returns true for \"Material Symbols\"', () => {\n expect(mod.isMaterialFamily('Material Symbols')).toBe(true)\n })\n it('returns false for non-Material fonts', () => {\n expect(mod.isMaterialFamily('Arial')).toBe(false)\n expect(mod.isMaterialFamily('Font Awesome')).toBe(false)\n })\n it('is case-insensitive', () => {\n expect(mod.isMaterialFamily('material icons')).toBe(true)\n expect(mod.isMaterialFamily('MATERIAL SYMBOLS')).toBe(true)\n })\n})\n\ndescribe('isIconFont heuristics', () => {\n it('matches icon, glyph, symbols, feather, fontawesome (fallback heuristics)', () => {\n const { isIconFont } = mod\n expect(isIconFont('My Icon Pack')).toBe(true)\n expect(isIconFont('Glyph Set')).toBe(true)\n expect(isIconFont('Symbols font')).toBe(true)\n expect(isIconFont('Feather icons')).toBe(true)\n expect(isIconFont('FontAwesome free')).toBe(true)\n })\n})\n\ndescribe('materialIconToImage', () => {\n it('returns object with dataUrl, width, height', async () => {\n const out = await mod.materialIconToImage('home', { fontSize: 24 })\n expect(out).toBeDefined()\n expect(out.dataUrl).toMatch(/^data:image\\//)\n expect(typeof out.width).toBe('number')\n expect(typeof out.height).toBe('number')\n })\n})\n" }, { "path": "__tests__/module.iconFonts.test.js", "content": "// __tests__/module.iconFonts.test.js\nimport { describe, it, expect, beforeEach, vi } from 'vitest'\n\nlet mod // se setea en beforeEach para resetear estado del mรณdulo\n\nbeforeEach(async () => {\n vi.restoreAllMocks()\n vi.resetModules() // importante para resetear userIconFonts\n mod = await import('../src/modules/iconFonts.js') // ESM dynamic import\n})\n\ndescribe('extendIconFonts', () => {\n it('acepta string y lo convierte a RegExp (case-insensitive)', () => {\n const { extendIconFonts, isIconFont } = mod\n // string -> RegExp\n extendIconFonts('acme-brand')\n expect(isIconFont('ACME-BRAND pack')).toBe(true)\n // control: no matchea algo que no contenga el patrรณn y tampoco cae en la heurรญstica\n expect(isIconFont('qwerty')).toBe(false)\n })\n\n it('acepta RegExp y lo agrega a la lista de usuarios', () => {\n const { extendIconFonts, isIconFont } = mod\n extendIconFonts(/brandx/i)\n expect(isIconFont('This is BrAnDx kit')).toBe(true)\n expect(isIconFont('no-match-here')).toBe(false)\n })\n\n it('acepta arrays mezclando strings y RegExp', () => {\n const { extendIconFonts, isIconFont } = mod\n extendIconFonts(['foo-lib', /bar-pkg/i])\n expect(isIconFont('FOO-LIB icons')).toBe(true)\n expect(isIconFont('BAR-PKG family')).toBe(true)\n expect(isIconFont('none')).toBe(false)\n })\n\n it('ignora valores invรกlidos y hace console.warn', () => {\n const { extendIconFonts, isIconFont } = mod\n const warn = vi.spyOn(console, 'warn').mockImplementation(() => {})\n extendIconFonts(123) // invรกlido\n extendIconFonts({ nope: true }) // invรกlido\n expect(warn).toHaveBeenCalled() // cubre rama del console.warn\n // No debe haber agregado nada que haga matchear \"qwerty\"\n expect(isIconFont('qwerty')).toBe(false)\n warn.mockRestore()\n })\n})\n\ndescribe('isIconFont (defaults)', () => {\n it('reconoce patrones por default (e.g., Font Awesome)', () => {\n const { isIconFont } = mod\n expect(isIconFont('Font Awesome 6 Pro')).toBe(true) // match por defaultIconFonts\n })\n})\n" }, { "path": "__tests__/module.lineClamp.test.js", "content": "// __tests__/module.lineClamp.test.js โ€“ lineClamp coverage\nimport { describe, it, expect, beforeEach, afterEach } from 'vitest'\nimport { lineClamp, lineClampTree } from '../src/modules/lineClamp.js'\n\nbeforeEach(() => {\n document.body.innerHTML = ''\n})\n\nafterEach(() => {\n document.body.innerHTML = ''\n})\n\ndescribe('lineClamp', () => {\n it('returns no-op for null element', () => {\n const undo = lineClamp(null)\n expect(typeof undo).toBe('function')\n undo()\n })\n\n it('returns no-op when no -webkit-line-clamp', () => {\n const div = document.createElement('div')\n div.textContent = 'Hello world'\n document.body.appendChild(div)\n lineClamp(div)\n expect(div.textContent).toBe('Hello world')\n })\n\n it('returns no-op when not plain text container (has child elements)', () => {\n const div = document.createElement('div')\n div.style.webkitLineClamp = '2'\n div.appendChild(document.createElement('span'))\n div.appendChild(document.createTextNode('text'))\n document.body.appendChild(div)\n lineClamp(div)\n expect(div.childNodes.length).toBe(2)\n })\n\n it('clamps text and returns undo when content overflows', () => {\n const div = document.createElement('div')\n div.style.webkitLineClamp = '2'\n div.style.lineHeight = '20px'\n div.style.fontSize = '16px'\n div.style.padding = '0'\n div.style.width = '200px'\n div.style.overflow = 'hidden'\n const longText = 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'\n div.textContent = longText\n document.body.appendChild(div)\n const undo = lineClamp(div)\n expect(div.textContent).toContain('โ€ฆ')\n undo()\n expect(div.textContent).toBe(longText)\n })\n\n it('returns no-op when content fits in N lines', () => {\n const div = document.createElement('div')\n div.style.webkitLineClamp = '5'\n div.style.lineHeight = '20px'\n div.style.fontSize = '16px'\n div.textContent = 'Short'\n document.body.appendChild(div)\n lineClamp(div)\n expect(div.textContent).toBe('Short')\n })\n})\n\ndescribe('lineClampTree (#386)', () => {\n it('clamps nested element with -webkit-line-clamp', () => {\n const outer = document.createElement('div')\n outer.style.width = '200px'\n const inner = document.createElement('div')\n inner.style.webkitLineClamp = '2'\n inner.style.lineHeight = '20px'\n inner.style.fontSize = '16px'\n inner.style.padding = '0'\n inner.style.overflow = 'hidden'\n const longText = 'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.'\n inner.textContent = longText\n outer.appendChild(inner)\n document.body.appendChild(outer)\n\n const undo = lineClampTree(outer)\n expect(inner.textContent).toContain('โ€ฆ')\n undo()\n expect(inner.textContent).toBe(longText)\n })\n\n it('returns no-op for null', () => {\n const undo = lineClampTree(null)\n expect(typeof undo).toBe('function')\n undo()\n })\n})\n" }, { "path": "__tests__/module.pseudo.test.js", "content": "// __tests__/modules.pseudo.test.js\nimport { describe, it, expect, vi, beforeEach } from 'vitest'\nimport { inlinePseudoElements } from '../src/modules/pseudo.js'\n\n// Mock de utils y fonts con importActual para que Vitest Browser no rompa\nvi.mock('../src/utils', async () => {\n const actual = await vi.importActual('../src/utils')\n return {\n ...actual,\n fetchImage: vi.fn(),\n inlineSingleBackgroundEntry: vi.fn(), // agregado para cubrir casos extra\n }\n})\n\nvi.mock('../src/modules/fonts.js', async () => {\n const actual = await vi.importActual('../src/modules/fonts.js')\n return {\n ...actual,\n iconToImage: vi.fn(),\n }\n})\n\nimport * as helpers from '../src/utils/index.js'\nimport * as fonts from '../src/modules/fonts.js'\n\nconst sessionCache = {\n styleMap: new Map(),\n styleCache: new WeakMap()\n}\n\ndescribe('inlinePseudoElements', () => {\n beforeEach(() => {\n vi.clearAllMocks()\n })\n\n it('does not fail with simple elements', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n await expect(inlinePseudoElements(el, clone, sessionCache, {})).resolves.toBeUndefined()\n })\n\n it('handles ::before with text content', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) =>\n prop === 'content' ? '\"โ˜…\"'\n : prop === 'font-family' ? 'Arial'\n : prop === 'font-size' ? '32'\n : prop === 'font-weight' ? '400'\n : prop === 'color' ? '#000'\n : prop === 'background-image' ? 'none'\n : prop === 'background-color' ? 'transparent'\n : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '', color: '', fontSize: '', fontWeight: '', fontFamily: '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('handles ::before with icon font', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) =>\n prop === 'content' ? '\"โ˜…\"'\n : prop === 'font-family' ? 'Font Awesome'\n : prop === 'font-size' ? '32'\n : prop === 'font-weight' ? '400'\n : prop === 'color' ? '#000'\n : prop === 'background-image' ? 'none'\n : prop === 'background-color' ? 'transparent'\n : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Font Awesome'\n }\n return { getPropertyValue: () => '', color: '', fontSize: '', fontWeight: '', fontFamily: '' }\n })\n fonts.iconToImage.mockResolvedValue('data:image/png;base64,icon')\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('handles ::before with url content', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) =>\n prop === 'content' ? 'url(\"https://test.com/img.png\")'\n : prop === 'font-family' ? 'Arial'\n : prop === 'font-size' ? '32'\n : prop === 'font-weight' ? '400'\n : prop === 'color' ? '#000'\n : prop === 'background-image' ? 'none'\n : prop === 'background-color' ? 'transparent'\n : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '', color: '', fontSize: '', fontWeight: '', fontFamily: '' }\n })\n helpers.fetchImage.mockResolvedValue('data:image/png;base64,img')\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('handles ::before with background-image (data url)', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) =>\n prop === 'content' ? 'none'\n : prop === 'font-family' ? 'Arial'\n : prop === 'font-size' ? '32'\n : prop === 'font-weight' ? '400'\n : prop === 'color' ? '#000'\n : prop === 'background-image' ? 'url(\"data:image/png;base64,abc\")'\n : prop === 'background-color' ? 'transparent'\n : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '', color: '', fontSize: '', fontWeight: '', fontFamily: '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('handles ::before with background-image (fetch ok)', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) =>\n prop === 'content' ? 'none'\n : prop === 'font-family' ? 'Arial'\n : prop === 'font-size' ? '32'\n : prop === 'font-weight' ? '400'\n : prop === 'color' ? '#000'\n : prop === 'background-image' ? 'url(\"https://test.com/img.png\")'\n : prop === 'background-color' ? 'transparent'\n : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '', color: '', fontSize: '', fontWeight: '', fontFamily: '' }\n })\n helpers.fetchImage.mockResolvedValue('data:image/png;base64,img')\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('handles ::before with background-image (fetch error)', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) =>\n prop === 'content' ? 'none'\n : prop === 'font-family' ? 'Arial'\n : prop === 'font-size' ? '32'\n : prop === 'font-weight' ? '400'\n : prop === 'color' ? '#000'\n : prop === 'background-image' ? 'url(\"https://test.com/img.png\")'\n : prop === 'background-color' ? 'transparent'\n : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '', color: '', fontSize: '', fontWeight: '', fontFamily: '' }\n })\n helpers.fetchImage.mockRejectedValue(new Error('fail'))\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('cubre el catch de error en inlineSingleBackgroundEntry', async () => {\n helpers.inlineSingleBackgroundEntry.mockRejectedValue(new Error('fail'))\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) => prop === 'background-image' ? 'url(\"data:image/png;base64,abc\")' : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('cubre el inlining exitoso con inlineSingleBackgroundEntry', async () => {\n helpers.inlineSingleBackgroundEntry.mockResolvedValue('url(\"data:image/png;base64,abc\")')\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) => prop === 'background-image' ? 'url(\"https://test.com/img.png\")' : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('handles ::before with no visible box', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return { getPropertyValue: () => 'none' }\n return { getPropertyValue: () => '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('handles ::first-letter with no textNode', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation(() => ({ getPropertyValue: () => '' }))\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('handles error in pseudo processing', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation(() => { throw new Error('fail') })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('ignores if source no es Element', async () => {\n const notElement = {}\n const clone = document.createElement('div')\n await expect(inlinePseudoElements(notElement, clone, sessionCache, {})).resolves.toBeUndefined()\n })\n\n it('ignores if clone no es Element', async () => {\n const el = document.createElement('div')\n const notElement = {}\n await expect(inlinePseudoElements(el, notElement, {})).resolves.toBeUndefined()\n })\n\n it('inserta pseudoEl como ::after', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::after') return {\n getPropertyValue: (prop) => prop === 'content' ? '\"after\"' : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('inserta pseudoEl como ::before', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return {\n getPropertyValue: (prop) => prop === 'content' ? '\"before\"' : '',\n color: '#000', fontSize: '32px', fontWeight: '400', fontFamily: 'Arial'\n }\n return { getPropertyValue: () => '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('maneja ::first-letter meaningful', async () => {\n const el = document.createElement('div')\n el.textContent = 'Test'\n const clone = document.createElement('div')\n clone.textContent = 'Test'\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::first-letter') return {\n getPropertyValue: (prop) => prop === 'color' ? '#f00' : '', color: '#f00', fontSize: '32px'\n }\n return { getPropertyValue: () => '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('inserta ambos pseudoEl ::before y ::after', async () => {\n const el = document.createElement('div')\n const clone = document.createElement('div')\n vi.spyOn(window, 'getComputedStyle').mockImplementation((_, pseudo) => {\n if (pseudo === '::before') return { getPropertyValue: () => '\"before\"' }\n if (pseudo === '::after') return { getPropertyValue: () => '\"after\"' }\n return { getPropertyValue: () => '' }\n })\n await inlinePseudoElements(el, clone, sessionCache, {})\n window.getComputedStyle.mockRestore()\n })\n\n it('should inline ::first-letter when style is meaningful', async () => {\n const el = document.createElement('p')\n el.textContent = 'ยกHola mundo!'\n el.style.setProperty('color', 'black')\n document.body.appendChild(el)\n const clone = el.cloneNode(true)\n const style = document.createElement('style')\n style.textContent = `\n p::first-letter {\n color: red;\n font-size: 200%;\n }\n `\n document.head.appendChild(style)\n await inlinePseudoElements(el, clone, sessionCache, {})\n const firstLetterEl = clone.querySelector('[data-snapdom-pseudo=\"::first-letter\"]')\n expect(firstLetterEl).toBeTruthy()\n expect(firstLetterEl.textContent.length).toBeGreaterThan(0)\n })\n\n it('should inline background-image entries for pseudo-element', async () => {\n const el = document.createElement('div')\n document.body.appendChild(el)\n const style = document.createElement('style')\n style.textContent = `\n div::after {\n content: \" \";\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='10' fill='blue'/%3E%3C/svg%3E\");\n display: inline-block;\n width: 10px;\n height: 10px;\n }\n `\n document.head.appendChild(style)\n const clone = el.cloneNode(true)\n await inlinePseudoElements(el, clone, sessionCache, {})\n const pseudoAfter = clone.querySelector('[data-snapdom-pseudo=\"::after\"]')\n expect(pseudoAfter).toBeTruthy()\n expect(pseudoAfter.style.backgroundImage.startsWith('url(\"data:image/')).toBeTruthy()\n })\n})\n" }, { "path": "__tests__/module.snapFetch.test.js", "content": "// __tests__/module.snapFetch.test.js\n\nimport { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'\n\n/**\n * Re-import the module with a clean state so internal singletons\n * like _inflight / _errorCache start fresh.\n * @returns {Promise<{snapFetch: (url: string, opts?: any)=>Promise}>}\n */\nasync function importFresh() {\n vi.resetModules()\n return import('../src/modules/snapFetch.js')\n}\n\n/** Stable origins/URLs for tests (no need to redefine window.location). */\nconst ORIGIN = globalThis.location?.origin || 'http://localhost'\nconst SAME = `${ORIGIN}/assets/a.css`\nconst CROSS = 'https://cdn.example/x.png'\n\n/** Mock `fetch` with a static Response. */\nfunction mockFetchOnce(status = 200, body = 'ok', headers = {}) {\n globalThis.fetch = vi.fn(async (_input, _init) => new Response(body, { status, headers }))\n}\n\n/** Mock `fetch` that rejects like a network error. */\nfunction mockFetchNetworkError() {\n globalThis.fetch = vi.fn(async () => {\n throw new TypeError('Failed to fetch')\n })\n}\n\n/** Mock `fetch` that rejects with AbortError when the signal aborts (timeout). */\nfunction mockFetchTimeoutAware() {\n globalThis.fetch = vi.fn((input, init) => {\n return new Promise((_, reject) => {\n const err = Object.assign(new Error('timeout'), { name: 'AbortError' })\n const signal = init?.signal\n if (signal?.aborted) return reject(err)\n signal?.addEventListener('abort', () => reject(err), { once: true })\n })\n })\n}\n\n/** Create a deferred promise for fine-grained inflight control. */\nfunction deferred() {\n const d = {}\n d.promise = new Promise((res, rej) => {\n d.resolve = res\n d.reject = rej\n })\n // @ts-ignore\n return d\n}\n\nbeforeEach(() => {\n vi.restoreAllMocks()\n vi.useRealTimers()\n})\n\nafterEach(() => {\n vi.restoreAllMocks()\n vi.useRealTimers()\n})\n\ndescribe('snapFetch (happy paths)', () => {\n it('returns text when as:\"text\"', async () => {\n const { snapFetch } = await importFresh()\n mockFetchOnce(200, 'hello', { 'content-type': 'text/plain' })\n\n const res = await snapFetch(`${ORIGIN}/hello.txt`, { as: 'text' })\n expect(res.ok).toBe(true)\n expect(res.status).toBe(200)\n expect(res.data).toBe('hello')\n })\n\n it('returns Blob when as:\"blob\"', async () => {\n const { snapFetch } = await importFresh()\n mockFetchOnce(200, 'BLOB!', { 'content-type': 'image/png' })\n\n const res = await snapFetch(`${ORIGIN}/p.png`, { as: 'blob' })\n expect(res.ok).toBe(true)\n expect(res.data).toBeInstanceOf(Blob)\n expect(res.mime).toMatch(/image\\/png/i)\n })\n\n it('returns DataURL when as:\"dataURL\"', async () => {\n const { snapFetch } = await importFresh()\n mockFetchOnce(200, 'PNGDATA', { 'content-type': 'image/png' })\n\n const res = await snapFetch(`${ORIGIN}/p.png`, { as: 'dataURL' })\n expect(res.ok).toBe(true)\n expect(typeof res.data).toBe('string')\n expect(res.data.startsWith('data:')).toBe(true)\n })\n})\n\ndescribe('snapFetch (errors are non-throwing)', () => {\n it('maps HTTP error to { ok:false, reason:\"http_error\" }', async () => {\n const { snapFetch } = await importFresh()\n mockFetchOnce(404, '', {})\n\n const res = await snapFetch(`${ORIGIN}/miss.css`, { as: 'text' })\n expect(res.ok).toBe(false)\n expect(res.status).toBe(404)\n expect(res.reason).toBe('http_error')\n })\n\n it('maps network error to { ok:false, reason:\"network\" }', async () => {\n const { snapFetch } = await importFresh()\n mockFetchNetworkError()\n\n const res = await snapFetch(CROSS, { as: 'blob' })\n expect(res.ok).toBe(false)\n expect(res.status).toBe(0)\n expect(res.reason).toBe('network')\n })\n\n it('maps timeout to { ok:false, reason:\"timeout\" }', async () => {\n vi.useFakeTimers()\n const { snapFetch } = await importFresh()\n mockFetchTimeoutAware()\n\n const p = snapFetch(CROSS, { as: 'blob', timeout: 123 })\n vi.advanceTimersByTime(123)\n\n const res = await p\n expect(res.ok).toBe(false)\n expect(res.reason).toBe('timeout')\n expect(res.status).toBe(0)\n })\n})\n\ndescribe('snapFetch (inflight dedup + error TTL)', () => {\n it('deduplicates inflight requests to same key', async () => {\n const { snapFetch } = await importFresh()\n\n // Controlled fetch that resolves later\n const d = deferred()\n globalThis.fetch = vi.fn((_input, _init) => d.promise)\n\n const reqA = snapFetch(`${ORIGIN}/a.png`, { as: 'blob', timeout: 999 })\n const reqB = snapFetch(`${ORIGIN}/a.png`, { as: 'blob', timeout: 999 })\n\n // Only one network call\n expect(globalThis.fetch).toHaveBeenCalledTimes(1)\n\n // Fulfill with a real Response\n d.resolve(new Response('IMG', { status: 200, headers: { 'content-type': 'image/png' } }))\n\n const [resA, resB] = await Promise.all([reqA, reqB])\n expect(resA.ok && resB.ok).toBe(true)\n expect(resA.status).toBe(200)\n expect(resB.status).toBe(200)\n })\n\n it('caches errors for errorTTL and does not re-fetch within TTL', async () => {\n vi.useFakeTimers()\n vi.setSystemTime(new Date('2020-01-01T00:00:00Z'))\n\n const { snapFetch } = await importFresh()\n\n // Un solo spy con dos respuestas\n const spy = vi.fn()\n .mockResolvedValueOnce(new Response('', { status: 500 }))\n .mockResolvedValueOnce(new Response('OK', { status: 200, headers: { 'content-type': 'image/png' } }))\n globalThis.fetch = spy\n\n // 1) Falla inicial โ†’ cachea error\n const r1 = await snapFetch(`${ORIGIN}/fail.png`, { as: 'blob', errorTTL: 8000 })\n expect(r1.ok).toBe(false)\n expect(spy).toHaveBeenCalledTimes(1)\n\n // 2) Dentro del TTL โ†’ no re-fetch (desde cache)\n const r2 = await snapFetch(`${ORIGIN}/fail.png`, { as: 'blob', errorTTL: 8000 })\n expect(r2.ok).toBe(false)\n expect(r2.fromCache).toBe(true)\n expect(spy).toHaveBeenCalledTimes(1)\n\n // 3) Pasado el TTL โ†’ re-fetch (segunda llamada real)\n vi.advanceTimersByTime(8001)\n vi.setSystemTime(new Date('2020-01-01T00:00:08.001Z'))\n\n const r3 = await snapFetch(`${ORIGIN}/fail.png`, { as: 'blob', errorTTL: 8000 })\n expect(r3.ok).toBe(true)\n expect(spy).toHaveBeenCalledTimes(2)\n})\n\n})\n\ndescribe('snapFetch (proxy & credentials)', () => {\n it('same-origin โ†’ credentials: include, no proxy applied', async () => {\n const { snapFetch } = await importFresh()\n const spy = vi.fn(async (_input, _init) => new Response('ok', { status: 200 }))\n globalThis.fetch = spy\n\n const url = SAME\n await snapFetch(url, { as: 'text', useProxy: 'https://proxy.example/p?url={url}' })\n\n // No proxy used\n expect(spy.mock.calls[0][0]).toBe(url)\n // Credentials should be 'include' for same-origin\n expect(spy.mock.calls[0][1]?.credentials).toBe('include')\n })\n\n it('cross-origin + proxy template replaces {url}', async () => {\n const { snapFetch } = await importFresh()\n mockFetchOnce(200, 'ok', {})\n const res = await snapFetch(CROSS, {\n as: 'blob',\n useProxy: 'https://proxy.example/p?url={url}'\n })\n expect(res.ok).toBe(true)\n expect(res.url).toBe('https://proxy.example/p?url=' + encodeURIComponent(CROSS))\n })\n\n it('cross-origin + base proxy appends ?url=', async () => {\n const { snapFetch } = await importFresh()\n mockFetchOnce(200, 'ok', {})\n const res = await snapFetch(CROSS, {\n as: 'text',\n useProxy: 'https://proxy.example/p?'\n })\n expect(res.ok).toBe(true)\n expect(res.url).toBe('https://proxy.example/p?url=' + encodeURIComponent(CROSS))\n })\n})\n\n describe('snapFetch (logging & silent mode)', () => {\n it('dedupes console messages; silent:true suppresses logs', async () => {\n const { snapFetch } = await importFresh()\n const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})\n const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {})\n\n // First: HTTP error (warn once)\n mockFetchOnce(404, '', {})\n const r1 = await snapFetch(`${ORIGIN}/missing.png`, { as: 'blob' })\n expect(r1.ok).toBe(false)\n\n const warnCountAfter1 = warnSpy.mock.calls.length\n\n // Second same error within logger TTL: no new warn\n const r2 = await snapFetch(`${ORIGIN}/missing.png`, { as: 'blob' })\n expect(r2.ok).toBe(false)\n expect(warnSpy.mock.calls.length).toBe(warnCountAfter1)\n\n const totalBefore = errSpy.mock.calls.length + warnSpy.mock.calls.length\n mockFetchNetworkError()\n const r3 = await snapFetch(CROSS, { as: 'blob' })\n expect(r3.ok).toBe(false)\n const totalAfter = errSpy.mock.calls.length + warnSpy.mock.calls.length\n // Aceptamos 0 o 1 log nuevo (dedupe-friendly):\n expect([0, 1]).toContain(totalAfter - totalBefore)\n\n // Silent suppresses\n mockFetchNetworkError()\n const r4 = await snapFetch('https://cdn.example/b.png', { as: 'blob', silent: true })\n expect(r4.ok).toBe(false)\n const afterSilent = errSpy.mock.calls.length + warnSpy.mock.calls.length\n expect(afterSilent).toBe(totalAfter)\n\n warnSpy.mockRestore()\n errSpy.mockRestore()\n })\n })\n" }, { "path": "__tests__/module.styles.test.js", "content": "import { describe, it, expect, vi, beforeEach } from 'vitest'\n\n// Carga fresca del mรณdulo para que __wired se reinicie en cada test que lo pida\nasync function loadInlineAllStylesFresh() {\n await vi.resetModules()\n const mod = await import('../src/modules/styles.js')\n return mod.inlineAllStyles\n}\n\n// Stub minimal de MutationObserver para contar instancias\nclass MOStub {\n static count = 0\n constructor(/* cb */) {\n MOStub.count++\n }\n observe() {}\n disconnect() {}\n takeRecords() { return [] }\n}\n\nfunction freshSession() {\n return {\n styleMap: new Map(),\n styleCache: new WeakMap(),\n nodeMap: new Map(),\n }\n}\n\ndescribe('inlineAllStyles โ€“ branches y firmas', () => {\n beforeEach(() => {\n MOStub.count = 0\n globalThis.MutationObserver = MOStub\n })\n\n it('early-return para \n \n\n\n\n
\n

SnapDOM

\n

Next-generation DOM capture engine โ€” fast, modular, extensible.

\n \n \n zumerlab/snapdom\n โ€ฆ\n \n\n
\n

Browse demos

\n \n \n
\n
\n\n
\n\n \n
\n

๐Ÿ Benchmark: snapDOM vs html2canvas

\n

\n Each library will capture the same DOM element to canvas 5 times. We'll calculate average speed and show the\n winner.\n

\n\n
\n
\n This is the benchmark test element to be captured by both libraries.\n
\n
\n\n
\n \n
\n\n
\n
\n\n
\n
\n
snapDOM
\n
\n
Waiting to start...
\n
\n
\n
\n
html2canvas
\n
\n
Waiting to start...
\n
\n
\n
\n
\n\n \n
\n

๐Ÿ“ฆ Basic

\n
\n

Hello SnapDOM!

\n
\n \n \n
\n
\n\n \n
\n

Transforms & Shadows

\n\n
\n
\n Transformed + Shadow\n
\n

\n

\n Capture it just with outerTransforms /\n outerShadows.\n

\n
\n\n
\n \n \n\n
\n \n \n
\n
\n\n
\n
\n\n \n
\n

๐Ÿ…ฐ๏ธ ASCII Plugin

\n\n
\n \n \n\n \n\n \n
\n\n \n
\n\n \n
\n ๐Ÿš€โœจ๐Ÿง ๐Ÿ–ผ๏ธ๐ŸŽ›๏ธ๐Ÿงช\n ๐Ÿ’ก๐Ÿงฉ๐Ÿ“ฆ๐Ÿงญโš™๏ธ๐Ÿ›ก๏ธ\n ๐Ÿ“ˆ๐Ÿ–ฅ๏ธ๐Ÿ“๐Ÿงต๐Ÿ•น๏ธ๐ŸŽจ\n ๐Ÿ”ฌ๐Ÿ—œ๏ธ๐Ÿงฐ๐Ÿ”ง๐Ÿช„๐Ÿงท\n
\n\n \n
\n \"Landscape\n
Inline SVG landscape
\n
\n\n \n
\n
SNAP
DOM
\n
\n DOM โ†’ IMAGE ENGINE\n
\n
\n
\n\n
\n \n
\n
\n\n\n
\n

๐Ÿ•’ Timestamp Plugin

\n\n
\n
SnapDOM
\n Timestamp demo\n
\n\n
\n \n \n
\n\n
\n \n
\n
\n \n
\n

๐Ÿš€ Fun Transition

\n
\n
๐Ÿ•บ๐Ÿ’ƒ
\n

I'm dancing and changing color!

\n
\n \n \n
\n
\n\n \n
\n

Orbit CSS toolkit - Go to repo

\n
\n
\n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n \n \n \n
\n
\n \n
\n
\n \n
\n
ORBIT
\n
\n
\n
\n\n\n\n \n\n
\n \n \n
\n\n
\n \n\n\n\n \n
\n

๐Ÿ”ค Google Fonts

\n
\n

Unique Typography!

\n

Google Fonts with embedFonts: true.

\n
\n \n \n
\n
\n\n \n
\n

๐Ÿงฑ Shadow DOM

\n
\n \n \n
\n
\n\n \n
\n

๐ŸŽจ Canvas

\n
\n \n \n
\n
\n\n \n
\n

๐Ÿ“ Export Formats

\n
\n
๐Ÿ“ค Export as
PNG, JPG & WebP.
\n
\n \n
\n
\n\n \n
\n

โœจ Pseudo Elements

\n
This element has pseudo-elements.
\n \n \n
\n
\n\n \n
\n

โœ‚๏ธ Clip-Path Demo

\n
This shape uses clip-path
\n \n \n
\n
\n\n \n
\n

๐ŸŒ€ Mix Blend Mode

\n

CSS background-blend-mode: multiply โ€” a gradient image (sky + grass) blended with a blue overlay. SnapDOM captures the final rendered result.

\n
Gradient ร— blue overlay = tinted result
\n \n \n
\n
\n\n \n
\n

๐Ÿงฉ Iframe (same-origin)

\n
\n \n
\n \n \n
\n
\n\n \n
\n

โŒจ๏ธ Inputs & Textarea

\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n \n \n \n
\n\n
\n \n \n
\n
\n
\n \n \n
\n
\n\n \n
\n

๐ŸŽญ Masking Effects

\n\n \n \n \n \n \n \n \n \n \n \n\n
\n
\n
\n
CSS radial mask
\n
\n\n
\n
\n
PNG circle mask
\n
\n\n
\n
\n
SVG mask
\n
\n\n
\n \n
\n
Linear gradient mask
\n
\n
\n\n
\n \n \n \n \n
\n
\n \n \n
\n

๐ŸŒ CORS Proxy (useProxy)

\n
\n
\n \n Image preview (background)\n \n
\n\n
\n \n \n \n
\n\n
\n \n \n
\n\n
CORS proxy by Corsfix
\n
\n\n
\n
\n\n \n
\n

๐Ÿงพ Full Page Capture

\n \n \n
\n
\n\n\n \n\n \n\n \n\n \n\n\n \n\n \n \n\n\n\n" }, { "path": "docs/labs.html", "content": "\n\n\n \n \n snapDOM Labs โ€” Plugins Playground & html-in-canvas Demo\n \n \n \n \n \n \n\n\n
\n

SnapDOM Labs

\n

Plugins playground & experimental demos

\n \n \n zumerlab/snapdom\n โ€ฆ\n \n
\n โ† Back to showcase\n \n \n
\n
\n\n
\n \n
\n

Dog ID Card (Plugins Playground)

\n

\n SnapDOM plugins let you modify the cloned element before render (text replacement, filters, overlays) and add custom exports like toPdf() or toAscii().\n Create your own plugin โ†’\n

\n \n
\n
OFFICIAL โ€ข Dog ID
\n
\n
๐Ÿถ
\n
\n
\n
\n

FRIDA

\n Registered Dog\n
\n\n
\n
\n
Breed
\n
Border Collie (Dog)
\n
\n
\n
Age
\n
2 years (Dog adult)
\n
\n
\n
Owner
\n
John Peters
\n
\n
\n
Microchip
\n
ID-0xD0G-0001
\n
\n
\n\n
\n
Notes
\n
Friendly Dog. Loves fetch, hates vacuums.
\n
\n
\n
\n\n \n
\n

Compose plugins (toggle to enable)

\n
\n \n \n \n \n
\n\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n\n
\n \n
\n
\n\n
โ€”
\n
\n\n \n
\n

WICG html-in-canvas (Issue #172)

\n

\n Uses drawElementImage() to render the clone directly into canvas, bypassing SVG/foreignObject.\n Requires Chrome with chrome://flags/#canvas-draw-element enabled.\n

\n
\n Target for html-in-canvas\n

This box is captured via both PNG and drawElementImage.

\n
\n
\n \n \n
\n
\n
\n
Default (SVG)
\n
โ€”
\n
\n
\n
html-in-canvas
\n
โ€”
\n
\n
\n
\n
\n
\n\n \n \n\n \n\n\n" }, { "path": "esbuild.config.mjs", "content": "import { build } from 'esbuild'\nimport { readFileSync, rmSync } from 'node:fs'\n\n/** @type {import('esbuild').BuildOptions} */\nconst common = {\n bundle: true,\n sourcemap: false,\n logLevel: 'info',\n}\n\nconst pkg = JSON.parse(readFileSync('./package.json', 'utf8'))\nconst version = pkg.version || '0.0.0'\n\nconst banner = {\n js: `/*\n* SnapDOM\n* v${version}\n* Author: Juan Martin Muda\n* License: MIT\n*/`,\n}\n\n/**\n * 1. LEGACY IIFE (script tag / require)\n * Salida: dist/snapdom.js\n */\nasync function buildLegacy() {\n await build({\n ...common,\n entryPoints: ['src/index.browser.js'],\n outfile: 'dist/snapdom.js',\n globalName: 'snapdom',\n platform: 'neutral',\n minify: true,\n target: ['es2020'],\n banner,\n })\n}\n\n/**\n * 2. ESM MONOLรTICO (tree-shakeable, bundlers + CDN)\n * Salida: dist/snapdom.mjs\n */\nasync function buildESM() {\n await build({\n ...common,\n entryPoints: ['src/index.js'],\n outfile: 'dist/snapdom.mjs',\n format: 'esm',\n minify: true,\n splitting: false,\n banner,\n })\n}\n\n/**\n * 3. SUBPATH EXPORTS (preCache, plugins)\n * Salida: dist/preCache.mjs, dist/plugins.mjs\n */\nasync function buildSubpaths() {\n await build({\n ...common,\n entryPoints: {\n 'preCache': 'src/api/preCache.js',\n 'plugins': 'src/core/plugins.js',\n },\n outdir: 'dist',\n outExtension: { '.js': '.mjs' },\n format: 'esm',\n minify: true,\n splitting: false,\n banner,\n })\n}\n\nasync function main() {\n try { rmSync('dist/modules', { recursive: true, force: true }) } catch { /* ok */ }\n await Promise.all([\n buildLegacy(),\n buildESM(),\n buildSubpaths(),\n ])\n}\n\nmain().catch((err) => {\n // eslint-disable-next-line\n console.error(err)\n // eslint-disable-next-line\n process.exit(1)\n})\n" }, { "path": "eslint.config.cjs", "content": "const js = require(\"@eslint/js\")\nconst globals = require(\"globals\")\n\nmodule.exports = [\n js.configs.recommended,\n {\n files: [\"__tests__/**/*.js\",\"src/**/*.js\"],\n languageOptions: {\n ecmaVersion: \"latest\",\n sourceType: \"module\",\n globals: {\n ...globals.browser,\n WebKitCSSMatrix: \"readonly\"\n }\n },\n rules: {\n \"no-multiple-empty-lines\": [\"error\", { max: 1, maxEOF: 0 }],\n \"eol-last\": [\"error\", \"always\"],\n \"no-unused-vars\": [\"warn\", { argsIgnorePattern: \"^_\", varsIgnorePattern: \"^_\" }],\n \"arrow-spacing\": [\"error\", { before: true, after: true }],\n \"no-trailing-spaces\": \"error\",\n \"quotes\": [\"error\", \"single\", { avoidEscape: true }],\n \"semi\": [\"error\", \"never\"],\n \"no-empty\": [\"error\", { allowEmptyCatch: true }]\n }\n }\n]\n" }, { "path": "package.json", "content": "{\n \"name\": \"@zumer/snapdom\",\n \"version\": \"2.5.0\",\n \"description\": \"snapDOM captures HTML elements to images with exceptional speed and accuracy.\",\n \"type\": \"module\",\n \"main\": \"./dist/snapdom.js\",\n \"module\": \"./dist/snapdom.mjs\",\n \"types\": \"./types/snapdom.d.ts\",\n \"sideEffects\": false,\n \"exports\": {\n \".\": {\n \"types\": \"./types/snapdom.d.ts\",\n \"import\": \"./dist/snapdom.mjs\",\n \"require\": \"./dist/snapdom.js\",\n \"default\": \"./dist/snapdom.mjs\"\n },\n \"./preCache\": {\n \"import\": \"./dist/preCache.mjs\"\n },\n \"./plugins\": {\n \"import\": \"./dist/plugins.mjs\"\n }\n },\n \"files\": [\n \"dist/\",\n \"types/snapdom.d.ts\",\n \"README.md\"\n ],\n \"scripts\": {\n \"compile\": \"node esbuild.config.mjs\",\n \"lint\": \"eslint src __tests__ --ext .js\",\n \"lint:fix\": \"eslint src __tests__ --ext .js --fix\",\n \"test\": \"npm run lint:fix && npx vitest run --browser.headless --reporter=verbose\",\n \"test:coverage\": \"npx vitest run --browser.headless --coverage\",\n \"test:benchmark\": \"npx vitest bench --browser.headless --watch=false\",\n \"bump:dry\": \"npx @zumerbox/bump -d\",\n \"bump\": \"npx @zumerbox/bump && npx @zumerbox/changelog\",\n \"build\": \"npm run compile && npm pack\",\n \"prebuild\": \"git add CHANGELOG.md && git commit -m \\\"Bumped version\\\" && git push --follow-tags\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/zumerlab/snapdom.git\"\n },\n \"keywords\": [\n \"zumerlab\",\n \"snapDOM\",\n \"screenshot\",\n \"engine\",\n \"html capture\",\n \"dom capture\",\n \"html to image\",\n \"dom to image\",\n \"html screenshot\",\n \"capture element\",\n \"html snapshot\",\n \"element screenshot\",\n \"web capture\",\n \"snapshot tool\",\n \"render html\",\n \"capture dom\",\n \"web snapshot\",\n \"html export\",\n \"dom snapshot\",\n \"html to png\",\n \"html to svg\"\n ],\n \"author\": \"Juan Martin Muda\",\n \"license\": \"MIT\",\n \"bugs\": {\n \"url\": \"https://github.com/zumerlab/snapdom/issues\"\n },\n \"homepage\": \"https://zumerlab.github.io/snapdom/\",\n \"devDependencies\": {\n \"@eslint/js\": \"^9.36.0\",\n \"@vitest/browser\": \"^3.1.2\",\n \"@vitest/coverage-v8\": \"^3.1.2\",\n \"eslint\": \"^9.36.0\",\n \"globals\": \"^16.4.0\",\n \"playwright\": \"^1.52.0\",\n \"esbuild\": \"^0.24.0\"\n }\n}\n" }, { "path": "plugins/html-in-canvas.js", "content": "/**\n * Experimental plugin for WICG html-in-canvas (issue #172).\n * Uses drawElementImage() to render the snapdom clone directly into canvas,\n * bypassing SVG/foreignObject.\n *\n * Requires: Chrome with chrome://flags/#canvas-draw-element enabled.\n * @see https://github.com/WICG/html-in-canvas\n */\n\nconst PLUGIN_NAME = 'html-in-canvas'\n\nfunction isDrawElementImageAvailable() {\n try {\n const c = document.createElement('canvas')\n const ctx = c.getContext('2d')\n return ctx && typeof ctx.drawElementImage === 'function'\n } catch {\n return false\n }\n}\n\n/**\n * @returns {import('../src/core/plugins.js').Plugin}\n */\nexport function htmlInCanvasPlugin() {\n const available = isDrawElementImageAvailable()\n if (!available) {\n console.warn('[snapdom] html-in-canvas plugin: drawElementImage not available. Enable chrome://flags/#canvas-draw-element')\n }\n\n return {\n name: PLUGIN_NAME,\n\n beforeRender(state) {\n if (!available) return\n if (!state.clone || !state.element) return\n state.options.__htmlInCanvas = {\n clone: state.clone,\n baseCSS: state.baseCSS || '',\n fontsCSS: state.fontsCSS || '',\n classCSS: state.classCSS || '',\n element: state.element,\n w0: null,\n h0: null\n }\n },\n\n afterRender(state) {\n if (!available) return\n const meta = state.options?.meta\n const stored = state.options?.__htmlInCanvas\n if (meta && stored) {\n stored.w0 = meta.w0\n stored.h0 = meta.h0\n }\n },\n\n async defineExports(ctx) {\n if (!available) return {}\n const stored = ctx.__htmlInCanvas\n if (!stored) return {}\n\n return {\n htmlInCanvas: async (opts = {}) => {\n const { clone, baseCSS, fontsCSS, classCSS, element } = stored\n const w0 = stored.w0 ?? element?.offsetWidth\n const h0 = stored.h0 ?? element?.offsetHeight\n const scale = opts.scale ?? ctx.scale ?? 1\n const dpr = opts.dpr ?? (typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1)\n\n const rect = element?.getBoundingClientRect?.()\n const width = w0 ?? rect?.width ?? 100\n const height = h0 ?? rect?.height ?? 100\n const outW = Math.round(width * scale * dpr)\n const outH = Math.round(height * scale * dpr)\n\n const canvas = document.createElement('canvas')\n canvas.width = outW\n canvas.height = outH\n canvas.setAttribute('layoutsubtree', '')\n\n const wrapper = document.createElement('div')\n wrapper.style.cssText = `width:${width}px;height:${height}px;overflow:visible;box-sizing:border-box;`\n wrapper.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')\n\n const styleTag = document.createElement('style')\n styleTag.textContent = `${baseCSS}${fontsCSS}svg{overflow:visible;}${classCSS}`\n wrapper.appendChild(styleTag)\n\n const cloneCopy = clone.cloneNode(true)\n wrapper.appendChild(cloneCopy)\n\n canvas.appendChild(wrapper)\n\n const container = document.createElement('div')\n container.id = 'snapdom-html-in-canvas-temp'\n container.style.cssText = 'position:fixed;left:-9999px;top:0;visibility:hidden;'\n container.appendChild(canvas)\n document.body.appendChild(container)\n\n try {\n await new Promise(r => requestAnimationFrame(r))\n const ctx2d = canvas.getContext('2d')\n if (!ctx2d || typeof ctx2d.drawElementImage !== 'function') {\n throw new Error('drawElementImage not available')\n }\n ctx2d.save()\n ctx2d.scale(dpr * scale, dpr * scale)\n ctx2d.drawElementImage(wrapper, 0, 0, width, height)\n ctx2d.restore()\n return canvas\n } finally {\n try {\n document.body.removeChild(container)\n } catch {}\n }\n }\n }\n }\n }\n}\n\nexport default htmlInCanvasPlugin\n" }, { "path": "src/api/preCache.js", "content": "// src/api/preCache.js\nimport { getStyle, inlineSingleBackgroundEntry, precacheCommonTags, isSafari } from '../utils'\nimport { embedCustomFonts, collectUsedFontVariants, collectUsedCodepoints, ensureFontsReady } from '../modules/fonts.js'\nimport { snapFetch } from '../modules/snapFetch.js'\nimport { cache, applyCachePolicy, EvictingMap } from '../core/cache.js'\nimport { inlineBackgroundImages } from '../modules/background.js'\n\n/**\n * Preloads images, background images, and (optionally) fonts into cache before DOM capture.\n * @param {Element|Document} [root=document]\n * @param {Object} [options={}]\n * @param {boolean} [options.embedFonts=true]\n * @param {'full'|'soft'|'auto'|'disabled'} [options.cache='full']\n * @param {string} [options.useProxy=\"\"]\n * @param {{family:string,src:string,weight?:string|number,style?:string,stretchPct?:number}[]} [options.localFonts=[]]\n * @param {{families?:string[], domains?:string[], subsets?:string[]}} [options.excludeFonts]\n * @param {string[]} [options.fontStylesheetDomains] // extra domains to fetch cross-origin CSS from (#309)\n * @returns {Promise}\n */\nexport async function preCache(root = document, options = {}) {\n const {\n embedFonts = true,\n useProxy = '',\n } = options\n // Accept both `cache` (JSDoc) and legacy `cacheOpt`\n const cacheMode = options.cache ?? options.cacheOpt ?? 'full'\n\n applyCachePolicy(cacheMode)\n\n // Ensure font metrics are ready (non-throwing)\n try { await document.fonts?.ready } catch {}\n\n // Warm common tag/style caches (no-op if already done)\n try { precacheCommonTags() } catch {}\n\n // Ensure session caches\n cache.session = cache.session || {}\n if (!cache.session.styleCache) {\n cache.session.styleCache = new WeakMap()\n }\n cache.image = cache.image || new EvictingMap(100)\n cache.background = cache.background || new EvictingMap(100)\n\n // Pre-inline background images into cache (best-effort)\n try {\n await inlineBackgroundImages(root, /* mirror */ undefined, cache.session.styleCache, { useProxy })\n } catch {}\n\n // Collect elements for prefetch\n let imgEls = [], allEls = []\n try {\n // ๐Ÿ”ธ Importante: incluir al root si es un Element\n if (root && root.nodeType === 1 /* ELEMENT_NODE */) {\n const descendants = root.querySelectorAll ? Array.from(root.querySelectorAll('*')) : []\n allEls = [root, ...descendants]\n // Sรณlo imรกgenes dentro del subtree (el root tambiรฉn puede ser )\n imgEls = []\n if (root.tagName === 'IMG' && root.getAttribute('src')) imgEls.push(root)\n imgEls.push(...Array.from(root.querySelectorAll?.('img[src]') || []))\n } else if (root?.querySelectorAll) {\n // Document o DocumentFragment\n imgEls = Array.from(root.querySelectorAll('img[src]'))\n allEls = Array.from(root.querySelectorAll('*'))\n }\n } catch {}\n\n const promises = []\n\n // Prefetch sources to dataURL and cache\n for (const img of imgEls) {\n const src = img?.currentSrc || img?.src\n if (!src) continue\n if (!cache.image.has(src)) {\n const p = Promise.resolve()\n .then(async () => {\n const res = await snapFetch(src, { as: 'dataURL', useProxy })\n if (res?.ok && typeof res.data === 'string') {\n cache.image.set(src, res.data)\n }\n })\n .catch(() => {})\n promises.push(p)\n }\n }\n\n // Prefetch background-image url(...) entries\n for (const el of allEls) {\n let bg = ''\n try {\n // Preferir estilo autor (estable en JSDOM/test); fallback a computado\n bg = el?.style?.backgroundImage || ''\n if (!bg || bg === 'none') {\n bg = getStyle(el).backgroundImage\n }\n } catch {}\n if (bg && bg !== 'none') {\n // Extraer SOLO capas url(...) (robusto ante comas de gradients)\n const urlEntries = bg.match(/url\\((?:[^()\"']+|\"(?:[^\"]*)\"|'(?:[^']*)')\\)/gi) || []\n for (const entry of urlEntries) {\n const p = Promise.resolve()\n .then(() => inlineSingleBackgroundEntry(entry, { ...options, useProxy }))\n .catch(() => {})\n promises.push(p)\n }\n\n // (quedรณ como compat opcional por si querรฉs volver a splitBackgroundImage)\n // const parts = splitBackgroundImage(bg)\n // for (const entry of parts) {\n // if (entry.startsWith('url(')) {\n // const p = Promise.resolve()\n // .then(() => inlineSingleBackgroundEntry(entry, { ...options, useProxy }))\n // .catch(() => {})\n // promises.push(p)\n // }\n // }\n }\n }\n\n // Optional: preload/embed fonts\n if (embedFonts) {\n try {\n const required = collectUsedFontVariants(root)\n const usedCodepoints = collectUsedCodepoints(root)\n\n // Safari warmup: ensure families are ready before embedding\n const safari = (typeof isSafari === 'function') ? isSafari() : !!isSafari\n if (safari) {\n const families = new Set(\n Array.from(required)\n .map(k => String(k).split('__')[0])\n .filter(Boolean)\n )\n await ensureFontsReady(families, 3)\n }\n\n await embedCustomFonts({\n required,\n usedCodepoints,\n exclude: options.excludeFonts,\n localFonts: options.localFonts,\n useProxy: options.useProxy ?? useProxy,\n fontStylesheetDomains: options.fontStylesheetDomains,\n })\n } catch {}\n }\n\n await Promise.allSettled(promises)\n}\n" }, { "path": "src/api/snapdom.js", "content": "// src/api/snapdom.js\nimport { captureDOM } from '../core/capture.js'\nimport { extendIconFonts } from '../modules/iconFonts.js'\nimport { createContext } from '../core/context.js'\nimport { isSafari } from '../utils/browser.js'\nimport { debugWarn } from '../utils/debug.js'\nimport { registerPlugins, runHook, runAll, attachSessionPlugins } from '../core/plugins.js'\nimport { collectUsedFontVariants, ensureFontsReady } from '../modules/fonts.js'\nexport { preCache } from './preCache.js'\n\n// API pรบblica (registro global de plugins)\nexport function plugins(...defs) { registerPlugins(...defs); return snapdom }\nexport const snapdom = Object.assign(main, { plugins })\n\n// Token to prevent public use of snapdom.capture\nconst INTERNAL_TOKEN = Symbol('snapdom.internal')\n// Token interno para llamadas de export \"silenciosas\" desde plugins (no hooks)\nconst INTERNAL_EXPORT_TOKEN = Symbol('snapdom.internal.silent')\n\nlet _safariWarmup = false\n\n/**\n * Main function that captures a DOM element and returns export utilities.\n * Local-first plugins: `options.plugins` override globals for this capture.\n *\n * @param {HTMLElement} element - The DOM element to capture.\n * @param {object} userOptions - Options for rendering/exporting.\n * @returns {Promise} Object with exporter methods:\n * - url: The raw data URL\n * - toRaw(): Gets raw data URL\n * - toImg(): Converts to Image element\n * - toSvg(): Converts to SVG Image element\n * - toCanvas(): Converts to HTMLCanvasElement\n * - toBlob(): Converts to Blob\n * - toPng(): Converts to PNG format\n * - toJpg(): Converts to JPEG format\n * - toWebp(): Converts to WebP format\n * - download(): Triggers file download\n */\nasync function main(element, userOptions) {\n if (!element) throw new Error('Element cannot be null or undefined')\n\n // Normalize options into a capture context\n const context = createContext(userOptions)\n\n // Attach per-capture plugins (local-first) without removing globals\n attachSessionPlugins(context, userOptions && userOptions.plugins)\n\n // Safari warm-up: WebKit Bug #219770 โ€” SVG with embedded font triggers img.onload\n // before font is available. First canvas draw is blank; second+ works. We run\n // pre-captures + drawImage to prime the font/decode pipeline. Fidelity > speed.\n // See: https://bugs.webkit.org/show_bug.cgi?id=219770\n if (isSafari() && (context.embedFonts === true || hasBackgroundOrMask(element))) {\n if (context.embedFonts) {\n try {\n const required = collectUsedFontVariants(element)\n const families = new Set([...required].map(k => String(k).split('__')[0]).filter(Boolean))\n await ensureFontsReady(families, 1)\n } catch { /* non-blocking */ }\n }\n const attempts = context.safariWarmupAttempts ?? 3\n for (let i = 0; i < attempts; i++) {\n try {\n await safariWarmup(element, userOptions)\n } catch {\n // swallow error\n }\n }\n }\n\n if (context.iconFonts && context.iconFonts.length > 0) extendIconFonts(context.iconFonts)\n\n if (!context.snap) {\n // Mantener compat: atajos disponibles en context.snap\n context.snap = {\n toPng: (el, opts) => snapdom.toPng(el, opts),\n toSvg: (el, opts) => snapdom.toSvg(el, opts),\n }\n }\n\n return snapdom.capture(element, context, INTERNAL_TOKEN)\n}\n\n/**\n * Internal capture method that returns helper methods for transformation/export.\n * Integrates export hooks: beforeExport โ†’ work() โ†’ afterExport โ†’ afterSnap(once per URL)\n * @private\n * @param {HTMLElement} el - The DOM element to capture.\n * @param {object} context - Normalized context options.\n * @param {symbol} _token - Internal security token.\n * @returns {Promise} Exporter functions.\n */\nsnapdom.capture = async (el, context, _token) => {\n if (_token !== INTERNAL_TOKEN) throw new Error('[snapdom.capture] is internal. Use snapdom(...) instead.')\n\n const url = await captureDOM(el, context)\n\n // โ€”โ€”โ€” 1) Core exports por defecto (carga lazy en cada tipo) โ€”โ€”โ€”\n // NOTA: no importamos estรกticamente los exportadores aquรญ.\n const coreExports = {\n img: async (ctx, opts) => {\n const { toImg } = await import('../exporters/toImg.js')\n return toImg(url, { ...ctx, ...(opts || {}) })\n },\n svg: async (ctx, opts) => {\n const { toSvg } = await import('../exporters/toImg.js')\n return toSvg(url, { ...ctx, ...(opts || {}) })\n },\n canvas: async (ctx, opts) => {\n const { toCanvas } = await import('../exporters/toCanvas.js')\n return toCanvas(url, { ...ctx, ...(opts || {}) })\n },\n blob: async (ctx, opts) => {\n const { toBlob } = await import('../exporters/toBlob.js')\n return toBlob(url, { ...ctx, ...(opts || {}) })\n },\n png: async (ctx, opts) => {\n const { rasterize } = await import('../modules/rasterize.js')\n return rasterize(url, { ...ctx, ...(opts || {}), format: 'png' })\n },\n jpeg: async (ctx, opts) => {\n const { rasterize } = await import('../modules/rasterize.js')\n return rasterize(url, { ...ctx, ...(opts || {}), format: 'jpeg' })\n },\n webp: async (ctx, opts) => {\n const { rasterize } = await import('../modules/rasterize.js')\n return rasterize(url, { ...ctx, ...(opts || {}), format: 'webp' })\n },\n download: async (ctx, opts) => {\n const { download } = await import('../exporters/download.js')\n return download(url, { ...ctx, ...(opts || {}) })\n },\n }\n\n // โ€”โ€”โ€” 2) Exports declarados por plugins โ€”โ€”โ€”\n // Fachada reutilizable โ€œsilenciosaโ€ (sin hooks) para uso en defineExports()\n const _pluginExports = {}\n for (const k of ['img', 'svg', 'canvas', 'blob', 'png', 'jpeg', 'webp']) {\n _pluginExports[k] = async (opts) =>\n coreExports[k](context, { ...(opts || {}), [INTERNAL_EXPORT_TOKEN]: true })\n }\n _pluginExports.jpg = _pluginExports.jpeg\n\n // Contexto extendido para defineExports (incluye URL y la fachada para reuso)\n const _defineCtx = { ...context, export: { url }, exports: _pluginExports }\n\n const providedMaps = await runAll('defineExports', _defineCtx)\n const provided = Object.assign({}, ...providedMaps.filter(x => x && typeof x === 'object'))\n\n // Merge (plugins pueden overridear core)\n const exportsMap = { ...coreExports, ...provided }\n\n // โ€”โ€” Alias: jpg โ†’ jpeg (para toJpg y to('jpg')) โ€”โ€”\n if (exportsMap.jpeg && !exportsMap.jpg) {\n exportsMap.jpg = (ctx, opts) => exportsMap.jpeg(ctx, opts)\n }\n\n // โ€”โ€” Normalizador para opciones por tipo (p.ej. JPEG: fondo blanco) โ€”โ€”\n function normalizeExportOptions(type, opts) {\n const next = { ...context, ...(opts || {}) }\n if (type === 'jpeg' || type === 'jpg') {\n const noBg = next.backgroundColor == null || next.backgroundColor === 'transparent'\n if (noBg) next.backgroundColor = '#ffffff'\n }\n return next\n }\n\n // โ€”โ€” Runner unificado con beforeExport/afterExport y cola por sesiรณn โ€”โ€”\n let afterSnapFired = false\n let _exportQueue = Promise.resolve()\n async function runExport(type, opts) {\n const job = async () => {\n const work = exportsMap[type]\n if (!work) throw new Error(`[snapdom] Unknown export type: ${type}`)\n const nextOpts = normalizeExportOptions(type, opts)\n const ctx = { ...context, export: { type, options: nextOpts, url } }\n await runHook('beforeExport', ctx)\n const result2 = await work(ctx, nextOpts)\n await runHook('afterExport', ctx, result2)\n if (!afterSnapFired) {\n afterSnapFired = true\n await runHook('afterSnap', context)\n }\n return result2\n }\n return _exportQueue = _exportQueue.then(job)\n }\n\n // โ€”โ€” Helpers esperados por los tests + API azรบcar โ€”โ€”\n const result = {\n url,\n toRaw: () => url,\n to: (type, opts) => runExport(type, opts),\n\n // Mรฉtodos โ€œclรกsicosโ€ que los tests esperan:\n toImg: (opts) => runExport('img', opts),\n toSvg: (opts) => runExport('svg', opts),\n toCanvas: (opts) => runExport('canvas', opts),\n toBlob: (opts) => runExport('blob', opts),\n toPng: (opts) => runExport('png', opts),\n toJpg: (opts) => runExport('jpg', opts), // alias requerido por tests\n toWebp: (opts) => runExport('webp', opts),\n download: (opts) => runExport('download', opts)\n }\n\n // Azรบcar dinรกmico por cada export registrado (plugins incluidos)\n for (const key of Object.keys(exportsMap)) {\n const helper = 'to' + key.charAt(0).toUpperCase() + key.slice(1)\n if (!result[helper]) {\n result[helper] = (opts) => runExport(key, opts)\n }\n }\n\n return result\n}\n\n/**\n * Returns the raw data URL from a captured element.\n * @param {HTMLElement} el - DOM element to capture.\n * @param {object} [options] - Rendering options.\n * @returns {Promise} Raw data URL.\n */\nsnapdom.toRaw = (el, options) => snapdom(el, options).then(result => result.toRaw())\n\n/**\n * Returns an HTMLImageElement from a captured element.\n * @param {HTMLElement} el - DOM element to capture.\n * @param {object} [options] - Rendering options.\n * @returns {Promise} Loaded image element.\n */\nsnapdom.toImg = (el, options) => snapdom(el, options).then(result => result.toImg())\nsnapdom.toSvg = (el, options) => snapdom(el, options).then(result => result.toSvg())\n\n/**\n * Returns a Canvas element from a captured element.\n * @param {HTMLElement} el - DOM element to capture.\n * @param {object} [options] - Rendering options.\n * @returns {Promise} Rendered canvas element.\n */\nsnapdom.toCanvas = (el, options) => snapdom(el, options).then(result => result.toCanvas())\n\n/**\n * Returns a Blob from a captured element.\n * @param {HTMLElement} el - DOM element to capture.\n * @param {object} [options] - Rendering options.\n * @returns {Promise} Image blob.\n */\nsnapdom.toBlob = (el, options) => snapdom(el, options).then(result => result.toBlob())\n\n/**\n * Returns a PNG image from a captured element.\n * @param {HTMLElement} el - DOM element to capture.\n * @param {object} [options] - Rendering options.\n * @returns {Promise} PNG image element.\n */\nsnapdom.toPng = (el, options) => snapdom(el, { ...options, format: 'png' }).then(result => result.toPng())\n\n/**\n * Returns a JPEG image from a captured element.\n * @param {HTMLElement} el - DOM element to capture.\n * @param {object} [options] - Rendering options.\n * @returns {Promise} JPEG image element.\n */\nsnapdom.toJpg = (el, options) => snapdom(el, { ...options, format: 'jpeg' }).then(result => result.toJpg())\n\n/**\n * Returns a WebP image from a captured element.\n * @param {HTMLElement} el - DOM element to capture.\n * @param {object} [options] - Rendering options.\n * @returns {Promise} WebP image element.\n */\nsnapdom.toWebp = (el, options) => snapdom(el, { ...options, format: 'webp' }).then(result => result.toWebp())\n\n/**\n * Downloads the captured image in the specified format.\n * @param {HTMLElement} el - DOM element to capture.\n * @param {object} options - Download options including filename.\n * @param {string} options.filename - Name for the downloaded file.\n * @param {string} [options.format='png'] - Image format ('png', 'jpeg', 'webp', 'svg').\n * @returns {Promise}\n */\nsnapdom.download = (el, options) => snapdom(el, options).then(result => result.download())\n\n/**\n * Safari/WebKit warmup: primes font and image decode pipeline.\n * Workaround for WebKit #219770 (img.onload fires before embedded font ready).\n * - ensureFontsReady (when embedFonts) runs before first iteration\n * - Mini pre-capture (scale 0.2) โ†’ load as Image + decode\n * - drawImage to offscreen canvas (consumes \"first draw blank\" so real capture works)\n * - Double rAF for layout stabilization\n * - Poke canvas elements for Chart.js etc.\n * Skipped after first session warmup (_safariWarmup) to avoid repeated cost.\n */\nasync function safariWarmup(element, baseOptions) {\n if (_safariWarmup) return\n\n const preflight = {\n ...baseOptions,\n fast: true,\n embedFonts: true,\n scale: 0.2\n }\n\n let url\n try {\n url = await captureDOM(element, preflight)\n } catch (e) {\n debugWarn(baseOptions, 'safariWarmup pre-capture failed', e)\n }\n\n // 1) estabiliza layout/paint en WebKit\n await new Promise(r => requestAnimationFrame(() => requestAnimationFrame(r)))\n\n if (url) {\n await new Promise((resolve) => {\n const img = new Image()\n try { img.decoding = 'sync'; img.loading = 'eager' } catch (e) {\n debugWarn(baseOptions, 'safariWarmup img hints failed', e)\n }\n img.style.cssText =\n 'position:fixed;left:0px;top:0px;width:10px;height:10px;opacity:0.01;pointer-events:none;'\n img.src = url\n document.body.appendChild(img)\n\n ;(async () => {\n try { if (typeof img.decode === 'function') await img.decode() } catch (e) {\n debugWarn(baseOptions, 'safariWarmup img.decode failed', e)\n }\n const start = performance.now()\n while (!(img.complete && img.naturalWidth > 0) && performance.now() - start < 900) {\n await new Promise(r => setTimeout(r, 200))\n }\n await new Promise(r => requestAnimationFrame(r))\n // Key: drawImage primes the canvas path. WebKit #219770 โ€” first draw is blank,\n // second works. We consume the blank draw here so the real capture works.\n try {\n const c = document.createElement('canvas')\n c.width = Math.max(1, img.naturalWidth || 10)\n c.height = Math.max(1, img.naturalHeight || 10)\n const ctx = c.getContext('2d')\n if (ctx) ctx.drawImage(img, 0, 0)\n } catch { /* non-blocking */ }\n await new Promise(r => requestAnimationFrame(r))\n try { img.remove() } catch (e) {\n debugWarn(baseOptions, 'safariWarmup img.remove failed', e)\n }\n resolve()\n })()\n })\n }\n\n // 3) โ€œpokeโ€ a los canvas del elemento (Chart.js, etc.)\n element.querySelectorAll('canvas').forEach(c => {\n try {\n const ctx = c.getContext('2d', { willReadFrequently: true })\n if (ctx) { ctx.getImageData(0, 0, 1, 1) }\n } catch (e) {\n debugWarn(baseOptions, 'safariWarmup canvas poke failed', e)\n }\n })\n\n _safariWarmup = true\n}\n\n/**\n * Checks if the element (or its descendants) use background or mask images.\n */\nfunction hasBackgroundOrMask(el) {\n const walker = document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT)\n while (walker.nextNode()) {\n const node = /** @type {Element} */ (walker.currentNode)\n const cs = getComputedStyle(node)\n\n const bg = cs.backgroundImage && cs.backgroundImage !== 'none'\n const mask = (cs.maskImage && cs.maskImage !== 'none') ||\n (cs.webkitMaskImage && cs.webkitMaskImage !== 'none')\n\n if (bg || mask) return true\n if (node.tagName === 'CANVAS') return true\n }\n return false\n}\n\nexport default snapdom\n" }, { "path": "src/core/cache.js", "content": "/** Max entries before evicting oldest (FIFO). Keeps lib lightweight, avoids memory leaks. */\nconst MAX_IMAGE = 100\nconst MAX_BACKGROUND = 100\nconst MAX_RESOURCE = 150\nconst MAX_BASE_STYLE = 50\nconst MAX_DEFAULT_STYLE = 30\n\n/**\n * Map that evicts oldest entries when exceeding maxSize. FIFO order.\n * @extends Map\n */\nclass EvictingMap extends Map {\n constructor(maxSize = 100, ...args) {\n super(...args)\n this._maxSize = maxSize\n }\n set(key, value) {\n if (this.size >= this._maxSize && !this.has(key)) {\n const first = this.keys().next().value\n if (first !== undefined) this.delete(first)\n }\n return super.set(key, value)\n }\n}\n\n/**\n * Global caches for images, styles, and resources.\n * Persistent caches use EvictingMap to avoid unbounded memory growth.\n */\nexport const cache = {\n image: new EvictingMap(MAX_IMAGE),\n background: new EvictingMap(MAX_BACKGROUND),\n resource: new EvictingMap(MAX_RESOURCE),\n defaultStyle: new EvictingMap(MAX_DEFAULT_STYLE),\n baseStyle: new EvictingMap(MAX_BASE_STYLE),\n computedStyle: new WeakMap(),\n font: new Set(),\n session: {\n styleMap: new Map(),\n styleCache: new WeakMap(),\n nodeMap: new Map(),\n }\n}\n\nexport { EvictingMap }\n\n/**\n * Normalizes shorthand values to canonical cache policies.\n * - true => \"soft\"\n * - false => \"disabled\"\n * - \"auto\" => \"auto\"\n * - \"full\" => \"full\"\n * @param {unknown} v\n * @returns {\"soft\"|\"auto\"|\"full\"|\"disabled\"}\n */\nexport function normalizeCachePolicy(v) {\n if (v === true) return 'soft'\n if (v === false) return 'disabled'\n if (typeof v === 'string') {\n const s = v.toLowerCase().trim()\n if (s === 'auto') return 'auto'\n if (s === 'full') return 'full'\n if (s === 'soft' || s === 'disabled') return s\n }\n return 'soft' // default\n}\n\n/**\n * Applies the cache policy.\n * @param {\"soft\"|\"auto\"|\"full\"|\"disabled\"} policy\n */\nexport function applyCachePolicy(policy = 'soft') {\n cache.session.__counterEpoch = (cache.session.__counterEpoch || 0) + 1\n switch (policy) {\n case 'auto': {\n cache.session.styleMap = new Map()\n cache.session.nodeMap = new Map()\n return\n }\n case 'soft': {\n cache.session.styleMap = new Map()\n cache.session.nodeMap = new Map()\n cache.session.styleCache = new WeakMap()\n return\n }\n case 'full': {\n return\n }\n case 'disabled': {\n cache.session.styleMap = new Map()\n cache.session.nodeMap = new Map()\n cache.session.styleCache = new WeakMap()\n\n cache.computedStyle = new WeakMap()\n cache.baseStyle = new EvictingMap(MAX_BASE_STYLE)\n cache.defaultStyle = new EvictingMap(MAX_DEFAULT_STYLE)\n cache.image = new EvictingMap(MAX_IMAGE)\n cache.background = new EvictingMap(MAX_BACKGROUND)\n cache.resource = new EvictingMap(MAX_RESOURCE)\n cache.font = new Set()\n return\n }\n default: {\n // fallback โ†’ soft\n cache.session.styleMap = new Map()\n cache.session.nodeMap = new Map()\n cache.session.styleCache = new WeakMap()\n return\n }\n }\n}\n" }, { "path": "src/core/capture.js", "content": "/**\n * Core logic for capturing DOM elements as SVG data URLs.\n * @module capture\n */\n\nimport { prepareClone } from './prepare.js'\nimport { inlineImages } from '../modules/images.js'\nimport { inlineBackgroundImages } from '../modules/background.js'\nimport { ligatureIconToImage } from '../modules/iconFonts.js'\nimport { idle, collectUsedTagNames, generateDedupedBaseCSS, isSafari, getStyle } from '../utils/index.js'\nimport { embedCustomFonts, collectUsedFontVariants, collectUsedCodepoints, ensureFontsReady } from '../modules/fonts.js'\nimport { cache, applyCachePolicy } from '../core/cache.js'\nimport { lineClampTree } from '../modules/lineClamp.js'\nimport { runHook } from './plugins.js'\nimport {\n stripRootShadows,\n sanitizeCloneForXHTML,\n shrinkAutoSizeBoxes,\n estimateKeptHeight,\n limitDecimals,\n collectScrollbarCSS\n} from '../utils/capture.helpers.js'\nimport {\n parseBoxShadow,\n parseFilterBlur,\n parseOutline,\n parseFilterDropShadows,\n normalizeRootTransforms,\n bboxWithOriginFull,\n parseTransformOriginPx,\n readIndividualTransforms,\n readTotalTransformMatrix,\n hasBBoxAffectingTransform,\n} from '../utils/transforms.helpers.js'\n/**\n * Captures an HTML element as an SVG data URL, inlining styles, images, backgrounds, and optionally fonts.\n *\n * @param {Element} element - DOM element to capture\n * @param {Object} [options={}] - Capture options\n * @param {boolean} [options.embedFonts=false] - Whether to embed custom fonts\n * @param {boolean} [options.fast=true] - Whether to skip idle delay for faster results\n * @param {number} [options.scale=1] - Output scale multiplier\n * @param {string[]} [options.exclude] - CSS selectors for elements to exclude\n * @param {Function} [options.filter] - Custom filter function\n * @param {boolean} [options.outerTransforms=false] - Normalize root by removing translate/rotate (keep scale/skew)\n * @param {boolean} [options.outerShadows=false] - Do not expand bleed for shadows/blur/outline on root (and strip root shadows visually)\n * @returns {Promise} Promise that resolves to an SVG data URL\n */\nexport async function captureDOM(element, options) {\n if (!element) throw new Error('Element cannot be null or undefined')\n applyCachePolicy(options.cache)\n const fast = options.fast\n const outerTransforms = options.outerTransforms !== false // default: true\n\n const outerShadows = !!options.outerShadows\n let state = { element, options, plugins: options.plugins }\n\n let clone, classCSS, styleCache\n let fontsCSS = ''\n let baseCSS = ''\n let dataURL\n let svgString\n // NEW: store root transform (scale/skew) when outerTransforms is on\n let rootTransform2D = null\n // BEFORESNAP\n await runHook('beforeSnap', state)\n // BEFORECLONE\n await runHook('beforeClone', state)\n const undoClamp = lineClampTree(state.element)\n try {\n ({ clone, classCSS, styleCache } = await prepareClone(state.element, state.options))\n\n // state = {clone, classCSS, styleCache, ...state}\n\n if (!outerTransforms && clone) {\n rootTransform2D = normalizeRootTransforms(state.element, clone) // {a,b,c,d} or null\n }\n if (!outerShadows && clone) {\n stripRootShadows(state.element, clone, state.options)\n }\n } finally {\n undoClamp()\n }\n\n // AFTERCLONE\n state = { clone, classCSS, styleCache, ...state }\n await runHook('afterClone', state)\n sanitizeCloneForXHTML(state.clone)\n // Shrink pass ONLY when excludeMode === 'remove'\n if (state.options?.excludeMode === 'remove') {\n try {\n shrinkAutoSizeBoxes(state.element, state.clone, state.styleCache)\n } catch (e) {\n console.warn('[snapdom] shrink pass failed:', e)\n }\n }\n try {\n await ligatureIconToImage(state.clone, state.element)\n } catch { /* non-blocking */ }\n\n await new Promise((resolve) => {\n idle(async () => {\n await inlineImages(state.clone, state.options)\n resolve()\n }, { fast })\n })\n\n await new Promise((resolve) => {\n idle(async () => {\n await inlineBackgroundImages(state.element, state.clone, state.styleCache, state.options)\n resolve()\n }, { fast })\n })\n\n if (options.embedFonts) {\n await new Promise((resolve) => {\n idle(async () => {\n const required = collectUsedFontVariants(state.element)\n const usedCodepoints = collectUsedCodepoints(state.element)\n if (isSafari()) {\n const families = new Set(\n Array.from(required).map((k) => String(k).split('__')[0]).filter(Boolean)\n )\n await ensureFontsReady(families, 1)\n }\n fontsCSS = await embedCustomFonts({\n required,\n usedCodepoints,\n preCached: false,\n exclude: state.options.excludeFonts,\n useProxy: state.options.useProxy,\n fontStylesheetDomains: state.options.fontStylesheetDomains\n })\n resolve()\n }, { fast })\n })\n }\n\n const usedTags = collectUsedTagNames(state.clone).sort()\n const tagKey = usedTags.join(',')\n if (cache.baseStyle.has(tagKey)) {\n baseCSS = cache.baseStyle.get(tagKey)\n } else {\n await new Promise((resolve) => {\n idle(() => {\n baseCSS = generateDedupedBaseCSS(usedTags)\n cache.baseStyle.set(tagKey, baseCSS)\n resolve()\n }, { fast })\n })\n }\n // #334: inject ::-webkit-scrollbar rules so custom scrollbar styles apply in capture\n const scrollbarCSS = collectScrollbarCSS(state.element?.ownerDocument || document)\n state = { fontsCSS, baseCSS, scrollbarCSS, ...state }\n await runHook('beforeRender', state)\n\n await new Promise((resolve) => {\n idle(() => {\n const csEl = getStyle(state.element)\n\n const rect = state.element.getBoundingClientRect()\n let w0 = Math.max(1, limitDecimals(state.element.offsetWidth || parseFloat(csEl.width) || rect.width || 1))\n let h0 = Math.max(1, limitDecimals(state.element.offsetHeight || parseFloat(csEl.height) || rect.height || 1))\n // body/documentElement: measure clone in-document to get true content height (Chrome clamps offset/scroll)\n // Use element's ownerDocument for iframe support (#371)\n const elDoc = state.element.ownerDocument || document\n const isRoot = state.element === elDoc.body || state.element === elDoc.documentElement\n if (isRoot) {\n const docH = Math.max(\n state.element.scrollHeight || 0,\n elDoc.documentElement?.scrollHeight || 0,\n elDoc.body?.scrollHeight || 0\n )\n const docW = Math.max(\n state.element.scrollWidth || 0,\n elDoc.documentElement?.scrollWidth || 0,\n elDoc.body?.scrollWidth || 0\n )\n if (docH > 0) h0 = Math.max(h0, limitDecimals(docH))\n if (docW > 0) w0 = Math.max(w0, limitDecimals(docW))\n // Also measure clone in a temp container with injected styles (clone may layout differently)\n try {\n const wrap = elDoc.createElement('div')\n wrap.style.cssText = 'position:absolute!important;left:-9999px!important;top:0!important;width:' + w0 + 'px!important;overflow:visible!important;visibility:hidden!important;'\n const styleNode = elDoc.createElement('style')\n styleNode.textContent = (state.scrollbarCSS || '') + state.baseCSS + state.fontsCSS + 'svg{overflow:visible;} foreignObject{overflow:visible;}' + state.classCSS\n wrap.appendChild(styleNode)\n wrap.appendChild(state.clone.cloneNode(true))\n elDoc.body.appendChild(wrap)\n const csh = wrap.scrollHeight\n const csw = wrap.scrollWidth\n elDoc.body.removeChild(wrap)\n if (csh > 0) h0 = Math.max(h0, limitDecimals(csh))\n if (csw > 0) w0 = Math.max(w0, limitDecimals(csw))\n } catch { /* fallback: use doc dimensions above */ }\n }\n // === NEW: recompute height using the kept-children span (no offscreen) ===\n if (state.options?.excludeMode === 'remove') {\n const hEst = estimateKeptHeight(state.element, state.options) // border+padding+contentSpan\n // Safety: nunca mayor al original, y con un epsilon para evitar recortes por redondeo\n const EPS = 1 // px\n if (Number.isFinite(hEst) && hEst > 0) {\n h0 = Math.max(1, Math.min(h0, limitDecimals(hEst + EPS)))\n }\n // En ancho casi nunca conviene ajustar; si lo necesitรกs, podรฉs hacer anรกlogo con estimateKeptWidth(...)\n }\n const coerceNum = (v, def = NaN) => {\n const n = typeof v === 'string' ? parseFloat(v) : v\n return Number.isFinite(n) ? n : def\n }\n\n const optW = coerceNum(state.options.width)\n const optH = coerceNum(state.options.height)\n let w = w0, h = h0\n\n const hasW = Number.isFinite(optW)\n const hasH = Number.isFinite(optH)\n const aspect0 = h0 > 0 ? w0 / h0 : 1\n\n if (hasW && hasH) {\n w = Math.max(1, limitDecimals(optW))\n h = Math.max(1, limitDecimals(optH))\n } else if (hasW) {\n w = Math.max(1, limitDecimals(optW))\n h = Math.max(1, limitDecimals(w / (aspect0 || 1)))\n } else if (hasH) {\n h = Math.max(1, limitDecimals(optH))\n w = Math.max(1, limitDecimals(h * (aspect0 || 1)))\n } else {\n w = w0\n h = h0\n }\n\n // โ€”โ€”โ€” BBOX โ€”โ€”โ€”\n let minX = 0, minY = 0, maxX = w0, maxY = h0\n\n // NEW: if outerTransforms => expand bbox using the post-normalization 2D matrix\n if (!outerTransforms && rootTransform2D && Number.isFinite(rootTransform2D.a)) {\n const M2 = {\n a: rootTransform2D.a,\n b: rootTransform2D.b || 0,\n c: rootTransform2D.c || 0,\n d: rootTransform2D.d || 1,\n e: 0,\n f: 0\n }\n const bb2 = bboxWithOriginFull(w0, h0, M2, 0, 0)\n minX = limitDecimals(bb2.minX)\n minY = limitDecimals(bb2.minY)\n maxX = limitDecimals(bb2.maxX)\n maxY = limitDecimals(bb2.maxY)\n } else {\n const useTFBBox = outerTransforms && hasTFBBox(state.element)\n if (useTFBBox) {\n const baseTransform2 = csEl.transform && csEl.transform !== 'none' ? csEl.transform : ''\n const ind2 = readIndividualTransforms(state.element)\n const TOTAL = readTotalTransformMatrix({\n baseTransform: baseTransform2,\n rotate: ind2.rotate || '0deg',\n scale: ind2.scale,\n translate: ind2.translate\n })\n const { ox: ox2, oy: oy2 } = parseTransformOriginPx(csEl, w0, h0)\n const M = TOTAL.is2D ? TOTAL : new DOMMatrix(TOTAL.toString())\n const bb = bboxWithOriginFull(w0, h0, M, ox2, oy2)\n minX = limitDecimals(bb.minX)\n minY = limitDecimals(bb.minY)\n maxX = limitDecimals(bb.maxX)\n maxY = limitDecimals(bb.maxY)\n }\n }\n\n // โ€”โ€”โ€” BLEED โ€”โ€”โ€”\n const bleedShadow = parseBoxShadow(csEl)\n const bleedBlur = parseFilterBlur(csEl)\n const bleedOutline = parseOutline(csEl)\n const drop = parseFilterDropShadows(csEl)\n\n const bleed = (!outerShadows)\n ? { top: 0, right: 0, bottom: 0, left: 0 }\n : {\n top: limitDecimals(bleedShadow.top + bleedBlur.top + bleedOutline.top + drop.bleed.top),\n right: limitDecimals(bleedShadow.right + bleedBlur.right + bleedOutline.right + drop.bleed.right),\n bottom: limitDecimals(bleedShadow.bottom + bleedBlur.bottom + bleedOutline.bottom + drop.bleed.bottom),\n left: limitDecimals(bleedShadow.left + bleedBlur.left + bleedOutline.left + drop.bleed.left)\n }\n\n minX = limitDecimals(minX - bleed.left)\n minY = limitDecimals(minY - bleed.top)\n maxX = limitDecimals(maxX + bleed.right)\n maxY = limitDecimals(maxY + bleed.bottom)\n\n const vbW0 = Math.max(1, limitDecimals(maxX - minX))\n const vbH0 = Math.max(1, limitDecimals(maxY - minY))\n const scaleW = (hasW || hasH) ? limitDecimals(w / w0) : 1\n const scaleH = (hasH || hasW) ? limitDecimals(h / h0) : 1\n const outW = Math.max(1, limitDecimals(vbW0 * scaleW))\n const outH = Math.max(1, limitDecimals(vbH0 * scaleH))\n\n const svgNS = 'http://www.w3.org/2000/svg'\n // Safari workaround: pad only when root has bbox-affecting transforms (avoids edge clipping)\n const basePad = (isSafari() && hasTFBBox(state.element)) ? 1 : 0\n const extraPad = !outerTransforms ? 1 : 0\n const pad = limitDecimals(basePad + extraPad)\n\n const fo = document.createElementNS(svgNS, 'foreignObject')\n const vbMinX = limitDecimals(minX)\n const vbMinY = limitDecimals(minY)\n fo.setAttribute('x', String(limitDecimals(-(vbMinX - pad))))\n fo.setAttribute('y', String(limitDecimals(-(vbMinY - pad))))\n fo.setAttribute('width', String(limitDecimals(w0 + pad * 2)))\n fo.setAttribute('height', String(limitDecimals(h0 + pad * 2)))\n fo.style.overflow = 'visible'\n\n const styleTag = document.createElement('style')\n styleTag.textContent =\n (state.scrollbarCSS || '') + state.baseCSS + state.fontsCSS + 'svg{overflow:visible;} foreignObject{overflow:visible;}' + state.classCSS\n fo.appendChild(styleTag)\n\n const container = document.createElement('div')\n container.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')\n // #372: isolate wrapper from iframe CSS cascade (e.g. div { border: 10px solid red })\n container.style.cssText =\n 'all:initial;box-sizing:border-box;display:block;overflow:visible;' +\n `width:${limitDecimals(w0)}px;height:${limitDecimals(h0)}px`\n\n //state.clone.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')\n container.appendChild(state.clone)\n fo.appendChild(container)\n\n const serializer = new XMLSerializer()\n const foString = serializer.serializeToString(fo)\n const vbW = limitDecimals(vbW0 + pad * 2)\n const vbH = limitDecimals(vbH0 + pad * 2)\n const wantsSize = hasW || hasH\n\n options.meta = { w0, h0, vbW, vbH, targetW: w, targetH: h }\n\n const svgOutW = (isSafari() && wantsSize)\n ? vbW\n : limitDecimals(outW + pad * 2)\n const svgOutH = (isSafari() && wantsSize)\n ? vbH\n : limitDecimals(outH + pad * 2)\n\n const rootFontSize = parseFloat(getStyle(elDoc.documentElement)?.fontSize) || 16\n const svgHeader = ``\n const svgFooter = ''\n svgString = svgHeader + foString + svgFooter\n dataURL = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`\n state = { svgString, dataURL, ...state }\n resolve()\n }, { fast })\n })\n // afterRender(context)\n await runHook('afterRender', state)\n\n const sandbox = document.getElementById('snapdom-sandbox')\n if (sandbox && sandbox.style.position === 'absolute') sandbox.remove()\n return state.dataURL\n}\n\nfunction hasTFBBox(el) {\n return hasBBoxAffectingTransform(el)\n}\n" }, { "path": "src/core/clone.js", "content": "/**\n * Deep cloning utilities for DOM elements, including styles and shadow DOM.\n * @module clone\n */\n\nimport { inlineAllStyles } from '../modules/styles.js'\nimport { NO_CAPTURE_TAGS } from '../utils/css.js'\nimport { resolveCSSVars } from '../modules/CSSVar.js'\nimport { debugWarn } from '../utils/index.js'\nimport {\n idleCallback,\n rewriteShadowCSS,\n nextShadowScopeId,\n extractShadowCSS,\n injectScopedStyle,\n freezeImgSrcset,\n collectCustomPropsFromCSS,\n buildSeedCustomPropsRule,\n markSlottedSubtree,\n rasterizeIframe,\n getUnscaledDimensions,\n createCheckboxRadioReplacement\n} from '../utils/clone.helpers.js'\nimport { isFirefox } from '../utils/browser.js'\n\n// helper implementations moved to ../utils/clone.helpers.js\n\nexport async function deepClone(node, sessionCache, options) {\n if (!node) throw new Error('Invalid node')\n const clonedAssignedNodes = new Set()\n let pendingSelectValue = null\n let pendingTextAreaValue = null\n if (node.nodeType === Node.ELEMENT_NODE) {\n const tag = (node.localName || node.tagName || '').toLowerCase()\n if (node.id === 'snapdom-sandbox' || node.hasAttribute('data-snapdom-sandbox')) {\n return null\n }\n if (NO_CAPTURE_TAGS.has(tag)) {\n return null\n }\n }\n if (node.nodeType === Node.TEXT_NODE) {\n return node.cloneNode(true)\n }\n if (node.nodeType !== Node.ELEMENT_NODE) {\n return node.cloneNode(true)\n }\n if (node.getAttribute('data-capture') === 'exclude') {\n if (options.excludeMode === 'hide') {\n const spacer = document.createElement('div')\n const { width, height } = getUnscaledDimensions(node)\n const w = width || node.getBoundingClientRect().width || 0\n const h = height || node.getBoundingClientRect().height || 0\n spacer.style.cssText = `display:inline-block;width:${w}px;height:${h}px;visibility:hidden;`\n return spacer\n } else if (options.excludeMode === 'remove') {\n return null\n }\n }\n if (options.exclude && Array.isArray(options.exclude)) {\n for (const selector of options.exclude) {\n try {\n if (node.matches?.(selector)) {\n if (options.excludeMode === 'hide') {\n const spacer = document.createElement('div')\n const { width, height } = getUnscaledDimensions(node)\n const w = width || node.getBoundingClientRect().width || 0\n const h = height || node.getBoundingClientRect().height || 0\n spacer.style.cssText = `display:inline-block;width:${w}px;height:${h}px;visibility:hidden;`\n return spacer\n } else if (options.excludeMode === 'remove') {\n return null\n }\n }\n } catch (err) {\n console.warn(`Invalid selector in exclude option: ${selector}`, err)\n }\n }\n }\n if (typeof options.filter === 'function') {\n try {\n if (!options.filter(node)) {\n if (options.filterMode === 'hide') {\n const spacer = document.createElement('div')\n const { width, height } = getUnscaledDimensions(node)\n const w = width || node.getBoundingClientRect().width || 0\n const h = height || node.getBoundingClientRect().height || 0\n spacer.style.cssText = `display:inline-block;width:${w}px;height:${h}px;visibility:hidden;`\n return spacer\n } else if (options.filterMode === 'remove') {\n return null\n }\n }\n } catch (err) {\n console.warn('Error in filter function:', err)\n }\n }\n if (node.tagName === 'IFRAME') {\n let sameOrigin = false\n try { sameOrigin = !!(node.contentDocument || node.contentWindow?.document) } catch (e) {\n debugWarn(sessionCache, 'iframe same-origin probe failed', e)\n }\n\n if (sameOrigin) {\n try {\n const wrapper = await rasterizeIframe(node, sessionCache, options)\n return wrapper\n } catch (err) {\n console.warn('[SnapDOM] iframe rasterization failed, fallback:', err)\n // fall through\n }\n }\n\n // Fallback actual (placeholder o spacer)\n if (options.placeholders) {\n const { width, height } = getUnscaledDimensions(node)\n const fallback = document.createElement('div')\n fallback.style.cssText =\n `width:${width}px;height:${height}px;` +\n 'background-image:repeating-linear-gradient(45deg,#ddd,#ddd 5px,#f9f9f9 5px,#f9f9f9 10px);' +\n 'display:flex;align-items:center;justify-content:center;font-size:12px;color:#555;border:1px solid #aaa;'\n inlineAllStyles(node, fallback, sessionCache, options)\n return fallback\n } else {\n const { width, height } = getUnscaledDimensions(node)\n const spacer = document.createElement('div')\n spacer.style.cssText = `display:inline-block;width:${width}px;height:${height}px;visibility:hidden;`\n inlineAllStyles(node, spacer, sessionCache, options)\n return spacer\n }\n }\n\n if (node.getAttribute('data-capture') === 'placeholder') {\n const clone2 = node.cloneNode(false)\n sessionCache.nodeMap.set(clone2, node)\n inlineAllStyles(node, clone2, sessionCache, options)\n const placeholder = document.createElement('div')\n placeholder.textContent = node.getAttribute('data-placeholder-text') || ''\n placeholder.style.cssText = 'color:#666;font-size:12px;text-align:center;line-height:1.4;padding:0.5em;box-sizing:border-box;'\n clone2.appendChild(placeholder)\n return clone2\n }\n if (node.tagName === 'CANVAS') {\n // Safari-safe snapshot: poke + rAF + retry + scratch fallback\n let url = ''\n try {\n const ctx = node.getContext('2d', { willReadFrequently: true })\n try { ctx && ctx.getImageData(0, 0, 1, 1) } catch { }\n await new Promise(r => requestAnimationFrame(r)) // deja materializar el frame\n\n url = node.toDataURL('image/png')\n\n if (!url || url === 'data:,') {\n // reintento rรกpido\n try { ctx && ctx.getImageData(0, 0, 1, 1) } catch { }\n await new Promise(r => requestAnimationFrame(r))\n url = node.toDataURL('image/png')\n\n // รบltimo recurso: copiar a un scratch-canvas y leer desde ahรญ\n if (!url || url === 'data:,') {\n const scratch = document.createElement('canvas')\n scratch.width = node.width\n scratch.height = node.height\n const sctx = scratch.getContext('2d')\n if (sctx) {\n sctx.drawImage(node, 0, 0)\n url = scratch.toDataURL('image/png')\n }\n }\n }\n } catch (e) {\n debugWarn(sessionCache, 'Canvas toDataURL failed, using empty/fallback', e)\n }\n\n const img = document.createElement('img')\n try { img.decoding = 'sync'; img.loading = 'eager' } catch (e) {\n debugWarn(sessionCache, 'img decoding/loading hints failed', e)\n }\n if (url) img.src = url\n\n // conservar dimensiones intrรญnsecas del bitmap\n img.width = node.width\n img.height = node.height\n\n // conservar caja CSS para no romper layout usando dimensiones pre-transform\n const { width, height } = getUnscaledDimensions(node)\n if (width > 0) img.style.width = `${width}px`\n if (height > 0) img.style.height = `${height}px`\n\n sessionCache.nodeMap.set(img, node)\n inlineAllStyles(node, img, sessionCache, options)\n return img\n }\n\n let clone\n try {\n clone = node.cloneNode(false)\n resolveCSSVars(node, clone)\n sessionCache.nodeMap.set(clone, node)\n if (node.tagName === 'IMG') {\n freezeImgSrcset(node, clone)\n // Record original image dimensions (pre-transform) for fallback usage when inlining fails\n try {\n const { width, height } = getUnscaledDimensions(node)\n const w = Math.round(width || 0)\n const h = Math.round(height || 0)\n if (w) clone.dataset.snapdomWidth = String(w)\n if (h) clone.dataset.snapdomHeight = String(h)\n } catch (e) {\n debugWarn(sessionCache, 'getUnscaledDimensions for IMG failed', e)\n }\n\n // Si el autor usรณ % o auto, o el alto/ ancho efectivos dan 0,\n // escribimos px en lรญnea para evitar que el clon โ€œpierdaโ€ la imagen.\n try {\n const authored = node.getAttribute('style') || ''\n const cs = window.getComputedStyle(node)\n const usesPercentOrAuto = (prop) => {\n const a = authored.match(new RegExp(`${prop}\\\\s*:\\\\s*([^;]+)`, 'i'))\n const v = a ? a[1].trim() : cs.getPropertyValue(prop)\n return /%|auto/i.test(String(v || ''))\n }\n\n const w = parseInt(clone.dataset.snapdomWidth || '0', 10)\n const h = parseInt(clone.dataset.snapdomHeight || '0', 10)\n\n const needFreezeW = usesPercentOrAuto('width') || !w\n const needFreezeH = usesPercentOrAuto('height') || !h\n\n if (needFreezeW && w) clone.style.width = `${w}px`\n if (needFreezeH && h) clone.style.height = `${h}px`\n\n // Blindaje extra: evita que una clase agregada luego anule el fix\n if (w) clone.style.minWidth = `${w}px`\n if (h) clone.style.minHeight = `${h}px`\n } catch (e) {\n debugWarn(sessionCache, 'IMG dimension freeze failed', e)\n }\n\n }\n } catch (err) {\n console.error('[Snapdom] Failed to clone node:', node, err)\n throw err\n }\n let applyInputVisual = null\n if (node instanceof HTMLTextAreaElement) {\n const { width, height } = getUnscaledDimensions(node)\n const w = width || node.getBoundingClientRect().width || 0\n const h = height || node.getBoundingClientRect().height || 0\n if (w) clone.style.width = `${w}px`\n if (h) clone.style.height = `${h}px`\n }\n if (node instanceof HTMLInputElement) {\n const type = (node.type || 'text').toLowerCase()\n const isCheckboxOrRadio = type === 'checkbox' || type === 'radio'\n if (isCheckboxOrRadio && isFirefox()) {\n const { el: replacement, applyVisual } = createCheckboxRadioReplacement(node)\n sessionCache.nodeMap.set(replacement, node)\n applyInputVisual = applyVisual\n clone = replacement\n } else {\n clone.value = node.value\n clone.setAttribute('value', node.value)\n if (node.checked !== void 0) {\n clone.checked = node.checked\n if (node.checked) clone.setAttribute('checked', '')\n if (node.indeterminate) clone.indeterminate = node.indeterminate\n }\n }\n }\n if (node instanceof HTMLSelectElement) {\n pendingSelectValue = node.value\n }\n if (node instanceof HTMLTextAreaElement) {\n pendingTextAreaValue = node.value\n }\n inlineAllStyles(node, clone, sessionCache, options)\n if (applyInputVisual) { applyInputVisual() }\n if (node.shadowRoot) {\n try {\n const slots = node.shadowRoot.querySelectorAll('slot')\n for (const s of slots) {\n let assigned = []\n try {\n assigned = s.assignedNodes?.({ flatten: true }) || s.assignedNodes?.() || []\n } catch {\n assigned = s.assignedNodes?.() || []\n }\n for (const an of assigned) clonedAssignedNodes.add(an)\n }\n } catch {\n }\n const scopeId = nextShadowScopeId(sessionCache)\n const scopeSelector = `[data-sd=\"${scopeId}\"]`\n try {\n clone.setAttribute('data-sd', scopeId)\n } catch {\n }\n const rawCSS = extractShadowCSS(node.shadowRoot)\n const rewritten = rewriteShadowCSS(rawCSS, scopeSelector)\n const neededVars = collectCustomPropsFromCSS(rawCSS)\n const seed = buildSeedCustomPropsRule(node, neededVars, scopeSelector)\n injectScopedStyle(clone, seed + rewritten, scopeId)\n const shadowFrag = document.createDocumentFragment()\n function callback(child, resolve) {\n if (child.nodeType === Node.ELEMENT_NODE && child.tagName === 'STYLE') {\n return resolve(null)\n } else {\n deepClone(child, sessionCache, options).then((clonedChild) => {\n resolve(clonedChild || null)\n }).catch(() => {\n resolve(null)\n })\n }\n }\n\n const cloneList = await idleCallback(Array.from(node.shadowRoot.childNodes), callback, options.fast)\n shadowFrag.append(...cloneList.filter(clonedChild => !!clonedChild))\n clone.appendChild(shadowFrag)\n }\n if (node.tagName === 'SLOT') {\n const assigned = node.assignedNodes?.({ flatten: true }) || []\n const nodesToClone = assigned.length > 0 ? assigned : Array.from(node.childNodes)\n const fragment = document.createDocumentFragment()\n\n function callback(child, resolve) {\n deepClone(child, sessionCache, options).then((clonedChild) => {\n if (clonedChild) {\n markSlottedSubtree(clonedChild)\n }\n resolve(clonedChild || null)\n }).catch(() => {\n resolve(null)\n })\n }\n const cloneList = await idleCallback(Array.from(nodesToClone), callback, options.fast)\n fragment.append(...cloneList.filter(clonedChild => !!clonedChild))\n return fragment\n }\n\n function callback(child, resolve) {\n if (clonedAssignedNodes.has(child)) return resolve(null)\n deepClone(child, sessionCache, options).then((clonedChild) => {\n resolve(clonedChild || null)\n }).catch(() => {\n resolve(null)\n })\n }\n const cloneList = await idleCallback(Array.from(node.childNodes), callback, options.fast)\n clone.append(...cloneList.filter(clonedChild => !!clonedChild))\n\n // Adjust select value after children are cloned\n if (pendingSelectValue !== null && clone instanceof HTMLSelectElement) {\n clone.value = pendingSelectValue\n for (const opt of clone.options) {\n if (opt.value === pendingSelectValue) {\n opt.setAttribute('selected', '')\n } else {\n opt.removeAttribute('selected')\n }\n }\n }\n if (pendingTextAreaValue !== null && clone instanceof HTMLTextAreaElement) {\n clone.textContent = pendingTextAreaValue\n\n }\n return clone\n}\n" }, { "path": "src/core/context.js", "content": "/**\n * @typedef {\"disabled\"|\"full\"|\"auto\"|\"soft\"} CachePolicy\n */\n\nimport { normalizeCachePolicy } from './cache.js'\n\n/**\n * Creates a normalized capture context for SnapDOM.\n * @param {Object} [options={}]\n * @param {boolean} [options.debug]\n * @param {boolean} [options.fast]\n * @param {number} [options.scale]\n * @param {Array} [options.exclude]\n * @param {string} [options.excludeMode]\n * @param {(node: Node)=>boolean} [options.filter]\n * @param {string} [options.filterMode]\n * @param {boolean} [options.embedFonts]\n * @param {string|string[]} [options.iconFonts]\n * @param {string[]} [options.localFonts]\n * @param {string[]|undefined} [options.excludeFonts]\n * @param {string[]} [options.fontStylesheetDomains] // extra domains to fetch cross-origin CSS from (#309)\n * @param {string|function} [options.fallbackURL]\n * @param {string} [options.useProxy]\n * @param {number|null} [options.width]\n * @param {number|null} [options.height]\n * @param {\"png\"|\"jpg\"|\"jpeg\"|\"webp\"|\"svg\"} [options.format]\n * @param {\"svg\"|\"img\"|\"canvas\"|\"blob\"} [options.type]\n * @param {number} [options.quality]\n * @param {number} [options.dpr]\n * @param {string|null} [options.backgroundColor]\n * @param {string} [options.filename]\n * @param {unknown} [options.cache] // \"disabled\"|\"full\"|\"auto\"|\"soft\"\n * @param {boolean} [options.outerTransforms] // NEW\n * @param {boolean} [options.outerShadows] // NEW\n * @param {RegExp|((prop: string) => boolean)} [options.excludeStyleProps] - Skip props when snapshotting (#348). e.g. /^--/ to exclude CSS vars\n * @returns {Object}\n */\nexport function createContext(options = {}) {\n let resolvedFormat = options.format ?? 'png'\n if (resolvedFormat === 'jpg') resolvedFormat = 'jpeg'\n /** @type {CachePolicy} */\n const cachePolicy = normalizeCachePolicy(options.cache)\n\n return {\n // Debug & perf\n debug: options.debug ?? false,\n fast: options.fast ?? true,\n scale: options.scale ?? 1,\n\n // DOM filters\n exclude: options.exclude ?? [],\n excludeMode: options.excludeMode ?? 'hide',\n filter: options.filter ?? null,\n filterMode: options.filterMode ?? 'hide',\n\n // Placeholders\n placeholders: options.placeholders !== false, // default true\n\n // Fonts\n embedFonts: options.embedFonts ?? false,\n iconFonts: Array.isArray(options.iconFonts) ? options.iconFonts\n : (options.iconFonts ? [options.iconFonts] : []),\n localFonts: Array.isArray(options.localFonts) ? options.localFonts : [],\n excludeFonts: options.excludeFonts ?? undefined,\n fontStylesheetDomains: Array.isArray(options.fontStylesheetDomains) ? options.fontStylesheetDomains : [],\n fallbackURL: options.fallbackURL ?? undefined,\n\n /** @type {CachePolicy} */\n cache: cachePolicy,\n\n // Network\n useProxy: typeof options.useProxy === 'string' ? options.useProxy : '',\n\n // Output\n width: options.width ?? null,\n height: options.height ?? null,\n format: resolvedFormat,\n type: options.type ?? 'svg',\n quality: options.quality ?? 0.92,\n dpr: options.dpr ?? (window.devicePixelRatio || 1),\n backgroundColor:\n options.backgroundColor ?? (['jpeg', 'webp'].includes(resolvedFormat) ? '#ffffff' : null),\n filename: options.filename ?? 'snapDOM',\n\n // NEW flags (user-friendly)\n outerTransforms: options.outerTransforms ?? true,\n outerShadows: options.outerShadows ?? false,\n\n // Safari warmup (WebKit #219770): iterations to prime font/decode pipeline. 1โ€“3.\n safariWarmupAttempts: Math.min(3, Math.max(1, (options.safariWarmupAttempts ?? 3) | 0)),\n\n // #348: exclude style props from snapshot (reduces cost when :root has thousands of CSS vars)\n excludeStyleProps: options.excludeStyleProps ?? null,\n\n // Plugins (reservado)\n // plugins: normalizePlugins(...),\n }\n}\n" }, { "path": "src/core/exporters.js", "content": "/**\n * Exporters registry (by format).\n * An exporter declares supported formats and an export() method:\n *\n * interface Exporter {\n * format: string | string[]; // e.g., 'png' or ['png','image/png']\n * export(context: object, args: { format: string, options: object, url: string }): Promise | any;\n * }\n */\n\nconst __exporters = new Map()\n\n/**\n * Normalize an exporter def: Factory, [Factory, options], { exporter, options }, instance.\n * @param {any} spec\n * @returns {any|null}\n */\nexport function normalizeExporter(spec) {\n if (!spec) return null\n if (Array.isArray(spec)) {\n const [factory, options] = spec\n return typeof factory === 'function' ? factory(options) : factory\n }\n if (typeof spec === 'object' && 'exporter' in spec) {\n const { exporter, options } = spec\n return typeof exporter === 'function' ? exporter(options) : exporter\n }\n if (typeof spec === 'function') return spec()\n return spec\n}\n\n/**\n * Register one or many exporters.\n * Last one wins on format collision.\n * @param {...any} defs\n */\nexport function registerExporters(...defs) {\n const flat = defs.flat()\n for (const d of flat) {\n const inst = normalizeExporter(d)\n if (!inst) continue\n const formats = Array.isArray(inst.format) ? inst.format : [inst.format]\n for (const fmtRaw of formats) {\n const fmt = String(fmtRaw || '').toLowerCase().trim()\n if (!fmt) continue\n __exporters.set(fmt, inst)\n }\n }\n}\n\n/**\n * Resolve the exporter for a format (case-insensitive).\n * @param {string} format\n * @returns {any|null}\n */\nexport function getExporter(format) {\n if (!format) return null\n const key = String(format).toLowerCase().trim()\n return __exporters.get(key) || null\n}\n\n/** Utilities for tests */\nexport function _exportersMap() { return new Map(__exporters) }\nexport function _clearExporters() { __exporters.clear() }\n\n/* -------------------------------------------------------------------------- */\n/* ๐Ÿงฉ Export Hooks Integration (auto-once afterSnap) */\n/* -------------------------------------------------------------------------- */\n\nimport { runHook } from './plugins.js'\n\n/** Keeps track of which captures have already triggered afterSnap */\nconst finished = new Set()\n\n/**\n * Runs export-related hooks around a given export task.\n *\n * Flow:\n * beforeExport โ†’ work() โ†’ afterExport โ†’ afterSnap(once per URL)\n *\n * @template T\n * @param {object} ctx - Capture context extended with { export:{ type, options, url } }\n * @param {() => Promise} work - Async exporter function\n * @returns {Promise} - The export result\n */\nexport async function runExportHooks(ctx, work) {\n await runHook('beforeExport', ctx)\n\n ctx.export.result = await work()\n\n await runHook('afterExport', ctx)\n\n const key = ctx.export?.url\n if (key && !finished.has(key)) {\n finished.add(key)\n await runHook('afterSnap', ctx)\n\n }\n\n return ctx.export.result\n}\n" }, { "path": "src/core/plugins.js", "content": "/**\n * Plugin core for SnapDOM (minimalistic, local-first compatible).\n *\n * Public hooks:\n * - beforeSnap(context)\n * - beforeClone(context)\n * - afterClone(context)\n * - beforeRender(context)\n * - afterRender(context)\n * - beforeExport(context, { format, options })\n * - afterExport(context, { format, options, result })\n * - afterSnap(context)\n *\n * Hook signature: (context, payload?) => void | any | Promise\n *\n * Global plugins are registered via registerPlugins()\n * Local (per-capture) plugins can be attached using attachSessionPlugins().\n */\n\nconst __plugins = []\n\n/**\n * Normalize any plugin definition form into an instance.\n * Supports plain objects, [factory, options], { plugin, options }, or functions.\n * @param {any} spec\n * @returns {any|null}\n */\nexport function normalizePlugin(spec) {\n if (!spec) return null\n if (Array.isArray(spec)) {\n const [factory, options] = spec\n return typeof factory === 'function' ? factory(options) : factory\n }\n if (typeof spec === 'object' && 'plugin' in spec) {\n const { plugin, options } = spec\n return typeof plugin === 'function' ? plugin(options) : plugin\n }\n if (typeof spec === 'function') return spec()\n return spec\n}\n\n/**\n * Register global plugins (deduped by name, preserves order).\n * @param {...any} defs\n */\nexport function registerPlugins(...defs) {\n const flat = defs.flat()\n for (const d of flat) {\n const inst = normalizePlugin(d)\n if (!inst) continue\n // ๐Ÿ”’ de-dup por name\n if (!__plugins.some(p => p && p.name && inst.name && p.name === inst.name)) {\n __plugins.push(inst)\n }\n }\n}\n\n/**\n * INTERNAL: pick the plugin list for a given context.\n * If the context defines a per-capture plugin list, use that (local-first).\n * Otherwise, fall back to the global registry.\n * @param {any} context\n * @returns {readonly any[]}\n */\nfunction getContextPlugins(context) {\n const arr = context && Array.isArray(context.plugins) ? context.plugins : __plugins\n return arr || __plugins\n}\n\n/**\n * Llama un hook y propaga un acumulador (compat con tu runHook actual).\n * Usa los plugins locales si existen, o los globales en fallback.\n * @param {string} name\n * @param {any} context\n * @param {any} payload\n */\nexport async function runHook(name, context, payload) {\n let acc = payload\n const list = getContextPlugins(context)\n for (const p of list) {\n const fn = p && typeof p[name] === 'function' ? p[name] : null\n if (!fn) continue\n const out = await fn(context, acc)\n if (typeof out !== 'undefined') acc = out\n }\n return acc\n}\n\n/**\n * NUEVO: recolecta los valores devueltos por TODOS los plugins para un hook.\n * รštil para `defineExports` (cada plugin devuelve un mapa propio).\n * Usa plugins locales si existen, o los globales en fallback.\n * @param {string} name\n * @param {any} context\n * @param {any} payload\n */\nexport async function runAll(name, context, payload) {\n const outs = []\n const list = getContextPlugins(context)\n for (const p of list) {\n const fn = p && typeof p[name] === 'function' ? p[name] : null\n if (!fn) continue\n const out = await fn(context, payload)\n if (typeof out !== 'undefined') outs.push(out)\n }\n return outs\n}\n\n/**\n * Return a shallow copy of currently registered global plugins.\n * @returns {any[]}\n */\nexport function pluginsList() { return __plugins.slice() }\n\n/** Clear all globally registered plugins (mostly for tests). */\nexport function clearPlugins() { __plugins.length = 0 }\n\n/* โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€\n * NEW: Local-first per-capture support (without removing global APIs)\n * โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */\n\n/**\n * Merge local (per-capture) plugin defs with the global registry (local-first).\n * - Local plugins override globals by `name`.\n * - Accepts plain instances, factories ([factory, options]) and {plugin, options}.\n * - Returns a frozen array for immutability & GC safety.\n * @param {any[]|undefined} localDefs\n * @returns {ReadonlyArray}\n */\nexport function mergePlugins(localDefs) {\n /** @type {any[]} */\n const out = []\n\n // 1๏ธโƒฃ Locals first (priority)\n if (Array.isArray(localDefs)) {\n for (const d of localDefs) {\n const inst = normalizePlugin(d)\n if (!inst || !inst.name) continue\n const i = out.findIndex(x => x && x.name === inst.name)\n if (i >= 0) out.splice(i, 1)\n out.push(inst)\n }\n }\n\n // 2๏ธโƒฃ Then globals if not already present\n for (const g of __plugins) {\n if (g && g.name && !out.some(x => x.name === g.name)) {\n out.push(g)\n }\n }\n\n return Object.freeze(out)\n}\n\n/**\n * Attach a per-capture plugin list on the given context (local-first).\n * Idempotent: if `context.plugins` already exists, it remains unless `force` is true.\n * @param {any} context\n * @param {any[]|undefined} localDefs\n * @param {boolean} [force=false]\n * @returns {any} the same context (for chaining)\n */\nexport function attachSessionPlugins(context, localDefs, force = false) {\n if (!context || (context.plugins && !force)) return context\n context.plugins = mergePlugins(localDefs)\n return context\n}\n\n/**\n * Shallow copy of current global plugins (handy for tests or introspection).\n * @returns {any[]}\n */\nexport function getGlobalPlugins() {\n return __plugins.slice()\n}\n" }, { "path": "src/core/prepare.js", "content": "/**\n * Prepares a deep clone of an element, inlining pseudo-elements and generating CSS classes.\n * @module prepare\n */\n\nimport { generateCSSClasses, stripTranslate, debugWarn, getStyle } from '../utils/index.js'\nimport { deepClone } from './clone.js'\nimport { inlinePseudoElements } from '../modules/pseudo.js'\nimport { inlineExternalDefsAndSymbols } from '../modules/svgDefs.js'\nimport { cache } from '../core/cache.js'\nimport { freezeSticky } from '../modules/changeCSS.js'\nimport { resolveBlobUrlsInTree } from '../utils/clone.helpers.js'\nimport { stabilizeLayout } from '../utils/prepare.helpers.js'\n\n/**\n * Prepares a clone of an element for capture, inlining pseudo-elements and generating CSS classes.\n *\n * @param {Element} element - Element to clone\n * @param {boolean} [embedFonts=false] - Whether to embed custom fonts\n * @param {Object} [options={}] - Capture options\n * @param {string[]} [options.exclude] - CSS selectors for elements to exclude\n * @param {Function} [options.filter] - Custom filter function\n * @returns {Promise} Object containing the clone, generated CSS, and style cache\n */\n\nexport async function prepareClone(element, options = {}) {\n const sessionCache = {\n styleMap: cache.session.styleMap,\n styleCache: cache.session.styleCache,\n nodeMap: cache.session.nodeMap,\n options\n }\n\n let clone\n let classCSS = ''\n let shadowScopedCSS = ''\n\n stabilizeLayout(element)\n\n try {\n inlineExternalDefsAndSymbols(element)\n } catch (e) {\n console.warn('inlineExternal defs or symbol failed:', e)\n }\n\n try {\n clone = await deepClone(element, sessionCache, options)\n } catch (e) {\n console.warn('deepClone failed:', e)\n throw e\n }\n try {\n await inlinePseudoElements(element, clone, sessionCache, options)\n } catch (e) {\n console.warn('inlinePseudoElements failed:', e)\n }\n await resolveBlobUrlsInTree(clone, sessionCache)\n // --- Pull shadow-scoped CSS out of the clone (avoid visible CSS text) ---\n\n try {\n const styleNodes = clone.querySelectorAll('style[data-sd]')\n for (const s of styleNodes) {\n shadowScopedCSS += s.textContent || ''\n s.remove() // Do not leave \n svgText = svgText.replace(/]*>([\\s\\S]*?)<\\/style>/gi, (m, css) =>\n m.replace(css, rewriteCssBlock(css))\n )\n // 2) style=\"โ€ฆ\"\n svgText = svgText.replace(/style=(['\"])([\\s\\S]*?)\\1/gi, (m, q, body) =>\n `style=${q}${rewriteDeclList(body)}${q}`\n )\n return svgText\n}\nfunction maybeConvertBoxShadowForSafari(url) {\n if (!isSafari() || !isSvgDataURL(url)) return url\n try {\n const svg = decodeSvgFromDataURL(url)\n const fixed = rewriteSvgBoxShadowToDropShadow(svg)\n return encodeSvgToDataURL(fixed)\n } catch {\n return url\n }\n}\n\n/**\n * Rasterize SVG (o data URL) en un canvas respetando width/height + scale.\n * Soporta aplanar un background color sin canvas intermedio.\n * @param {string} url\n * @param {{\n * width?:number,\n * height?:number,\n * scale?:number,\n * dpr?:number,\n * meta?:object,\n * backgroundColor?: string // <- NUEVO: color opcional para aplanar fondo\n * }} options\n * @returns {Promise}\n */\nexport async function toCanvas(url, options) {\n let { width: optW, height: optH, scale = 1, dpr = 1, meta = {}, backgroundColor } = options\n url = maybeConvertBoxShadowForSafari(url)\n\n const img = new Image()\n img.loading = 'eager'\n img.decoding = 'sync'\n img.crossOrigin = 'anonymous'\n img.src = url\n await img.decode()\n\n const natW = img.naturalWidth\n const natH = img.naturalHeight\n\n const refW = Number.isFinite(meta.w0) ? meta.w0 : natW\n const refH = Number.isFinite(meta.h0) ? meta.h0 : natH\n\n let outW, outH\n const hasW = Number.isFinite(optW)\n const hasH = Number.isFinite(optH)\n\n if (hasW && hasH) {\n outW = Math.max(1, optW)\n outH = Math.max(1, optH)\n } else if (hasW) {\n const k = optW / Math.max(1, refW)\n outW = optW\n outH = refH * k\n } else if (hasH) {\n const k = optH / Math.max(1, refH)\n outH = optH\n outW = refW * k\n } else {\n outW = natW\n outH = natH\n }\n\n outW = outW * scale\n outH = outH * scale\n\n const canvas = document.createElement('canvas')\n canvas.width = outW * dpr\n canvas.height = outH * dpr\n canvas.style.width = `${outW}px`\n canvas.style.height = `${outH}px`\n\n const ctx = canvas.getContext('2d')\n if (dpr !== 1) ctx.scale(dpr, dpr)\n\n if (backgroundColor) {\n ctx.save()\n ctx.fillStyle = backgroundColor\n ctx.fillRect(0, 0, outW, outH)\n ctx.restore()\n }\n\n ctx.drawImage(img, 0, 0, outW, outH)\n return canvas\n}\n" }, { "path": "src/exporters/toImg.js", "content": "// src/exporters/toImg.js\nimport { isSafari, debugWarn } from '../utils'\nimport { rasterize } from '../modules/rasterize'\n/**\n * Converts a data URL to an HTMLImageElement.\n * @param {string} url - The data URL of the image.\n * @param {object} options - Context options including scale.\n * @param {number} [options.scale=1] - Scale factor for the image dimensions.\n * @returns {Promise} Resolves with the loaded Image element.\n */\nexport async function toImg(url, options) {\n const { scale = 1, width, height, meta = {} } = options\n const hasW = Number.isFinite(width)\n const hasH = Number.isFinite(height)\n const wantsScale = (Number.isFinite(scale) && scale !== 1) || hasW || hasH\n if (isSafari() && wantsScale) {\n const pngUrl = await rasterize(url, {...options, format: 'png', quality: 1, meta})\n\n return pngUrl\n }\nconst img = new Image()\n img.decoding = 'sync'\n img.loading = 'eager'\n img.src = url\n await img.decode()\n if (hasW && hasH) {\n img.style.width = `${width}px`\n img.style.height = `${height}px`\n } else if (hasW) {\n const refW = Number.isFinite(meta.w0) ? meta.w0 : img.naturalWidth\n const refH = Number.isFinite(meta.h0) ? meta.h0 : img.naturalHeight\n const k = width / Math.max(1, refW)\n img.style.width = `${width}px`\n img.style.height = `${Math.round(refH * k)}px`\n } else if (hasH) {\n const refW = Number.isFinite(meta.w0) ? meta.w0 : img.naturalWidth\n const refH = Number.isFinite(meta.h0) ? meta.h0 : img.naturalHeight\n const k = height / Math.max(1, refH)\n img.style.height = `${height}px`\n img.style.width = `${Math.round(refW * k)}px`\n } else {\n const cssW = Math.round(img.naturalWidth * scale)\n const cssH = Math.round(img.naturalHeight * scale)\n img.style.width = `${cssW}px`\n img.style.height = `${cssH}px`\n if (typeof url === 'string' && url.startsWith('data:image/svg+xml')) {\n try {\n const decoded = decodeURIComponent(url.split(',')[1])\n const patched = decoded\n .replace(/width=\"[^\"]*\"/, `width=\"${cssW}\"`)\n .replace(/height=\"[^\"]*\"/, `height=\"${cssH}\"`)\n url = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(patched)}`\n img.src = url\n } catch (e) {\n debugWarn(options, 'SVG width/height patch in toImg failed', e)\n }\n }\n }\n return img\n}\n\nexport { toImg as toSvg }\n" }, { "path": "src/exporters/toJpg.js", "content": "import { rasterize } from '../modules/rasterize.js'\nimport { captureDOM } from '../core/capture.js'\n\nexport async function toJpg(elOrUrl, opts = {}) {\n // El normalizador de JPEGโ†’fondo blanco ya corre en snapdom.capture(),\n // pero por si alguien llama directo al exporter:\n const next = { backgroundColor: '#ffffff', ...opts }\n const url = typeof elOrUrl === 'string' ? elOrUrl : await captureDOM(elOrUrl, next)\n return rasterize(url, { ...next, format: 'jpeg' })\n}\n" }, { "path": "src/exporters/toPng.js", "content": "// PNG via rasterize; acepta Element o dataURL (SVG)\nimport { rasterize } from '../modules/rasterize.js'\nimport { captureDOM } from '../core/capture.js'\n\n/**\n * @param {HTMLElement|string} elOrUrl\n * @param {object} opts\n * @returns {Promise} segรบn tu contrato de `rasterize`\n */\nexport async function toPng(elOrUrl, opts = {}) {\n const url = typeof elOrUrl === 'string' ? elOrUrl : await captureDOM(elOrUrl, opts)\n return rasterize(url, { ...opts, format: 'png' })\n}\n" }, { "path": "src/exporters/toSvg.js", "content": "// Reexpone el toSvg que ya definรญs en toImg.js para habilitar el sub-path\nexport { toSvg } from './toImg.js'\n" }, { "path": "src/exporters/toWebp.js", "content": "import { rasterize } from '../modules/rasterize.js'\nimport { captureDOM } from '../core/capture.js'\n\nexport async function toWebp(elOrUrl, opts = {}) {\n const url = typeof elOrUrl === 'string' ? elOrUrl : await captureDOM(elOrUrl, opts)\n return rasterize(url, { ...opts, format: 'webp' })\n}\n" }, { "path": "src/index.browser.js", "content": "/**\n * Entry point for snapDOM library exports.\n *\n * @file index.browser.js\n */\n\nimport { snapdom } from './api/snapdom.js'\nimport { preCache } from './api/preCache.js'\n\nif (typeof window !== 'undefined') {\n window.snapdom = snapdom\n window.preCache = preCache\n}\n" }, { "path": "src/index.js", "content": "/**\n * Entry point for snapDOM library exports.\n *\n * @file index.js\n */\n\nexport { snapdom } from './api/snapdom.js'\nexport { preCache } from './api/preCache.js'\n" }, { "path": "src/modules/CSSVar.js", "content": "// src/utils/resolveCSSVars.js\n\n/** Props donde tรญpicamente aparece var() y conviene โ€œmaterializarโ€ si difieren del baseline */\nconst KEY_PROPS = ['fill', 'stroke', 'color', 'background-color', 'stop-color']\n\n/** Cache de estilos base por (namespaceURI + tagName) */\nconst __BASELINE_CACHE = new Map()\n\n/** Obtiene el estilo computado โ€œbaseโ€ (sin clase ni estilo) para un tag/namespace */\nfunction getBaselineComputed(tagName, ns) {\n const key = ns + '::' + tagName.toLowerCase()\n let entry = __BASELINE_CACHE.get(key)\n if (entry) return entry\n\n // Crear elemento del mismo tipo fuera del flujo visual\n const doc = document\n const el = ns === 'http://www.w3.org/2000/svg'\n ? doc.createElementNS(ns, tagName)\n : doc.createElement(tagName)\n\n // Lo insertamos de forma que el UA pueda computar estilos, pero sin afectar layout\n // (un shadowRoot vacรญo temporal funciona bien)\n const holder = doc.createElement('div')\n holder.style.cssText = 'position:absolute;left:-99999px;top:-99999px;contain:strict;display:block;'\n holder.appendChild(el)\n doc.documentElement.appendChild(holder)\n\n const cs = getComputedStyle(el)\n const base = {}\n for (const p of KEY_PROPS) {\n base[p] = cs.getPropertyValue(p) || ''\n }\n\n holder.remove()\n __BASELINE_CACHE.set(key, base)\n return base\n}\n\n/**\n * General: resuelve var() en estilos inline/atributos. Ademรกs, si no hay var()\n * pero el valor computado de KEY_PROPS difiere del baseline, inlina ese valor.\n */\nexport function resolveCSSVars(sourceEl, cloneEl) {\n if (!(sourceEl instanceof Element) || !(cloneEl instanceof Element)) return\n\n // --- 0) Pre-chequeo ultra barato\n const styleAttr = sourceEl.getAttribute?.('style')\n let hasVar = !!(styleAttr && styleAttr.includes('var('))\n\n if (!hasVar && sourceEl.attributes?.length) {\n const attrs = sourceEl.attributes\n for (let i = 0; i < attrs.length; i++) {\n const a = attrs[i]\n if (a && typeof a.value === 'string' && a.value.includes('var(')) { hasVar = true; break }\n }\n }\n\n // Leemos cs sรณlo si hace falta o si vamos a comparar con baseline\n let cs = null\n if (hasVar) {\n try { cs = getComputedStyle(sourceEl) } catch {}\n }\n\n // --- 1) Resolver var() en estilos inline\n if (hasVar) {\n const author = sourceEl.style\n if (author && author.length) {\n for (let i = 0; i < author.length; i++) {\n const prop = author[i]\n const val = author.getPropertyValue(prop)\n if (!val || !val.includes('var(')) continue\n const resolved = cs && cs.getPropertyValue(prop)\n if (resolved) {\n try { cloneEl.style.setProperty(prop, resolved.trim(), author.getPropertyPriority(prop)) } catch {}\n }\n }\n }\n }\n\n // --- 2) Resolver var() en atributos (genรฉrico; si prop no existe en CSS, setProperty no hace nada)\n if (hasVar && sourceEl.attributes?.length) {\n const attrs = sourceEl.attributes\n for (let i = 0; i < attrs.length; i++) {\n const a = attrs[i]\n if (!a || typeof a.value !== 'string' || !a.value.includes('var(')) continue\n const propName = a.name\n const resolved = cs && cs.getPropertyValue(propName)\n if (resolved) {\n try { cloneEl.style.setProperty(propName, resolved.trim()) } catch {}\n }\n }\n }\n\n // --- 3) Fallback general: cubrir reglas de hoja (clases) SIN buscar en CSSOM\n // Si NO vimos var() inline/attrs, quizรกs la clase aplicรณ var(). En ese caso,\n // comparamos KEY_PROPS contra baseline del mismo tag/namespace y, si difiere,\n // inlinamos el valor computado. Esto materializa p.ej. `.css-var-fill { fill: var(--x) }`\n if (!hasVar) {\n // Leemos cs aquรญ sรณlo si lo vamos a usar\n if (!cs) {\n try { cs = getComputedStyle(sourceEl) } catch { cs = null }\n }\n if (!cs) return\n\n const ns = sourceEl.namespaceURI || 'html'\n const base = getBaselineComputed(sourceEl.tagName, ns)\n\n for (const prop of KEY_PROPS) {\n const v = cs.getPropertyValue(prop) || ''\n const b = base[prop] || ''\n if (v && v !== b) {\n // Es distinto al baseline => hay estilo de hoja afectando (posiblemente via var()).\n try { cloneEl.style.setProperty(prop, v.trim()) } catch {}\n }\n }\n }\n}\n" }, { "path": "src/modules/background.js", "content": "/**\n * Utilities for inlining background images as data URLs.\n * @module background\n */\n\nimport { getStyle, inlineSingleBackgroundEntry, splitBackgroundImage } from '../utils'\n\n/**\n * Recursively inlines background-related images and masks from the source element to its clone.\n *\n * This function walks through the source DOM tree and its clone, copying inline styles for\n * background images, masks, and border images to ensure the clone retains all visual image\n * resources inline (e.g., data URLs), avoiding external dependencies.\n *\n * It also preserves the `background-color` property if it is not transparent.\n *\n * Special handling is done for `border-image` related properties: the\n * `border-image-slice`, `border-image-width`, `border-image-outset`, and `border-image-repeat`\n * are only copied if `border-image` or `border-image-source` are present and active.\n *\n * @param {HTMLElement} source The original source element from which styles are read.\n * @param {HTMLElement} clone The cloned element to which inline styles are applied.\n * @param {Object} [options={}] Optional parameters passed to image inlining functions.\n * @returns {Promise} Resolves when all inlining operations (including async image fetches) complete.\n */\n/**\n * Inlines URL-bearing properties (background/mask/border-image)\n * and also preserves mask positioning longhands (position/size/repeat).\n * This fixes cases like `mask: url(...) center/60% 60% no-repeat`.\n */\nexport async function inlineBackgroundImages(source, clone, styleCache, options = {}) {\n const queue = [[source, clone]]\n\n /** Props that can contain url(...) and may need inlining */\n const URL_PROPS = [\n 'background-image',\n\n // Mask shorthands & images (both standard and WebKit)\n 'mask',\n 'mask-image',\n '-webkit-mask',\n '-webkit-mask-image',\n\n // Mask sources (rare, but keep)\n 'mask-source',\n 'mask-box-image-source',\n 'mask-border-source',\n '-webkit-mask-box-image-source',\n\n // Border image\n 'border-image',\n 'border-image-source',\n ]\n\n /** Mask longhands to preserve spatial layout (copy as-is) */\n const MASK_LAYOUT_PROPS = [\n 'mask-position',\n 'mask-size',\n 'mask-repeat',\n // WebKit variants\n '-webkit-mask-position',\n '-webkit-mask-size',\n '-webkit-mask-repeat',\n // Extra (optional but helpful across engines)\n 'mask-origin',\n 'mask-clip',\n '-webkit-mask-origin',\n '-webkit-mask-clip',\n // Some engines expose X/Y position separately:\n '-webkit-mask-position-x',\n '-webkit-mask-position-y',\n ]\n const BG_LAYOUT_PROPS = [\n 'background-position', 'background-position-x', 'background-position-y',\n 'background-size', 'background-repeat',\n 'background-origin', 'background-clip',\n 'background-attachment', 'background-blend-mode'\n ]\n /** Border-image aux longhands (copy only when active) */\n const BORDER_AUX_PROPS = [\n 'border-image-slice',\n 'border-image-width',\n 'border-image-outset',\n 'border-image-repeat',\n ]\n\n while (queue.length) {\n const [srcNode, cloneNode] = queue.shift()\n\n if (!cloneNode) continue\n\n // Style cache\n const style = styleCache.get(srcNode) || getStyle(srcNode)\n if (!styleCache.has(srcNode)) styleCache.set(srcNode, style)\n // Border-image present?\n const hasBorderImage = (() => {\n const bi = style.getPropertyValue('border-image')\n const bis = style.getPropertyValue('border-image-source')\n return (bi && bi !== 'none') || (bis && bis !== 'none')\n })()\n for (const prop of BG_LAYOUT_PROPS) {\n const v = style.getPropertyValue(prop)\n if (!v) continue\n cloneNode.style.setProperty(prop, v)\n }\n // 1) Inline URL-bearing properties\n for (const prop of URL_PROPS) {\n let val = style.getPropertyValue(prop)\n // Fallback: when background-image is none/empty, parse url() from background shorthand (#343)\n if ((prop === 'background-image') && (!val || val === 'none')) {\n const bgShorthand = style.getPropertyValue('background')\n if (bgShorthand && /url\\s*\\(/.test(bgShorthand)) {\n val = splitBackgroundImage(bgShorthand).find(p => /url\\s*\\(/.test(p)) || val\n }\n }\n if (!val || val === 'none') continue\n\n // Split multiple layers (comma-separated)\n const splits = splitBackgroundImage(val)\n\n const inlined = await Promise.all(\n splits.map(entry => inlineSingleBackgroundEntry(entry, options))\n )\n\n if (inlined.some(p => p && p !== 'none' && !/^url\\(undefined/.test(p))) {\n cloneNode.style.setProperty(prop, inlined.join(', '))\n }\n }\n // 2) Copy mask layout longhands (position / size / repeat, etc.)\n for (const prop of MASK_LAYOUT_PROPS) {\n const val = style.getPropertyValue(prop)\n // Skip empty/initial defaults to avoid bloating\n if (!val || val === 'initial') continue\n cloneNode.style.setProperty(prop, val)\n }\n // 3) Copy border-image auxiliaries only if border-image is active\n if (hasBorderImage) {\n for (const prop of BORDER_AUX_PROPS) {\n const val = style.getPropertyValue(prop)\n if (!val || val === 'initial') continue\n cloneNode.style.setProperty(prop, val)\n }\n }\n // 4) Recurse\n // Fix: When srcNode is a shadow DOM host, its light DOM children are empty\n // (content lives in shadowRoot). Use shadowRoot.children instead, filtering\n // out