Fix responsive resize on rtl page (#6063)

diff --git a/src/platforms/platform.dom.css b/src/platforms/platform.dom.css
index e0b99a4aad4580fe06c09de1a8392ef1b4a52a83..5e749593eeb65643b8ce9dcf35dab2836b69ffd0 100644 (file)
--- a/src/platforms/platform.dom.css
+++ b/src/platforms/platform.dom.css
@@ -19,6 +19,7 @@
 .chartjs-size-monitor-expand,
 .chartjs-size-monitor-shrink {
        position: absolute;
+       direction: ltr;
        left: 0;
        top: 0;
        right: 0;

diff --git a/test/specs/core.controller.tests.js b/test/specs/core.controller.tests.js
index 819074393b10d68e4eab3467d9d7f794c640504e..ef41f5942b43f448ecdbe5542c66044a7bbb6b7b 100644 (file)
--- a/test/specs/core.controller.tests.js
+++ b/test/specs/core.controller.tests.js
@@ -379,6 +379,46 @@ describe('Chart', function() {
                        });
                });
 
+               it('should resize the canvas when parent is RTL and width changes', function(done) {
+                       var chart = acquireChart({
+                               options: {
+                                       responsive: true,
+                                       maintainAspectRatio: false
+                               }
+                       }, {
+                               canvas: {
+                                       style: ''
+                               },
+                               wrapper: {
+                                       style: 'width: 300px; height: 350px; position: relative; direction: rtl'
+                               }
+                       });
+
+                       expect(chart).toBeChartOfSize({
+                               dw: 300, dh: 350,
+                               rw: 300, rh: 350,
+                       });
+
+                       var wrapper = chart.canvas.parentNode;
+                       wrapper.style.width = '455px';
+                       waitForResize(chart, function() {
+                               expect(chart).toBeChartOfSize({
+                                       dw: 455, dh: 350,
+                                       rw: 455, rh: 350,
+                               });
+
+                               wrapper.style.width = '150px';
+                               waitForResize(chart, function() {
+                                       expect(chart).toBeChartOfSize({
+                                               dw: 150, dh: 350,
+                                               rw: 150, rh: 350,
+                                       });
+
+                                       done();
+                               });
+                       });
+               });
+
                it('should resize the canvas when parent height changes', function(done) {
                        var chart = acquireChart({
                                options: {