From 92d607ec5408d1ec949ebd95209c84b04c73b944 Mon Sep 17 00:00:00 2001
From: hustcc <i@hust.cc>
Date: Tue, 24 Mar 2020 17:08:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(#2195):=20fix=20autoFit=20=E4=B8=8D?=
 =?UTF-8?q?=E7=94=9F=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/chart/chart.ts                      |  6 ++--
 src/util/dom.ts                         |  8 +++--
 tests/bugs/2195-spec.ts                 | 47 +++++++++++++++++++++++++
 tests/unit/chart/chart-auto-fit-spec.ts |  2 +-
 4 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 tests/bugs/2195-spec.ts

diff --git a/src/chart/chart.ts b/src/chart/chart.ts
index a0d03a9377..f1be373a83 100644
--- a/src/chart/chart.ts
+++ b/src/chart/chart.ts
@@ -53,12 +53,12 @@ export default class Chart extends View {
     ele.appendChild(wrapperElement);
 
     // if autoFit, use the container size, to avoid the graph render twice.
-    const size = getChartSize(wrapperElement, autoFit, width, height);
+    const size = getChartSize(ele, autoFit, width, height);
 
     const G = getEngine(renderer);
 
     const canvas = new G.Canvas({
-      container: wrapperElement,
+      container: ele,
       pixelRatio,
       localRefresh,
       ...size,
@@ -79,7 +79,7 @@ export default class Chart extends View {
       theme,
     });
 
-    this.ele = wrapperElement;
+    this.ele = ele;
     this.canvas = canvas;
     this.width = size.width;
     this.height = size.height;
diff --git a/src/util/dom.ts b/src/util/dom.ts
index 62165bea43..26c890a13c 100644
--- a/src/util/dom.ts
+++ b/src/util/dom.ts
@@ -7,8 +7,12 @@ import { Size } from '../interface';
  * @returns the element width and height
  */
 function getElementSize(ele: HTMLElement): Size {
-  const { width, height } = ele.getBoundingClientRect();
-  return { width, height };
+  const style = getComputedStyle(ele);
+
+  return {
+    width: (ele.clientWidth || parseInt(style.width)) - parseInt(style.paddingLeft) - parseInt(style.paddingRight),
+    height: (ele.clientHeight || parseInt(style.height)) - parseInt(style.paddingTop) - parseInt(style.paddingBottom),
+  }
 }
 
 /**
diff --git a/tests/bugs/2195-spec.ts b/tests/bugs/2195-spec.ts
new file mode 100644
index 0000000000..d3c6a22c2e
--- /dev/null
+++ b/tests/bugs/2195-spec.ts
@@ -0,0 +1,47 @@
+import { Chart } from '../../src';
+import { createDiv } from '../util/dom';
+
+describe('#2195', () => {
+  it('autoFit should eql container', () => {
+    const div = createDiv();
+    div.style.height = '400px';
+
+    const data = [
+      { year: '1991', value: 3 },
+      { year: '1992', value: 4 },
+    ];
+    const chart = new Chart({
+      container: div,
+      autoFit: true,
+      height: 200,
+    });
+
+    chart.data(data);
+    chart.point().position('year*value');
+
+    chart.render();
+    expect(chart.height).toBe(400);
+  });
+
+  it('chart size should ignore padding', () => {
+    const div = createDiv();
+    div.style.height = '400px';
+    div.style.padding = '50px';
+
+    const data = [
+      { year: '1991', value: 3 },
+      { year: '1992', value: 4 },
+    ];
+    const chart = new Chart({
+      container: div,
+      autoFit: true,
+      height: 100,
+    });
+
+    chart.data(data);
+    chart.point().position('year*value');
+
+    chart.render();
+    expect(chart.height).toBe(400);
+  });
+});
diff --git a/tests/unit/chart/chart-auto-fit-spec.ts b/tests/unit/chart/chart-auto-fit-spec.ts
index 2c447624cc..33b88c9265 100644
--- a/tests/unit/chart/chart-auto-fit-spec.ts
+++ b/tests/unit/chart/chart-auto-fit-spec.ts
@@ -21,7 +21,7 @@ describe('Chart autoFit', () => {
     .adjust('stack');
 
   test('autoFit', () => {
-    expect(chart.ele).toBe(div.querySelector('div'));
+    expect(chart.ele).toBe(div);
 
     const { width, height } = chart.ele.getBoundingClientRect();