diff --git a/src/components/annotations/arrow_paths.js b/src/components/annotations/arrow_paths.js index 172792076fe..0d54ca67eab 100644 --- a/src/components/annotations/arrow_paths.js +++ b/src/components/annotations/arrow_paths.js @@ -12,10 +12,15 @@ * All paths are tuned for maximum scalability of the arrowhead, * ie throughout arrowwidth=0.3..3 the head is joined smoothly * to the line, with the line coming from the left and ending at (0, 0). + * * `backoff` is the distance to move the arrowhead and the end of the line, * in order that the arrowhead points to the desired place, either at * the tip of the arrow or (in the case of circle or square) * the center of the symbol. + * + * `noRotate`, if truthy, says that this arrowhead should not rotate with the + * arrow. That's the case for squares, which should always be straight, and + * circles, for which it's irrelevant. */ module.exports = [ @@ -52,11 +57,13 @@ module.exports = [ // circle { path: 'M2,0A2,2 0 1,1 0,-2A2,2 0 0,1 2,0Z', - backoff: 0 + backoff: 0, + noRotate: true }, // square { path: 'M2,2V-2H-2V2Z', - backoff: 0 + backoff: 0, + noRotate: true } ]; diff --git a/src/components/annotations/draw.js b/src/components/annotations/draw.js index 1548a2400a6..92f5e595c00 100644 --- a/src/components/annotations/draw.js +++ b/src/components/annotations/draw.js @@ -520,7 +520,7 @@ function drawRaw(gd, options, index, subplotId, xa, ya) { .style('stroke-width', strokewidth + 'px') .call(Color.stroke, Color.rgb(arrowColor)); - drawArrowHead(arrow, options.arrowhead, 'end', options.arrowsize, options.standoff); + drawArrowHead(arrow, 'end', options); // the arrow dragger is a small square right at the head, then a line to the tail, // all expanded by a stroke width of 6px plus the arrow line width diff --git a/src/components/annotations/draw_arrow_head.js b/src/components/annotations/draw_arrow_head.js index 51cc2364774..af6dde2c51f 100644 --- a/src/components/annotations/draw_arrow_head.js +++ b/src/components/annotations/draw_arrow_head.js @@ -10,42 +10,44 @@ 'use strict'; var d3 = require('d3'); -var isNumeric = require('fast-isnumeric'); var Color = require('../color'); -var Drawing = require('../drawing'); var ARROWPATHS = require('./arrow_paths'); -// add arrowhead(s) to a path or line d3 element el3 -// style: 1-6, first 5 are pointers, 6 is circle, 7 is square, 8 is none -// ends is 'start', 'end' (default), 'start+end' -// mag is magnification vs. default (default 1) - -module.exports = function drawArrowHead(el3, style, ends, mag, standoff) { - if(!isNumeric(mag)) mag = 1; - var el = el3.node(), - headStyle = ARROWPATHS[style||0]; - - if(typeof ends !== 'string' || !ends) ends = 'end'; - - var scale = (Drawing.getPx(el3, 'stroke-width') || 1) * mag, - stroke = el3.style('stroke') || Color.defaultLine, - opacity = el3.style('stroke-opacity') || 1, - doStart = ends.indexOf('start') >= 0, - doEnd = ends.indexOf('end') >= 0, - backOff = headStyle.backoff * scale + standoff, - start, - end, - startRot, - endRot; +/** + * Add arrowhead(s) to a path or line element + * + * @param {d3.selection} el3: a d3-selected line or path element + * + * @param {string} ends: 'start', 'end', or 'start+end' for which ends get arrowheads + * + * @param {object} options: style information. Must have all the following: + * @param {number} options.arrowhead: head style - see ./arrow_paths + * @param {number} options.arrowsize: relative size of the head vs line width + * @param {number} options.standoff: distance in px to move the arrow point from its target + * @param {number} options.arrowwidth: width of the arrow line + * @param {string} options.arrowcolor: color of the arrow line, for the head to match + * Note that the opacity of this color is ignored, as it's assumed the container + * of both the line and head has opacity applied to it so there isn't greater opacity + * where they overlap. + */ +module.exports = function drawArrowHead(el3, ends, options) { + var el = el3.node(); + var headStyle = ARROWPATHS[options.arrowhead || 0]; + var scale = (options.arrowwidth || 1) * options.arrowsize; + var doStart = ends.indexOf('start') >= 0; + var doEnd = ends.indexOf('end') >= 0; + var backOff = headStyle.backoff * scale + options.standoff; + + var start, end, startRot, endRot; if(el.nodeName === 'line') { start = {x: +el3.attr('x1'), y: +el3.attr('y1')}; end = {x: +el3.attr('x2'), y: +el3.attr('y2')}; - var dx = start.x - end.x, - dy = start.y - end.y; + var dx = start.x - end.x; + var dy = start.y - end.y; startRot = Math.atan2(dy, dx); endRot = startRot + Math.PI; @@ -83,16 +85,19 @@ module.exports = function drawArrowHead(el3, style, ends, mag, standoff) { } if(doStart) { - var start0 = el.getPointAtLength(0), - dstart = el.getPointAtLength(0.1); + var start0 = el.getPointAtLength(0); + var dstart = el.getPointAtLength(0.1); + startRot = Math.atan2(start0.y - dstart.y, start0.x - dstart.x); start = el.getPointAtLength(Math.min(backOff, pathlen)); + if(backOff) dashArray = '0px,' + backOff + 'px,'; } if(doEnd) { - var end0 = el.getPointAtLength(pathlen), - dend = el.getPointAtLength(pathlen - 0.1); + var end0 = el.getPointAtLength(pathlen); + var dend = el.getPointAtLength(pathlen - 0.1); + endRot = Math.atan2(end0.y - dend.y, end0.x - dend.x); end = el.getPointAtLength(Math.max(0, pathlen - backOff)); @@ -110,19 +115,19 @@ module.exports = function drawArrowHead(el3, style, ends, mag, standoff) { function drawhead(p, rot) { if(!headStyle.path) return; - if(style > 5) rot = 0; // don't rotate square or circle + if(headStyle.noRotate) rot = 0; + d3.select(el.parentNode).append('path') .attr({ 'class': el3.attr('class'), d: headStyle.path, transform: 'translate(' + p.x + ',' + p.y + ')' + - 'rotate(' + (rot * 180 / Math.PI) + ')' + + (rot ? 'rotate(' + (rot * 180 / Math.PI) + ')' : '') + 'scale(' + scale + ')' }) .style({ - fill: stroke, - opacity: opacity, + fill: Color.rgb(options.arrowcolor), 'stroke-width': 0 }); } diff --git a/src/components/colorbar/draw.js b/src/components/colorbar/draw.js index 9aa7f5be855..d41334c8d32 100644 --- a/src/components/colorbar/draw.js +++ b/src/components/colorbar/draw.js @@ -304,7 +304,7 @@ module.exports = function draw(gd, id) { lineSize = 15.6; if(titleText.node()) { lineSize = - parseInt(titleText.style('font-size'), 10) * LINE_SPACING; + parseInt(titleText.node().style.fontSize, 10) * LINE_SPACING; } if(mathJaxNode) { titleHeight = Drawing.bBox(mathJaxNode).height; diff --git a/src/components/drawing/index.js b/src/components/drawing/index.js index 344cfeebe75..c6213e9f219 100644 --- a/src/components/drawing/index.js +++ b/src/components/drawing/index.js @@ -110,12 +110,6 @@ drawing.hideOutsideRangePoints = function(points, subplot) { }); }; -drawing.getPx = function(s, styleAttr) { - // helper to pull out a px value from a style that may contain px units - // s is a d3 selection (will pull from the first one) - return Number(s.style(styleAttr).replace(/px$/, '')); -}; - drawing.crispRound = function(gd, lineWidth, dflt) { // for lines that disable antialiasing we want to // make sure the width is an integer, and at least 1 if it's nonzero diff --git a/src/lib/svg_text_utils.js b/src/lib/svg_text_utils.js index 7150d3a05ed..07e8f7faf52 100644 --- a/src/lib/svg_text_utils.js +++ b/src/lib/svg_text_utils.js @@ -77,7 +77,8 @@ exports.convertToTspans = function(_context, gd, _callback) { if(tex) { ((gd && gd._promises) || []).push(new Promise(function(resolve) { _context.style('display', 'none'); - var config = {fontSize: parseInt(_context.style('font-size'), 10)}; + var fontSize = parseInt(_context.node().style.fontSize, 10); + var config = {fontSize: fontSize}; texToSVG(tex[2], config, function(_svgEl, _glyphDefs, _svgBBox) { parent.selectAll('svg.' + svgClass).remove(); @@ -113,7 +114,7 @@ exports.convertToTspans = function(_context, gd, _callback) { }) .style({overflow: 'visible', 'pointer-events': 'none'}); - var fill = _context.style('fill') || 'black'; + var fill = _context.node().style.fill || 'black'; newSvg.select('g').attr({fill: fill, stroke: fill}); var newSvgW = getSize(newSvg, 'width'), @@ -121,8 +122,7 @@ exports.convertToTspans = function(_context, gd, _callback) { newX = +_context.attr('x') - newSvgW * {start: 0, middle: 0.5, end: 1}[_context.attr('text-anchor') || 'start'], // font baseline is about 1/4 fontSize below centerline - textHeight = parseInt(_context.style('font-size'), 10) || - getSize(_context, 'height'), + textHeight = fontSize || getSize(_context, 'height'), dy = -textHeight / 4; if(svgClass[0] === 'y') { @@ -598,19 +598,22 @@ exports.makeEditable = function(context, options) { } function appendEditable() { - var plotDiv = d3.select(gd), - container = plotDiv.select('.svg-container'), - div = container.append('div'); + var plotDiv = d3.select(gd); + var container = plotDiv.select('.svg-container'); + var div = container.append('div'); + var cStyle = context.node().style; + var fontSize = parseFloat(cStyle.fontSize || 12); + div.classed('plugin-editable editable', true) .style({ position: 'absolute', - 'font-family': context.style('font-family') || 'Arial', - 'font-size': context.style('font-size') || 12, - color: options.fill || context.style('fill') || 'black', + 'font-family': cStyle.fontFamily || 'Arial', + 'font-size': fontSize, + color: options.fill || cStyle.fill || 'black', opacity: 1, 'background-color': options.background || 'transparent', outline: '#ffffff33 1px solid', - margin: [-parseFloat(context.style('font-size')) / 8 + 1, 0, 0, -1].join('px ') + 'px', + margin: [-fontSize / 8 + 1, 0, 0, -1].join('px ') + 'px', padding: '0', 'box-sizing': 'border-box' }) diff --git a/src/plots/plots.js b/src/plots/plots.js index 168741b1449..8c4405ffca2 100644 --- a/src/plots/plots.js +++ b/src/plots/plots.js @@ -212,8 +212,13 @@ plots.redrawText = function(gd) { plots.resize = function(gd) { return new Promise(function(resolve, reject) { - if(!gd || d3.select(gd).style('display') === 'none') { - reject(new Error('Resize must be passed a plot div element.')); + function isHidden(gd) { + var display = window.getComputedStyle(gd).display; + return !display || display === 'none'; + } + + if(!gd || isHidden(gd)) { + reject(new Error('Resize must be passed a displayed plot div element.')); } if(gd._redrawTimer) clearTimeout(gd._redrawTimer); diff --git a/src/plots/polar/micropolar.js b/src/plots/polar/micropolar.js index d13f5438065..8633d6d1991 100644 --- a/src/plots/polar/micropolar.js +++ b/src/plots/polar/micropolar.js @@ -432,13 +432,13 @@ var µ = module.exports = { version: '0.2.2' }; }); svg.selectAll('.geometry-group .mark').on('mouseover.tooltip', function(d, i) { var el = d3.select(this); - var color = el.style('fill'); + var color = this.style.fill; var newColor = 'black'; - var opacity = el.style('opacity') || 1; + var opacity = this.style.opacity || 1; el.attr({ 'data-opacity': opacity }); - if (color != 'none') { + if (color && color !== 'none') { el.attr({ 'data-fill': color }); @@ -461,7 +461,7 @@ var µ = module.exports = { version: '0.2.2' }; }).text(text); geometryTooltip.move(pos); } else { - color = el.style('stroke'); + color = this.style.stroke || 'black'; el.attr({ 'data-stroke': color }); diff --git a/src/snapshot/tosvg.js b/src/snapshot/tosvg.js index cd536d0edca..7c9197ee006 100644 --- a/src/snapshot/tosvg.js +++ b/src/snapshot/tosvg.js @@ -97,7 +97,7 @@ module.exports = function toSVG(gd, format, scale) { // but in a static plot it's useless and it can confuse batik // we've tried to standardize on display:none but make sure we still // catch visibility:hidden if it ever arises - if(txt.style('visibility') === 'hidden' || txt.style('display') === 'none') { + if(this.style.visibility === 'hidden' || this.style.display === 'none') { txt.remove(); return; } @@ -110,7 +110,7 @@ module.exports = function toSVG(gd, format, scale) { // Font family styles break things because of quotation marks, // so we must remove them *after* the SVG DOM has been serialized // to a string (browsers convert singles back) - var ff = txt.style('font-family'); + var ff = this.style.fontFamily; if(ff && ff.indexOf('"') !== -1) { txt.style('font-family', ff.replace(DOUBLEQUOTE_REGEX, DUMMY_SUB)); } @@ -118,7 +118,7 @@ module.exports = function toSVG(gd, format, scale) { svg.selectAll('.point,.scatterpts').each(function() { var pt = d3.select(this); - var fill = pt.style('fill'); + var fill = this.style.fill; // similar to font family styles above, // we must remove " after the SVG DOM has been serialized diff --git a/tasks/test_syntax.js b/tasks/test_syntax.js index c00daed44c0..473415da3d2 100644 --- a/tasks/test_syntax.js +++ b/tasks/test_syntax.js @@ -53,7 +53,8 @@ function assertJasmineSuites() { /* * tests about the contents of source (and lib) files: * - check for header comment - * - check that we don't have .classList + * - check that we don't have any features that break in IE + * - check that we don't use getComputedStyle unexpectedly */ function assertSrcContents() { var licenseSrc = constants.licenseSrc; @@ -69,6 +70,8 @@ function assertSrcContents() { // Forbidden in IE in any context var IE_BLACK_LIST = ['classList']; + var getComputedStyleCnt = 0; + glob(combineGlobs([srcGlob, libGlob]), function(err, files) { files.forEach(function(file) { var code = fs.readFileSync(file, 'utf-8'); @@ -85,6 +88,9 @@ function assertSrcContents() { if(source === 'Math.sign') { logs.push(file + ' : contains Math.sign (IE failure)'); } + else if(source === 'window.getComputedStyle') { + getComputedStyleCnt++; + } else if(IE_BLACK_LIST.indexOf(lastPart) !== -1) { logs.push(file + ' : contains .' + lastPart + ' (IE failure)'); } @@ -92,6 +98,11 @@ function assertSrcContents() { logs.push(file + ' : contains .' + lastPart + ' (IE failure in SVG)'); } } + else if(node.type === 'Identifier' && node.source() === 'getComputedStyle') { + if(node.parent.source() !== 'window.getComputedStyle') { + logs.push(file + ': getComputedStyle must be called as a `window` property.'); + } + } }); var header = comments[0]; @@ -106,6 +117,34 @@ function assertSrcContents() { } }); + /* + * window.getComputedStyle calls are restricted, so we want to be + * explicit about it whenever we add or remove these calls. This is + * the reason d3.selection.style is forbidden as a getter. + * + * The rule is: + * - You MAY NOT call getComputedStyle during rendering a plot, EXCEPT + * in calculating autosize for the plot (which only makes sense if + * the plot is displayed). Other uses of getComputedStyle while + * rendering will fail, at least in Chrome, if the plot div is not + * attached to the DOM. + * + * - You MAY call getComputedStyle during interactions (hover etc) + * because at that point it's known that the plot is displayed. + * + * - You must use the explicit `window.getComputedStyle` rather than + * the implicit global scope `getComputedStyle` for jsdom compat. + * + * - If you use conforms to these rules, you may update + * KNOWN_GET_COMPUTED_STYLE_CALLS to count the new use. + */ + var KNOWN_GET_COMPUTED_STYLE_CALLS = 5; + if(getComputedStyleCnt !== KNOWN_GET_COMPUTED_STYLE_CALLS) { + logs.push('Expected ' + KNOWN_GET_COMPUTED_STYLE_CALLS + + ' window.getComputedStyle calls, found ' + getComputedStyleCnt + + '. See ' + __filename + ' for details how to proceed.'); + } + log('correct headers and contents in lib/ and src/', logs); }); } diff --git a/test/image/strict-d3.js b/test/image/strict-d3.js index fec9f4cbec0..a35a80fddba 100644 --- a/test/image/strict-d3.js +++ b/test/image/strict-d3.js @@ -32,6 +32,11 @@ selProto.style = function() { if(sel.size()) { if(typeof obj === 'string') { + if(arguments.length === 1) { + throw new Error('d3 selection.style called as getter: ' + + 'disallowed as it can fail for unattached elements. ' + + 'Use node.style.attribute instead.'); + } checkStyleVal(sel, obj, arguments[1]); } else { Object.keys(obj).forEach(function(key) { checkStyleVal(sel, key, obj[key]); }); diff --git a/test/jasmine/assets/custom_assertions.js b/test/jasmine/assets/custom_assertions.js index cd6832fe03f..138020ac3a8 100644 --- a/test/jasmine/assets/custom_assertions.js +++ b/test/jasmine/assets/custom_assertions.js @@ -37,16 +37,28 @@ exports.assertStyle = function(dims, color, opacity) { .toEqual(dims[i], 'to have correct number of pts in trace ' + i); points.each(function() { - var point = d3.select(this); - - expect(point.style('fill')) + expect(this.style.fill) .toEqual(color[i], 'to have correct pt color'); - expect(+point.style('opacity')) + var op = this.style.opacity; + expect(op === undefined ? 1 : +op) .toEqual(opacity[i], 'to have correct pt opacity'); }); }); }; +exports.assertHoverLabelStyle = function(g, expectation, msg, textSelector) { + if(!msg) msg = ''; + + var pathStyle = window.getComputedStyle(g.select('path').node()); + expect(pathStyle.fill).toBe(expectation.bgcolor, msg + ': bgcolor'); + expect(pathStyle.stroke).toBe(expectation.bordercolor, msg + ': bordercolor'); + + var textStyle = window.getComputedStyle(g.select(textSelector || 'text.nums').node()); + expect(textStyle.fontFamily.split(',')[0]).toBe(expectation.fontFamily, msg + ': font.family'); + expect(parseInt(textStyle.fontSize)).toBe(expectation.fontSize, msg + ': font.size'); + expect(textStyle.fill).toBe(expectation.fontColor, msg + ': font.color'); +}; + exports.assertClip = function(sel, isClipped, size, msg) { expect(sel.size()).toBe(size, msg + ' clip path (selection size)'); diff --git a/test/jasmine/tests/animate_test.js b/test/jasmine/tests/animate_test.js index e7edbef2760..a8dca8d0b53 100644 --- a/test/jasmine/tests/animate_test.js +++ b/test/jasmine/tests/animate_test.js @@ -804,13 +804,14 @@ describe('animating scatter traces', function() { opacity: 1 }]).then(function() { trace = Plotly.d3.selectAll('g.scatter.trace'); - expect(trace.style('opacity')).toEqual('1'); + // d3 style getter is disallowed by strict-d3 + expect(trace.node().style.opacity).toEqual('1'); return Plotly.animate(gd, [{ data: [{opacity: 0.1}] }], {transition: {duration: 0}, frame: {duration: 0, redraw: false}}); }).then(function() { - expect(trace.style('opacity')).toEqual('0.1'); + expect(trace.node().style.opacity).toEqual('0.1'); }).catch(fail).then(done); }); diff --git a/test/jasmine/tests/annotations_test.js b/test/jasmine/tests/annotations_test.js index e3f5fc44e1d..2f96fb22954 100644 --- a/test/jasmine/tests/annotations_test.js +++ b/test/jasmine/tests/annotations_test.js @@ -1321,7 +1321,7 @@ describe('annotation effects', function() { } function checkLink(link) { - expect(link.style('cursor')).toBe('pointer'); + expect(link.node().style.cursor).toBe('pointer'); expect(link.attr('xlink:href')).toBe('https://plot.ly'); expect(link.attr('xlink:show')).toBe('new'); } @@ -1349,7 +1349,7 @@ describe('animating annotations', function() { afterEach(destroyGraphDiv); - it('updates annoations when no axis update present', function(done) { + it('updates annotations when no axis update present', function(done) { function assertAnnotations(expected) { var texts = Plotly.d3.select(gd).selectAll('.annotation .annotation-text'); @@ -1366,7 +1366,7 @@ describe('animating annotations', function() { expect(expected.length).toEqual(paths.size()); paths.each(function(d, i) { - expect(Plotly.d3.select(this).style('fill')).toEqual(expected[i]); + expect(this.style.fill).toEqual(expected[i]); }); } diff --git a/test/jasmine/tests/fx_test.js b/test/jasmine/tests/fx_test.js index bb0a392c631..54906198400 100644 --- a/test/jasmine/tests/fx_test.js +++ b/test/jasmine/tests/fx_test.js @@ -204,7 +204,7 @@ describe('relayout', function() { node = mainDrag.node(); expect(mainDrag.classed('cursor-' + cursor)).toBe(true, 'cursor ' + cursor); - expect(mainDrag.style('pointer-events')).toEqual('all', 'pointer event'); + expect(node.style.pointerEvents).toEqual('all', 'pointer event'); expect(!!node.onmousedown).toBe(isActive, 'mousedown handler'); } diff --git a/test/jasmine/tests/geo_test.js b/test/jasmine/tests/geo_test.js index 444deb23de5..12d39069e89 100644 --- a/test/jasmine/tests/geo_test.js +++ b/test/jasmine/tests/geo_test.js @@ -611,9 +611,9 @@ describe('Test geo interactions', function() { .then(function() { mouseEventScatterGeo('mousemove'); - var path = d3.selectAll('g.hovertext').select('path'); - expect(path.style('fill')).toEqual('rgb(255, 0, 0)', 'bgcolor'); - expect(path.style('stroke')).toEqual('rgb(0, 0, 255)', 'bordecolor[0]'); + var pathStyle = window.getComputedStyle(d3.select('g.hovertext path').node()); + expect(pathStyle.fill).toEqual('rgb(255, 0, 0)', 'bgcolor'); + expect(pathStyle.stroke).toEqual('rgb(0, 0, 255)', 'bordecolor[0]'); }) .then(done); }); diff --git a/test/jasmine/tests/gl2d_click_test.js b/test/jasmine/tests/gl2d_click_test.js index bdca5e9d721..c966a3bc205 100644 --- a/test/jasmine/tests/gl2d_click_test.js +++ b/test/jasmine/tests/gl2d_click_test.js @@ -5,6 +5,7 @@ var d3 = require('d3'); var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var fail = require('../assets/fail_test.js'); +var assertHoverLabelStyle = require('../assets/custom_assertions').assertHoverLabelStyle; // cartesian click events events use the hover data // from the mousemove events and then simulate @@ -130,22 +131,6 @@ describe('Test hover and click interactions', function() { expect(String(pt.pointNumber)).toBe(String(expected.pointNumber), msg + ' - point number'); } - function assertHoverLabelStyle(sel, expected, msg) { - if(sel.node() === null) { - expect(expected.noHoverLabel).toBe(true); - return; - } - - var path = sel.select('path'); - expect(path.style('fill')).toBe(expected.bgColor, msg + ' - bgcolor'); - expect(path.style('stroke')).toBe(expected.borderColor, msg + ' - bordercolor'); - - var text = sel.select('text.nums'); - expect(parseInt(text.style('font-size'))).toBe(expected.fontSize, msg + ' - font.size'); - expect(text.style('font-family').split(',')[0]).toBe(expected.fontFamily, msg + ' - font.family'); - expect(text.style('fill')).toBe(expected.fontColor, msg + ' - font.color'); - } - function assertHoveLabelContent(expected) { var label = expected.label; @@ -181,7 +166,11 @@ describe('Test hover and click interactions', function() { .then(_hover) .then(function(eventData) { assertEventData(eventData, expected); - assertHoverLabelStyle(d3.select('g.hovertext'), expected, opts.msg); + var g = d3.select('g.hovertext'); + if(g.node() === null) { + expect(expected.noHoverLabel).toBe(true); + } + else assertHoverLabelStyle(g, expected, opts.msg); assertHoveLabelContent(expected); }) .then(_click) @@ -225,8 +214,8 @@ describe('Test hover and click interactions', function() { label: ['0.387'], curveNumber: 0, pointNumber: 33, - bgColor: 'rgb(0, 0, 255)', - borderColor: 'rgb(255, 0, 0)', + bgcolor: 'rgb(0, 0, 255)', + bordercolor: 'rgb(255, 0, 0)', fontSize: 20, fontFamily: 'Arial', fontColor: 'rgb(255, 255, 0)' @@ -273,8 +262,8 @@ describe('Test hover and click interactions', function() { y: 9, curveNumber: 2, pointNumber: 1, - bgColor: 'rgb(0, 128, 0)', - borderColor: 'rgb(255, 255, 255)', + bgcolor: 'rgb(0, 128, 0)', + bordercolor: 'rgb(255, 255, 255)', fontSize: 8, fontFamily: 'Arial', fontColor: 'rgb(255, 255, 255)' @@ -305,8 +294,8 @@ describe('Test hover and click interactions', function() { y: 3, curveNumber: 0, pointNumber: [3, 3], - bgColor: 'rgb(68, 68, 68)', - borderColor: 'rgb(255, 255, 255)', + bgcolor: 'rgb(68, 68, 68)', + bordercolor: 'rgb(255, 255, 255)', fontSize: 20, fontFamily: 'Roboto', fontColor: 'rgb(255, 255, 255)' @@ -338,8 +327,8 @@ describe('Test hover and click interactions', function() { y: 1, curveNumber: 0, pointNumber: [1, 2], - bgColor: 'rgb(0, 0, 0)', - borderColor: 'rgb(255, 255, 255)', + bgcolor: 'rgb(0, 0, 0)', + bordercolor: 'rgb(255, 255, 255)', fontSize: 13, fontFamily: 'Arial', fontColor: 'rgb(255, 255, 255)' @@ -362,8 +351,8 @@ describe('Test hover and click interactions', function() { y: 18, curveNumber: 2, pointNumber: 0, - bgColor: 'rgb(44, 160, 44)', - borderColor: 'rgb(255, 255, 255)', + bgcolor: 'rgb(44, 160, 44)', + bordercolor: 'rgb(255, 255, 255)', fontSize: 13, fontFamily: 'Arial', fontColor: 'rgb(255, 255, 255)' @@ -377,8 +366,8 @@ describe('Test hover and click interactions', function() { y: 18, curveNumber: 2, pointNumber: 0, - bgColor: 'rgb(255, 127, 14)', - borderColor: 'rgb(68, 68, 68)', + bgcolor: 'rgb(255, 127, 14)', + bordercolor: 'rgb(68, 68, 68)', fontSize: 13, fontFamily: 'Arial', fontColor: 'rgb(68, 68, 68)' @@ -407,8 +396,8 @@ describe('Test hover and click interactions', function() { y: 18, curveNumber: 2, pointNumber: 0, - bgColor: 'rgb(44, 160, 44)', - borderColor: 'rgb(255, 255, 255)', + bgcolor: 'rgb(44, 160, 44)', + bordercolor: 'rgb(255, 255, 255)', fontSize: 13, fontFamily: 'Arial', fontColor: 'rgb(255, 255, 255)' @@ -425,8 +414,8 @@ describe('Test hover and click interactions', function() { y: 18, curveNumber: 2, pointNumber: 0, - bgColor: 'rgb(255, 127, 14)', - borderColor: 'rgb(68, 68, 68)', + bgcolor: 'rgb(255, 127, 14)', + bordercolor: 'rgb(68, 68, 68)', fontSize: 13, fontFamily: 'Arial', fontColor: 'rgb(68, 68, 68)' @@ -456,8 +445,8 @@ describe('Test hover and click interactions', function() { y: 3, curveNumber: 0, pointNumber: [3, 3], - bgColor: 'rgb(68, 68, 68)', - borderColor: 'rgb(255, 255, 255)', + bgcolor: 'rgb(68, 68, 68)', + bordercolor: 'rgb(255, 255, 255)', fontSize: 20, fontFamily: 'Arial', fontColor: 'rgb(255, 255, 255)' diff --git a/test/jasmine/tests/gl_plot_interact_test.js b/test/jasmine/tests/gl_plot_interact_test.js index 1384eac3e5a..c76bda805a5 100644 --- a/test/jasmine/tests/gl_plot_interact_test.js +++ b/test/jasmine/tests/gl_plot_interact_test.js @@ -11,6 +11,7 @@ var fail = require('../assets/fail_test'); var mouseEvent = require('../assets/mouse_event'); var selectButton = require('../assets/modebar_button'); var delay = require('../assets/delay'); +var assertHoverLabelStyle = require('../assets/custom_assertions').assertHoverLabelStyle; function countCanvases() { return d3.selectAll('canvas').size(); @@ -45,19 +46,6 @@ describe('Test gl3d plots', function() { } } - function assertHoverLabelStyle(bgColor, borderColor, fontSize, fontFamily, fontColor) { - var node = d3.selectAll('g.hovertext'); - - var path = node.select('path'); - expect(path.style('fill')).toEqual(bgColor, 'bgcolor'); - expect(path.style('stroke')).toEqual(borderColor, 'bordercolor'); - - var text = node.select('text.nums'); - expect(parseInt(text.style('font-size'))).toEqual(fontSize, 'font.size'); - expect(text.style('font-family').split(',')[0]).toEqual(fontFamily, 'font.family'); - expect(text.style('fill')).toEqual(fontColor, 'font.color'); - } - function assertEventData(x, y, z, curveNumber, pointNumber, extra) { expect(Object.keys(ptData)).toEqual(jasmine.arrayContaining([ 'x', 'y', 'z', @@ -110,7 +98,13 @@ describe('Test gl3d plots', function() { 'marker.color': 'orange', 'marker.line.color': undefined }); - assertHoverLabelStyle('rgb(0, 0, 255)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)'); + assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + bgcolor: 'rgb(0, 0, 255)', + bordercolor: 'rgb(255, 255, 255)', + fontSize: 13, + fontFamily: 'Arial', + fontColor: 'rgb(255, 255, 255)' + }, 'initial'); return Plotly.restyle(gd, { x: [['2016-01-11', '2016-01-12', '2017-01-01', '2017-02-01']] @@ -164,7 +158,13 @@ describe('Test gl3d plots', function() { }) .then(_hover) .then(function() { - assertHoverLabelStyle('rgb(0, 128, 0)', 'rgb(255, 255, 255)', 20, 'Arial', 'rgb(255, 255, 255)'); + assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + bgcolor: 'rgb(0, 128, 0)', + bordercolor: 'rgb(255, 255, 255)', + fontSize: 20, + fontFamily: 'Arial', + fontColor: 'rgb(255, 255, 255)' + }, 'restyled'); return Plotly.relayout(gd, { 'hoverlabel.bordercolor': 'yellow', @@ -174,7 +174,13 @@ describe('Test gl3d plots', function() { }) .then(_hover) .then(function() { - assertHoverLabelStyle('rgb(0, 128, 0)', 'rgb(255, 255, 0)', 20, 'Roboto', 'rgb(0, 255, 255)'); + assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + bgcolor: 'rgb(0, 128, 0)', + bordercolor: 'rgb(255, 255, 0)', + fontSize: 20, + fontFamily: 'Roboto', + fontColor: 'rgb(0, 255, 255)' + }, 'restyle #2'); return Plotly.restyle(gd, 'hoverinfo', [[null, null, 'y', null]]); }) @@ -215,7 +221,13 @@ describe('Test gl3d plots', function() { .then(function() { assertHoverText('x: 1', 'y: 2', 'z: 43', 'one two'); assertEventData(1, 2, 43, 0, [1, 2]); - assertHoverLabelStyle('rgb(68, 68, 68)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)'); + assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + bgcolor: 'rgb(68, 68, 68)', + bordercolor: 'rgb(255, 255, 255)', + fontSize: 13, + fontFamily: 'Arial', + fontColor: 'rgb(255, 255, 255)' + }, 'initial'); Plotly.restyle(gd, { 'hoverinfo': [[ @@ -238,7 +250,13 @@ describe('Test gl3d plots', function() { 'hoverinfo': 'y', 'hoverlabel.font.color': 'cyan' }); - assertHoverLabelStyle('rgb(255, 255, 255)', 'rgb(68, 68, 68)', 9, 'Arial', 'rgb(0, 255, 255)'); + assertHoverLabelStyle(d3.selectAll('g.hovertext'), { + bgcolor: 'rgb(255, 255, 255)', + bordercolor: 'rgb(68, 68, 68)', + fontSize: 9, + fontFamily: 'Arial', + fontColor: 'rgb(0, 255, 255)' + }, 'restyle'); var label = d3.selectAll('g.hovertext'); diff --git a/test/jasmine/tests/hover_label_test.js b/test/jasmine/tests/hover_label_test.js index 39f7e3618c4..df7bef8e771 100644 --- a/test/jasmine/tests/hover_label_test.js +++ b/test/jasmine/tests/hover_label_test.js @@ -12,6 +12,7 @@ var click = require('../assets/click'); var delay = require('../assets/delay'); var doubleClick = require('../assets/double_click'); var fail = require('../assets/fail_test'); +var assertHoverLabelStyle = require('../assets/custom_assertions').assertHoverLabelStyle; describe('hover info', function() { 'use strict'; @@ -1076,14 +1077,15 @@ describe('Test hover label custom styling:', function() { if(expectation === null) { expect(g.size()).toBe(0); } else { - var path = g.select('path'); - expect(path.style('fill')).toBe(expectation.path[0], 'bgcolor'); - expect(path.style('stroke')).toBe(expectation.path[1], 'bordercolor'); - - var text = g.select({hovertext: 'text.nums', axistext: 'text'}[className]); - expect(parseInt(text.style('font-size'))).toBe(expectation.text[0], 'font.size'); - expect(text.style('font-family').split(',')[0]).toBe(expectation.text[1], 'font.family'); - expect(text.style('fill')).toBe(expectation.text[2], 'font.color'); + assertHoverLabelStyle(g, { + bgcolor: expectation.path[0], + bordercolor: expectation.path[1], + fontSize: expectation.text[0], + fontFamily: expectation.text[1], + fontColor: expectation.text[2] + }, + '', + {hovertext: 'text.nums', axistext: 'text'}[className]); } } diff --git a/test/jasmine/tests/legend_test.js b/test/jasmine/tests/legend_test.js index a425766fb6d..6822de49f48 100644 --- a/test/jasmine/tests/legend_test.js +++ b/test/jasmine/tests/legend_test.js @@ -539,11 +539,11 @@ describe('legend relayout update', function() { var mockCopy = Lib.extendDeep({}, mock); function assertLegendStyle(bgColor, borderColor, borderWidth) { - var node = d3.select('g.legend').select('rect'); + var node = d3.select('g.legend').select('rect').node(); - expect(node.style('fill')).toEqual(bgColor); - expect(node.style('stroke')).toEqual(borderColor); - expect(node.style('stroke-width')).toEqual(borderWidth + 'px'); + expect(node.style.fill).toEqual(bgColor); + expect(node.style.stroke).toEqual(borderColor); + expect(node.style.strokeWidth).toEqual(borderWidth + 'px'); } Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() { diff --git a/test/jasmine/tests/mapbox_test.js b/test/jasmine/tests/mapbox_test.js index 1cf2c05fa6f..1075b0574ce 100644 --- a/test/jasmine/tests/mapbox_test.js +++ b/test/jasmine/tests/mapbox_test.js @@ -724,11 +724,11 @@ describe('@noCI, mapbox plots', function() { return assertMouseMove(pointPos, 1); }) .then(function() { - var path = d3.select('g.hovertext').select('path'); - var text = d3.select('g.hovertext').select('text.nums'); + var path = d3.select('g.hovertext').select('path').node(); + var text = d3.select('g.hovertext').select('text.nums').node(); - expect(path.style('fill')).toEqual('rgb(255, 255, 0)', 'bgcolor'); - expect(text.style('font-size')).toEqual('20px', 'font.size[0]'); + expect(path.style.fill).toEqual('rgb(255, 255, 0)', 'bgcolor'); + expect(text.style.fontSize).toEqual('20px', 'font.size[0]'); }) .catch(failTest) .then(done); diff --git a/test/jasmine/tests/page_test.js b/test/jasmine/tests/page_test.js index b0a134bc2e3..a7948a4a9c1 100644 --- a/test/jasmine/tests/page_test.js +++ b/test/jasmine/tests/page_test.js @@ -68,7 +68,7 @@ describe('page rendering', function() { // visibility: hidden is inherited by all children (unless overridden // somewhere in the tree) allPresentationElements.each(function() { - expect(d3.select(this).style('visibility')).toBe('hidden'); + expect(window.getComputedStyle(this).visibility).toBe('hidden'); }); gd3.style({visibility: null, display: 'none'}); diff --git a/test/jasmine/tests/pie_test.js b/test/jasmine/tests/pie_test.js index a712a210c54..0e138d1fc56 100644 --- a/test/jasmine/tests/pie_test.js +++ b/test/jasmine/tests/pie_test.js @@ -8,6 +8,7 @@ var failTest = require('../assets/fail_test'); var click = require('../assets/click'); var getClientPosition = require('../assets/get_client_position'); var mouseEvent = require('../assets/mouse_event'); +var assertHoverLabelStyle = require('../assets/custom_assertions').assertHoverLabelStyle; describe('Pie traces:', function() { 'use strict'; @@ -44,12 +45,11 @@ describe('Pie traces:', function() { var opacities = [0.2, 0.3, 0.4, 0.5, 0.6]; function checkPath(d, i) { - var path = d3.select(this); // strip spaces (ie 'rgb(0, 0, 0)') so we're not dependent on browser specifics - expect(path.style('fill').replace(/\s/g, '')).toBe(colors[i]); - expect(path.style('fill-opacity')).toBe(String(opacities[i])); - expect(path.style('stroke').replace(/\s/g, '')).toBe('rgb(100,100,100)'); - expect(path.style('stroke-opacity')).toBe('0.7'); + expect(this.style.fill.replace(/\s/g, '')).toBe(colors[i]); + expect(this.style.fillOpacity).toBe(String(opacities[i])); + expect(this.style.stroke.replace(/\s/g, '')).toBe('rgb(100,100,100)'); + expect(this.style.strokeOpacity).toBe('0.7'); } var slices = d3.selectAll('.slice path'); slices.each(checkPath); @@ -244,7 +244,7 @@ describe('pie hovering', function() { Lib.clearThrottle(); } - function assertLabel(content, style) { + function assertLabel(content, style, msg) { var g = d3.selectAll('.hovertext'); var lines = g.selectAll('.nums .line'); @@ -255,14 +255,13 @@ describe('pie hovering', function() { }); if(style) { - var path = g.select('path'); - expect(path.style('fill')).toEqual(style[0], 'bgcolor'); - expect(path.style('stroke')).toEqual(style[1], 'bordercolor'); - - var text = g.select('text.nums'); - expect(parseInt(text.style('font-size'))).toEqual(style[2], 'font.size'); - expect(text.style('font-family').split(',')[0]).toEqual(style[3], 'font.family'); - expect(text.style('fill')).toEqual(style[4], 'font.color'); + assertHoverLabelStyle(g, { + bgcolor: style[0], + bordercolor: style[1], + fontSize: style[2], + fontFamily: style[3], + fontColor: style[4] + }, msg); } } @@ -272,14 +271,15 @@ describe('pie hovering', function() { .then(function() { assertLabel( ['4', '5', '33.3%'], - ['rgb(31, 119, 180)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)'] + ['rgb(31, 119, 180)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)'], + 'initial' ); return Plotly.restyle(gd, 'text', [['A', 'B', 'C', 'D', 'E']]); }) .then(_hover) .then(function() { - assertLabel(['4', 'E', '5', '33.3%']); + assertLabel(['4', 'E', '5', '33.3%'], null, 'added text'); return Plotly.restyle(gd, 'hovertext', [[ 'Apple', 'Banana', 'Clementine', 'Dragon Fruit', 'Eggplant' @@ -287,13 +287,13 @@ describe('pie hovering', function() { }) .then(_hover) .then(function() { - assertLabel(['4', 'Eggplant', '5', '33.3%']); + assertLabel(['4', 'Eggplant', '5', '33.3%'], null, 'added hovertext'); return Plotly.restyle(gd, 'hovertext', 'SUP'); }) .then(_hover) .then(function() { - assertLabel(['4', 'SUP', '5', '33.3%']); + assertLabel(['4', 'SUP', '5', '33.3%'], null, 'constant hovertext'); return Plotly.restyle(gd, { 'hoverlabel.bgcolor': [['red', 'green', 'blue', 'yellow', 'red']], @@ -307,20 +307,21 @@ describe('pie hovering', function() { .then(function() { assertLabel( ['4', 'SUP', '5', '33.3%'], - ['rgb(255, 0, 0)', 'rgb(255, 255, 0)', 15, 'Roboto', 'rgb(0, 0, 255)'] + ['rgb(255, 0, 0)', 'rgb(255, 255, 0)', 15, 'Roboto', 'rgb(0, 0, 255)'], + 'new styles' ); return Plotly.restyle(gd, 'hoverinfo', [[null, null, null, null, 'label+percent']]); }) .then(_hover) .then(function() { - assertLabel(['4', '33.3%']); + assertLabel(['4', '33.3%'], null, 'new hoverinfo'); return Plotly.restyle(gd, 'hoverinfo', [[null, null, null, null, 'dont+know+what+im-doing']]); }) .then(_hover) .then(function() { - assertLabel(['4', 'SUP', '5', '33.3%']); + assertLabel(['4', 'SUP', '5', '33.3%'], null, 'garbage hoverinfo'); }) .catch(fail) .then(done); diff --git a/test/jasmine/tests/plot_api_test.js b/test/jasmine/tests/plot_api_test.js index 600321d0064..59a02aa79c5 100644 --- a/test/jasmine/tests/plot_api_test.js +++ b/test/jasmine/tests/plot_api_test.js @@ -1139,12 +1139,12 @@ describe('Test plot api', function() { Plotly.newPlot(gd, mock.data, mock.layout) .then(function() { - expect(d3.select('.cbaxis text').style('fill')).not.toBe('rgb(255, 0, 0)'); + expect(d3.select('.cbaxis text').node().style.fill).not.toBe('rgb(255, 0, 0)'); return Plotly.restyle(gd, {'marker.colorbar.tickfont.color': 'rgb(255, 0, 0)'}); }) .then(function() { - expect(d3.select('.cbaxis text').style('fill')).toBe('rgb(255, 0, 0)'); + expect(d3.select('.cbaxis text').node().style.fill).toBe('rgb(255, 0, 0)'); return Plotly.restyle(gd, {'marker.showscale': false}); }) @@ -1158,12 +1158,12 @@ describe('Test plot api', function() { it('updates colorbars when editing gl3d plots', function(done) { Plotly.newPlot(gd, [{z: [[1, 2], [3, 6]], type: 'surface'}]) .then(function() { - expect(d3.select('.cbaxis text').style('fill')).not.toBe('rgb(255, 0, 0)'); + expect(d3.select('.cbaxis text').node().style.fill).not.toBe('rgb(255, 0, 0)'); return Plotly.restyle(gd, {'colorbar.tickfont.color': 'rgb(255, 0, 0)'}); }) .then(function() { - expect(d3.select('.cbaxis text').style('fill')).toBe('rgb(255, 0, 0)'); + expect(d3.select('.cbaxis text').node().style.fill).toBe('rgb(255, 0, 0)'); return Plotly.restyle(gd, {'showscale': false}); }) diff --git a/test/jasmine/tests/plot_promise_test.js b/test/jasmine/tests/plot_promise_test.js index 5fc8285e350..069211b367a 100644 --- a/test/jasmine/tests/plot_promise_test.js +++ b/test/jasmine/tests/plot_promise_test.js @@ -470,9 +470,11 @@ describe('Plotly.___ methods', function() { }); it('should return a rejected promise with no argument', function(done) { - Plotly.Plots.resize().then(null, function(err) { + Plotly.Plots.resize().then(function() { + expect(1).toBe(0, 'We were supposed to get an error.'); + }, function(err) { expect(err).toBeDefined(); - expect(err.message).toBe('Resize must be passed a plot div element.'); + expect(err.message).toBe('Resize must be passed a displayed plot div element.'); }).then(done); }); }); diff --git a/test/jasmine/tests/range_selector_test.js b/test/jasmine/tests/range_selector_test.js index 1a306e4b24d..9070d9c0eca 100644 --- a/test/jasmine/tests/range_selector_test.js +++ b/test/jasmine/tests/range_selector_test.js @@ -480,7 +480,7 @@ describe('range selector interactions:', function() { d3.selectAll('.button').each(function(d) { var rect = d3.select(this).select('rect'); - expect(rect.style('fill')).toEqual( + expect(rect.node().style.fill).toEqual( d.isActive ? activeColor : bgColor ); }); @@ -559,13 +559,13 @@ describe('range selector interactions:', function() { var fillColor = Color.rgb(gd._fullLayout.xaxis.rangeselector.bgcolor); var activeColor = 'rgb(212, 212, 212)'; - expect(button.style('fill')).toEqual(fillColor); + expect(button.node().style.fill).toEqual(fillColor); mouseEvent('mouseover', pos[0], pos[1]); - expect(button.style('fill')).toEqual(activeColor); + expect(button.node().style.fill).toEqual(activeColor); mouseEvent('mouseout', pos[0], pos[1]); - expect(button.style('fill')).toEqual(fillColor); + expect(button.node().style.fill).toEqual(fillColor); }); it('should update is active relayout calls', function(done) { diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js index 9549826d058..965575eba9c 100644 --- a/test/jasmine/tests/sankey_test.js +++ b/test/jasmine/tests/sankey_test.js @@ -11,6 +11,7 @@ var createGraphDiv = require('../assets/create_graph_div'); var destroyGraphDiv = require('../assets/destroy_graph_div'); var fail = require('../assets/fail_test'); var mouseEvent = require('../assets/mouse_event'); +var assertHoverLabelStyle = require('../assets/custom_assertions').assertHoverLabelStyle; describe('sankey tests', function() { @@ -599,12 +600,11 @@ function assertLabel(content, style) { expect(name.text()).toBe(content[content.length - 1]); - var path = g.select('path'); - expect(path.style('fill')).toEqual(style[0], 'bgcolor'); - expect(path.style('stroke')).toEqual(style[1], 'bordercolor'); - - var text = g.select('text.nums'); - expect(parseInt(text.style('font-size'))).toEqual(style[2], 'font.size'); - expect(text.style('font-family').split(',')[0]).toEqual(style[3], 'font.family'); - expect(text.style('fill')).toEqual(style[4], 'font.color'); + assertHoverLabelStyle(g, { + bgcolor: style[0], + bordercolor: style[1], + fontSize: style[2], + fontFamily: style[3], + fontColor: style[4] + }); } diff --git a/test/jasmine/tests/scatter_test.js b/test/jasmine/tests/scatter_test.js index c372189e464..3b588f496d0 100644 --- a/test/jasmine/tests/scatter_test.js +++ b/test/jasmine/tests/scatter_test.js @@ -449,7 +449,7 @@ describe('end-to-end scatter tests', function() { expect(txs.size()).toEqual(txContent.length); pts.each(function(_, i) { - expect(d3.select(this).style('fill')).toEqual(ptStyle[i], 'pt ' + i); + expect(this.style.fill).toEqual(ptStyle[i], 'pt ' + i); }); txs.each(function(_, i) { diff --git a/test/jasmine/tests/sliders_test.js b/test/jasmine/tests/sliders_test.js index a1430205235..d959667ecee 100644 --- a/test/jasmine/tests/sliders_test.js +++ b/test/jasmine/tests/sliders_test.js @@ -372,7 +372,7 @@ describe('sliders interactions', function() { var railNode = firstGroup.node(); var touchRect = railNode.getBoundingClientRect(); - var originalFill = firstGrip.style('fill'); + var originalFill = firstGrip.node().style.fill; // Dispatch a click on the right side of the bar: railNode.dispatchEvent(new MouseEvent('mousedown', { @@ -381,7 +381,7 @@ describe('sliders interactions', function() { })); expect(mockCopy.layout.sliders[0].active).toEqual(5); - var mousedownFill = firstGrip.style('fill'); + var mousedownFill = firstGrip.node().style.fill; expect(mousedownFill).not.toEqual(originalFill); // Drag to the left side: @@ -390,7 +390,7 @@ describe('sliders interactions', function() { clientX: touchRect.left + 5, })); - var mousemoveFill = firstGrip.style('fill'); + var mousemoveFill = firstGrip.node().style.fill; expect(mousemoveFill).toEqual(mousedownFill); setTimeout(function() { @@ -398,7 +398,7 @@ describe('sliders interactions', function() { gd.dispatchEvent(new MouseEvent('mouseup')); - var mouseupFill = firstGrip.style('fill'); + var mouseupFill = firstGrip.node().style.fill; expect(mouseupFill).toEqual(originalFill); expect(mockCopy.layout.sliders[0].active).toEqual(0); diff --git a/test/jasmine/tests/snapshot_test.js b/test/jasmine/tests/snapshot_test.js index c5c16cdbf79..b48a0f2858e 100644 --- a/test/jasmine/tests/snapshot_test.js +++ b/test/jasmine/tests/snapshot_test.js @@ -230,8 +230,9 @@ describe('Plotly.Snapshot', function() { Plotly.plot(gd, subplotMock.data, subplotMock.layout).then(function() { d3.select(gd).selectAll('text').each(function() { - expect(d3.select(this).style('visibility')).toEqual('visible'); - expect(d3.select(this).style('display')).toEqual('block'); + var thisStyle = window.getComputedStyle(this); + expect(thisStyle.visibility).toEqual('visible'); + expect(thisStyle.display).toEqual('block'); }); return Plotly.Snapshot.toSVG(gd); @@ -265,13 +266,11 @@ describe('Plotly.Snapshot', function() { }) .then(function() { d3.selectAll('text').each(function() { - var tx = d3.select(this); - expect(tx.style('font-family')).toEqual('\"Times New Roman\"'); + expect(this.style.fontFamily).toEqual('\"Times New Roman\"'); }); d3.selectAll('.point,.scatterpts').each(function() { - var pt = d3.select(this); - expect(pt.style('fill').substr(0, 6)).toEqual('url(\"#'); + expect(this.style.fill.substr(0, 6)).toEqual('url(\"#'); }); return Plotly.Snapshot.toSVG(gd); @@ -284,7 +283,7 @@ describe('Plotly.Snapshot', function() { expect(textElements.length).toEqual(12); for(i = 0; i < textElements.length; i++) { - expect(textElements[i].style['font-family']).toEqual('\"Times New Roman\"'); + expect(textElements[i].style.fontFamily).toEqual('\"Times New Roman\"'); } var pointElements = svgDOM.getElementsByClassName('point'); diff --git a/test/jasmine/tests/ternary_test.js b/test/jasmine/tests/ternary_test.js index 325a31aeff9..387e582a70c 100644 --- a/test/jasmine/tests/ternary_test.js +++ b/test/jasmine/tests/ternary_test.js @@ -125,11 +125,11 @@ describe('ternary plots', function() { Lib.clearThrottle(); mouseEvent('mousemove', pointPos[0], pointPos[1]); - var path = d3.select('g.hovertext').select('path'); - var text = d3.select('g.hovertext').select('text.nums'); + var pathStyle = window.getComputedStyle(d3.select('g.hovertext path').node()); + var textStyle = window.getComputedStyle(d3.select('g.hovertext text.nums').node()); - expect(path.style('stroke')).toEqual('rgb(0, 0, 255)', 'bordercolor'); - expect(text.style('font-family')).toEqual('Gravitas', 'font.family[0]'); + expect(pathStyle.stroke).toEqual('rgb(0, 0, 255)', 'bordercolor'); + expect(textStyle.fontFamily).toEqual('Gravitas', 'font.family[0]'); }) .then(done); }); diff --git a/test/jasmine/tests/titles_test.js b/test/jasmine/tests/titles_test.js index 7e6b58e64d5..0e81784bb29 100644 --- a/test/jasmine/tests/titles_test.js +++ b/test/jasmine/tests/titles_test.js @@ -23,7 +23,7 @@ describe('editable titles', function() { function checkTitle(letter, text, opacityOut, opacityIn) { var titleEl = d3.select('.' + letter + 'title'); expect(titleEl.text()).toBe(text); - expect(+titleEl.style('opacity')).toBe(opacityOut); + expect(+(titleEl.node().style.opacity || 1)).toBe(opacityOut); var bb = titleEl.node().getBoundingClientRect(), xCenter = (bb.left + bb.right) / 2, @@ -33,11 +33,11 @@ describe('editable titles', function() { mouseEvent('mouseover', xCenter, yCenter); setTimeout(function() { - expect(+titleEl.style('opacity')).toBe(opacityIn); + expect(+(titleEl.node().style.opacity || 1)).toBe(opacityIn); mouseEvent('mouseout', xCenter, yCenter); setTimeout(function() { - expect(+titleEl.style('opacity')).toBe(opacityOut); + expect(+(titleEl.node().style.opacity || 1)).toBe(opacityOut); done(); }, interactConstants.HIDE_PLACEHOLDER + 50); }, interactConstants.SHOW_PLACEHOLDER + 50); diff --git a/test/jasmine/tests/updatemenus_test.js b/test/jasmine/tests/updatemenus_test.js index ff27cf27958..523a2d6f5e4 100644 --- a/test/jasmine/tests/updatemenus_test.js +++ b/test/jasmine/tests/updatemenus_test.js @@ -774,7 +774,7 @@ describe('update menus interactions', function() { function assertItemColor(node, color) { var rect = node.select('rect'); - expect(rect.style('fill')).toEqual(color); + expect(rect.node().style.fill).toEqual(color); } function assertItemDims(node, width, height) {