Show More
@@ -1,42 +1,42 | |||||
1 | // |
|
1 | // | |
2 | // Test svg isolation |
|
2 | // Test svg isolation | |
3 |
// An object who |
|
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 | }); |
|
24 | }); | |
25 |
|
25 | |||
26 | this.wait_for_output(0); |
|
26 | this.wait_for_output(0); | |
27 |
|
27 | |||
28 | this.then(function () { |
|
28 | this.then(function () { | |
29 | var colors = this.evaluate(function () { |
|
29 | var colors = this.evaluate(function () { | |
30 | var colors = []; |
|
30 | var colors = []; | |
31 | var ifr = __utils__.findAll("iframe"); |
|
31 | var ifr = __utils__.findAll("iframe"); | |
32 | var svg1 = ifr[0].contentWindow.document.getElementById('r1'); |
|
32 | var svg1 = ifr[0].contentWindow.document.getElementById('r1'); | |
33 | colors[0] = window.getComputedStyle(svg1)["fill"]; |
|
33 | colors[0] = window.getComputedStyle(svg1)["fill"]; | |
34 | var svg2 = ifr[1].contentWindow.document.getElementById('r2'); |
|
34 | var svg2 = ifr[1].contentWindow.document.getElementById('r2'); | |
35 | colors[1] = window.getComputedStyle(svg2)["fill"]; |
|
35 | colors[1] = window.getComputedStyle(svg2)["fill"]; | |
36 | return colors; |
|
36 | return colors; | |
37 | }); |
|
37 | }); | |
38 |
|
38 | |||
39 | this.test.assertEquals(colors[0], '#ff0000', 'First svg should be red'); |
|
39 | this.test.assertEquals(colors[0], '#ff0000', 'First svg should be red'); | |
40 | this.test.assertEquals(colors[1], '#000000', 'Second svg should be black'); |
|
40 | this.test.assertEquals(colors[1], '#000000', 'Second svg should be black'); | |
41 | }); |
|
41 | }); | |
42 | }); |
|
42 | }); |
General Comments 0
You need to be logged in to leave comments.
Login now