Layout: enforce box limits, reject <0 chartArea (#8193)

* Skip chartArea boxes when chartArea <= 0
* Legend: limit to maxWidth/maxHeight
* Layout: enforce box limits, reject <0 chartArea
* Update legend fixtures

src/core/core.controller.js

@@ -510,8 +510,16 @@ class Chart {
 
 		layouts.update(me, me.width, me.height);
 
+		const area = me.chartArea;
+		const noArea = area.width <= 0 || area.height <= 0;
+
 		me._layers = [];
 		each(me.boxes, (box) => {
+			if (noArea && box.position === 'chartArea') {
+				// Skip drawing and configuring chartArea boxes when chartArea is zero or negative
+				return;
+			}
+
 			// configure is called twice, once in core.scale.update and once here.
 			// Here the boxes are fully updated and at their final positions.
 			if (box.configure) {

src/core/core.layouts.js

@@ -92,7 +92,7 @@ function updateDims(chartArea, params, layout) {
 		// this layout was already counted for, lets first reduce old size
 		chartArea[layout.pos] -= layout.size;
 	}
-	layout.size = layout.horizontal ? box.height : box.width;
+	layout.size = layout.horizontal ? Math.min(layout.height, box.height) : Math.min(layout.width, box.width);
 	chartArea[layout.pos] += layout.size;
 
 	if (box.getPadding) {
@@ -103,8 +103,8 @@ function updateDims(chartArea, params, layout) {
 		maxPadding.right = Math.max(maxPadding.right, boxPadding.right);
 	}
 
-	const newWidth = params.outerWidth - getCombinedMax(maxPadding, chartArea, 'left', 'right');
-	const newHeight = params.outerHeight - getCombinedMax(maxPadding, chartArea, 'top', 'bottom');
+	const newWidth = Math.max(0, params.outerWidth - getCombinedMax(maxPadding, chartArea, 'left', 'right'));
+	const newHeight = Math.max(0, params.outerHeight - getCombinedMax(maxPadding, chartArea, 'top', 'bottom'));
 
 	if (newWidth !== chartArea.w || newHeight !== chartArea.h) {
 		chartArea.w = newWidth;

src/plugins/plugin.legend.js

@@ -5,7 +5,7 @@ import {drawPoint} from '../helpers/helpers.canvas';
 import {
 	callback as call, valueOrDefault, toFont, isObject,
 	toPadding, getRtlAdapter, overrideTextDirection, restoreTextDirection,
-	INFINITY
+	clipArea, unclipArea
 } from '../helpers/index';
 import {_toLeftRightCenter, _alignStartEnd} from '../helpers/helpers.extras';
 /**
@@ -145,8 +145,8 @@ export class Legend extends Element {
 			width = me._fitCols(titleHeight, fontSize, boxWidth, itemHeight) + 10;
 		}
 
-		me.width = Math.min(width, options.maxWidth || INFINITY);
-		me.height = Math.min(height, options.maxHeight || INFINITY);
+		me.width = Math.min(width, options.maxWidth || me.maxWidth);
+		me.height = Math.min(height, options.maxHeight || me.maxHeight);
 	}
 
 	/**
@@ -221,8 +221,14 @@ export class Legend extends Element {
 	}
 
 	draw() {
-		if (this.options.display) {
-			this._draw();
+		const me = this;
+		if (me.options.display) {
+			const ctx = me.ctx;
+			clipArea(ctx, me);
+
+			me._draw();
+
+			unclipArea(ctx);
 		}
 	}