fix: add better tests, stop aggressively sanitizing, and add styles

mod.ts

@@ -238,6 +238,8 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
     a: ["anchor"],
     p: ["markdown-alert-title"],
     svg: ["octicon", "octicon-alert", "octicon-link"],
+    h2: ["sr-only"],
+    section: ["footnotes"],
   };
 
   return sanitizeHtml(html, {
@@ -262,7 +264,19 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
         "controls",
         "title",
       ],
-      a: ["id", "aria-hidden", "href", "tabindex", "rel", "target", "title"],
+      a: [
+        "id",
+        "aria-hidden",
+        "href",
+        "tabindex",
+        "rel",
+        "target",
+        "title",
+        "data-footnote-ref",
+        "data-footnote-backref",
+        "aria-label",
+        "aria-describedby",
+      ],
       svg: ["viewbox", "width", "height", "aria-hidden", "background"],
       path: ["fill-rule", "d"],
       circle: ["cx", "cy", "r", "stroke", "stroke-width", "fill", "alpha"],
@@ -273,10 +287,12 @@ export function render(markdown: string, opts: RenderOptions = {}): string {
       h4: ["id"],
       h5: ["id"],
       h6: ["id"],
+      li: ["id"],
       td: ["colspan", "rowspan", "align"],
       iframe: ["src", "width", "height"], // Only used when iframe tags are allowed in the first place.
       math: ["xmlns"], // Only enabled when math is enabled
-      annotation: ["encoding"], // Only enabled when math is enabled
+      annotation: ["encoding"], // Only enabled when math is enabled,
+      section: ["data-footnotes"],
     },
     allowedClasses: { ...defaultAllowedClasses, ...opts.allowedClasses },
     allowProtocolRelative: false,

style/main.scss

@@ -100,3 +100,22 @@
     background-color: var(--color-prettylights-syntax-markup-inserted-bg);
   }
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  word-wrap: normal;
+  border: 0;
+}
+
+[data-footnote-ref]::before {
+  content: '[';
+}
+
+[data-footnote-ref]::after {
+  content: ']';
+}

test/fixtures/footnote.html

@@ -1,15 +1,30 @@
-<p>Here is a simple footnote<sup><a id="footnote-ref-1" href="#footnote-1">1</a></sup>. With some additional text after it<sup><a id="footnote-ref-%40%23%24%25" href="#footnote-%40%23%24%25">2</a></sup> and
-without disrupting the blocks<sup><a id="footnote-ref-bignote" href="#footnote-bignote">3</a></sup>.</p>
-<section>
-<h2 id="footnote-label">Footnotes</h2>
+<h1 id="example"><a class="anchor" aria-hidden="true" tabindex="-1" href="#example"><svg class="octicon octicon-link" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Example</h1><p>Here is a simple footnote<sup><a id="footnote-ref-1" href="#footnote-1" data-footnote-ref aria-describedby="footnote-label">1</a></sup>.
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> With some additional text after it<sup><a id="footnote-ref-%40%23%24%25" href="#footnote-%40%23%24%25" data-footnote-ref aria-describedby="footnote-label">2</a></sup>
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> and without disrupting the
+blocks<sup><a id="footnote-ref-bignote" href="#footnote-bignote" data-footnote-ref aria-describedby="footnote-label">3</a></sup>.
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
+<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
+<section class="footnotes" data-footnotes>
+<h2 id="footnote-label" class="sr-only">Footnotes</h2>
 <ol>
-<li>
-<p>This is a footnote content. <a href="#footnote-ref-1">↩</a></p>
+<li id="footnote-1">
+<p>This is a footnote content. <a href="#footnote-ref-1" data-footnote-backref aria-label="Back to reference 1">↩</a></p>
 </li>
-<li>
-<p>A footnote on the label: "@#$%". <a href="#footnote-ref-%40%23%24%25">↩</a></p>
+<li id="footnote-%40%23%24%25">
+<p>A footnote on the label: "@#$%". <a href="#footnote-ref-%40%23%24%25" data-footnote-backref aria-label="Back to reference @#$%">↩</a></p>
 </li>
-<li>
+<li id="footnote-bignote">
 <p>The first paragraph of the definition.</p>
 <p>Paragraph two of the definition.</p>
 <blockquote>
@@ -36,7 +51,7 @@ <h2 id="footnote-label">Footnotes</h2>
 <li>Subitem 2</li>
 </ul>
 </li>
-</ul> <a href="#footnote-ref-bignote">↩</a>
+</ul> <a href="#footnote-ref-bignote" data-footnote-backref aria-label="Back to reference bignote">↩</a>
 </li>
 </ol>
 </section>

test/fixtures/footnote.md

@@ -1,7 +1,24 @@
+# Example
+
 [^1]: This is a footnote content.
 
-Here is a simple footnote[^1]. With some additional text after it[^@#$%] and
-without disrupting the blocks[^bignote].
+Here is a simple footnote[^1].
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br> With some additional text after it[^@#$%]
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br> and without disrupting the
+blocks[^bignote].
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
+<br><br><br><br><br><br><br><br><br><br><br>
 
 [^bignote]: The first paragraph of the definition.
 

test/server_test.ts

@@ -1,4 +1,4 @@
-import { assert } from "./test_deps.ts";
+import { assert, assertEquals } from "./test_deps.ts";
 import { render } from "../mod.ts";
 import { browserTest, setupHtmlWithCss } from "./test_utils.ts";
 
@@ -91,3 +91,85 @@ Deno.test("basic md table with dollar signs", async () => {
     );
   });
 });
+
+Deno.test("footnote with style", async () => {
+  const markdown = Deno.readTextFileSync("./test/fixtures/footnote.md");
+
+  const body = render(markdown);
+  const html = setupHtmlWithCss(body);
+
+  await browserTest(html, async (page, address) => {
+    await page.goto(`${address}`);
+
+    // 1. Test page jump on clicking footnote links
+    const scrollPositionBefore = await page.evaluate(() => window.scrollY);
+    await page.click("#footnote-ref-1"); // click the first footnote link. note that we select by id, not href
+    const scrollPositionAfter = await page.evaluate(() => window.scrollY);
+    assert(scrollPositionAfter > scrollPositionBefore);
+
+    await page.click("#footnote-ref-bignote");
+    const scrollPositionAfter2 = await page.evaluate(() => window.scrollY);
+    assert(scrollPositionAfter2 === scrollPositionAfter);
+
+    await page.click("#footnote-1 > p > a");
+    const scrollPositionAfter3 = await page.evaluate(() => window.scrollY);
+    assert(scrollPositionAfter3 < scrollPositionAfter2);
+    assert(scrollPositionAfter3 > scrollPositionBefore);
+
+    // 2. Verify footnote link styling
+    const beforeContent = await page.evaluate(() => {
+      const element = document.querySelector("#footnote-ref-1");
+      if (element) {
+        return window.getComputedStyle(element, "::before").content;
+      }
+      return null;
+    });
+    const afterContent = await page.evaluate(() => {
+      const element = document.querySelector("#footnote-ref-1");
+      if (element) {
+        return window.getComputedStyle(element, "::after").content;
+      }
+      return null;
+    });
+    assertEquals(beforeContent, '"["');
+    assertEquals(afterContent, '"]"');
+
+    // 3. Check Visibility of "Footnotes" H2
+    const h2Style = await page.evaluate(() => {
+      const element = document.querySelector("#footnote-label");
+      if (element) {
+        const computedStyle = window.getComputedStyle(element);
+        return {
+          position: computedStyle.position,
+          width: computedStyle.width,
+          height: computedStyle.height,
+          overflow: computedStyle.overflow,
+          clip: computedStyle.clip,
+          wordWrap: computedStyle.wordWrap,
+          border: computedStyle.border,
+        };
+      }
+      return null;
+    });
+    assert(h2Style);
+    assertEquals(h2Style.position, "absolute");
+    assertEquals(h2Style.width, "1px");
+    assertEquals(h2Style.height, "1px");
+    assertEquals(h2Style.overflow, "hidden");
+    assertEquals(h2Style.clip, "rect(0px, 0px, 0px, 0px)");
+    assertEquals(h2Style.wordWrap, "normal");
+    assertEquals(h2Style.border, "");
+
+    // 4. Verify blue box around the footnote after clicking
+    await page.click("#footnote-ref-1");
+    const footnoteStyle = await page.evaluate(() => {
+      const element = document.querySelector("#footnote-1");
+      if (element) {
+        return window.getComputedStyle(element)
+          .outlineColor;
+      }
+      return null;
+    });
+    assertEquals(footnoteStyle, "rgb(31, 35, 40)");
+  });
+});

test/test_utils.ts

@@ -35,8 +35,6 @@ function startServer(htmlContent: string, port: number) {
   const hostname = "localhost";
   const address = `http://${hostname}:${port}`;
 
-  console.log(`Server running at ${address}`);
-
   return { serverProcess, address };
 }