restore all tests

Author: lavrton

src/shapes/Text.ts

@@ -250,9 +250,12 @@ export class Text extends Shape<TextConfig> {
       const metrics = this.measureSize('M'); // Use a sample character to get the ascent
 
       baseline = 'alphabetic';
-      translateY =
-        (metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2 +
-        lineHeightPx / 2;
+      const ascent =
+        metrics.fontBoundingBoxAscent ?? metrics.actualBoundingBoxAscent;
+      const descent =
+        metrics.fontBoundingBoxDescent ?? metrics.actualBoundingBoxDescent;
+
+      translateY = (ascent - descent) / 2 + lineHeightPx / 2;
     }
 
     if (direction === RTL) {

test/unit/Label-test.ts

@@ -81,17 +81,10 @@ describe('Label', function () {
 
     var trace = layer.getContext().getTrace(false, true);
 
-    if (isBrowser) {
-      assert.equal(
-        trace,
-        'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-64,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(5,0);lineTo(153,0);lineTo(163,-20);lineTo(173,0);lineTo(322,0);arc(322,5,5,4,0,false);lineTo(327,55);arc(322,55,5,0,1,false);lineTo(5,60);arc(5,55,5,1,3,false);lineTo(0,5);arc(5,5,5,3,4,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,-64,120);font=normal normal 50px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=green;fillText(Hello big world,0,30);restore();restore();'
-      );
-    } else {
-      assert.equal(
-        trace,
-        'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-64,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(5,0);lineTo(153,0);lineTo(163,-20);lineTo(173,0);lineTo(322,0);arc(322,5,5,4,0,false);lineTo(327,55);arc(322,55,5,0,1,false);lineTo(5,60);arc(5,55,5,1,3,false);lineTo(0,5);arc(5,5,5,3,4,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,-64,120);font=normal normal 50px Arial;textBaseline=middle;textAlign=left;translate(0,0);save();fillStyle=green;fillText(Hello big world,0,30);restore();restore();'
-      );
-    }
+    assert.equal(
+      trace,
+      'clearRect(0,0,578,200);save();lineJoin=round;transform(1,0,0,1,-64,120);shadowColor=rgba(0,0,0,0.2);shadowBlur=10;shadowOffsetX=10;shadowOffsetY=10;beginPath();moveTo(5,0);lineTo(153,0);lineTo(163,-20);lineTo(173,0);lineTo(322,0);arc(322,5,5,4,0,false);lineTo(327,55);arc(322,55,5,0,1,false);lineTo(5,60);arc(5,55,5,1,3,false);lineTo(0,5);arc(5,5,5,3,4,false);closePath();fillStyle=#bbb;fill();restore();save();transform(1,0,0,1,-64,120);font=normal normal 50px Arial;textBaseline=alphabetic;textAlign=left;translate(0,0);save();fillStyle=green;fillText(Hello big world,0,47);restore();restore();'
+    );
   });
 
   it('find label class', function () {

test/unit/Shape-test.ts

@@ -15,6 +15,8 @@ import {
   compareCanvases,
 } from './test-utils';
 
+import { getOffsetY } from './Text-test';
+
 describe('Shape', function () {
   // ======================================================
   it('test intersects()', function () {
@@ -861,29 +863,29 @@ describe('Shape', function () {
     context.shadowOffsetX = 20 * Konva.pixelRatio;
     context.shadowOffsetY = 20 * Konva.pixelRatio;
     context.font = 'normal 50px Arial';
-    context.textBaseline = 'middle';
+    context.textBaseline = 'alphabetic';
 
     context.fillStyle = 'green';
-    context.fillText('Test TEXT', 50, 75);
+    context.fillText('Test TEXT', 50, 50 + getOffsetY(context));
 
     context.lineWidth = 2;
     context.strokeStyle = 'black';
-    context.strokeText('Test TEXT', 50, 75);
+    context.strokeText('Test TEXT', 50, 50 + getOffsetY(context));
 
     context.stroke();
     context.fill();
     context.restore();
 
     // draw text again to remove shadow under stroke
     context.font = 'normal 50px Arial';
-    context.textBaseline = 'middle';
-    context.fillText('Test TEXT', 50, 75);
+    context.textBaseline = 'alphabetic';
+    context.fillText('Test TEXT', 50, 50 + getOffsetY(context));
     context.fillStyle = 'green';
-    context.fillText('Test TEXT', 50, 75);
+    context.fillText('Test TEXT', 50, 50 + getOffsetY(context));
 
     context.lineWidth = 2;
     context.strokeStyle = 'black';
-    context.strokeText('Test TEXT', 50, 75);
+    context.strokeText('Test TEXT', 50, 50 + getOffsetY(context));
 
     compareLayerAndCanvas(layer, canvas, 254, 10);
   });