fix: fixed incorrect check visibility of an SVG element in a hidden e…

…lement (#6799) * test: added test [Regression](GH-3495) - Visibility check should incorporate visibility of parent SVG element(s) * type: made optional second and third params of the method findParent * fix: added check visibility for the parent of the svg element * test: fixed test
DevExpress · Jan 19, 2022 · 048f96e · 048f96e
1 parent 36a08c6
commit 048f96e
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 3 deletions.
diff --git a/src/client/core/utils/shared/types.d.ts b/src/client/core/utils/shared/types.d.ts
@@ -49,7 +49,7 @@ export interface CoreUtilsAdapter {
         getMapContainer (el: Element | null): Element | null;
         getSelectParent (el: Element): HTMLSelectElement | null;
         getChildVisibleIndex (select: HTMLSelectElement, child: Node): number;
-        findParent (node: Node, includeSelf: boolean, predicate: (el: Node) => boolean): Node | null;
+        findParent (node: Node, includeSelf?: boolean, predicate?: (el: Node) => boolean): Node | null;
         isElementNode (el: Node): el is Element;
         isBodyElement (el: unknown): el is HTMLBodyElement;
         isHtmlElement (el: unknown): el is HTMLHtmlElement;

diff --git a/src/client/core/utils/shared/visibility.ts b/src/client/core/utils/shared/visibility.ts
@@ -30,8 +30,14 @@ export function isElementVisible (el: Node): boolean {
         return optionVisibleIndex >= topVisibleIndex && optionVisibleIndex <= bottomVisibleIndex;
     }
 
-    if (adapter.dom.isSVGElement(el))
-        return adapter.style.get(el, 'visibility') !== 'hidden' && adapter.style.get(el, 'display') !== 'none';
+    if (adapter.dom.isSVGElement(el)) {
+        if (adapter.style.get(el, 'visibility') === 'hidden' || adapter.style.get(el, 'display') === 'none')
+            return false;
+
+        const parent = adapter.dom.findParent(el);
+
+        return parent ? isElementVisible(parent) : true;
+    }
 
     return hasDimensions(el as HTMLElement) && adapter.style.get(el, 'visibility') !== 'hidden';
 }
diff --git a/test/functional/fixtures/regression/gh-3495/pages/index.html b/test/functional/fixtures/regression/gh-3495/pages/index.html
@@ -0,0 +1,14 @@
+<html>
+<body>
+<div>
+<span data-test="checkbox">
+	<div id="parent" style="display:none">
+		<svg id="child" fill="grey" stroke="red" viewBox="0 0 300 100">
+			<circle cx="50" cy="50" r="40"/>
+			<circle cx="150" cy="50" r="4"/>
+		</svg>
+	</div>
+</span>
+</div>
+</body>
+</html>
diff --git a/test/functional/fixtures/regression/gh-3495/test.js b/test/functional/fixtures/regression/gh-3495/test.js
@@ -0,0 +1,10 @@
+describe('[Regression](GH-3495) - Visibility check should incorporate visibility of parent SVG element(s)', function () {
+    it('Check visibility parent', function () {
+        return runTests('testcafe-fixtures/index.js', 'Paren shouldn\'t be visible');
+    });
+    it('Check visibility child', function () {
+        return runTests('testcafe-fixtures/index.js', 'Child shouldn\'t be visible');
+    });
+});
+
+
diff --git a/test/functional/fixtures/regression/gh-3495/testcafe-fixtures/index.js b/test/functional/fixtures/regression/gh-3495/testcafe-fixtures/index.js
@@ -0,0 +1,20 @@
+import { Selector } from 'testcafe';
+
+fixture`Fixture`
+    .page('../pages/index.html');
+
+test('Paren shouldn\'t be visible', async t => {
+    const svg = Selector('#parent');
+
+    await t
+        .expect(svg.exists).ok()
+        .expect(svg.visible).notOk();
+});
+
+test('Child shouldn\'t be visible', async t => {
+    const svg = Selector('#child');
+
+    await t
+        .expect(svg.exists).ok()
+        .expect(svg.visible).notOk();
+});