Reverting PR #2312

cypress/integration/rendering/erDiagram.spec.js

@@ -114,7 +114,7 @@ describe('Entity Relationship Diagram', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height', '465');
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

cypress/integration/rendering/flowchart-v2.spec.js

@@ -94,7 +94,10 @@ describe('Flowchart v2', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(446 * .95, 446 * 1.05);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

cypress/integration/rendering/flowchart.spec.js

@@ -745,7 +745,10 @@ describe('Graph', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(446 * .95, 446 * 1.05);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

cypress/integration/rendering/gantt.spec.js

@@ -202,7 +202,10 @@ describe('Gantt diagram', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        // use within because the absolute value can be slightly different depending on the environment ±5%
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(484 * .95, 484 * 1.05);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

cypress/integration/rendering/pie.spec.js

@@ -50,7 +50,9 @@ describe('Pie Chart', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.eq(450);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

cypress/integration/rendering/sequencediagram.spec.js

@@ -635,7 +635,9 @@ context('Sequence diagram', () => {
       cy.get('svg')
         .should((svg) => {
           expect(svg).to.have.attr('width', '100%');
-          expect(svg).to.have.attr('height', '100%');
+          expect(svg).to.have.attr('height');
+          const height = parseFloat(svg.attr('height'));
+          expect(height).to.be.within(920, 960);
           const style = svg.attr('style');
           expect(style).to.match(/^max-width: [\d.]+px;$/);
           const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -450,7 +450,9 @@ stateDiagram-v2
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(177, 178);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

cypress/integration/rendering/stateDiagram.spec.js

@@ -356,7 +356,9 @@ describe('State diagram', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height', '100%');
+        expect(svg).to.have.attr('height');
+        const height = parseFloat(svg.attr('height'));
+        expect(height).to.be.within(176,178);
         const style = svg.attr('style');
         expect(style).to.match(/^max-width: [\d.]+px;$/);
         const maxWidthValue = parseFloat(style.match(/[\d.]+/g).join(''));

src/utils.js

@@ -778,13 +778,12 @@ const d3Attrs = function (d3Elem, attrs) {
 
 export const calculateSvgSizeAttrs = function (height, width, useMaxWidth) {
   let attrs = new Map();
+  attrs.set('height', height);
   if (useMaxWidth) {
     attrs.set('width', '100%');
-    attrs.set('height', '100%');
     attrs.set('style', `max-width: ${width}px;`);
   } else {
     attrs.set('width', width);
-    attrs.set('height', height);
   }
   return attrs;
 };

src/utils.spec.js

@@ -243,7 +243,7 @@ describe('when formatting urls', function() {
 describe('when calculating SVG size', function() {
   it('should return width 100% when useMaxWidth is true', function () {
     const attrs = utils.calculateSvgSizeAttrs(100, 200, true);
-    expect(attrs.get('height')).toEqual('100%');
+    expect(attrs.get('height')).toEqual(100);
     expect(attrs.get('style')).toEqual('max-width: 200px;');
     expect(attrs.get('width')).toEqual('100%');
   });