take padding/border/box-sizing into account when determining element inner size

lib/single-file/doc-helper.js

@@ -160,8 +160,8 @@ this.docHelper = this.docHelper || (() => {
 			const data = [];
 			doc.querySelectorAll("img[src]").forEach((imageElement, imageElementIndex) => {
 				imageElement.setAttribute(imagesAttributeName(options.sessionId), imageElementIndex);
-				let imageData = {};
-				if (imageElement.src && isFullBox(imageElement) && !imageElement.getAttribute("width") && !imageElement.getAttribute("height")) {
+				let imageData = {}, size = getSize(imageElement);
+				if (imageElement.src && size) {
 					let naturalWidth = imageElement.naturalWidth;
 					let naturalHeight = imageElement.naturalHeight;
 					if (naturalWidth <= 1 && naturalHeight <= 1) {
@@ -172,8 +172,8 @@ this.docHelper = this.docHelper || (() => {
 						naturalHeight = imgElement.height;
 						imgElement.remove();
 					}
-					const clientWidth = imageElement.clientWidth;
-					const clientHeight = imageElement.clientHeight;
+					const clientWidth = size.width;
+					const clientHeight = size.height;
 					if (clientHeight && clientWidth) {
 						imageData = {
 							width: imageElement.width,
@@ -191,12 +191,36 @@ this.docHelper = this.docHelper || (() => {
 		}
 	}
 
-	function isFullBox(imageElement) {
+	function getSize(imageElement) {
 		const computedStyle = getComputedStyle(imageElement);
-		const isContentBox = computedStyle.boxSizing == "content-box";
-		const paddingIsSet = computedStyle.paddingLeft != "0px" || computedStyle.paddingRight != "0px" || computedStyle.paddingBottom != "0px" || computedStyle.paddingTop != "0px";
-		const borderIsSet = computedStyle.borderLeftWidth != "0px" || computedStyle.borderRightWidth != "0px" || computedStyle.borderBottomWidth != "0px" || computedStyle.borderTopWidth != "0px";
-		return !paddingIsSet && (isContentBox || !borderIsSet);
+		let width, height, paddingLeft, paddingRight, paddingTop, paddingBottom, borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidth;
+		if (computedStyle.getPropertyValue("box-sizing") == "border-box") {
+			paddingLeft = paddingRight = paddingTop = paddingBottom = 0;
+			borderLeftWidth = borderRightWidth = borderTopWidth = borderBottomWidth = 0;
+		} else {
+			paddingLeft = getWidth("padding-left", computedStyle);
+			paddingRight = getWidth("padding-right", computedStyle);
+			paddingTop = getWidth("padding-top", computedStyle);
+			paddingBottom = getWidth("padding-bottom", computedStyle);
+			borderLeftWidth = getWidth("border-left-width", computedStyle);
+			borderRightWidth = getWidth("border-right-width", computedStyle);
+			borderTopWidth = getWidth("border-top-width", computedStyle);
+			borderBottomWidth = getWidth("border-bottom-width", computedStyle);
+		}
+		width = imageElement.clientWidth;
+		height = imageElement.clientHeight;
+		if (width >= 0 && height >= 0 && paddingLeft >= 0 && paddingRight >= 0 && paddingTop >= 0 && paddingBottom >= 0 && borderLeftWidth >= 0 && borderRightWidth >= 0 && borderTopWidth >= 0 && borderBottomWidth >= 0) {
+			return {
+				width: width - paddingLeft - paddingRight - borderLeftWidth - borderRightWidth,
+				height: height - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth
+			};
+		}
+	}
+
+	function getWidth(styleName, computedStyle) {
+		if (computedStyle.getPropertyValue(styleName).endsWith("px")) {
+			return parseFloat(computedStyle.getPropertyValue(styleName));
+		}
 	}
 
 	function getResponsiveImageData(doc, options) {