fix(core/highlight-vars): scope highlighted var to .algorithm conta…

…iner (#4585)

src/core/highlight-vars.js

@@ -1,7 +1,7 @@
 // @ts-check
 /**
  * Module core/highlight-vars
- * Highlights occurrences of a <var> within a section on click.
+ * Highlights occurrences of a <var> within the algorithm or the encompassing section on click.
  * Set `conf.highlightVars = true` to enable.
  * Removes highlights from <var> if clicked anywhere else.
  * All is done while keeping in mind that exported html stays clean
@@ -73,12 +73,13 @@ function getHighlightColor(target) {
 
 function highlightVars(varElem) {
   const textContent = norm(varElem.textContent);
-  const parent = varElem.closest("section");
+  const parent = varElem.closest(".algorithm, section");
   const highlightColor = getHighlightColor(varElem);
 
   const varsToHighlight = [...parent.querySelectorAll("var")].filter(
     el =>
-      norm(el.textContent) === textContent && el.closest("section") === parent
+      norm(el.textContent) === textContent &&
+      el.closest(".algorithm, section") === parent
   );
 
   // update availability of highlight color

tests/unit/core/highlight-vars-spec.js

@@ -14,18 +14,29 @@ describe("Core - highlightVars", () => {
       <ol>
         <li><var id="section1-bar">bar</var>
         <li><var>a
-         foo</foo>
+         foo</var>
       </ol>
     </section>
 
     <section id="section2">
       <p><var id="section2-foo">a foo</var></p>
       <ol>
-        <li><var>a foo</foo>
+        <li><var>a foo</var>
         <li><var id="section2-bar">bar</var>
       </ol>
     </section>
 
+    <section id="section3">
+      <ol class="algorithm">
+        <li><var id="section3-foo">a foo</var></li>
+        <li><var>a foo</var>
+      </ol>
+      <ol class="algorithm">
+        <li><var>a foo</var>
+      </ol>
+    </section>
+
+
     <section id="overmatch">
       <p><var id="level-1">foo</var></p>
       <p><var id="level-1-1">foo</var></p>
@@ -74,6 +85,13 @@ describe("Core - highlightVars", () => {
     expect(highlightedSec2).toHaveSize(2);
   });
 
+  it("highlights variables only in current algorithm container", async () => {
+    const doc = await makeDoc();
+    doc.getElementById("section3-foo").click();
+    const highlightedSec3 = doc.querySelectorAll("#section3 var.respec-hl");
+    expect(highlightedSec3).toHaveSize(2);
+  });
+
   it("doesn't overmatch outside its own section's vars", async () => {
     const doc = await makeDoc();
     expect(doc.querySelector("var.respec-hl")).toBeNull();