Merge pull request #327 from preactjs/content-box

Author: marvinhagemeister

src/adapter/adapter/highlight.ts

@@ -79,14 +79,21 @@ export function createHightlighter(renderer: Renderer) {
 					}
 				}
 
+				let height = size.height;
+				let width = size.width;
+				if (size.boxSizing === "border-box") {
+					height += size.marginTop + size.marginBottom;
+					width += size.marginLeft + size.marginRight;
+				}
+
 				render(
 					h(Highlighter, {
 						label,
 						...size,
 						top: size.top - size.marginTop,
 						left: size.left - size.marginLeft,
-						height: size.height + size.marginTop + size.marginBottom,
-						width: size.width + size.marginLeft + size.marginRight,
+						height,
+						width,
 					}),
 					highlightRef,
 				);

src/adapter/dom.ts

@@ -9,6 +9,7 @@ export function px2Int(input: string | null) {
 }
 
 export interface Measurements {
+	boxSizing: string;
 	top: number;
 	left: number;
 	width: number;
@@ -58,6 +59,7 @@ export function measureNode(dom: Element): Measurements {
 		top,
 		left,
 		bounds: getBoundsState(r),
+		boxSizing: s.boxSizing,
 
 		// Round to at most 2 decimals. This is not 100% accurate,
 		// but good enough for our use case
@@ -85,6 +87,7 @@ export function mergeMeasure(a: Measurements, b: Measurements): Measurements {
 	const height = Math.max(a.top + a.height, b.top + b.height) - top;
 	const width = Math.max(a.left + a.width, b.left + b.width) - left;
 	return {
+		boxSizing: a.boxSizing,
 		top,
 		left,
 		bounds: getBoundsState({

src/view/components/Highlighter.tsx

@@ -23,7 +23,7 @@ export interface Props extends Measurements {
 }
 
 export function Highlighter(props: Props) {
-	const { width, height, top, left, bounds } = props;
+	const { width, height, boxSizing, top, left, bounds } = props;
 
 	const isOutOfBounds =
 		bounds.bottom || bounds.left || bounds.right || bounds.top;
@@ -59,7 +59,15 @@ export function Highlighter(props: Props) {
 							props.paddingRight,
 							props.paddingBottom,
 							props.paddingLeft,
-						)}`}
+						)} ${
+							boxSizing === "content-box"
+								? `height: calc(100% - ${
+										props.paddingTop + props.paddingBottom
+								  }px); width: calc(100% - ${
+										props.paddingLeft + props.paddingRight
+								  }px);`
+								: ""
+						}`}
 					/>
 				</div>
 			</div>