Kaynağa Gözat

don't change box-sizing to compute size

Gildas 7 yıl önce
ebeveyn
işleme
3aa82fa13e
1 değiştirilmiş dosya ile 21 ekleme ve 17 silme
  1. 21 17
      lib/single-file/doc-helper.js

+ 21 - 17
lib/single-file/doc-helper.js

@@ -282,27 +282,31 @@ this.docHelper = this.docHelper || (() => {
 	}
 
 	function getSize(win, imageElement) {
-		const boxSizing = imageElement.style.getPropertyValue("box-sizing");
-		const boxSizingImportant = imageElement.style.getPropertyPriority("box-sizing");
-		imageElement.style.setProperty("box-sizing", "border-box", "important");
 		const computedStyle = win.getComputedStyle(imageElement);
-		const paddingLeft = getWidth("padding-left", computedStyle);
-		const paddingRight = getWidth("padding-right", computedStyle);
-		const paddingTop = getWidth("padding-top", computedStyle);
-		const paddingBottom = getWidth("padding-bottom", computedStyle);
-		const width = imageElement.clientWidth;
-		const height = imageElement.clientHeight;
-		if (boxSizing) {
-			imageElement.style.setProperty("box-sizing", boxSizing, boxSizingImportant);
+		let paddingLeft, paddingRight, paddingTop, paddingBottom, borderLeft, borderRight, borderTop, borderBottom;
+		if (computedStyle.boxSizing == "content-box") {
+			paddingLeft = 0;
+			paddingRight = 0;
+			paddingTop = 0;
+			paddingBottom = 0;
 		} else {
-			imageElement.style.removeProperty("box-sizing");
+			paddingLeft = getWidth("padding-left", computedStyle);
+			paddingRight = getWidth("padding-right", computedStyle);
+			paddingTop = getWidth("padding-top", computedStyle);
+			paddingBottom = getWidth("padding-bottom", computedStyle);
 		}
-		if (width >= 0 && height >= 0 && paddingLeft >= 0 && paddingRight >= 0 && paddingTop >= 0 && paddingBottom >= 0) {
+		borderLeft = getWidth("border-left-width", computedStyle);
+		borderRight = getWidth("border-right-width", computedStyle);
+		borderTop = getWidth("border-top-width", computedStyle);
+		borderBottom = getWidth("border-bottom-width", computedStyle);
+		const width = imageElement.clientWidth;
+		const height = imageElement.clientHeight;
+		if (width >= 0 && height >= 0 && paddingLeft >= 0 && paddingRight >= 0 && paddingTop >= 0 && paddingBottom >= 0 && borderLeft >= 0 && borderRight >= 0 && borderTop >= 0 && borderBottom >= 0) {
 			return {
-				width: (paddingLeft || paddingRight) && (width - paddingLeft - paddingRight) + "px",
-				pxWidth: Math.round(width - paddingLeft - paddingRight),
-				height: (paddingLeft || paddingRight) && (height - paddingTop - paddingBottom) + "px",
-				pxHeight: Math.round(height - paddingTop - paddingBottom),
+				width: (paddingLeft || paddingRight || borderLeft || borderRight) && (width - paddingLeft - paddingRight - borderLeft - borderRight) + "px",
+				pxWidth: Math.round(width - paddingLeft - paddingRight - borderLeft - borderRight),
+				height: (paddingTop || paddingBottom || borderTop || borderBottom) && (height - paddingTop - paddingBottom - borderTop - borderBottom) + "px",
+				pxHeight: Math.round(height - paddingTop - paddingBottom - borderTop - borderBottom),
 			};
 		}
 	}