| 1 | describe("plugins-legend", function() { |
| 2 | |
| 3 | beforeEach(function() { |
| 4 | document.body.innerHTML = "<div id='graph'></div><div id='label'></div>"; |
| 5 | }); |
| 6 | |
| 7 | afterEach(function() { |
| 8 | }); |
| 9 | |
| 10 | it('testLegendEscape', function() { |
| 11 | var opts = { |
| 12 | width: 480, |
| 13 | height: 320 |
| 14 | }; |
| 15 | var data = "X,<script>alert('XSS')</script>\n" + |
| 16 | "0,-1\n" + |
| 17 | "1,0\n" + |
| 18 | "2,1\n" + |
| 19 | "3,0\n" |
| 20 | ; |
| 21 | |
| 22 | var graph = document.getElementById("graph"); |
| 23 | var g = new Dygraph(graph, data, opts); |
| 24 | |
| 25 | var legendPlugin = new Dygraph.Plugins.Legend(); |
| 26 | legendPlugin.activate(g); |
| 27 | var e = { |
| 28 | selectedX: 'selectedX', |
| 29 | selectedPoints: [{ |
| 30 | canvasy: 100, |
| 31 | name: "<script>alert('XSS')</script>", |
| 32 | yval: 10, |
| 33 | }], |
| 34 | dygraph: g |
| 35 | } |
| 36 | legendPlugin.select(e); |
| 37 | |
| 38 | var legendSpan = legendPlugin.legend_div_.querySelector("span b span"); |
| 39 | assert.equal(legendSpan.innerHTML, "<script>alert('XSS')</script>"); |
| 40 | }); |
| 41 | |
| 42 | |
| 43 | it('should let labelsDiv be a string', function() { |
| 44 | var labelsDiv = document.getElementById('label'); |
| 45 | var g = new Dygraph('graph', 'X,Y\n1,2\n', {labelsDiv: 'label'}); |
| 46 | null |
| 47 | g.setSelection(0); |
| 48 | assert.equal('1: Y: 2', Util.nbspToSpace(labelsDiv.textContent)); |
| 49 | }); |
| 50 | |
| 51 | it('should let labelsDiv be an Element', function() { |
| 52 | var labelsDiv = document.getElementById('label'); |
| 53 | var g = new Dygraph('graph', 'X,Y\n1,2\n', { labelsDiv: labelsDiv }); |
| 54 | assert.isNull(labelsDiv.getAttribute('class')); // dygraph-legend not added. |
| 55 | g.setSelection(0); |
| 56 | assert.equal('1: Y: 2', Util.nbspToSpace(labelsDiv.textContent)); |
| 57 | }); |
| 58 | |
| 59 | it('should render dashed patterns', function() { |
| 60 | var g = new Dygraph('graph', 'X,Y\n1,2\n', { |
| 61 | strokePattern: [5, 5], |
| 62 | color: 'red', |
| 63 | legend: 'always' |
| 64 | }); |
| 65 | |
| 66 | // The legend has a dashed line and a label. |
| 67 | var legendEl = document.querySelector('.dygraph-legend > span'); |
| 68 | assert.equal(' Y', legendEl.textContent); |
| 69 | var dashEl = document.querySelector('.dygraph-legend > span > div'); |
| 70 | assert.equal(window.getComputedStyle(dashEl)['border-bottom-color'], |
| 71 | 'rgb(255, 0, 0)'); |
| 72 | }); |
| 73 | |
| 74 | }); |