Keep track of style and event attribute changes in SVGElement

Fixes #2594.

Co-authored-by: Timothy Gu <timothygu99@gmail.com>

lib/jsdom/living/nodes/ElementCSSInlineStyle-impl.js

@@ -3,6 +3,7 @@ const cssstyle = require("cssstyle");
 
 class ElementCSSInlineStyle {
   _initElementCSSInlineStyle() {
+    this._settingCssText = false;
     this._style = new cssstyle.CSSStyleDeclaration(newCssText => {
       if (!this._settingCssText) {
         this._settingCssText = true;

lib/jsdom/living/nodes/HTMLElement-impl.js

@@ -16,7 +16,6 @@ class HTMLElementImpl extends ElementImpl {
     this._initElementCSSInlineStyle();
     this._initGlobalEvents();
 
-    this._settingCssText = false;
     this._clickInProgress = false;
 
     // <summary> uses HTMLElement and has activation behavior
@@ -116,6 +115,7 @@ class HTMLElementImpl extends ElementImpl {
     this.setAttributeNS(null, "dir", value);
   }
 
+  // Keep in sync with SVGElement. https://github.com/jsdom/jsdom/issues/2599
   _attrModified(name, value, oldValue) {
     if (name === "style" && value !== oldValue && !this._settingCssText) {
       this._settingCssText = true;

lib/jsdom/living/nodes/SVGElement-impl.js

@@ -17,6 +17,19 @@ class SVGElementImpl extends ElementImpl {
     this._initGlobalEvents();
   }
 
+  // Keep in sync with HTMLElement. https://github.com/jsdom/jsdom/issues/2599
+  _attrModified(name, value, oldValue) {
+    if (name === "style" && value !== oldValue && !this._settingCssText) {
+      this._settingCssText = true;
+      this._style.cssText = value;
+      this._settingCssText = false;
+    } else if (name.startsWith("on")) {
+      this._globalEventChanged(name.substring(2));
+    }
+
+    super._attrModified.apply(this, arguments);
+  }
+
   get className() {
     return SVGAnimatedString.createImpl([], {
       element: this,

test/web-platform-tests/to-upstream/svg/element.html

@@ -6,7 +6,7 @@
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 
-<svg>
+<svg style="font-size: 100px" onclick="onClickTestVar = 1">
   <unknownElement/>
 </svg>
 
@@ -15,7 +15,7 @@
 
 test(() => {
   const svg = document.querySelector("svg");
-  assert_true(svg instanceof SVGElement);
+  assert_true(svg instanceof SVGSVGElement);
   const unknownElement = svg.children[0];
   assert_true(unknownElement instanceof SVGElement);
   assert_equals(unknownElement.namespaceURI, "http://www.w3.org/2000/svg");
@@ -24,14 +24,35 @@
   assert_equals(unknownElement.viewportElement, svg);
 }, "Inheritance");
 
+test(() => {
+  const svg = document.querySelector("svg");
+  assert_true(svg instanceof SVGSVGElement);
+  assert_true(svg.style instanceof CSSStyleDeclaration);
+  assert_equals(svg.getAttribute("style"), "font-size: 100px");
+  assert_equals(svg.style.fontSize, "100px");
+  svg.setAttribute("style", "background-color: yellow;");
+  assert_equals(svg.getAttribute("style"), "background-color: yellow;");
+  assert_equals(svg.style.backgroundColor, "yellow");
+  assert_equals(svg.style.fontSize, "");
+}, "style data attribute");
+
 test(() => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
   assert_true(svg.style instanceof CSSStyleDeclaration);
   assert_equals(svg.style.backgroundColor, "");
   svg.style.backgroundColor = "black";
   assert_equals(svg.style.backgroundColor, "black");
   assert_equals(svg.getAttribute("style"), "background-color: black;");
-}, "style attribute");
+}, "style IDL attribute");
+
+test(() => {
+  const svg = document.querySelector("svg");
+  assert_true(svg instanceof SVGSVGElement);
+  assert_true(typeof svg.onclick === "function");
+  window.onClickTestVar = 0;
+  svg.onclick();
+  assert_equals(window.onClickTestVar, 1);
+}, "event handler data attribute");
 
 test(() => {
   const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");