single-file-helper.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508
  1. /*
  2. * Copyright 2010-2020 Gildas Lormeau
  3. * contact : gildas.lormeau <at> gmail.com
  4. *
  5. * This file is part of SingleFile.
  6. *
  7. * The code in this file is free software: you can redistribute it and/or
  8. * modify it under the terms of the GNU Affero General Public License
  9. * (GNU AGPL) as published by the Free Software Foundation, either version 3
  10. * of the License, or (at your option) any later version.
  11. *
  12. * The code in this file is distributed in the hope that it will be useful,
  13. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  14. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
  15. * General Public License for more details.
  16. *
  17. * As additional permission under GNU AGPL version 3 section 7, you may
  18. * distribute UNMODIFIED VERSIONS OF THIS file without the copy of the GNU
  19. * AGPL normally required by section 4, provided you include this license
  20. * notice and a URL through which recipients can access the Corresponding
  21. * Source.
  22. */
  23. /* global globalThis, CustomEvent */
  24. import * as cssUnescape from "./vendor/css-unescape.js";
  25. import * as hooksFrames from "./processors/hooks/content/content-hooks-frames";
  26. const ON_BEFORE_CAPTURE_EVENT_NAME = "single-file-on-before-capture";
  27. const ON_AFTER_CAPTURE_EVENT_NAME = "single-file-on-after-capture";
  28. const REMOVED_CONTENT_ATTRIBUTE_NAME = "data-single-file-removed-content";
  29. const HIDDEN_CONTENT_ATTRIBUTE_NAME = "data-single-file-hidden-content";
  30. const KEPT_CONTENT_ATTRIBUTE_NAME = "data-single-file-kept-content";
  31. const HIDDEN_FRAME_ATTRIBUTE_NAME = "data-single-file-hidden-frame";
  32. const PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME = "data-single-file-preserved-space-element";
  33. const SHADOW_ROOT_ATTRIBUTE_NAME = "data-single-file-shadow-root-element";
  34. const WIN_ID_ATTRIBUTE_NAME = "data-single-file-win-id";
  35. const IMAGE_ATTRIBUTE_NAME = "data-single-file-image";
  36. const POSTER_ATTRIBUTE_NAME = "data-single-file-poster";
  37. const CANVAS_ATTRIBUTE_NAME = "data-single-file-canvas";
  38. const HTML_IMPORT_ATTRIBUTE_NAME = "data-single-file-import";
  39. const INPUT_VALUE_ATTRIBUTE_NAME = "data-single-file-input-value";
  40. const LAZY_SRC_ATTRIBUTE_NAME = "data-single-file-lazy-loaded-src";
  41. const STYLESHEET_ATTRIBUTE_NAME = "data-single-file-stylesheet";
  42. const DISABLED_NOSCRIPT_ATTRIBUTE_NAME = "data-single-file-disabled-noscript";
  43. const SELECTED_CONTENT_ATTRIBUTE_NAME = "data-single-file-selected-content";
  44. const ASYNC_SCRIPT_ATTRIBUTE_NAME = "data-single-file-async-script";
  45. const FLOW_ELEMENTS_SELECTOR = "*:not(base):not(link):not(meta):not(noscript):not(script):not(style):not(template):not(title)";
  46. const KEPT_TAG_NAMES = ["NOSCRIPT", "DISABLED-NOSCRIPT", "META", "LINK", "STYLE", "TITLE", "TEMPLATE", "SOURCE", "OBJECT", "SCRIPT", "HEAD"];
  47. const REGEXP_SIMPLE_QUOTES_STRING = /^'(.*?)'$/;
  48. const REGEXP_DOUBLE_QUOTES_STRING = /^"(.*?)"$/;
  49. const FONT_WEIGHTS = {
  50. regular: "400",
  51. normal: "400",
  52. bold: "700",
  53. bolder: "700",
  54. lighter: "100"
  55. };
  56. const COMMENT_HEADER = "Page saved with SingleFile";
  57. const COMMENT_HEADER_LEGACY = "Archive processed by SingleFile";
  58. const SINGLE_FILE_UI_ELEMENT_CLASS = "single-file-ui-element";
  59. const addEventListener = (type, listener, options) => globalThis.addEventListener(type, listener, options);
  60. const dispatchEvent = event => globalThis.dispatchEvent(event);
  61. export {
  62. initUserScriptHandler,
  63. initDoc,
  64. preProcessDoc,
  65. postProcessDoc,
  66. serialize,
  67. removeQuotes,
  68. flatten,
  69. getFontWeight,
  70. normalizeFontFamily,
  71. getShadowRoot,
  72. ON_BEFORE_CAPTURE_EVENT_NAME,
  73. ON_AFTER_CAPTURE_EVENT_NAME,
  74. WIN_ID_ATTRIBUTE_NAME,
  75. PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME,
  76. REMOVED_CONTENT_ATTRIBUTE_NAME,
  77. HIDDEN_CONTENT_ATTRIBUTE_NAME,
  78. HIDDEN_FRAME_ATTRIBUTE_NAME,
  79. IMAGE_ATTRIBUTE_NAME,
  80. POSTER_ATTRIBUTE_NAME,
  81. CANVAS_ATTRIBUTE_NAME,
  82. INPUT_VALUE_ATTRIBUTE_NAME,
  83. SHADOW_ROOT_ATTRIBUTE_NAME,
  84. HTML_IMPORT_ATTRIBUTE_NAME,
  85. LAZY_SRC_ATTRIBUTE_NAME,
  86. STYLESHEET_ATTRIBUTE_NAME,
  87. SELECTED_CONTENT_ATTRIBUTE_NAME,
  88. ASYNC_SCRIPT_ATTRIBUTE_NAME,
  89. COMMENT_HEADER,
  90. COMMENT_HEADER_LEGACY,
  91. SINGLE_FILE_UI_ELEMENT_CLASS
  92. };
  93. function initUserScriptHandler() {
  94. addEventListener("single-file-user-script-init", () => globalThis._singleFile_waitForUserScript = async eventPrefixName => {
  95. const event = new CustomEvent(eventPrefixName + "-request", { cancelable: true });
  96. const promiseResponse = new Promise(resolve => addEventListener(eventPrefixName + "-response", resolve));
  97. dispatchEvent(event);
  98. if (event.defaultPrevented) {
  99. await promiseResponse;
  100. }
  101. });
  102. }
  103. function initDoc(doc) {
  104. doc.querySelectorAll("meta[http-equiv=refresh]").forEach(element => {
  105. element.removeAttribute("http-equiv");
  106. element.setAttribute("disabled-http-equiv", "refresh");
  107. });
  108. }
  109. function preProcessDoc(doc, win, options) {
  110. doc.querySelectorAll("noscript:not([" + DISABLED_NOSCRIPT_ATTRIBUTE_NAME + "])").forEach(element => {
  111. element.setAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME, element.textContent);
  112. element.textContent = "";
  113. });
  114. initDoc(doc);
  115. if (doc.head) {
  116. doc.head.querySelectorAll(FLOW_ELEMENTS_SELECTOR).forEach(element => element.hidden = true);
  117. }
  118. doc.querySelectorAll("svg foreignObject").forEach(element => {
  119. const flowElements = element.querySelectorAll("html > head > " + FLOW_ELEMENTS_SELECTOR + ", html > body > " + FLOW_ELEMENTS_SELECTOR);
  120. if (flowElements.length) {
  121. Array.from(element.childNodes).forEach(node => node.remove());
  122. flowElements.forEach(flowElement => element.appendChild(flowElement));
  123. }
  124. });
  125. let elementsInfo;
  126. if (win && doc.documentElement) {
  127. elementsInfo = getElementsInfo(win, doc, doc.documentElement, options);
  128. } else {
  129. elementsInfo = {
  130. canvases: [],
  131. images: [],
  132. posters: [],
  133. usedFonts: [],
  134. shadowRoots: [],
  135. imports: [],
  136. markedElements: []
  137. };
  138. }
  139. return {
  140. canvases: elementsInfo.canvases,
  141. fonts: getFontsData(doc),
  142. stylesheets: getStylesheetsData(doc),
  143. images: elementsInfo.images,
  144. posters: elementsInfo.posters,
  145. usedFonts: Array.from(elementsInfo.usedFonts.values()),
  146. shadowRoots: elementsInfo.shadowRoots,
  147. imports: elementsInfo.imports,
  148. referrer: doc.referrer,
  149. markedElements: elementsInfo.markedElements
  150. };
  151. }
  152. function getElementsInfo(win, doc, element, options, data = { usedFonts: new Map(), canvases: [], images: [], posters: [], shadowRoots: [], imports: [], markedElements: [] }, ascendantHidden) {
  153. const elements = Array.from(element.childNodes).filter(node => (node instanceof win.HTMLElement) || (node instanceof win.SVGElement));
  154. elements.forEach(element => {
  155. let elementHidden, elementKept, computedStyle;
  156. if (!options.autoSaveExternalSave && (options.removeHiddenElements || options.removeUnusedFonts || options.compressHTML)) {
  157. computedStyle = win.getComputedStyle(element);
  158. if (element instanceof win.HTMLElement) {
  159. if (options.removeHiddenElements) {
  160. elementKept = ((ascendantHidden || element.closest("html > head")) && KEPT_TAG_NAMES.includes(element.tagName)) || element.closest("details");
  161. if (!elementKept) {
  162. elementHidden = ascendantHidden || testHiddenElement(element, computedStyle);
  163. if (elementHidden) {
  164. element.setAttribute(HIDDEN_CONTENT_ATTRIBUTE_NAME, "");
  165. data.markedElements.push(element);
  166. }
  167. }
  168. }
  169. }
  170. if (!elementHidden) {
  171. if (options.compressHTML && computedStyle) {
  172. const whiteSpace = computedStyle.getPropertyValue("white-space");
  173. if (whiteSpace && whiteSpace.startsWith("pre")) {
  174. element.setAttribute(PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME, "");
  175. data.markedElements.push(element);
  176. }
  177. }
  178. if (options.removeUnusedFonts) {
  179. getUsedFont(computedStyle, options, data.usedFonts);
  180. getUsedFont(win.getComputedStyle(element, ":first-letter"), options, data.usedFonts);
  181. getUsedFont(win.getComputedStyle(element, ":before"), options, data.usedFonts);
  182. getUsedFont(win.getComputedStyle(element, ":after"), options, data.usedFonts);
  183. }
  184. }
  185. }
  186. getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle);
  187. const shadowRoot = !(element instanceof win.SVGElement) && getShadowRoot(element);
  188. if (shadowRoot && !element.classList.contains(SINGLE_FILE_UI_ELEMENT_CLASS)) {
  189. const shadowRootInfo = {};
  190. element.setAttribute(SHADOW_ROOT_ATTRIBUTE_NAME, data.shadowRoots.length);
  191. data.markedElements.push(element);
  192. data.shadowRoots.push(shadowRootInfo);
  193. getElementsInfo(win, doc, shadowRoot, options, data, elementHidden);
  194. shadowRootInfo.content = shadowRoot.innerHTML;
  195. shadowRootInfo.delegatesFocus = shadowRoot.delegatesFocus;
  196. shadowRootInfo.mode = shadowRoot.mode;
  197. if (shadowRoot.adoptedStyleSheets && shadowRoot.adoptedStyleSheets.length) {
  198. shadowRootInfo.adoptedStyleSheets = Array.from(shadowRoot.adoptedStyleSheets).map(stylesheet => Array.from(stylesheet.cssRules).map(cssRule => cssRule.cssText).join("\n"));
  199. }
  200. }
  201. getElementsInfo(win, doc, element, options, data, elementHidden);
  202. if (!options.autoSaveExternalSave && options.removeHiddenElements && ascendantHidden) {
  203. if (elementKept || element.getAttribute(KEPT_CONTENT_ATTRIBUTE_NAME) == "") {
  204. if (element.parentElement) {
  205. element.parentElement.setAttribute(KEPT_CONTENT_ATTRIBUTE_NAME, "");
  206. data.markedElements.push(element.parentElement);
  207. }
  208. } else if (elementHidden) {
  209. element.setAttribute(REMOVED_CONTENT_ATTRIBUTE_NAME, "");
  210. data.markedElements.push(element);
  211. }
  212. }
  213. });
  214. return data;
  215. }
  216. function getResourcesInfo(win, doc, element, options, data, elementHidden, computedStyle) {
  217. if (element.tagName == "CANVAS") {
  218. try {
  219. const size = getSize(win, element, computedStyle);
  220. data.canvases.push({ dataURI: element.toDataURL("image/png", ""), width: size.width, height: size.height });
  221. element.setAttribute(CANVAS_ATTRIBUTE_NAME, data.canvases.length - 1);
  222. data.markedElements.push(element);
  223. } catch (error) {
  224. // ignored
  225. }
  226. }
  227. if (element.tagName == "IMG") {
  228. const imageData = {
  229. currentSrc: elementHidden ?
  230. "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" :
  231. (options.loadDeferredImages && element.getAttribute(LAZY_SRC_ATTRIBUTE_NAME)) || element.currentSrc
  232. };
  233. data.images.push(imageData);
  234. element.setAttribute(IMAGE_ATTRIBUTE_NAME, data.images.length - 1);
  235. data.markedElements.push(element);
  236. element.removeAttribute(LAZY_SRC_ATTRIBUTE_NAME);
  237. computedStyle = computedStyle || win.getComputedStyle(element);
  238. if (computedStyle) {
  239. imageData.size = getSize(win, element, computedStyle);
  240. const boxShadow = computedStyle.getPropertyValue("box-shadow");
  241. const backgroundImage = computedStyle.getPropertyValue("background-image");
  242. if ((!boxShadow || boxShadow == "none") &&
  243. (!backgroundImage || backgroundImage == "none") &&
  244. (imageData.size.pxWidth > 1 || imageData.size.pxHeight > 1)) {
  245. imageData.replaceable = true;
  246. imageData.backgroundColor = computedStyle.getPropertyValue("background-color");
  247. imageData.objectFit = computedStyle.getPropertyValue("object-fit");
  248. imageData.boxSizing = computedStyle.getPropertyValue("box-sizing");
  249. imageData.objectPosition = computedStyle.getPropertyValue("object-position");
  250. }
  251. }
  252. }
  253. if (element.tagName == "VIDEO") {
  254. if (!element.poster) {
  255. const canvasElement = doc.createElement("canvas");
  256. const context = canvasElement.getContext("2d");
  257. canvasElement.width = element.clientWidth;
  258. canvasElement.height = element.clientHeight;
  259. try {
  260. context.drawImage(element, 0, 0, canvasElement.width, canvasElement.height);
  261. data.posters.push(canvasElement.toDataURL("image/png", ""));
  262. element.setAttribute(POSTER_ATTRIBUTE_NAME, data.posters.length - 1);
  263. data.markedElements.push(element);
  264. } catch (error) {
  265. // ignored
  266. }
  267. }
  268. }
  269. if (element.tagName == "IFRAME") {
  270. if (elementHidden && options.removeHiddenElements) {
  271. element.setAttribute(HIDDEN_FRAME_ATTRIBUTE_NAME, "");
  272. data.markedElements.push(element);
  273. }
  274. }
  275. if (element.tagName == "LINK") {
  276. if (element.import && element.import.documentElement) {
  277. data.imports.push({ content: serialize(element.import) });
  278. element.setAttribute(HTML_IMPORT_ATTRIBUTE_NAME, data.imports.length - 1);
  279. data.markedElements.push(element);
  280. }
  281. }
  282. if (element.tagName == "INPUT") {
  283. if (element.type != "password") {
  284. element.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, element.value);
  285. data.markedElements.push(element);
  286. }
  287. if (element.type == "radio" || element.type == "checkbox") {
  288. element.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, element.checked);
  289. data.markedElements.push(element);
  290. }
  291. }
  292. if (element.tagName == "TEXTAREA") {
  293. element.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, element.value);
  294. data.markedElements.push(element);
  295. }
  296. if (element.tagName == "SELECT") {
  297. element.querySelectorAll("option").forEach(option => {
  298. if (option.selected) {
  299. option.setAttribute(INPUT_VALUE_ATTRIBUTE_NAME, "");
  300. data.markedElements.push(option);
  301. }
  302. });
  303. }
  304. if (element.tagName == "SCRIPT") {
  305. if (element.async && element.getAttribute("async") != "" && element.getAttribute("async") != "async") {
  306. element.setAttribute(ASYNC_SCRIPT_ATTRIBUTE_NAME, "");
  307. data.markedElements.push(element);
  308. }
  309. element.textContent = element.textContent.replace(/<\/script>/gi, "<\\/script>");
  310. }
  311. }
  312. function getUsedFont(computedStyle, options, usedFonts) {
  313. if (computedStyle) {
  314. const fontStyle = computedStyle.getPropertyValue("font-style") || "normal";
  315. computedStyle.getPropertyValue("font-family").split(",").forEach(fontFamilyName => {
  316. fontFamilyName = normalizeFontFamily(fontFamilyName);
  317. if (!options.loadedFonts || options.loadedFonts.find(font => normalizeFontFamily(font.family) == fontFamilyName && font.style == fontStyle)) {
  318. const fontWeight = getFontWeight(computedStyle.getPropertyValue("font-weight"));
  319. const fontVariant = computedStyle.getPropertyValue("font-variant") || "normal";
  320. const value = [fontFamilyName, fontWeight, fontStyle, fontVariant];
  321. usedFonts.set(JSON.stringify(value), [fontFamilyName, fontWeight, fontStyle, fontVariant]);
  322. }
  323. });
  324. }
  325. }
  326. function getShadowRoot(element) {
  327. const chrome = globalThis.chrome;
  328. if (element.openOrClosedShadowRoot) {
  329. return element.openOrClosedShadowRoot;
  330. } else if (chrome && chrome.dom && chrome.dom.openOrClosedShadowRoot) {
  331. try {
  332. return chrome.dom.openOrClosedShadowRoot(element);
  333. } catch (error) {
  334. return element.shadowRoot;
  335. }
  336. } else {
  337. return element.shadowRoot;
  338. }
  339. }
  340. function normalizeFontFamily(fontFamilyName = "") {
  341. return removeQuotes(cssUnescape.process(fontFamilyName.trim())).toLowerCase();
  342. }
  343. function testHiddenElement(element, computedStyle) {
  344. let hidden = false;
  345. if (computedStyle) {
  346. const display = computedStyle.getPropertyValue("display");
  347. const opacity = computedStyle.getPropertyValue("opacity");
  348. const visibility = computedStyle.getPropertyValue("visibility");
  349. hidden = display == "none";
  350. if (!hidden && (opacity == "0" || visibility == "hidden") && element.getBoundingClientRect) {
  351. const boundingRect = element.getBoundingClientRect();
  352. hidden = !boundingRect.width && !boundingRect.height;
  353. }
  354. }
  355. return Boolean(hidden);
  356. }
  357. function postProcessDoc(doc, markedElements) {
  358. doc.querySelectorAll("[" + DISABLED_NOSCRIPT_ATTRIBUTE_NAME + "]").forEach(element => {
  359. element.textContent = element.getAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
  360. element.removeAttribute(DISABLED_NOSCRIPT_ATTRIBUTE_NAME);
  361. });
  362. doc.querySelectorAll("meta[disabled-http-equiv]").forEach(element => {
  363. element.setAttribute("http-equiv", element.getAttribute("disabled-http-equiv"));
  364. element.removeAttribute("disabled-http-equiv");
  365. });
  366. if (doc.head) {
  367. doc.head.querySelectorAll("*:not(base):not(link):not(meta):not(noscript):not(script):not(style):not(template):not(title)").forEach(element => element.removeAttribute("hidden"));
  368. }
  369. if (!markedElements) {
  370. const singleFileAttributes = [REMOVED_CONTENT_ATTRIBUTE_NAME, HIDDEN_FRAME_ATTRIBUTE_NAME, HIDDEN_CONTENT_ATTRIBUTE_NAME, PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME, IMAGE_ATTRIBUTE_NAME, POSTER_ATTRIBUTE_NAME, CANVAS_ATTRIBUTE_NAME, INPUT_VALUE_ATTRIBUTE_NAME, SHADOW_ROOT_ATTRIBUTE_NAME, HTML_IMPORT_ATTRIBUTE_NAME, STYLESHEET_ATTRIBUTE_NAME, ASYNC_SCRIPT_ATTRIBUTE_NAME];
  371. markedElements = doc.querySelectorAll(singleFileAttributes.map(name => "[" + name + "]").join(","));
  372. }
  373. markedElements.forEach(element => {
  374. element.removeAttribute(REMOVED_CONTENT_ATTRIBUTE_NAME);
  375. element.removeAttribute(HIDDEN_CONTENT_ATTRIBUTE_NAME);
  376. element.removeAttribute(KEPT_CONTENT_ATTRIBUTE_NAME);
  377. element.removeAttribute(HIDDEN_FRAME_ATTRIBUTE_NAME);
  378. element.removeAttribute(PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME);
  379. element.removeAttribute(IMAGE_ATTRIBUTE_NAME);
  380. element.removeAttribute(POSTER_ATTRIBUTE_NAME);
  381. element.removeAttribute(CANVAS_ATTRIBUTE_NAME);
  382. element.removeAttribute(INPUT_VALUE_ATTRIBUTE_NAME);
  383. element.removeAttribute(SHADOW_ROOT_ATTRIBUTE_NAME);
  384. element.removeAttribute(HTML_IMPORT_ATTRIBUTE_NAME);
  385. element.removeAttribute(STYLESHEET_ATTRIBUTE_NAME);
  386. element.removeAttribute(ASYNC_SCRIPT_ATTRIBUTE_NAME);
  387. });
  388. }
  389. function getStylesheetsData(doc) {
  390. if (doc) {
  391. const contents = [];
  392. doc.querySelectorAll("style").forEach((styleElement, styleIndex) => {
  393. try {
  394. const tempStyleElement = doc.createElement("style");
  395. tempStyleElement.textContent = styleElement.textContent;
  396. doc.body.appendChild(tempStyleElement);
  397. const stylesheet = tempStyleElement.sheet;
  398. tempStyleElement.remove();
  399. if (!stylesheet || stylesheet.cssRules.length != styleElement.sheet.cssRules.length) {
  400. styleElement.setAttribute(STYLESHEET_ATTRIBUTE_NAME, styleIndex);
  401. contents[styleIndex] = Array.from(styleElement.sheet.cssRules).map(cssRule => cssRule.cssText).join("\n");
  402. }
  403. } catch (error) {
  404. // ignored
  405. }
  406. });
  407. return contents;
  408. }
  409. }
  410. function getSize(win, imageElement, computedStyle) {
  411. let pxWidth = imageElement.naturalWidth;
  412. let pxHeight = imageElement.naturalHeight;
  413. if (!pxWidth && !pxHeight) {
  414. computedStyle = computedStyle || win.getComputedStyle(imageElement);
  415. let removeBorderWidth = false;
  416. if (computedStyle.getPropertyValue("box-sizing") == "content-box") {
  417. const boxSizingValue = imageElement.style.getPropertyValue("box-sizing");
  418. const boxSizingPriority = imageElement.style.getPropertyPriority("box-sizing");
  419. const clientWidth = imageElement.clientWidth;
  420. imageElement.style.setProperty("box-sizing", "border-box", "important");
  421. removeBorderWidth = imageElement.clientWidth != clientWidth;
  422. if (boxSizingValue) {
  423. imageElement.style.setProperty("box-sizing", boxSizingValue, boxSizingPriority);
  424. } else {
  425. imageElement.style.removeProperty("box-sizing");
  426. }
  427. }
  428. let paddingLeft, paddingRight, paddingTop, paddingBottom, borderLeft, borderRight, borderTop, borderBottom;
  429. paddingLeft = getWidth("padding-left", computedStyle);
  430. paddingRight = getWidth("padding-right", computedStyle);
  431. paddingTop = getWidth("padding-top", computedStyle);
  432. paddingBottom = getWidth("padding-bottom", computedStyle);
  433. if (removeBorderWidth) {
  434. borderLeft = getWidth("border-left-width", computedStyle);
  435. borderRight = getWidth("border-right-width", computedStyle);
  436. borderTop = getWidth("border-top-width", computedStyle);
  437. borderBottom = getWidth("border-bottom-width", computedStyle);
  438. } else {
  439. borderLeft = borderRight = borderTop = borderBottom = 0;
  440. }
  441. pxWidth = Math.max(0, imageElement.clientWidth - paddingLeft - paddingRight - borderLeft - borderRight);
  442. pxHeight = Math.max(0, imageElement.clientHeight - paddingTop - paddingBottom - borderTop - borderBottom);
  443. }
  444. return { pxWidth, pxHeight };
  445. }
  446. function getWidth(styleName, computedStyle) {
  447. if (computedStyle.getPropertyValue(styleName).endsWith("px")) {
  448. return parseFloat(computedStyle.getPropertyValue(styleName));
  449. }
  450. }
  451. function getFontsData() {
  452. return hooksFrames.getFontsData();
  453. }
  454. function serialize(doc) {
  455. const docType = doc.doctype;
  456. let docTypeString = "";
  457. if (docType) {
  458. docTypeString = "<!DOCTYPE " + docType.nodeName;
  459. if (docType.publicId) {
  460. docTypeString += " PUBLIC \"" + docType.publicId + "\"";
  461. if (docType.systemId) {
  462. docTypeString += " \"" + docType.systemId + "\"";
  463. }
  464. } else if (docType.systemId) {
  465. docTypeString += " SYSTEM \"" + docType.systemId + "\"";
  466. } if (docType.internalSubset) {
  467. docTypeString += " [" + docType.internalSubset + "]";
  468. }
  469. docTypeString += "> ";
  470. }
  471. return docTypeString + doc.documentElement.outerHTML;
  472. }
  473. function removeQuotes(string) {
  474. if (string.match(REGEXP_SIMPLE_QUOTES_STRING)) {
  475. string = string.replace(REGEXP_SIMPLE_QUOTES_STRING, "$1");
  476. } else {
  477. string = string.replace(REGEXP_DOUBLE_QUOTES_STRING, "$1");
  478. }
  479. return string.trim();
  480. }
  481. function getFontWeight(weight) {
  482. return FONT_WEIGHTS[weight.toLowerCase().trim()] || weight;
  483. }
  484. function flatten(array) {
  485. return array.flat ? array.flat() : array.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);
  486. }