refactored code

lib/single-file/util/doc-helper.js

@@ -304,37 +304,43 @@ this.docHelper = this.docHelper || (() => {
 	}
 
 	function getSize(win, imageElement) {
-		const computedStyle = win.getComputedStyle(imageElement);
-		let removeBorderWidth = false;
-		if (computedStyle.getPropertyValue("box-sizing") == "content-box") {
-			const boxSizingValue = imageElement.style.getPropertyValue("box-sizing");
-			const boxSizingPriority = imageElement.style.getPropertyPriority("box-sizing");
-			const clientWidth = imageElement.clientWidth;
-			imageElement.style.setProperty("box-sizing", "border-box", "important");
-			removeBorderWidth = imageElement.clientWidth != clientWidth;
-			if (boxSizingValue) {
-				imageElement.style.setProperty("box-sizing", boxSizingValue, boxSizingPriority);
+		let pxWidth = imageElement.naturalWidth;
+		let pxHeight = imageElement.naturalHeight;
+		if (pxWidth >= 0 && pxHeight >= 0) {
+			return { pxWidth, pxHeight };
+		} else {
+			const computedStyle = win.getComputedStyle(imageElement);
+			let removeBorderWidth = false;
+			if (computedStyle.getPropertyValue("box-sizing") == "content-box") {
+				const boxSizingValue = imageElement.style.getPropertyValue("box-sizing");
+				const boxSizingPriority = imageElement.style.getPropertyPriority("box-sizing");
+				const clientWidth = imageElement.clientWidth;
+				imageElement.style.setProperty("box-sizing", "border-box", "important");
+				removeBorderWidth = imageElement.clientWidth != clientWidth;
+				if (boxSizingValue) {
+					imageElement.style.setProperty("box-sizing", boxSizingValue, boxSizingPriority);
+				} else {
+					imageElement.style.removeProperty("box-sizing");
+				}
+			}
+			let paddingLeft, paddingRight, paddingTop, paddingBottom, borderLeft, borderRight, borderTop, borderBottom;
+			paddingLeft = getWidth("padding-left", computedStyle);
+			paddingRight = getWidth("padding-right", computedStyle);
+			paddingTop = getWidth("padding-top", computedStyle);
+			paddingBottom = getWidth("padding-bottom", computedStyle);
+			if (removeBorderWidth) {
+				borderLeft = getWidth("border-left-width", computedStyle);
+				borderRight = getWidth("border-right-width", computedStyle);
+				borderTop = getWidth("border-top-width", computedStyle);
+				borderBottom = getWidth("border-bottom-width", computedStyle);
 			} else {
-				imageElement.style.removeProperty("box-sizing");
+				borderLeft = borderRight = borderTop = borderBottom = 0;
+			}
+			pxWidth = imageElement.clientWidth - paddingLeft - paddingRight - borderLeft - borderRight;
+			pxHeight = imageElement.clientHeight - paddingTop - paddingBottom - borderTop - borderBottom;
+			if (pxWidth >= 0 && pxHeight >= 0 && paddingLeft >= 0 && paddingRight >= 0 && paddingTop >= 0 && paddingBottom >= 0 && borderLeft >= 0 && borderRight >= 0 && borderTop >= 0 && borderBottom >= 0) {
+				return { pxWidth, pxHeight };
 			}
-		}
-		let paddingLeft, paddingRight, paddingTop, paddingBottom, borderLeft, borderRight, borderTop, borderBottom;
-		paddingLeft = getWidth("padding-left", computedStyle);
-		paddingRight = getWidth("padding-right", computedStyle);
-		paddingTop = getWidth("padding-top", computedStyle);
-		paddingBottom = getWidth("padding-bottom", computedStyle);
-		if (removeBorderWidth) {
-			borderLeft = getWidth("border-left-width", computedStyle);
-			borderRight = getWidth("border-right-width", computedStyle);
-			borderTop = getWidth("border-top-width", computedStyle);
-			borderBottom = getWidth("border-bottom-width", computedStyle);
-		} else {
-			borderLeft = borderRight = borderTop = borderBottom = 0;
-		}
-		const pxWidth = imageElement.naturalWidth || (imageElement.clientWidth - paddingLeft - paddingRight - borderLeft - borderRight);
-		const pxHeight = imageElement.naturalHeight || (imageElement.clientHeight - paddingTop - paddingBottom - borderTop - borderBottom);
-		if (pxWidth >= 0 && pxHeight >= 0 && paddingLeft >= 0 && paddingRight >= 0 && paddingTop >= 0 && paddingBottom >= 0 && borderLeft >= 0 && borderRight >= 0 && borderTop >= 0 && borderBottom >= 0) {
-			return { pxWidth, pxHeight };
 		}
 	}