Add docs for SVGElement.attributeStyleMap and MathMLElement.attributeStyleMap

files/en-us/web/api/htmlelement/attributestylemap/index.md

@@ -8,7 +8,7 @@ browser-compat: api.HTMLElement.attributeStyleMap
 
 {{APIRef("CSSOM")}}
 
-The **`attributeStyleMap`** read-only property of the {{domxref("HTMLElement")}} interface returns a live {{domxref("StylePropertyMap")}} object that contains a list of style properties of the element that are defined in the element's inline [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, or assigned using the {{domxref("HTMLElement.style", "style")}} property of the {{domxref("HTMLElement")}} interface via script.
+The **`attributeStyleMap`** read-only property of the {{domxref("HTMLElement")}} interface returns a live {{domxref("StylePropertyMap")}} object that contains a list of style properties of the element that are defined in the element's inline `style` attribute, or assigned using the {{domxref("HTMLElement.style", "style")}} property of the {{domxref("HTMLElement")}} interface via script.
 
 Shorthand properties are expanded. If you set `border-top: 1px solid black`, the longhand properties ({{cssxref("border-top-color")}}, {{cssxref("border-top-style")}}, and {{cssxref("border-top-width")}}) are set instead.
 
@@ -22,7 +22,7 @@ A live {{domxref("StylePropertyMap")}} object.
 
 ## Examples
 
-The following code snippet shows the relationship between HTML `style` attribute and `attributeStyleMap` property:
+The following code snippet shows the relationship between the `style` attribute and the `attributeStyleMap` property:
 
 ```html
 <div style="white-space: pre-line;">
@@ -61,3 +61,5 @@ for (const property of element.attributeStyleMap) {
 ## See also
 
 - {{domxref("HTMLElement.style")}}
+- {{domxref("SVGElement.attributeStyleMap")}}
+- {{domxref("MathMLElement.attributeStyleMap")}}

files/en-us/web/api/mathmlelement/attributestylemap/index.md

@@ -0,0 +1,72 @@
+---
+title: "MathMLElement: attributeStyleMap property"
+short-title: attributeStyleMap
+slug: Web/API/MathMLElement/attributeStyleMap
+page-type: web-api-instance-property
+browser-compat: api.MathMLElement.attributeStyleMap
+---
+
+{{APIRef("CSSOM")}}
+
+The **`attributeStyleMap`** read-only property of the {{domxref("MathMLElement")}} interface returns a live {{domxref("StylePropertyMap")}} object that contains a list of style properties of the element that are defined in the element's inline `style` attribute, or assigned using the {{domxref("MathMLElement.style", "style")}} property of the {{domxref("MathMLElement")}} interface via script.
+
+Shorthand properties are expanded. If you set `border-top: 1px solid black`, the longhand properties ({{cssxref("border-top-color")}}, {{cssxref("border-top-style")}}, and {{cssxref("border-top-width")}}) are set instead.
+
+The main difference between {{domxref("MathMLElement.style", "style")}} property and `attributeStyleMap` property is that, the `style` property will return a {{domxref("CSSStyleDeclaration")}} object, while the `attributeStyleMap` property will return a {{domxref("StylePropertyMap")}} object.
+
+Though the property itself is not writable, you could read and write inline styles through the {{domxref("StylePropertyMap")}} object that it returns, just like through the {{domxref("CSSStyleDeclaration")}} object that returns via the `style` property.
+
+## Value
+
+A live {{domxref("StylePropertyMap")}} object.
+
+## Examples
+
+The following code snippet shows the relationship between the `style` attribute and the `attributeStyleMap` property:
+
+```html
+<div style="white-space: pre-line;">
+  <math xmlns="http://www.w3.org/1998/Math/MathML">
+    <mrow>
+      <mi>f</mi>
+      <mo stretchy="false">(</mo>
+      <mi id="el" style="border-top: 1px solid blue; color: red;">x</mi>
+      <mo stretchy="false">)</mo>
+      <mo>=</mo>
+      <mi>x</mi>
+    </mrow>
+  </math>
+  <div id="output"></div>
+</div>
+```
+
+```css
+#el {
+  font-size: 16px;
+}
+```
+
+```js
+const element = document.getElementById("el");
+const output = document.getElementById("output");
+
+for (const property of element.attributeStyleMap) {
+  output.textContent += `${property[0]} = ${property[1][0].toString()}\n`;
+}
+```
+
+{{EmbedLiveSample("Examples", "200", "200")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("MathMLElement.style")}}
+- {{domxref("HTMLElement.attributeStyleMap")}}
+- {{domxref("SVGElement.attributeStyleMap")}}

files/en-us/web/api/mathmlelement/style/index.md

@@ -85,3 +85,4 @@ for (const prop in elementStyle) {
 - [Using dynamic styling information](/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information)
 - {{domxref("HTMLElement.style")}}
 - {{domxref("SVGElement.style")}}
+- {{domxref("MathMLElement.attributeStyleMap")}}

files/en-us/web/api/svgelement/attributestylemap/index.md

@@ -0,0 +1,77 @@
+---
+title: "SVGElement: attributeStyleMap property"
+short-title: attributeStyleMap
+slug: Web/API/SVGElement/attributeStyleMap
+page-type: web-api-instance-property
+browser-compat: api.SVGElement.attributeStyleMap
+---
+
+{{APIRef("CSSOM")}}
+
+The **`attributeStyleMap`** read-only property of the {{domxref("SVGElement")}} interface returns a live {{domxref("StylePropertyMap")}} object that contains a list of style properties of the element that are defined in the element's inline `style` attribute, or assigned using the {{domxref("SVGElement.style", "style")}} property of the {{domxref("SVGElement")}} interface via script.
+
+Shorthand properties are expanded. If you set `border-top: 1px solid black`, the longhand properties ({{cssxref("border-top-color")}}, {{cssxref("border-top-style")}}, and {{cssxref("border-top-width")}}) are set instead.
+
+The main difference between {{domxref("SVGElement.style", "style")}} property and `attributeStyleMap` property is that, the `style` property will return a {{domxref("CSSStyleDeclaration")}} object, while the `attributeStyleMap` property will return a {{domxref("StylePropertyMap")}} object.
+
+Though the property itself is not writable, you could read and write inline styles through the {{domxref("StylePropertyMap")}} object that it returns, just like through the {{domxref("CSSStyleDeclaration")}} object that returns via the `style` property.
+
+## Value
+
+A live {{domxref("StylePropertyMap")}} object.
+
+## Examples
+
+The following code snippet shows the relationship between the `style` attribute and the `attributeStyleMap` property:
+
+```html
+<div style="white-space: pre-line;">
+  <svg
+    width="50"
+    height="50"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 250 250"
+    width="250"
+    height="250"
+    style="white-space: pre-line;">
+    <circle
+      cx="100"
+      cy="100"
+      r="50"
+      id="el"
+      style="border-top: 1px solid blue; color: red;" />
+  </svg>
+  <div id="output"></div>
+</div>
+```
+
+```css
+#el {
+  font-size: 16px;
+}
+```
+
+```js
+const element = document.getElementById("el");
+const output = document.getElementById("output");
+
+for (const property of element.attributeStyleMap) {
+  output.textContent += `${property[0]} = ${property[1][0].toString()}\n`;
+}
+```
+
+{{EmbedLiveSample("Examples", "200", "200")}}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("SVGElement.style")}}
+- {{domxref("HTMLElement.attributeStyleMap")}}
+- {{domxref("MathMLElement.attributeStyleMap")}}

files/en-us/web/api/svgelement/index.md

@@ -17,7 +17,7 @@ _Also inherits properties from the {{DOMxRef("Element")}} interface._
 
 - {{DOMxRef("SVGElement.attributeStyleMap")}} {{ReadOnlyInline}}
   - : A {{DOMxRef("StylePropertyMap")}} representing the declarations of the element's {{SVGAttr("style")}} attribute.
-- {{DOMxRef("HTMLElement.dataset")}} {{ReadOnlyInline}}
+- {{DOMxRef("SVGElement.dataset")}} {{ReadOnlyInline}}
   - : A {{DOMxRef("DOMStringMap")}} object which provides a list of key/value pairs of named data attributes which correspond to [custom data attributes](/en-US/docs/Learn/HTML/Howto/Use_data_attributes) attached to the element. These can also be defined in SVG using attributes of the form {{SVGAttr("data-*")}}, where `*` is the key name for the pair. This works just like HTML's {{DOMxRef("HTMLElement.dataset")}} property and HTML's [`data-*`](/en-US/docs/Web/HTML/Global_attributes/data-*) global attribute.
 - {{DOMxRef("SVGElement.className")}} {{Deprecated_Inline}} {{ReadOnlyInline}}
   - : An {{DOMxRef("SVGAnimatedString")}} that reflects the value of the {{SVGAttr("class")}} attribute on the given element, or the empty string if `class` is not present. This attribute is deprecated and may be removed in a future version of this specification. Authors are advised to use {{DOMxRef("Element.classList")}} instead.

files/en-us/web/api/svgelement/style/index.md

@@ -89,3 +89,4 @@ for (const prop in elementStyle) {
 - [Using dynamic styling information](/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information)
 - {{domxref("HTMLElement.style")}}
 - {{domxref("MathMLElement.style")}}
+- {{domxref("SVGElement.attributeStyleMap")}}