Merge pull request #4925 from plotly/px-autosize

only take container computed size in px
plotly · Jun 16, 2020 · ca04720 · ca04720
2 parents fbb5742 + d21c0bf
commit ca04720
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/src/plots/plots.js b/src/plots/plots.js
@@ -1566,6 +1566,15 @@ plots.supplyLayoutGlobalDefaults = function(layoutIn, layoutOut, formatObj) {
     )(layoutIn, layoutOut, coerce);
 };
 
+function getComputedSize(attr) {
+    return (
+        (typeof attr === 'string') &&
+        (attr.substr(attr.length - 2) === 'px') &&
+        parseFloat(attr)
+    );
+}
+
+
 plots.plotAutoSize = function plotAutoSize(gd, layout, fullLayout) {
     var context = gd._context || {};
     var frameMargins = context.frameMargins;
@@ -1592,8 +1601,8 @@ plots.plotAutoSize = function plotAutoSize(gd, layout, fullLayout) {
         // but don't enforce any ratio restrictions
         var computedStyle = isPlotDiv ? window.getComputedStyle(gd) : {};
 
-        newWidth = parseFloat(computedStyle.width) || parseFloat(computedStyle.maxWidth) || fullLayout.width;
-        newHeight = parseFloat(computedStyle.height) || parseFloat(computedStyle.maxHeight) || fullLayout.height;
+        newWidth = getComputedSize(computedStyle.width) || getComputedSize(computedStyle.maxWidth) || fullLayout.width;
+        newHeight = getComputedSize(computedStyle.height) || getComputedSize(computedStyle.maxHeight) || fullLayout.height;
 
         if(isNumeric(frameMargins) && frameMargins > 0) {
             var factor = 1 - 2 * frameMargins;

diff --git a/test/jasmine/tests/config_test.js b/test/jasmine/tests/config_test.js
@@ -193,6 +193,33 @@ describe('config argument', function() {
 
             testAutosize(autosize, config, layoutHeight, relayoutHeight, done);
         });
+
+        [
+            {display: 'none', dflt: true},
+            {display: '', dflt: false}
+        ].forEach(function(spec) {
+            it('ignores percent sizes when container is hidden', function(done) {
+                gd.style.width = '100%';
+                gd.style.height = '100%';
+                gd.style.display = spec.display;
+
+                var dfltWidth = Plots.layoutAttributes.width.dflt;
+                var dfltHeight = Plots.layoutAttributes.height.dflt;
+
+                Plotly.plot(gd, data, {autosize: true})
+                .then(function() {
+                    if(spec.dflt) {
+                        expect(gd._fullLayout.width).toBe(dfltWidth);
+                        expect(gd._fullLayout.height).toBe(dfltHeight);
+                    } else {
+                        expect(gd._fullLayout.width).not.toBe(dfltWidth);
+                        expect(gd._fullLayout.height).not.toBe(dfltHeight);
+                    }
+                })
+                .catch(failTest)
+                .then(done);
+            });
+        });
     });
 
     describe('showLink attribute', function() {