Merge pull request #4146 from askerry/selenium_display_isolation

Migrate display isolation test to selenium

Author: takluyver

notebook/tests/notebook/isolated_svg.js

@@ -0,0 +1,88 @@
+"""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)
+    try:
+        isolated_html(notebook)
+        isolated_svg(notebook)
+    finally:
+        # Ensure we switch from iframe back to default content even if test fails
+        notebook.browser.switch_to.default_content()
+
+
+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(%r))" % test_str)
+    non_isolated = (
+        "<style>div{color:%s;}</style>" % red +
+        "<div id='non-isolated'>Should be red</div>")
+    display_ni = "display(HTML(%r), 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(%r), 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
+

notebook/tests/selenium/test_display_isolation.py

@@ -200,6 +200,10 @@ def add_cell(self, index=-1, cell_type="code", content=""):
         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()
@@ -270,7 +274,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)