feat(core/sections): allow heading to use section markers

src/core/sections.js

@@ -12,6 +12,9 @@ class DOMBuilder {
     this.stack = [this.root];
     this.current = this.root;
   }
+
+  static sectionClasses = new Set(["appendix", "informative", "notoc"]);
+
   findPosition(header) {
     return parseInt(header.tagName.charAt(1), 10);
   }
@@ -42,6 +45,15 @@ class DOMBuilder {
     this.stack[position] = section;
     this.stack.length = position + 1;
     this.current = section;
+    this.processHeader(header, section);
+  }
+
+  processHeader(header, section) {
+    DOMBuilder.sectionClasses
+      .intersection(new Set(header.classList))
+      .forEach(className => {
+        section.classList.add(className);
+      });
   }
 
   addSection(node) {

tests/spec/core/sections-spec.js

@@ -1,12 +1,17 @@
 "use strict";
 
-import { flushIframes, makeRSDoc, makeStandardOps } from "../SpecHelper.js";
+import {
+  flushIframes,
+  html,
+  makeRSDoc,
+  makeStandardOps,
+} from "../SpecHelper.js";
 
 describe("Core — sections", () => {
   afterAll(flushIframes);
 
   it("wraps headings in sections elements and assigns an id", async () => {
-    const body = `
+    const body = html`
       <h2 id="h2">Section 2</h2>
       <h3 id="h3">Section 3</h3>
       <h4 id="h4">Section 4</h4>
@@ -25,7 +30,7 @@ describe("Core — sections", () => {
   });
 
   it("handles when some headings are wrapped", async () => {
-    const body = `
+    const body = html`
       <h2 id="h2">Section 2</h2>
       <section>
         <h3 id="h3">Section 3</h3>
@@ -75,8 +80,88 @@ describe("Core — sections", () => {
     }
   });
 
+  it("copies only special header classes from the header to the section", async () => {
+    const body = html`
+      <h2 id="h2" class="appendix informative nocopy">Section 2</h2>
+      <h3 id="h3" class="notoc">Section 3</h3>
+      <h4 id="h4" class="informative">Section 4</h4>
+      <h5 id="h5" class="appendix">Section 5</h5>
+      <h6 id="h6" class="notoc informative">Section 6</h6>
+    `;
+    const ops = makeStandardOps(null, body);
+    const doc = await makeRSDoc(ops);
+
+    const section2 = doc.getElementById("h2").closest("section");
+    expect(section2.classList).toContain("appendix");
+    expect(section2.classList).toContain("informative");
+    expect(section2.classList).not.toContain("nocopy");
+
+    const section3 = doc.getElementById("h3").closest("section");
+    expect(section3.classList).toContain("notoc");
+    expect(section3.classList).not.toContain("appendix");
+    expect(section3.classList).not.toContain("informative");
+
+    const section4 = doc.getElementById("h4").closest("section");
+    expect(section4.classList).toContain("informative");
+    expect(section4.classList).not.toContain("appendix");
+    expect(section4.classList).not.toContain("notoc");
+
+    const section5 = doc.getElementById("h5").closest("section");
+    expect(section5.classList).toContain("appendix");
+    expect(section5.classList).not.toContain("informative");
+    expect(section5.classList).not.toContain("notoc");
+
+    const section6 = doc.getElementById("h6").closest("section");
+    expect(section6.classList).toContain("notoc");
+    expect(section6.classList).toContain("informative");
+    expect(section6.classList).not.toContain("appendix");
+  });
+
+  it("treats informative section as non-normative section", async () => {
+    const body = html`
+      <h2 id="h2" class="informative">Informative Section</h2>
+      <p>Testing</p>
+    `;
+    const ops = makeStandardOps(null, body);
+    const doc = await makeRSDoc(ops);
+    const section = doc.getElementById("h2").closest("section");
+    expect(section.classList).toContain("informative");
+
+    // Expect the first p to be "This section is non-normative."
+    const em = section.querySelector("p");
+    expect(em.textContent).toBe("This section is non-normative.");
+
+    // check second child of section is the p with the content.
+    const p = em.nextElementSibling;
+    expect(p.localName).toBe("p");
+    expect(p.textContent).toBe("Testing");
+  });
+
+  it("treats informative appendix as an appendix", async () => {
+    const body = html`
+      <h2 id="h2" class="appendix informative">Appendix A</h2>
+      <p>Testing</p>
+    `;
+    const ops = makeStandardOps(null, body);
+    const doc = await makeRSDoc(ops);
+    const section = doc.getElementById("h2").closest("section");
+    expect(section.classList).toContain("appendix");
+
+    const heading = section.querySelector("#h2");
+    expect(heading.localName).toBe("h2");
+    expect(heading.textContent).toBe("A. Appendix A");
+
+    const pNonNormative = section.querySelector("p:first-of-type");
+    expect(pNonNormative.textContent).toBe("This section is non-normative.");
+
+    // Expect the first p to be "This section is non-normative."
+    const p = section.querySelector("p:last-of-type");
+    expect(p.localName).toBe("p");
+    expect(p.textContent).toBe("Testing");
+  });
+
   it("doesn't wrap the spec title", async () => {
-    const body = `
+    const body = html`
       <h1 id="title">Spec title</h1>
       <h2 id="other">Some section</h2>
     `;