Show More
@@ -1,97 +1,97 b'' | |||||
1 | // |
|
1 | // | |
2 | // Test display isolation |
|
2 | // Test display isolation | |
3 | // An object whose metadata contains an "isolated" tag must be isolated |
|
3 | // An object whose metadata contains an "isolated" tag must be isolated | |
4 | // from the rest of the document. In the case of inline SVGs, this means |
|
4 | // from the rest of the document. In the case of inline SVGs, this means | |
5 | // that multiple SVGs have different scopes. This test checks that there |
|
5 | // that multiple SVGs have different scopes. This test checks that there | |
6 | // are no CSS leaks between two isolated SVGs. |
|
6 | // are no CSS leaks between two isolated SVGs. | |
7 | // |
|
7 | // | |
8 |
|
8 | |||
9 | casper.notebook_test(function () { |
|
9 | casper.notebook_test(function () { | |
10 | this.evaluate(function () { |
|
10 | this.evaluate(function () { | |
11 | var cell = IPython.notebook.get_cell(0); |
|
11 | var cell = IPython.notebook.get_cell(0); | |
12 | cell.set_text( "from IPython.core.display import SVG, display_svg\n" |
|
12 | cell.set_text( "from IPython.core.display import SVG, display_svg\n" | |
13 | + "s1 = '''<svg width='1cm' height='1cm' viewBox='0 0 1000 500'>" |
|
13 | + "s1 = '''<svg width='1cm' height='1cm' viewBox='0 0 1000 500'>" | |
14 | + "<defs><style>rect {fill:red;}; </style></defs>" |
|
14 | + "<defs><style>rect {fill:red;}; </style></defs>" | |
15 | + "<rect id='r1' x='200' y='100' width='600' height='300' /></svg>" |
|
15 | + "<rect id='r1' x='200' y='100' width='600' height='300' /></svg>" | |
16 | + "'''\n" |
|
16 | + "'''\n" | |
17 | + "s2 = '''<svg width='1cm' height='1cm' viewBox='0 0 1000 500'>" |
|
17 | + "s2 = '''<svg width='1cm' height='1cm' viewBox='0 0 1000 500'>" | |
18 | + "<rect id='r2' x='200' y='100' width='600' height='300' /></svg>" |
|
18 | + "<rect id='r2' x='200' y='100' width='600' height='300' /></svg>" | |
19 | + "'''\n" |
|
19 | + "'''\n" | |
20 | + "display_svg(SVG(s1), metadata=dict(isolated=True))\n" |
|
20 | + "display_svg(SVG(s1), metadata=dict(isolated=True))\n" | |
21 | + "display_svg(SVG(s2), metadata=dict(isolated=True))\n" |
|
21 | + "display_svg(SVG(s2), metadata=dict(isolated=True))\n" | |
22 | ); |
|
22 | ); | |
23 | cell.execute(); |
|
23 | cell.execute(); | |
24 | console.log("hello" ); |
|
24 | console.log("hello" ); | |
25 | }); |
|
25 | }); | |
26 |
|
26 | |||
27 | this.then(function() { |
|
27 | this.then(function() { | |
28 | var fname=this.test.currentTestFile.split('/').pop().toLowerCase(); |
|
28 | var fname=this.test.currentTestFile.split('/').pop().toLowerCase(); | |
29 | this.echo(fname) |
|
29 | this.echo(fname) | |
30 | this.echo(this.currentUrl) |
|
30 | this.echo(this.currentUrl) | |
31 | this.evaluate(function (n) { |
|
31 | this.evaluate(function (n) { | |
32 | IPython.notebook.rename(n); |
|
32 | IPython.notebook.rename(n); | |
33 | console.write("hello" + n); |
|
33 | console.write("hello" + n); | |
34 | IPython.notebook.save_notebook(); |
|
34 | IPython.notebook.save_notebook(); | |
35 | }, {n : fname}); |
|
35 | }, {n : fname}); | |
36 | this.echo(this.currentUrl) |
|
36 | this.echo(this.currentUrl) | |
37 | }); |
|
37 | }); | |
38 |
|
38 | |||
39 | this.then(function() { |
|
39 | this.then(function() { | |
40 |
|
40 | |||
41 | url = this.evaluate(function() { |
|
41 | url = this.evaluate(function() { | |
42 | IPython.notebook.rename("foo"); |
|
42 | IPython.notebook.rename("foo"); | |
43 | //$("span#notebook_name")[0].click(); |
|
43 | //$("span#notebook_name")[0].click(); | |
44 | //$("input")[0].value = "please-work"; |
|
44 | //$("input")[0].value = "please-work"; | |
45 | //$(".btn-primary")[0].click(); |
|
45 | //$(".btn-primary")[0].click(); | |
46 | return document.location.href; |
|
46 | return document.location.href; | |
47 | }) |
|
47 | }) | |
48 | this.echo("renamed" + url); |
|
48 | this.echo("renamed" + url); | |
49 | this.echo(this.currentUrl); |
|
49 | this.echo(this.currentUrl); | |
50 | }); |
|
50 | }); | |
51 |
|
51 | |||
52 | this.wait_for_output(0); |
|
52 | this.wait_for_output(0); | |
53 |
|
53 | |||
54 | this.then(function () { |
|
54 | this.then(function () { | |
55 | var colors = this.evaluate(function () { |
|
55 | var colors = this.evaluate(function () { | |
56 | var colors = []; |
|
56 | var colors = []; | |
57 | var ifr = __utils__.findAll("iframe"); |
|
57 | var ifr = __utils__.findAll("iframe"); | |
58 | var svg1 = ifr[0].contentWindow.document.getElementById('r1'); |
|
58 | var svg1 = ifr[0].contentWindow.document.getElementById('r1'); | |
59 | colors[0] = window.getComputedStyle(svg1)["fill"]; |
|
59 | colors[0] = window.getComputedStyle(svg1)["fill"]; | |
60 | var svg2 = ifr[1].contentWindow.document.getElementById('r2'); |
|
60 | var svg2 = ifr[1].contentWindow.document.getElementById('r2'); | |
61 | colors[1] = window.getComputedStyle(svg2)["fill"]; |
|
61 | colors[1] = window.getComputedStyle(svg2)["fill"]; | |
62 | return colors; |
|
62 | return colors; | |
63 | }); |
|
63 | }); | |
64 |
|
64 | |||
65 | this.test.assertEquals(colors[0], '#ff0000', 'First svg should be red'); |
|
65 | this.test.assertEquals(colors && colors[0], '#ff0000', 'display_svg() First svg should be red'); | |
66 | this.test.assertEquals(colors[1], '#000000', 'Second svg should be black'); |
|
66 | this.test.assertEquals(colors && colors[1], '#000000', 'display_svg() Second svg should be black'); | |
67 | }); |
|
67 | }); | |
68 |
|
68 | |||
69 | // now ensure that we can pass the same metadata dict to plain old display() |
|
69 | // now ensure that we can pass the same metadata dict to plain old display() | |
70 | this.thenEvaluate(function () { |
|
70 | this.thenEvaluate(function () { | |
71 | var cell = IPython.notebook.get_cell(0); |
|
71 | var cell = IPython.notebook.get_cell(0); | |
72 | cell.clear_output(); |
|
72 | cell.clear_output(); | |
73 | cell.set_text( "from IPython.display import display\n" |
|
73 | cell.set_text( "from IPython.display import display\n" | |
74 | + "display(SVG(s1), metadata=dict(isolated=True))\n" |
|
74 | + "display(SVG(s1), metadata=dict(isolated=True))\n" | |
75 | + "display(SVG(s2), metadata=dict(isolated=True))\n" |
|
75 | + "display(SVG(s2), metadata=dict(isolated=True))\n" | |
76 | ); |
|
76 | ); | |
77 | cell.execute(); |
|
77 | cell.execute(); | |
78 | }); |
|
78 | }); | |
79 |
|
79 | |||
80 | this.wait_for_output(0); |
|
80 | this.wait_for_output(0); | |
81 |
|
81 | |||
82 | // same test as original |
|
82 | // same test as original | |
83 | this.then(function () { |
|
83 | this.then(function () { | |
84 | var colors = this.evaluate(function () { |
|
84 | var colors = this.evaluate(function () { | |
85 | var colors = []; |
|
85 | var colors = []; | |
86 | var ifr = __utils__.findAll("iframe"); |
|
86 | var ifr = __utils__.findAll("iframe"); | |
87 | var svg1 = ifr[0].contentWindow.document.getElementById('r1'); |
|
87 | var svg1 = ifr[0].contentWindow.document.getElementById('r1'); | |
88 | colors[0] = window.getComputedStyle(svg1)["fill"]; |
|
88 | colors[0] = window.getComputedStyle(svg1)["fill"]; | |
89 | var svg2 = ifr[1].contentWindow.document.getElementById('r2'); |
|
89 | var svg2 = ifr[1].contentWindow.document.getElementById('r2'); | |
90 | colors[1] = window.getComputedStyle(svg2)["fill"]; |
|
90 | colors[1] = window.getComputedStyle(svg2)["fill"]; | |
91 | return colors; |
|
91 | return colors; | |
92 | }); |
|
92 | }); | |
93 |
|
93 | |||
94 | this.test.assertEquals(colors[0], '#ff0000', 'First svg should be red'); |
|
94 | this.test.assertEquals(colors && colors[0], '#ff0000', 'display() First svg should be red'); | |
95 | this.test.assertEquals(colors[1], '#000000', 'Second svg should be black'); |
|
95 | this.test.assertEquals(colors && colors[1], '#000000', 'display() Second svg should be black'); | |
96 | }); |
|
96 | }); | |
97 | }); |
|
97 | }); |
General Comments 0
You need to be logged in to leave comments.
Login now