fix: [#1151] Skips SVG elements when in HTMLElement.innerText (#1753)

* fix: [#1151] Skips svg elements when innerText is used

* fix: [#1151] Add newline if it's a block/flex element and there's more content coming after

* chore: [#1151] Improves performance and removes incorrect comment

---------

Co-authored-by: David Ortner <david@ortner.se>

Author: karpiuMG

packages/happy-dom/src/nodes/html-element/HTMLElement.ts

@@ -671,17 +671,20 @@ export default class HTMLElement extends Element {
 
 				if (
 					childElement[PropertySymbol.tagName] !== 'SCRIPT' &&
-					childElement[PropertySymbol.tagName] !== 'STYLE'
+					childElement[PropertySymbol.tagName] !== 'STYLE' &&
+					childElement[PropertySymbol.tagName] !== 'svg'
 				) {
 					const display = computedStyle.display;
 					if (display !== 'none') {
 						const textTransform = computedStyle.textTransform;
+						const innerText = childElement.innerText;
 
-						if ((display === 'block' || display === 'flex') && result) {
+						// Only add newline if it's a block/flex element and there's more content coming after
+						if ((display === 'block' || display === 'flex') && result && innerText) {
 							result += '\n';
 						}
 
-						let text = childElement.innerText;
+						let text = innerText;
 
 						switch (textTransform) {
 							case 'uppercase':

packages/happy-dom/test/nodes/html-element/HTMLElement.test.ts

@@ -280,7 +280,7 @@ describe('HTMLElement', () => {
 		it('Returns rendered text with line breaks between block and flex elements and without hidden elements being rendered if element is connected to the document.', () => {
 			document.body.appendChild(element);
 
-			element.innerHTML = `<div>The <strong>quick</strong> brown fox</div><script>var key = "value";</script><style>button { background: red; }</style><div>Jumped over the lazy dog</div>`;
+			element.innerHTML = `<div>The <strong>quick</strong> brown fox</div><script>var key = "value";</script><style>button { background: red; }</style><div><svg></svg>Jumped over the lazy dog</div>`;
 			expect(element.innerText).toBe('The quick brown fox\nJumped over the lazy dog');
 
 			element.innerHTML = `<div>The <strong>quick</strong> brown fox</div><span style="display: flex">Jumped over the lazy dog</span><div>.</div>`;
@@ -299,6 +299,15 @@ describe('HTMLElement', () => {
 			element.innerHTML = `<div>The <strong>quick</strong> brown fox</div><span>jumped over the lazy dog</span><style>span { text-transform: capitalize; display: block; }</style>`;
 			expect(element.innerText).toBe('The quick brown fox\nJumped Over The Lazy Dog');
 		});
+
+		it("It skips svg elements when innerText is used and add a newline only if there's more content coming after", () => {
+			document.body.appendChild(element);
+			// notice the lack of closing div tag
+			element.innerHTML = '<div><span><svg></svg></span>123<div>';
+			expect(element.innerText).toBe('123');
+			element.innerHTML = '<div><span><svg>Test</svg></span>123<div>';
+			expect(element.innerText).toBe('123');
+		});
 	});
 
 	describe('set innerText()', () => {