dxViz: Fix tooltip's background showing in Firefox when using a mater…

…ial theme (T891490) (#13148)
DevExpress · May 21, 2020 · d8fbaba · d8fbaba
1 parent 3f56b30
commit d8fbaba
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/js/viz/core/plaque.js b/js/viz/core/plaque.js
@@ -322,7 +322,10 @@ export class Plaque {
         const renderer = this.widget._renderer;
         const options = this.options;
 
-        const cloudSettings = { opacity: options.opacity, 'stroke-width': 0, fill: options.color };
+        const shadowSettings = extend({ x: '-50%', y: '-50%', width: '200%', height: '200%' }, options.shadow);
+        const shadow = this._shadow = renderer.shadowFilter().attr(shadowSettings);
+
+        const cloudSettings = { opacity: options.opacity, filter: shadow.id, 'stroke-width': 0, fill: options.color };
         const borderOptions = options.border || {};
 
         if(borderOptions.visible) {
@@ -334,14 +337,11 @@ export class Plaque {
             });
         }
 
-        const shadowSettings = extend({ x: '-50%', y: '-50%', width: '200%', height: '200%' }, options.shadow);
-        const shadow = this._shadow = renderer.shadowFilter().attr(shadowSettings);
-
         const group = this._root = renderer.g().append(this.root);
         if(options.type) {
             group.attr({ class: `dxc-${options.type}-annotation` });
         }
-        const cloudGroup = renderer.g().attr({ filter: shadow.id }).append(group);
+        const cloudGroup = renderer.g().append(group);
         this._cloud = renderer.path([], 'area').attr(cloudSettings).sharp().append(cloudGroup);
 
         this._contentGroup = renderer.g().append(group);

diff --git a/testing/tests/DevExpress.viz.core/annotations.tests.js b/testing/tests/DevExpress.viz.core/annotations.tests.js
@@ -215,11 +215,10 @@ QUnit.test('Draw image inside a plaque with borders and arrow', function(assert)
         stroke: '#000000',
         dashStyle: 'solid',
         fill: '#AAAAAA',
+        filter: 'shadowFilter.id',
         opacity: 0.5
     }]);
     const cloudGroup = this.renderer.g.getCall(2).returnValue;
-    assert.deepEqual(cloudGroup.attr.firstCall.args, [{ filter: 'shadowFilter.id' }]);
-
     assert.deepEqual(plaque.append.firstCall.args, [cloudGroup]);
     assert.equal(plaque.sharp.callCount, 1);
     checkCloudPath(assert, plaque, [80, 140, 120, 140, 120, 145, 140, 160, 120, 175, 120, 180, 80, 180], [90, 100, 160]);
@@ -272,6 +271,7 @@ QUnit.test('Draw image inside a plaque without borders', function(assert) {
     assert.deepEqual(plaque.attr.firstCall.args, [{
         'stroke-width': 0,
         fill: '#AAAAAA',
+        filter: 'shadowFilter.id',
         opacity: 0.5
     }]);
 });

diff --git a/testing/tests/DevExpress.viz.core/tooltip.tests.js b/testing/tests/DevExpress.viz.core/tooltip.tests.js
@@ -632,7 +632,8 @@ QUnit.test('Show preparations. W/o customize, w/ text', function(assert) {
         dashStyle: 'solid',
         type: 'area',
         opacity: 0.8,
-        'pointer-events': 'none'
+        'pointer-events': 'none',
+        filter: 'shadowFilter.id'
     });
 
     assert.equal(this.tooltip._wrapper.appendTo.callCount, 1, 'wrapper is added to dom');