1 files changed, 64 insertions, 1 deletions
diff --git a/toolkit/content/tests/widgets/test_moz_card.html b/toolkit/content/tests/widgets/test_moz_card.html
index ef4e67d0fa..aa9ecfde31 100644
--- a/toolkit/content/tests/widgets/test_moz_card.html
+++ b/toolkit/content/tests/widgets/test_moz_card.html
@@ -13,6 +13,11 @@
 
 <body>
   <p id="display"></p>
+  <style>
+    moz-card.withHeadingIcon::part(icon) {
+      background-image: url("chrome://browser/skin/preferences/category-general.svg");
+    }
+  </style>
   <div id="content">
     <moz-card id="default-card" data-l10n-id="test-id-1" data-l10n-attrs="heading">
       <div>TEST</div>
@@ -25,6 +30,12 @@
     </moz-card>
     <hr />
 
+    <moz-card id="heading-icon-card" data-l10n-id="test-id-3" data-l10n-attrs="heading" heading="heading with icon"
+      type="accordion" icon class="withHeadingIcon">
+      <div>heading icon test content</div>
+    </moz-card>
+    <hr />
+
   </div>
   <pre id="test"></pre>
   <script>
@@ -58,12 +69,16 @@
 
     }
 
-    function assertAccordionCardProperties(card, expectedValues) {
+    function assertAccordionCardProperties(card) {
       ok(card.detailsEl, "The details element should exist");
       ok(card.detailsEl.querySelector("summary"), "There should be a summary element within the details element");
       ok(card.detailsEl.querySelector("summary").querySelector(".chevron-icon"), "There should be a chevron icon div within the summary element");
     }
 
+    function assertHeadingIconCardProperties(card) {
+      ok(card.shadowRoot.querySelector("#heading-wrapper").querySelector("#heading-icon"), "The heading icon element should exist");
+    }
+
     async function generateCard(values) {
       let card = document.createElement("moz-card");
       for (let [key, value] of Object.entries(values)) {
@@ -152,6 +167,54 @@
       );
     });
 
+    add_task(async function testHeadingIconCard() {
+      assertBasicProperties(document.getElementById("heading-icon-card"),
+        {
+          "data-l10n-id": "test-id-3",
+          "data-l10n-attrs": "heading",
+          contentText: "heading icon test content",
+          headingText: "heading with icon",
+        }
+      );
+      assertHeadingIconCardProperties(document.getElementById("heading-icon-card"),
+        {
+          "data-l10n-id": "test-id-3",
+          "data-l10n-attrs": "heading",
+          contentText: "heading icon test content",
+          headingText: "heading with icon",
+        }
+      );
+
+      let headingIconCard = await generateCard(
+        {
+          class: "heading-icon-class",
+          type: "accordion",
+          icon: "",
+          id: "generated-heading-icon-card",
+          "data-l10n-id": "generated-id-3",
+          "data-l10n-attrs": "heading",
+          heading: testHeading
+        }
+      );
+
+      assertBasicProperties(headingIconCard,
+        {
+          "data-l10n-id": "generated-id-3",
+          "data-l10n-attrs": "heading",
+          headingText: testHeading,
+          contentText: generatedSlotText,
+        }
+      );
+      assertHeadingIconCardProperties(headingIconCard,
+        {
+          "data-l10n-id": "generated-id-3",
+          "data-l10n-attrs": "heading",
+          headingText: testHeading,
+          contentText: generatedSlotText,
+        }
+      );
+    });
+
   </script>
 </body>