diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts index 0b1e81d402..9806310d87 100644 --- a/packages/core/src/debug/debug_node.ts +++ b/packages/core/src/debug/debug_node.ts @@ -352,10 +352,14 @@ class DebugElement__POST_R3__ extends DebugNode__POST_R3__ implements DebugEleme get classes(): {[key: string]: boolean;} { const result: {[key: string]: boolean;} = {}; - const element = this.nativeElement as HTMLElement; - const classNames = element.className.split(' '); + const element = this.nativeElement as HTMLElement | SVGElement; - classNames.forEach((value: string) => result[value] = true); + // SVG elements return an `SVGAnimatedString` instead of a plain string for the `className`. + const className = element.className as string | SVGAnimatedString; + const classes = className && typeof className !== 'string' ? className.baseVal.split(' ') : + className.split(' '); + + classes.forEach((value: string) => result[value] = true); return result; } diff --git a/packages/core/test/debug/debug_node_spec.ts b/packages/core/test/debug/debug_node_spec.ts index d3c22df2da..c8e51f48d3 100644 --- a/packages/core/test/debug/debug_node_spec.ts +++ b/packages/core/test/debug/debug_node_spec.ts @@ -368,6 +368,22 @@ class TestCmptWithPropInterpolation { .toBeFalsy('Expected bound host CSS class "absent-class" to be absent'); }); + it('should list classes on SVG nodes', () => { + // Class bindings on SVG elements require a polyfill + // on IE which we don't include when running tests. + if (typeof SVGElement !== 'undefined' && !('classList' in SVGElement.prototype)) { + return; + } + + TestBed.overrideTemplate(TestApp, ``); + fixture = TestBed.createComponent(TestApp); + fixture.detectChanges(); + const classes = fixture.debugElement.children[0].classes; + + expect(classes['foo']).toBe(true); + expect(classes['bar']).toBe(true); + }); + it('should list element styles', () => { fixture = TestBed.createComponent(TestApp); fixture.detectChanges();