Merge pull request #4250 from pablooliveira/wrap-svg-in-iframes

outputarea.js: Wrap inline SVGs inside an iframe

IPython/html/tests/casperjs/test_cases/isolated_svg.js

@@ -0,0 +1,42 b''
+//
+// Test svg isolation
+// 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.
+//
+
+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');
+    });
+});

IPython/html/static/notebook/js/outputarea.js

@@ -1,684 +1,728 b''
 //----------------------------------------------------------------------------
 //  Copyright (C) 2008 The IPython Development Team
 //
 //  Distributed under the terms of the BSD License.  The full license is in
 //  the file COPYING, distributed as part of this software.
 //----------------------------------------------------------------------------
 
 //============================================================================
 // OutputArea
 //============================================================================
 
 /**
  * @module IPython
  * @namespace IPython
  * @submodule OutputArea
  */
 var IPython = (function (IPython) {
     "use strict";
 
     var utils = IPython.utils;
 
     /**
      * @class OutputArea
      *
      * @constructor
      */
 
     var OutputArea = function (selector, prompt_area) {
         this.selector = selector;
         this.wrapper = $(selector);
         this.outputs = [];
         this.collapsed = false;
         this.scrolled = false;
         this.clear_queued = null;
         if (prompt_area === undefined) {
             this.prompt_area = true;
         } else {
             this.prompt_area = prompt_area;
         }
         this.create_elements();
         this.style();
         this.bind_events();
     };
     
     OutputArea.prototype.create_elements = function () {
         this.element = $("<div/>");
         this.collapse_button = $("<div/>");
         this.prompt_overlay = $("<div/>");
         this.wrapper.append(this.prompt_overlay);
         this.wrapper.append(this.element);
         this.wrapper.append(this.collapse_button);
     };
 
 
     OutputArea.prototype.style = function () {
         this.collapse_button.hide();
         this.prompt_overlay.hide();
         
         this.wrapper.addClass('output_wrapper');
         this.element.addClass('output');
         
         this.collapse_button.addClass("btn output_collapsed");
         this.collapse_button.attr('title', 'click to expand output');
         this.collapse_button.html('. . .');
         
         this.prompt_overlay.addClass('out_prompt_overlay prompt');
         this.prompt_overlay.attr('title', 'click to expand output; double click to hide output');
         
         this.collapse();
     };
 
     /**
      * Should the OutputArea scroll?
      * Returns whether the height (in lines) exceeds a threshold.
      *
      * @private
      * @method _should_scroll
      * @param [lines=100]{Integer}
      * @return {Bool}
      *
      */
     OutputArea.prototype._should_scroll = function (lines) {
         if (lines <=0 ){ return }
         if (!lines) {
             lines = 100;
         }
         // line-height from http://stackoverflow.com/questions/1185151
         var fontSize = this.element.css('font-size');
         var lineHeight = Math.floor(parseInt(fontSize.replace('px','')) * 1.5);
         
         return (this.element.height() > lines * lineHeight);
     };
 
 
     OutputArea.prototype.bind_events = function () {
         var that = this;
         this.prompt_overlay.dblclick(function () { that.toggle_output(); });
         this.prompt_overlay.click(function () { that.toggle_scroll(); });
 
         this.element.resize(function () {
             // FIXME: Firefox on Linux misbehaves, so automatic scrolling is disabled
             if ( IPython.utils.browser[0] === "Firefox" ) {
                 return;
             }
             // maybe scroll output,
             // if it's grown large enough and hasn't already been scrolled.
             if ( !that.scrolled && that._should_scroll(OutputArea.auto_scroll_threshold)) {
                 that.scroll_area();
             }
         });
         this.collapse_button.click(function () {
             that.expand();
         });
     };
 
 
     OutputArea.prototype.collapse = function () {
         if (!this.collapsed) {
             this.element.hide();
             this.prompt_overlay.hide();
             if (this.element.html()){
                 this.collapse_button.show();
             }
             this.collapsed = true;
         }
     };
 
 
     OutputArea.prototype.expand = function () {
         if (this.collapsed) {
             this.collapse_button.hide();
             this.element.show();
             this.prompt_overlay.show();
             this.collapsed = false;
         }
     };
 
 
     OutputArea.prototype.toggle_output = function () {
         if (this.collapsed) {
             this.expand();
         } else {
             this.collapse();
         }
     };
 
 
     OutputArea.prototype.scroll_area = function () {
         this.element.addClass('output_scroll');
         this.prompt_overlay.attr('title', 'click to unscroll output; double click to hide');
         this.scrolled = true;
     };
 
 
     OutputArea.prototype.unscroll_area = function () {
         this.element.removeClass('output_scroll');
         this.prompt_overlay.attr('title', 'click to scroll output; double click to hide');
         this.scrolled = false;
     };
 
     /**
      * Threshold to trigger autoscroll when the OutputArea is resized,
      * typically when new outputs are added.
      *
      * Behavior is undefined if autoscroll is lower than minimum_scroll_threshold,
      * unless it is < 0, in which case autoscroll will never be triggered
      *
      * @property auto_scroll_threshold
      * @type Number
      * @default 100
      *
      **/
     OutputArea.auto_scroll_threshold = 100;
 
 
     /**
      * Lower limit (in lines) for OutputArea to be made scrollable. OutputAreas
      * shorter than this are never scrolled.
      *
      * @property minimum_scroll_threshold
      * @type Number
      * @default 20
      *
      **/
     OutputArea.minimum_scroll_threshold = 20;
 
 
     /**
      *
      * Scroll OutputArea if height supperior than a threshold (in lines).
      *
      * Threshold is a maximum number of lines. If unspecified, defaults to
      * OutputArea.minimum_scroll_threshold.
      *
      * Negative threshold will prevent the OutputArea from ever scrolling.
      *
      * @method scroll_if_long
      *
      * @param [lines=20]{Number} Default to 20 if not set,
      * behavior undefined for value of `0`.
      *
      **/
     OutputArea.prototype.scroll_if_long = function (lines) {
         var n = lines | OutputArea.minimum_scroll_threshold;
         if(n <= 0){
             return
         }
 
         if (this._should_scroll(n)) {
             // only allow scrolling long-enough output
             this.scroll_area();
         }
     };
 
 
     OutputArea.prototype.toggle_scroll = function () {
         if (this.scrolled) {
             this.unscroll_area();
         } else {
             // only allow scrolling long-enough output
             this.scroll_if_long();
         }
     };
 
 
     // typeset with MathJax if MathJax is available
     OutputArea.prototype.typeset = function () {
         if (window.MathJax){
             MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
         }
     };
 
 
     OutputArea.prototype.handle_output = function (msg) {
         var json = {};
         var msg_type = json.output_type = msg.header.msg_type;
         var content = msg.content;
         if (msg_type === "stream") {
             json.text = content.data;
             json.stream = content.name;
         } else if (msg_type === "display_data") {
             json = this.convert_mime_types(json, content.data);
             json.metadata = this.convert_mime_types({}, content.metadata);
         } else if (msg_type === "pyout") {
             json.prompt_number = content.execution_count;
             json = this.convert_mime_types(json, content.data);
             json.metadata = this.convert_mime_types({}, content.metadata);
         } else if (msg_type === "pyerr") {
             json.ename = content.ename;
             json.evalue = content.evalue;
             json.traceback = content.traceback;
         }
         // append with dynamic=true
         this.append_output(json, true);
     };
 
 
     OutputArea.prototype.convert_mime_types = function (json, data) {
         if (data === undefined) {
             return json;
         }
         if (data['text/plain'] !== undefined) {
             json.text = data['text/plain'];
         }
         if (data['text/html'] !== undefined) {
             json.html = data['text/html'];
         }
         if (data['image/svg+xml'] !== undefined) {
             json.svg = data['image/svg+xml'];
         }
         if (data['image/png'] !== undefined) {
             json.png = data['image/png'];
         }
         if (data['image/jpeg'] !== undefined) {
             json.jpeg = data['image/jpeg'];
         }
         if (data['text/latex'] !== undefined) {
             json.latex = data['text/latex'];
         }
         if (data['application/json'] !== undefined) {
             json.json = data['application/json'];
         }
         if (data['application/javascript'] !== undefined) {
             json.javascript = data['application/javascript'];
         }
         return json;
     };
 
 
     OutputArea.prototype.append_output = function (json, dynamic) {
         // If dynamic is true, javascript output will be eval'd.
         this.expand();
         // Clear the output if clear is queued.
         var needs_height_reset = false;
         if (this.clear_queued) {
             this.clear_output(false);
             needs_height_reset = true;
         }
 
         if (json.output_type === 'pyout') {
             this.append_pyout(json, dynamic);
         } else if (json.output_type === 'pyerr') {
             this.append_pyerr(json);
         } else if (json.output_type === 'display_data') {
             this.append_display_data(json, dynamic);
         } else if (json.output_type === 'stream') {
             this.append_stream(json);
         }
         this.outputs.push(json);
         
         // Only reset the height to automatic if the height is currently
         // fixed (done by wait=True flag on clear_output).
         if (needs_height_reset) {
             this.element.height('');    
         }
 
         var that = this;
         setTimeout(function(){that.element.trigger('resize');}, 100);
     };
 
 
     OutputArea.prototype.create_output_area = function () {
         var oa = $("<div/>").addClass("output_area");
         if (this.prompt_area) {
             oa.append($('<div/>').addClass('prompt'));
         }
         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/>').addClass('box-flex1');
+            iframe.css({'height':1, 'width':'100%', 'display':'block'});
+            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 height automatically
+                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!"
         console.log(msg, err);
         if ( container === undefined ) return;
         container.append(
             $('<div/>').html(msg + "<br/>" +
                 err.toString() +
                 '<br/>See your browser Javascript console for more details.'
             ).addClass('js-error')
         );
         container.show();
     };
     
     OutputArea.prototype._safe_append = function (toinsert) {
         // safely append an item to the document
         // this is an object created by user code,
         // and may have errors, which should not be raised
         // under any circumstances.
         try {
             this.element.append(toinsert);
         } catch(err) {
             console.log(err);
             this._append_javascript_error(err, this.element);
         }
     };
 
 
     OutputArea.prototype.append_pyout = function (json, dynamic) {
         var n = json.prompt_number || ' ';
         var toinsert = this.create_output_area();
         if (this.prompt_area) {
             toinsert.find('div.prompt').addClass('output_prompt').html('Out[' + n + ']:');
         }
         this.append_mime_type(json, toinsert, dynamic);
         this._safe_append(toinsert);
         // If we just output latex, typeset it.
         if ((json.latex !== undefined) || (json.html !== undefined)) {
             this.typeset();
         }
     };
 
 
     OutputArea.prototype.append_pyerr = function (json) {
         var tb = json.traceback;
         if (tb !== undefined && tb.length > 0) {
             var s = '';
             var len = tb.length;
             for (var i=0; i<len; i++) {
                 s = s + tb[i] + '\n';
             }
             s = s + '\n';
             var toinsert = this.create_output_area();
             this.append_text(s, {}, toinsert);
             this._safe_append(toinsert);
         }
     };
 
 
     OutputArea.prototype.append_stream = function (json) {
         // temporary fix: if stream undefined (json file written prior to this patch),
         // default to most likely stdout:
         if (json.stream == undefined){
             json.stream = 'stdout';
         }
         var text = json.text;
         var subclass = "output_"+json.stream;
         if (this.outputs.length > 0){
             // have at least one output to consider
             var last = this.outputs[this.outputs.length-1];
             if (last.output_type == 'stream' && json.stream == last.stream){
                 // latest output was in the same stream,
                 // so append directly into its pre tag
                 // escape ANSI & HTML specials:
                 var pre = this.element.find('div.'+subclass).last().find('pre');
                 var html = utils.fixCarriageReturn(
                     pre.html() + utils.fixConsole(text));
                 pre.html(html);
                 return;
             }
         }
 
         if (!text.replace("\r", "")) {
             // text is nothing (empty string, \r, etc.)
             // so don't append any elements, which might add undesirable space
             return;
         }
 
         // If we got here, attach a new div
         var toinsert = this.create_output_area();
         this.append_text(text, {}, toinsert, "output_stream "+subclass);
         this._safe_append(toinsert);
     };
 
 
     OutputArea.prototype.append_display_data = function (json, dynamic) {
         var toinsert = this.create_output_area();
         if (this.append_mime_type(json, toinsert, dynamic)) {
             this._safe_append(toinsert);
             // If we just output latex, typeset it.
             if ( (json.latex !== undefined) || (json.html !== undefined) ) {
                 this.typeset();
             }
         }
     };
 
     OutputArea.display_order = ['javascript','html','latex','svg','png','jpeg','text'];
 
     OutputArea.prototype.append_mime_type = function (json, element, dynamic) {
         for(var type_i in OutputArea.display_order){
             var type = OutputArea.display_order[type_i];
             if(json[type] != undefined ){
                 var md = {};
                 if (json.metadata && json.metadata[type]) {
                     md = json.metadata[type];
                 };
                 if(type == 'javascript'){
                     if (dynamic) {
                         this.append_javascript(json.javascript, md, element, dynamic);
                         return true;
                     }
                 } else {
                     this['append_'+type](json[type], md, element);
                     return true;
                 }
                 return false;
             }
         }
         return false;
     };
 
 
     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);
     };
 
 
     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();
         // If the Javascript appends content to `element` that should be drawn, then
         // it must also call `container.show()`.
         try {
             eval(js);
         } catch(err) {
             this._append_javascript_error(err, container);
         }
     };
 
 
     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);
         data = utils.autoLinkUrls(data);
         if (extra_class){
             toinsert.addClass(extra_class);
         }
         toinsert.append($("<pre/>").html(data));
         element.append(toinsert);
     };
 
 
     OutputArea.prototype.append_svg = function (svg, md, element) {
-        var toinsert = $("<div/>").addClass("output_subarea output_svg");
+        var toinsert = this.create_output_subarea(md, "output_svg");
         toinsert.append(svg);
         element.append(toinsert);
     };
 
 
     OutputArea.prototype._dblclick_to_reset_size = function (img) {
         // schedule wrapping image in resizable after a delay,
         // so we don't end up calling resize on a zero-size object
         var that = this;
         setTimeout(function () {
             var h0 = img.height();
             var w0 = img.width();
             if (!(h0 && w0)) {
                 // zero size, schedule another timeout
                 that._dblclick_to_reset_size(img);
                 return;
             }
             img.resizable({
                 aspectRatio: true,
                 autoHide: true
             });
             img.dblclick(function () {
                 // resize wrapper & image together for some reason:
                 img.parent().height(h0);
                 img.height(h0);
                 img.parent().width(w0);
                 img.width(w0);
             });
         }, 250);
     };
 
 
     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']);
         }
         if (md['width']) {
             img.attr('width', md['width']);
         }
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     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']);
         }
         if (md['width']) {
             img.attr('width', md['width']);
         }
         this._dblclick_to_reset_size(img);
         toinsert.append(img);
         element.append(toinsert);
     };
 
 
     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);
     };
 
     OutputArea.prototype.append_raw_input = function (msg) {
         var that = this;
         this.expand();
         var content = msg.content;
         var area = this.create_output_area();
         
         // disable any other raw_inputs, if they are left around
         $("div.output_subarea.raw_input").remove();
         
         area.append(
             $("<div/>")
             .addClass("box-flex1 output_subarea raw_input")
             .append(
                 $("<span/>")
                 .addClass("input_prompt")
                 .text(content.prompt)
             )
             .append(
                 $("<input/>")
                 .addClass("raw_input")
                 .attr('type', 'text')
                 .attr("size", 47)
                 .keydown(function (event, ui) {
                     // make sure we submit on enter,
                     // and don't re-execute the *cell* on shift-enter
                     if (event.which === utils.keycodes.ENTER) {
                         that._submit_raw_input();
                         return false;
                     }
                 })
             )
         );
         this.element.append(area);
         // weirdly need double-focus now,
         // otherwise only the cell will be focused
         area.find("input.raw_input").focus().focus();
     }
     OutputArea.prototype._submit_raw_input = function (evt) {
         var container = this.element.find("div.raw_input");
         var theprompt = container.find("span.input_prompt");
         var theinput = container.find("input.raw_input");
         var value = theinput.val();
         var content = {
             output_type : 'stream',
             name : 'stdout',
             text : theprompt.text() + value + '\n'
         }
         // remove form container
         container.parent().remove();
         // replace with plaintext version in stdout
         this.append_output(content, false);
         $([IPython.events]).trigger('send_input_reply.Kernel', value);
     }
 
 
     OutputArea.prototype.handle_clear_output = function (msg) {
         this.clear_output(msg.content.wait);
     };
 
 
     OutputArea.prototype.clear_output = function(wait) {
         if (wait) {
 
             // If a clear is queued, clear before adding another to the queue.
             if (this.clear_queued) {
                 this.clear_output(false);
             };
 
             this.clear_queued = true;
         } else {
 
             // Fix the output div's height if the clear_output is waiting for
             // new output (it is being used in an animation).
             if (this.clear_queued) {
                 var height = this.element.height();
                 this.element.height(height);
                 this.clear_queued = false;
             }
             
             // clear all, no need for logic
             this.element.html("");
             this.outputs = [];
             this.unscroll_area();
             return;
         };
     };
 
 
     // JSON serialization
 
     OutputArea.prototype.fromJSON = function (outputs) {
         var len = outputs.length;
         for (var i=0; i<len; i++) {
             // append with dynamic=false.
             this.append_output(outputs[i], false);
         }
     };
 
 
     OutputArea.prototype.toJSON = function () {
         var outputs = [];
         var len = this.outputs.length;
         for (var i=0; i<len; i++) {
             outputs[i] = this.outputs[i];
         }
         return outputs;
     };
 
 
     IPython.OutputArea = OutputArea;
 
     return IPython;
 
 }(IPython));