From f152996f11e5ccc48796432c3df1283d7e7750f5 Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Sun, 22 Sep 2013 12:53:05 +0200
Subject: [PATCH 01/10] outputarea.js: Wrap inline SVGs inside an iframe

When multiple inline SVGs are included in a single document,
they share the same parse tree. Therefore, style collisions and
use id collisions can occur and upset the rendering.

This patch wraps each SVG inside an individual iframe, ensuring
that SVG's declarations do not collide.

(The SVG representation is kept as XML and not converted to a binary
format, so I do not think this approach precludes the use of d3.js)

Tested on:
* Chrome Version 29.0.1547.57 Debian 7.1 (217859)
* Mozilla/5.0 (X11; Linux x86_64; rv:17.0) Gecko/20130806 Firefox/17.0 Iceweasel/17.0.8

Closes #1866
---
 IPython/html/static/notebook/js/outputarea.js | 33 +++++++++++++++++--
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index 91886df25..35bd0d868 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -494,9 +494,36 @@ var IPython = (function (IPython) {
 
 
     OutputArea.prototype.append_svg = function (svg, md, element) {
-        var toinsert = $("<div/>").addClass("output_subarea output_svg");
-        toinsert.append(svg);
-        element.append(toinsert);
+        // To avoid style or use collisions between multiple svg figures,
+        // svg figures are wrapped inside an iframe.
+
+        var iframe = $('<iframe/>')
+        iframe.attr('frameborder', 0);
+        iframe.attr('scrolling', 'no');
+
+        var wrapper = $("<div/>").addClass("output_subarea output_svg");
+        wrapper.append(svg);
+
+        // Once the iframe is loaded, the svg is dynamically inserted
+        iframe.on('load', function() {
+            // Set the iframe height and width to fit the svg
+            // (the +10 pixel offset handles the default body margins
+            // in Chrome)
+            var svg = wrapper.children()[0];
+            iframe.width(svg.width.baseVal.value + 10);
+            iframe.height(svg.height.baseVal.value + 10);
+
+            // Workaround needed by Firefox, to properly render svg inside iframes,
+            // see http://stackoverflow.com/questions/10177190/svg-dynamically-added-to-iframe-does-not-render-correctly
+            iframe.contents()[0].open();
+            iframe.contents()[0].close();
+
+            // Insert the svg inside the iframe
+            var body = iframe.contents().find('body');
+            body.html(wrapper.html());
+        });
+
+        element.append(iframe);
     };
 
 

From 3e0a69ba68c22c39d952c330f620b9a8bcbfc4ad Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Wed, 25 Sep 2013 16:22:26 +0200
Subject: [PATCH 02/10] SVG scoping must be explicitly enabled by the user

SVG scoping is disabled by default, to enable it the user
must call the core.display.SVG constructor with the scoped=True
keyword parameter.
---
 IPython/html/static/notebook/js/outputarea.js | 60 ++++++++++---------
 1 file changed, 32 insertions(+), 28 deletions(-)

diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index 35bd0d868..4f4e72403 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -494,36 +494,40 @@ var IPython = (function (IPython) {
 
 
     OutputArea.prototype.append_svg = function (svg, md, element) {
-        // To avoid style or use collisions between multiple svg figures,
-        // svg figures are wrapped inside an iframe.
-
-        var iframe = $('<iframe/>')
-        iframe.attr('frameborder', 0);
-        iframe.attr('scrolling', 'no');
-
-        var wrapper = $("<div/>").addClass("output_subarea output_svg");
+        var wrapper = $('<div/>').addClass('output_subarea output_svg');
         wrapper.append(svg);
+        var svg_element = wrapper.children()[0];
+
+        if (svg_element.classList.contains('ipython-scoped')) {
+            // To avoid style or use collisions between multiple svg figures,
+            // svg figures are wrapped inside an iframe.
+            var iframe = $('<iframe/>')
+                iframe.attr('frameborder', 0);
+            iframe.attr('scrolling', 'no');
+
+            // Once the iframe is loaded, the svg is dynamically inserted
+            iframe.on('load', function() {
+                // Set the iframe height and width to fit the svg
+                // (the +10 pixel offset handles the default body margins
+                // in Chrome)
+                iframe.width(svg_element.width.baseVal.value + 10);
+                iframe.height(svg_element.height.baseVal.value + 10);
+
+                // Workaround needed by Firefox, to properly render svg inside
+                // iframes, see http://stackoverflow.com/questions/10177190/
+                // svg-dynamically-added-to-iframe-does-not-render-correctly
+                iframe.contents()[0].open();
+                iframe.contents()[0].close();
+
+                // Insert the svg inside the iframe
+                var body = iframe.contents().find('body');
+                body.html(wrapper.html());
+            });
 
-        // Once the iframe is loaded, the svg is dynamically inserted
-        iframe.on('load', function() {
-            // Set the iframe height and width to fit the svg
-            // (the +10 pixel offset handles the default body margins
-            // in Chrome)
-            var svg = wrapper.children()[0];
-            iframe.width(svg.width.baseVal.value + 10);
-            iframe.height(svg.height.baseVal.value + 10);
-
-            // Workaround needed by Firefox, to properly render svg inside iframes,
-            // see http://stackoverflow.com/questions/10177190/svg-dynamically-added-to-iframe-does-not-render-correctly
-            iframe.contents()[0].open();
-            iframe.contents()[0].close();
-
-            // Insert the svg inside the iframe
-            var body = iframe.contents().find('body');
-            body.html(wrapper.html());
-        });
-
-        element.append(iframe);
+            element.append(iframe);
+        } else {
+            element.append(wrapper);
+        }
     };
 
 

From 4c49abd2aeb0b3194c0a8b947d83a1bcdaefc943 Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Wed, 25 Sep 2013 16:47:17 +0200
Subject: [PATCH 03/10] Fix style and typo

---
 IPython/html/static/notebook/js/outputarea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index 4f4e72403..b89b1f5cb 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -502,7 +502,7 @@ var IPython = (function (IPython) {
             // To avoid style or use collisions between multiple svg figures,
             // svg figures are wrapped inside an iframe.
             var iframe = $('<iframe/>')
-                iframe.attr('frameborder', 0);
+            iframe.attr('frameborder', 0);
             iframe.attr('scrolling', 'no');
 
             // Once the iframe is loaded, the svg is dynamically inserted

From 86dce97804662af98d95bef99ec8661cd28312c4 Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Wed, 25 Sep 2013 19:15:14 +0200
Subject: [PATCH 04/10] SVG: scoped is passed as metadata

Instead of using a svg class to pass scope information
use notebook metadata.

Suggested by Matthias Bussonnier
---
 IPython/html/static/notebook/js/outputarea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index b89b1f5cb..9bd501efc 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -498,7 +498,7 @@ var IPython = (function (IPython) {
         wrapper.append(svg);
         var svg_element = wrapper.children()[0];
 
-        if (svg_element.classList.contains('ipython-scoped')) {
+        if (md['scoped']) {
             // To avoid style or use collisions between multiple svg figures,
             // svg figures are wrapped inside an iframe.
             var iframe = $('<iframe/>')

From a8e39d6acc2ee4e6566cd5b6f8f29b7b975456d9 Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Mon, 7 Oct 2013 11:59:04 +0200
Subject: [PATCH 05/10] Support isolated metadata tag for any content

Any content whose metadata contains an `isolated` tag will be isolated
from the rest of the document.

The current implementation wraps isolated content into an iframe.
---
 IPython/html/static/notebook/js/outputarea.js | 95 +++++++++++--------
 1 file changed, 54 insertions(+), 41 deletions(-)

diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index 9bd501efc..b19312e72 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -327,7 +327,51 @@ var IPython = (function (IPython) {
         }
         return oa;
     };
-    
+
+
+    OutputArea.prototype.create_output_subarea = function(md, classes) {
+        var subarea = $('<div/>').addClass('output_subarea').addClass(classes);
+        if (md['isolated']) {
+            // Create an iframe to isolate the subarea from the rest of the
+            // document
+            var iframe = $('<iframe/>');
+            iframe.attr('frameborder', 0);
+            iframe.attr('scrolling', 'auto');
+
+            // Once the iframe is loaded, the subarea is dynamically inserted
+            iframe.on('load', function() {
+                // Workaround needed by Firefox, to properly render svg inside
+                // iframes, see http://stackoverflow.com/questions/10177190/
+                // svg-dynamically-added-to-iframe-does-not-render-correctly
+                this.contentDocument.open();
+
+                // Insert the subarea into the iframe
+                // We must directly write the html. When using Jquery's append
+                // method, javascript is evaluated in the parent document and
+                // not in the iframe document.
+                this.contentDocument.write(subarea.html());
+
+                this.contentDocument.close();
+
+                var body = this.contentDocument.body;
+                // Adjust the iframe width and height
+                iframe.width(body.scrollWidth + 'px');
+                iframe.height(body.scrollHeight + 'px');
+            });
+
+            // Elements should be appended to the inner subarea and not to the
+            // iframe
+            iframe.append = function(that) {
+                subarea.append(that);
+            };
+
+            return iframe;
+        } else {
+            return subarea;
+        }
+    }
+
+
     OutputArea.prototype._append_javascript_error = function (err, container) {
         // display a message when a javascript error occurs in display output
         var msg = "Javascript error adding output!"
@@ -457,7 +501,7 @@ var IPython = (function (IPython) {
 
 
     OutputArea.prototype.append_html = function (html, md, element) {
-        var toinsert = $("<div/>").addClass("output_subarea output_html rendered_html");
+        var toinsert = this.create_output_subarea(md, "output_html rendered_html");
         toinsert.append(html);
         element.append(toinsert);
     };
@@ -465,7 +509,7 @@ var IPython = (function (IPython) {
 
     OutputArea.prototype.append_javascript = function (js, md, container) {
         // We just eval the JS code, element appears in the local scope.
-        var element = $("<div/>").addClass("output_subarea");
+        var element = this.create_output_subarea(md, "");
         container.append(element);
         // Div for js shouldn't be drawn, as it will add empty height to the area.
         container.hide();
@@ -480,7 +524,7 @@ var IPython = (function (IPython) {
 
 
     OutputArea.prototype.append_text = function (data, md, element, extra_class) {
-        var toinsert = $("<div/>").addClass("output_subarea output_text");
+        var toinsert = this.create_output_subarea(md, "output_text");
         // escape ANSI & HTML specials in plaintext:
         data = utils.fixConsole(data);
         data = utils.fixCarriageReturn(data);
@@ -494,40 +538,9 @@ var IPython = (function (IPython) {
 
 
     OutputArea.prototype.append_svg = function (svg, md, element) {
-        var wrapper = $('<div/>').addClass('output_subarea output_svg');
-        wrapper.append(svg);
-        var svg_element = wrapper.children()[0];
-
-        if (md['scoped']) {
-            // To avoid style or use collisions between multiple svg figures,
-            // svg figures are wrapped inside an iframe.
-            var iframe = $('<iframe/>')
-            iframe.attr('frameborder', 0);
-            iframe.attr('scrolling', 'no');
-
-            // Once the iframe is loaded, the svg is dynamically inserted
-            iframe.on('load', function() {
-                // Set the iframe height and width to fit the svg
-                // (the +10 pixel offset handles the default body margins
-                // in Chrome)
-                iframe.width(svg_element.width.baseVal.value + 10);
-                iframe.height(svg_element.height.baseVal.value + 10);
-
-                // Workaround needed by Firefox, to properly render svg inside
-                // iframes, see http://stackoverflow.com/questions/10177190/
-                // svg-dynamically-added-to-iframe-does-not-render-correctly
-                iframe.contents()[0].open();
-                iframe.contents()[0].close();
-
-                // Insert the svg inside the iframe
-                var body = iframe.contents().find('body');
-                body.html(wrapper.html());
-            });
-
-            element.append(iframe);
-        } else {
-            element.append(wrapper);
-        }
+        var toinsert = this.create_output_subarea(md, "output_svg");
+        toinsert.append(svg);
+        element.append(toinsert);
     };
 
 
@@ -559,7 +572,7 @@ var IPython = (function (IPython) {
 
 
     OutputArea.prototype.append_png = function (png, md, element) {
-        var toinsert = $("<div/>").addClass("output_subarea output_png");
+        var toinsert = this.create_output_subarea(md, "output_png");
         var img = $("<img/>").attr('src','data:image/png;base64,'+png);
         if (md['height']) {
             img.attr('height', md['height']);
@@ -574,7 +587,7 @@ var IPython = (function (IPython) {
 
 
     OutputArea.prototype.append_jpeg = function (jpeg, md, element) {
-        var toinsert = $("<div/>").addClass("output_subarea output_jpeg");
+        var toinsert = this.create_output_subarea(md, "output_jpeg");
         var img = $("<img/>").attr('src','data:image/jpeg;base64,'+jpeg);
         if (md['height']) {
             img.attr('height', md['height']);
@@ -591,7 +604,7 @@ var IPython = (function (IPython) {
     OutputArea.prototype.append_latex = function (latex, md, element) {
         // This method cannot do the typesetting because the latex first has to
         // be on the page.
-        var toinsert = $("<div/>").addClass("output_subarea output_latex");
+        var toinsert = this.create_output_subarea(md, "output_latex");
         toinsert.append(latex);
         element.append(toinsert);
     };

From c72d4fead0dc9b8c9f55a0ed13abfb60d7b66491 Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Thu, 10 Oct 2013 10:04:37 +0200
Subject: [PATCH 06/10] Notebook isolated content: fix firefox extra-space
 issue

In Firefox, if the iframe initial height is set to 0, the reported
scrollHeight is too large. Workaround: set the initial height to 1.
---
 IPython/html/static/notebook/js/outputarea.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index b19312e72..5b17d1ab8 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -335,6 +335,7 @@ var IPython = (function (IPython) {
             // Create an iframe to isolate the subarea from the rest of the
             // document
             var iframe = $('<iframe/>');
+            iframe.attr('height', 1);
             iframe.attr('frameborder', 0);
             iframe.attr('scrolling', 'auto');
 

From bbfcbf40eb9f9f191218b57e3657e2ee1b298d6a Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Thu, 24 Oct 2013 00:39:32 +0200
Subject: [PATCH 07/10] Add casperjs test for isolated SVGs

---
 .../tests/casperjs/test_cases/isolated_svg.js | 42 +++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 IPython/html/tests/casperjs/test_cases/isolated_svg.js

diff --git a/IPython/html/tests/casperjs/test_cases/isolated_svg.js b/IPython/html/tests/casperjs/test_cases/isolated_svg.js
new file mode 100644
index 000000000..8ee7a1aa7
--- /dev/null
+++ b/IPython/html/tests/casperjs/test_cases/isolated_svg.js
@@ -0,0 +1,42 @@
+//
+// Test svg isolation
+// An object whoose metadata contains an "isolated" tag must be isolated
+// from the rest of the document. In the case of inline SVGs, this means
+// that multiple SVGs have different scopes. This test checks that there
+// are no CSS leaks between two isolated SVGs.
+//
+
+casper.notebook_test(function () {
+    this.evaluate(function () {
+        var cell = IPython.notebook.get_cell(0);
+        cell.set_text( "from IPython.core.display import SVG, display_svg\n"
+                     + "s1 = '''<svg width='1cm' height='1cm' viewBox='0 0 1000 500'>"
+                     + "<defs><style>rect {fill:red;}; </style></defs>"
+                     + "<rect id='r1' x='200' y='100' width='600' height='300' /></svg>"
+                     + "'''\n"
+                     + "s2 = '''<svg width='1cm' height='1cm' viewBox='0 0 1000 500'>"
+                     + "<rect id='r2' x='200' y='100' width='600' height='300' /></svg>"
+                     + "'''\n"
+                     + "display_svg(SVG(s1), metadata=dict(isolated=True))\n"
+                     + "display_svg(SVG(s2), metadata=dict(isolated=True))\n"
+            );
+        cell.execute();
+    });
+
+    this.wait_for_output(0);
+
+    this.then(function () {
+        var colors = this.evaluate(function () {
+            var colors = [];
+            var ifr = __utils__.findAll("iframe");
+            var svg1 = ifr[0].contentWindow.document.getElementById('r1');
+            colors[0] = window.getComputedStyle(svg1)["fill"];
+            var svg2 = ifr[1].contentWindow.document.getElementById('r2');
+            colors[1] = window.getComputedStyle(svg2)["fill"];
+            return colors;
+        });
+
+        this.test.assertEquals(colors[0], '#ff0000', 'First svg should be red');
+        this.test.assertEquals(colors[1], '#000000', 'Second svg should be black');
+    });
+});

From b1eba452c9393978eefe7603cbc26c92814c24af Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Thu, 24 Oct 2013 01:04:27 +0200
Subject: [PATCH 08/10] Fix typo.

---
 IPython/html/tests/casperjs/test_cases/isolated_svg.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/IPython/html/tests/casperjs/test_cases/isolated_svg.js b/IPython/html/tests/casperjs/test_cases/isolated_svg.js
index 8ee7a1aa7..eb0156cc8 100644
--- a/IPython/html/tests/casperjs/test_cases/isolated_svg.js
+++ b/IPython/html/tests/casperjs/test_cases/isolated_svg.js
@@ -1,6 +1,6 @@
 //
 // Test svg isolation
-// An object whoose metadata contains an "isolated" tag must be isolated
+// An object whose metadata contains an "isolated" tag must be isolated
 // from the rest of the document. In the case of inline SVGs, this means
 // that multiple SVGs have different scopes. This test checks that there
 // are no CSS leaks between two isolated SVGs.

From fcbd398ad297a47c2727dd1481795b0b42b021fa Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Tue, 29 Oct 2013 23:55:39 +0100
Subject: [PATCH 09/10] Preserve layout for large isolated objects

---
 IPython/html/static/notebook/js/outputarea.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index 5b17d1ab8..d98b4b023 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -334,8 +334,9 @@ var IPython = (function (IPython) {
         if (md['isolated']) {
             // Create an iframe to isolate the subarea from the rest of the
             // document
-            var iframe = $('<iframe/>');
+            var iframe = $('<iframe/>').addClass('box-flex1');
             iframe.attr('height', 1);
+            iframe.css({'width':'100%', 'display':'block'});
             iframe.attr('frameborder', 0);
             iframe.attr('scrolling', 'auto');
 
@@ -355,8 +356,7 @@ var IPython = (function (IPython) {
                 this.contentDocument.close();
 
                 var body = this.contentDocument.body;
-                // Adjust the iframe width and height
-                iframe.width(body.scrollWidth + 'px');
+                // Adjust the iframe height automatically
                 iframe.height(body.scrollHeight + 'px');
             });
 

From 8253998833a593dec044ad0d7407f556db0f13c1 Mon Sep 17 00:00:00 2001
From: Pablo de Oliveira <pablo@sifflez.org>
Date: Wed, 30 Oct 2013 00:05:33 +0100
Subject: [PATCH 10/10] Set both height and width using css

---
 IPython/html/static/notebook/js/outputarea.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/IPython/html/static/notebook/js/outputarea.js b/IPython/html/static/notebook/js/outputarea.js
index d98b4b023..66ece11db 100644
--- a/IPython/html/static/notebook/js/outputarea.js
+++ b/IPython/html/static/notebook/js/outputarea.js
@@ -335,8 +335,7 @@ var IPython = (function (IPython) {
             // Create an iframe to isolate the subarea from the rest of the
             // document
             var iframe = $('<iframe/>').addClass('box-flex1');
-            iframe.attr('height', 1);
-            iframe.css({'width':'100%', 'display':'block'});
+            iframe.css({'height':1, 'width':'100%', 'display':'block'});
             iframe.attr('frameborder', 0);
             iframe.attr('scrolling', 'auto');