Migrate display isolation test to selenium

As per issue #3335, we want all js tests migrated to selenium. This change migrates and extends the svg isolation test (extended to include slightly more thorough validation of expected isolation behavior).

Test Plan:
py.test -v notebook/tests/selenium/test_display_isolation.py
pull/4146/head
Amy Skerry 7 years ago
parent 04a686dbaf
commit aa658d3d79

@ -1,90 +0,0 @@
//
// Test display 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.then(function() {
var fname=this.test.currentTestFile.split('/').pop().toLowerCase();
this.echo(fname);
this.echo(this.currentUrl);
this.evaluate(function (n) {
IPython.notebook.rename(n);
IPython.notebook.save_notebook();
}, {n : fname});
this.echo(this.currentUrl);
});
this.then(function() {
url = this.evaluate(function() {
IPython.notebook.rename("foo");
return document.location.href;
});
this.echo("renamed" + url);
this.echo(this.currentUrl);
});
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.assert_colors_equal('#ff0000', colors && colors[0], 'display_svg() First svg should be red');
this.assert_colors_equal('#000000', colors && colors[1], 'display_svg() Second svg should be black');
});
// now ensure that we can pass the same metadata dict to plain old display()
this.thenEvaluate(function () {
var cell = IPython.notebook.get_cell(0);
cell.clear_output();
cell.set_text( "from IPython.display import display\n" +
"display(SVG(s1), metadata=dict(isolated=True))\n" +
"display(SVG(s2), metadata=dict(isolated=True))\n"
);
cell.execute();
});
this.wait_for_output(0);
// same test as original
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.assert_colors_equal('#ff0000', colors && colors[0], 'display() First svg should be red');
this.assert_colors_equal('#000000', colors && colors[1], 'display() Second svg should be black');
});
});

@ -0,0 +1,84 @@
"""Test display isolation.
An object whose metadata contains an "isolated" tag must be isolated
from the rest of the document.
"""
def test_display_isolation(notebook):
import_ln = """from IPython.core.display import HTML, SVG, display, display_svg"""
notebook.edit_cell(index=0, content=import_ln)
notebook.execute_cell(notebook.current_cell)
isolated_html(notebook)
isolated_svg(notebook)
def isolated_html(notebook):
"""Test HTML display isolation.
HTML styling rendered without isolation will affect the whole
document, whereas styling applied with isolation will affect only
the local display object.
"""
red = 'rgb(255, 0, 0)'
blue = 'rgb(0, 0, 255)'
test_str = """<div id='test'>Should be red from non-isolation</div>"""
notebook.add_and_execute_cell(content="""display(HTML("%s"))""" % test_str)
non_isolated = (
"<style>div{color:%s;}</style>" % red +
"<div id='non-isolated'>Should be red</div>")
display_ni = """display(HTML("%s"), metadata={"isolated":False})""" % (
non_isolated)
notebook.add_and_execute_cell(content=display_ni)
isolated = (
"<style>div{color:%s;}</style>" % blue +
"<div id='isolated'>Should be blue</div>")
display_i = """display(HTML("%s"), metadata={"isolated":True})""" % (
isolated)
notebook.add_and_execute_cell(content=display_i)
# The non-isolated div will be in the body
non_isolated_div = notebook.body.find_element_by_id("non-isolated")
assert non_isolated_div.value_of_css_property("color") == red
# The non-isolated styling will have affected the output of other cells
test_div = notebook.body.find_element_by_id("test")
assert test_div.value_of_css_property("color") == red
# The isolated div will be in an iframe, only that element will be blue
iframe = notebook.body.find_element_by_tag_name("iframe")
notebook.browser.switch_to.frame(iframe)
isolated_div = notebook.browser.find_element_by_id("isolated")
assert isolated_div.value_of_css_property("color") == blue
notebook.browser.switch_to.default_content()
def isolated_svg(notebook):
"""Test that multiple isolated SVGs have different scopes.
Asserts that there no CSS leaks between two isolated SVGs.
"""
yellow = "rgb(255, 255, 0)"
black = "rgb(0, 0, 0)"
svg_1_str = """s1 = '''<svg width="1cm" height="1cm" viewBox="0 0 1000 500"><defs><style>rect {fill:%s;}; </style></defs><rect id="r1" x="200" y="100" width="600" height="300" /></svg>'''""" % yellow
svg_2_str = """s2 = '''<svg width="1cm" height="1cm" viewBox="0 0 1000 500"><rect id="r2" x="200" y="100" width="600" height="300" /></svg>'''"""
notebook.add_and_execute_cell(content=svg_1_str)
notebook.add_and_execute_cell(content=svg_2_str)
notebook.add_and_execute_cell(
content="display_svg(SVG(s1), metadata=dict(isolated=True))")
notebook.add_and_execute_cell(
content="display_svg(SVG(s2), metadata=dict(isolated=True))")
iframes = notebook.body.find_elements_by_tag_name("iframe")
# The first rectangle will be red
notebook.browser.switch_to.frame(iframes[1])
isolated_svg_1 = notebook.browser.find_element_by_id('r1')
assert isolated_svg_1.value_of_css_property("fill") == yellow
notebook.browser.switch_to.default_content()
# The second rectangle will be black
notebook.browser.switch_to.frame(iframes[2])
isolated_svg_2 = notebook.browser.find_element_by_id('r2')
assert isolated_svg_2.value_of_css_property("fill") == black

@ -194,6 +194,10 @@ class Notebook:
if cell_type != 'code':
self.convert_cell_type(index=new_index, cell_type=cell_type)
def add_and_execute_cell(self, index=-1, cell_type="code", content=""):
self.add_cell(index=index, cell_type=cell_type, content=content)
self.execute_cell(index)
def delete_cell(self, index):
self.focus_cell(index)
self.to_command_mode()
@ -264,7 +268,7 @@ def new_window(browser, selector=None):
yield
new_window_handle = next(window for window in browser.window_handles
if window not in initial_window_handles)
browser.switch_to_window(new_window_handle)
browser.switch_to.window(new_window_handle)
if selector is not None:
wait_for_selector(browser, selector)

Loading…
Cancel
Save