nbagg: Ensure elements use content-box sizing.

QuLogic · QuLogic · commit 19a6a84e4180 · 2020-06-01T15:58:46.000-04:00
This reverts the notebook's blanket change of all elements to border-box
sizing.
diff --git a/lib/matplotlib/backends/web_backend/js/mpl.js b/lib/matplotlib/backends/web_backend/js/mpl.js
@@ -46,8 +46,8 @@ mpl.figure = function (figure_id, websocket, ondownload, parent_element) {
     this.image_mode = 'full';
 
     this.root = document.createElement('div');
-    this._root_extra_style(this.root);
     this.root.setAttribute('style', 'display: inline-block');
+    this._root_extra_style(this.root);
 
     parent_element.appendChild(this.root);
 
@@ -113,7 +113,9 @@ mpl.figure.prototype._init_canvas = function () {
     canvas_div.setAttribute(
         'style',
         'border: 1px solid #ddd;' +
+            'box-sizing: content-box;' +
             'clear: both;' +
+            'outline: 0;' +
             'overflow: hidden;' +
             'position: relative;' +
             'resize: both;'
@@ -139,7 +141,7 @@ mpl.figure.prototype._init_canvas = function () {
 
     var canvas = (this.canvas = document.createElement('canvas'));
     canvas.classList.add('mpl-canvas');
-    canvas.setAttribute('style', 'left: 0; top: 0; z-index: 0; outline: 0');
+    canvas.setAttribute('style', 'box-sizing: content-box;');
 
     this.context = canvas.getContext('2d');
 
@@ -159,7 +161,7 @@ mpl.figure.prototype._init_canvas = function () {
     ));
     rubberband_canvas.setAttribute(
         'style',
-        'position: absolute; left: 0; top: 0; z-index: 1;'
+        'box-sizing: content-box; position: absolute; left: 0; top: 0; z-index: 1;'
     );
 
     var resizeObserver = new ResizeObserver(function (entries) {
diff --git a/lib/matplotlib/backends/web_backend/js/nbagg_mpl.js b/lib/matplotlib/backends/web_backend/js/nbagg_mpl.js
@@ -176,6 +176,7 @@ mpl.figure.prototype._remove_fig_handler = function () {
 };
 
 mpl.figure.prototype._root_extra_style = function (el) {
+    el.style.boxSizing = 'content-box'; // override notebook setting of border-box.
     el.addEventListener('remove', this._remove_fig_handler);
 };
 
