From 20aaf644fa6f580f55b17721815bdd917940e1da Mon Sep 17 00:00:00 2001
From: Yusuke Wada <wada.yusuke@classmethod.jp>
Date: Tue, 14 Sep 2021 18:28:15 +0900
Subject: [PATCH 1/3] useMaxWidth should make height 100% too.

---
 src/utils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/utils.js b/src/utils.js
index 96306f189..09520b9cb 100644
--- a/src/utils.js
+++ b/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;
 };

From a448af2897557d197e1afb04f4942fea7b65543b Mon Sep 17 00:00:00 2001
From: Yusuke Wada <wada.yusuke@classmethod.jp>
Date: Tue, 14 Sep 2021 18:41:51 +0900
Subject: [PATCH 2/3] add spec

---
 src/utils.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils.spec.js b/src/utils.spec.js
index c490099dd..65b861d86 100644
--- a/src/utils.spec.js
+++ b/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%');
   });

From 0839fadbc2e13c1017e412ff1e65f13a038c47ab Mon Sep 17 00:00:00 2001
From: Yusuke Wada <wada.yusuke@classmethod.jp>
Date: Wed, 15 Sep 2021 12:47:24 +0900
Subject: [PATCH 3/3] fix e2e

---
 cypress/integration/rendering/erDiagram.spec.js       | 4 ++--
 cypress/integration/rendering/flowchart-v2.spec.js    | 5 +----
 cypress/integration/rendering/flowchart.spec.js       | 5 +----
 cypress/integration/rendering/gantt.spec.js           | 5 +----
 cypress/integration/rendering/pie.spec.js             | 4 +---
 cypress/integration/rendering/sequencediagram.spec.js | 4 +---
 cypress/integration/rendering/stateDiagram-v2.spec.js | 4 +---
 cypress/integration/rendering/stateDiagram.spec.js    | 4 +---
 8 files changed, 9 insertions(+), 26 deletions(-)

diff --git a/cypress/integration/rendering/erDiagram.spec.js b/cypress/integration/rendering/erDiagram.spec.js
index fc93fb5bb..78a34febc 100644
--- a/cypress/integration/rendering/erDiagram.spec.js
+++ b/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(''));
@@ -174,7 +174,7 @@ describe('Entity Relationship Diagram', () => {
     renderGraph(
       `
     erDiagram
-        PRIVATE_FINANCIAL_INSTITUTION { 
+        PRIVATE_FINANCIAL_INSTITUTION {
           string name
           int    turnover
         }
diff --git a/cypress/integration/rendering/flowchart-v2.spec.js b/cypress/integration/rendering/flowchart-v2.spec.js
index af83eb555..d2548a409 100644
--- a/cypress/integration/rendering/flowchart-v2.spec.js
+++ b/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');
-        // 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);
+        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(''));
diff --git a/cypress/integration/rendering/flowchart.spec.js b/cypress/integration/rendering/flowchart.spec.js
index 4c9056711..2560b7827 100644
--- a/cypress/integration/rendering/flowchart.spec.js
+++ b/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');
-        // 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);
+        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(''));
diff --git a/cypress/integration/rendering/gantt.spec.js b/cypress/integration/rendering/gantt.spec.js
index 0ac1e0f1f..1dcaf1747 100644
--- a/cypress/integration/rendering/gantt.spec.js
+++ b/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');
-        // 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);
+        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(''));
diff --git a/cypress/integration/rendering/pie.spec.js b/cypress/integration/rendering/pie.spec.js
index bbedb9ebd..726fabbd3 100644
--- a/cypress/integration/rendering/pie.spec.js
+++ b/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');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.eq(450);
+        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(''));
diff --git a/cypress/integration/rendering/sequencediagram.spec.js b/cypress/integration/rendering/sequencediagram.spec.js
index 7a35f79c5..cc696c4b8 100644
--- a/cypress/integration/rendering/sequencediagram.spec.js
+++ b/cypress/integration/rendering/sequencediagram.spec.js
@@ -582,9 +582,7 @@ context('Sequence diagram', () => {
       cy.get('svg')
         .should((svg) => {
           expect(svg).to.have.attr('width', '100%');
-          expect(svg).to.have.attr('height');
-          const height = parseFloat(svg.attr('height'));
-          expect(height).to.be.within(920, 960);
+          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(''));
diff --git a/cypress/integration/rendering/stateDiagram-v2.spec.js b/cypress/integration/rendering/stateDiagram-v2.spec.js
index d72ca0b90..5dd502f28 100644
--- a/cypress/integration/rendering/stateDiagram-v2.spec.js
+++ b/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');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(177, 178);
+        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(''));
diff --git a/cypress/integration/rendering/stateDiagram.spec.js b/cypress/integration/rendering/stateDiagram.spec.js
index 971470a75..5790aeb0c 100644
--- a/cypress/integration/rendering/stateDiagram.spec.js
+++ b/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');
-        const height = parseFloat(svg.attr('height'));
-        expect(height).to.be.within(176,178);
+        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(''));