fix(fabric.Object) bounding box display with skewY when outside group (…

…#7611)

src/shapes/object.class.js

@@ -1384,6 +1384,7 @@
 
     /**
      * Renders controls and borders for the object
+     * the context here is not transformed
      * @param {CanvasRenderingContext2D} ctx Context to render on
      * @param {Object} [styleOverride] properties to override the object style
      */
@@ -1405,7 +1406,7 @@
       if (this.flipX) {
         options.angle -= 180;
       }
-      ctx.rotate(degreesToRadians(options.angle));
+      ctx.rotate(degreesToRadians(this.group ? options.angle : this.angle));
       if (styleOverride.forActiveSelection || this.group) {
         drawBorders && this.drawBordersInGroup(ctx, options, styleOverride);
       }

test/visual/control_rendering.js

@@ -284,5 +284,39 @@
     fabricClass: 'Canvas',
   });
 
+  function controlBoxes(canvas, callback) {
+    canvas.loadFromJSON('{"version":"4.6.0","objects":[{"type":"rect","version":"4.6.0","left":38,"top":201,"width":150,"height":150,"fill":"red","skewX":0.15,"skewY":36},{"type":"rect","version":"4.6.0","left":20,"top":2,"width":150,"height":150,"fill":"#020aed","scaleX":1.24,"scaleY":0.81,"angle":35.95,"skewX":25.46},{"type":"group","version":"4.6.0","left":60.65,"top":28,"width":320.4,"height":335.5,"objects":[{"type":"rect","version":"4.6.0","left":-29.85,"top":-167.75,"width":150,"height":150,"fill":"green","angle":30,"skewX":14.71,"skewY":36},{"type":"rect","version":"4.6.0","left":-29.85,"top":-167.75,"width":150,"height":150,"fill":"yellow","angle":45,"skewX":14.71}]}]}',
+      function() {
+        canvas.renderAll();
+        canvas.getObjects().forEach(function(object) {
+          object.borderScaleFactor = 3;
+          object.transparentCorners = false;
+          object._renderControls(canvas.contextContainer, {
+            borderColor: object.fill,
+            cornerColor: object.fill,
+          });
+          object._objects && object.getObjects().forEach(function(subTarget) {
+            subTarget.borderScaleFactor = 3;
+            subTarget.transparentCorners = false;
+            subTarget._renderControls(canvas.contextContainer, {
+              borderColor: subTarget.fill,
+              cornerColor: subTarget.fill,
+            });
+          });
+        });
+        callback(canvas.lowerCanvasEl);
+      });
+  }
+
+  tests.push({
+    test: 'controlboxes with skewY, green is wrong and needs fix',
+    code: controlBoxes,
+    golden: 'controls12.png',
+    percentage: 0.002,
+    width: 400,
+    height: 600,
+    fabricClass: 'Canvas',
+  });
+
   tests.forEach(visualTestLoop(QUnit));
 })();