CSS prose extraction: ignore info panel in <dd> case too. (#1211)

Bikeshed now copies info panels (defined in an `<aside>`) next to dfns. These
info panels need to be ignored when extracting prose. They were already in most
cases, but not when the info panel appears in a `<dd>` that follows the dfn of
the CSS value being extracted.

Tests updated accordingly. Note that `<aside>` elements are sectioning content
and as such cannot appear in phrasing content. Bikeshed creates this invalid
DOM fragment through JavaScript. Tests now do that as well.

src/browserlib/extract-cssdfn.mjs

@@ -666,6 +666,10 @@ const extractTypedDfn = dfn => {
           c.remove();
         }
       });
+      [...dd.querySelectorAll('sup')]
+        .map(sup => sup.parentNode.removeChild(sup));
+      [...dd.querySelectorAll('aside, .mdn-anno')]
+        .map(annotation => annotation.parentNode.removeChild(annotation));
 
       res = {
         name: getDfnName(dfn),

tests/extract-css.js

@@ -1420,6 +1420,43 @@ that spans multiple lines */
         value: '<dashed-ident> | implicit'
       }
     ]
+  },
+
+  {
+    title: 'ignores aside info panel in p prose',
+    html: `<p>
+      The <dfn data-dfn-type="type" data-export="">&lt;position&gt;</dfn>
+      determines the gradient center <span data-insert="aside"></span> of the
+      gradient.
+    </p>
+    <aside>Info about the 'gradient center' definition.</aside>
+    `,
+    propertyName: 'values',
+    css: [{
+      name: '<position>',
+      type: 'type',
+      prose: 'The <position> determines the gradient center of the gradient.'
+    }]
+  },
+
+  {
+    title: 'ignores aside info panel in dd prose',
+    html: `<dl>
+    <dt><dfn data-dfn-type="type" data-export="">&lt;position&gt;</dfn></dt>
+    <dd>
+      Determines the <dfn data-dfn-type="dfn">gradient center</dfn>
+      <span data-insert="aside"></span> of the gradient.
+    </dd></dl>
+    <aside class="dfn-panel"><span>
+      Info about the 'gradient center' definition.
+    </span></aside>
+    `,
+    propertyName: 'values',
+    css: [{
+      name: '<position>',
+      type: 'type',
+      prose: 'Determines the gradient center of the gradient.'
+    }]
   }
 ];
 
@@ -1453,6 +1490,15 @@ describe("Test CSS properties extraction", function() {
 
       const extractedCss = await page.evaluate(async () => {
         try {
+          // Copy <aside> elements to their inline position
+          // NB: This cannot be done without JS because <aside> is sectioning
+          // content and thus cannot be inserted in phrasing content... And yet
+          // Bikeshed does this for info panels, see discussion in:
+          // https://github.com/speced/bikeshed/issues/2476#issuecomment-1437252932
+          const aside = document.querySelector('aside');
+          if (aside) {
+            document.querySelector('[data-insert=aside]')?.appendChild(aside);
+          }
           return extractCSS();
         }
         catch (err) {