From 77062a70772ec671f21481f75bd77278992019df Mon Sep 17 00:00:00 2001
From: Jody Klymak <jklymak@gmail.com>
Date: Sun, 2 Aug 2020 08:45:27 -0700
Subject: [PATCH] Backport PR #18142: Fix nbagg in Chrome 84

---
 lib/matplotlib/backends/web_backend/js/mpl.js | 29 ++++++++++++++++---
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/lib/matplotlib/backends/web_backend/js/mpl.js b/lib/matplotlib/backends/web_backend/js/mpl.js
index f7ef50dabff0..9eeb14f399e0 100644
--- a/lib/matplotlib/backends/web_backend/js/mpl.js
+++ b/lib/matplotlib/backends/web_backend/js/mpl.js
@@ -172,17 +172,37 @@ mpl.figure.prototype._init_canvas = function () {
             var entry = entries[i];
             var width, height;
             if (entry.contentBoxSize) {
-                width = entry.contentBoxSize.inlineSize;
-                height = entry.contentBoxSize.blockSize;
+                if (entry.contentBoxSize instanceof Array) {
+                    // Chrome 84 implements new version of spec.
+                    width = entry.contentBoxSize[0].inlineSize;
+                    height = entry.contentBoxSize[0].blockSize;
+                } else {
+                    // Firefox implements old version of spec.
+                    width = entry.contentBoxSize.inlineSize;
+                    height = entry.contentBoxSize.blockSize;
+                }
             } else {
+                // Chrome <84 implements even older version of spec.
                 width = entry.contentRect.width;
                 height = entry.contentRect.height;
             }
 
             // Keep the size of the canvas and rubber band canvas in sync with
             // the canvas container.
-            canvas.setAttribute('width', width * mpl.ratio);
-            canvas.setAttribute('height', height * mpl.ratio);
+            if (entry.devicePixelContentBoxSize) {
+                // Chrome 84 implements new version of spec.
+                canvas.setAttribute(
+                    'width',
+                    entry.devicePixelContentBoxSize[0].inlineSize
+                );
+                canvas.setAttribute(
+                    'height',
+                    entry.devicePixelContentBoxSize[0].blockSize
+                );
+            } else {
+                canvas.setAttribute('width', width * mpl.ratio);
+                canvas.setAttribute('height', height * mpl.ratio);
+            }
             canvas.setAttribute(
                 'style',
                 'width: ' + width + 'px; height: ' + height + 'px;'
@@ -254,6 +274,7 @@ mpl.figure.prototype._init_canvas = function () {
 
     // Disable right mouse context menu.
     this.rubberband_canvas.addEventListener('contextmenu', function (_e) {
+        event.preventDefault();
         return false;
     });