Merge pull request #2312 from cm-wada-yusuke/bug/2160-fixed-height-useMaxWith

configureSvgSize should make height 100% when useMaxWidth is true.

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', '465');
+        expect(svg).to.have.attr('height', '100%');
         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,10 +94,7 @@ describe('Flowchart v2', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
+        expect(svg).to.have.attr('height', '100%');
-        // 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,10 +745,7 @@ describe('Graph', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
+        expect(svg).to.have.attr('height', '100%');
-        // 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,10 +202,7 @@ describe('Gantt diagram', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
+        expect(svg).to.have.attr('height', '100%');
-        // 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,9 +50,7 @@ describe('Pie Chart', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
+        expect(svg).to.have.attr('height', '100%');
-        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,9 +635,7 @@ context('Sequence diagram', () => {
       cy.get('svg')
         .should((svg) => {
           expect(svg).to.have.attr('width', '100%');
-          expect(svg).to.have.attr('height');
+          expect(svg).to.have.attr('height', '100%');
-          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,9 +450,7 @@ stateDiagram-v2
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
+        expect(svg).to.have.attr('height', '100%');
-        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,9 +356,7 @@ describe('State diagram', () => {
     cy.get('svg')
       .should((svg) => {
         expect(svg).to.have.attr('width', '100%');
-        expect(svg).to.have.attr('height');
+        expect(svg).to.have.attr('height', '100%');
-        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,12 +778,13 @@ 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%');
   });