implement headingoffset & headingreset attributes

source

@@ -4352,6 +4352,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://w3c.github.io/aria/#aria-describedby"><code data-x="attr-aria-describedby">aria-describedby</code></dfn></li>
      <li><dfn data-x-href="https://w3c.github.io/aria/#aria-disabled"><code data-x="attr-aria-disabled">aria-disabled</code></dfn></li>
      <li><dfn data-x-href="https://w3c.github.io/aria/#aria-label"><code data-x="attr-aria-label">aria-label</code></dfn></li>
+     <li><dfn data-x-href="https://w3c.github.io/aria/#aria-level"><code data-x="attr-aria-level">aria-level</code></dfn></li>
     </ul>
 
     <p>Finally, the following terms are defined in <cite>ARIA</cite>: <ref>ARIA</ref></p>
@@ -12095,6 +12096,9 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> {
   undefined <span data-x="dom-hidePopover">hidePopover</span>();
   boolean <span data-x="dom-togglePopover">togglePopover</span>(optional (<span>TogglePopoverOptions</span> or boolean) options = {});
   [<span>CEReactions</span>] attribute DOMString? <span data-x="dom-popover">popover</span>;
+
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>, <span data-x="xattr-ReflectRange">ReflectRange=(0, 8)</span>] attribute unsigned long <dfn attribute for="HTMLElement" data-x="dom-headingOffset">headingOffset</dfn>;
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLElement" data-x="dom-headingReset">headingReset</dfn>;
 };
 
 dictionary <dfn dictionary>ShowPopoverOptions</dfn> {
@@ -13432,6 +13436,8 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    <li><code data-x="attr-dir">dir</code></li>
    <li><code data-x="attr-draggable">draggable</code></li>
    <li><code data-x="attr-enterkeyhint">enterkeyhint</code></li>
+   <li><code data-x="attr-headingoffset">headingoffset</code></li>
+   <li><code data-x="attr-headingreset">headingreset</code></li>
    <li><code data-x="attr-hidden">hidden</code></li>
    <li><code data-x="attr-inert">inert</code></li>
    <li><code data-x="attr-inputmode">inputmode</code></li>
@@ -19556,8 +19562,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   <h4><span id="headings-and-outlines"></span><span id="outlines"></span>Headings and outlines</h4>
 
-  <p><code>h1</code>&ndash;<code>h6</code> elements have a <dfn>heading level</dfn>, which is given
-  by the number in the element's name.</p>
+  <p><code>h1</code>&ndash;<code>h6</code> elements have a <dfn>heading level</dfn>, which is
+  given by <span data-x="get an element's computed heading level">getting the element's computed
+  heading level</span>.</p>
 
   <p>These elements <span data-x="represents">represent</span> <dfn
   data-x="concept-heading">headings</dfn>. The lower a <span
@@ -19605,6 +19612,110 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <h5>Heading levels &amp; offsets</h5>
+
+  <p>The <dfn element-attr for="global"><code data-x="attr-headingoffset">headingoffset</code></dfn>
+  content attribute allows authors to offset heading levels for descendants.</p>
+
+  <p>The <dfn element-attr for="global"><code data-x="attr-headingreset">headingreset</code></dfn>
+  content attribute allows authors to prevent a heading offset computation from traversing beyond
+  the element with the attribute.</p>
+
+  <p>To <dfn>get an element's computed heading level</dfn>, given an element
+  <var>element</var>:</p>
+
+  <ol>
+   <li><p>Let <var>level</var> be 0.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h1">h1</code>, then set
+   <var>level</var> to 1.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h2">h2</code>, then set
+   <var>level</var> to 2.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h3">h3</code>, then set
+   <var>level</var> to 3.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h4">h4</code>, then set
+   <var>level</var> to 4.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h5">h5</code>, then set
+   <var>level</var> to 5.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h6">h6</code>, then set
+   <var>level</var> to 6.</p></li>
+
+   <li><p><span>Assert</span>: <var>level</var> is not 0.</p></li>
+
+   <li><p>Increment <var>level</var> by the result of <span
+   data-x="get an element's computed heading offset">getting an element's computed heading
+   offset</span> given <var>element</var>.</p></li>
+
+   <li><p>If <var>level</var> is greater than 9, then return 9.</p></li>
+
+   <li><p>Return <var>level</var>.</p></li>
+  </ol>
+
+  <p>To <dfn>get an element's computed heading offset</dfn>, given an element <var>element</var>,
+  perform the following steps. They return a non-negative integer.</p>
+
+  <ol>
+   <li><p>Let <var>offset</var> be 0.</p></li>
+
+   <li><p>Let <var>inclusiveAncestor</var> be <var>element</var>.</p></li>
+
+   <li>
+    <p>While <var>inclusiveAncestor</var> is not null:</p>
+
+    <ol>
+     <li><p>Let <var>nextOffset</var> be 0.</p></li>
+
+     <li>
+      <p>If <var>inclusiveAncestor</var> is an <span data-x="HTML elements">HTML element</span> and
+      has a <code data-x="attr-headingoffset">headingoffset</code> attribute, then parse its value
+      using the <span>rules for parsing non-negative integers</span>.</p>
+
+      <p>If the result of parsing the value is not an error, then set <var>nextOffset</var> to that
+      value.</p>
+     </li>
+
+     <li><p>Increment <var>offset</var> by <var>nextOffset</var></p></li>
+
+     <li><p>If <var>inclusiveAncestor</var> is an <span data-x="HTML elements">HTML element</span>
+     and has a <code data-x="attr-headingreset">headingreset</code> attribute, then return
+     <var>offset</var>.</p></li>
+
+     <li><p>Set <var>inclusiveAncestor</var> to the parent node of <var>inclusiveAncestor</var>
+     within the <span>flat tree</span>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Return <var>offset</var>.</p></li>
+  </ol>
+
+  <div class="example">
+   <p>This example shows a combination of <code data-x="attr-headingoffset">headingoffset</code>,
+   <code data-x="attr-headingreset">headingreset</code>, and <code
+   data-x="attr-aria-level">aria-level</code> attributes with comments demonstrating the respective
+   heading levels. This example illustrates the various combinations and is not a best practice
+   example.</p>
+
+   <pre><code class="html">&lt;body>
+  &lt;main>
+   &lt;h1>This is a heading level 1&lt;/h1>
+   &lt;article headingoffset="1">
+    &lt;h1>This is a heading level 2&lt;/h1>
+    &lt;section headingoffset="1">
+     &lt;h1>This is a heading level 3&lt;/h1>
+     &lt;dialog headingreset>
+      &lt;h1>This is a heading level 1&lt;/h1>
+     &lt;/dialog>
+    &lt;/section>
+   &lt;/article>
+   &lt;h1 aria-level="2">This is a heading level 2&lt;/h1>
+  &lt;/main>
+&lt;/body></code></pre>
+  </div>
 
   <h5>Sample outlines</h5>
 
@@ -140450,12 +140561,18 @@ article, aside, :heading, hgroup, nav, section {
   display: block;<!-- see also unicode-bidi: isolate rules-->
 }
 
-h1 { margin-block: 0.67em; font-size: 2.00em; font-weight: bold; }
-h2 { margin-block: 0.83em; font-size: 1.50em; font-weight: bold; }
-h3 { margin-block: 1.00em; font-size: 1.17em; font-weight: bold; }
-h4 { margin-block: 1.33em; font-size: 1.00em; font-weight: bold; }
-h5 { margin-block: 1.67em; font-size: 0.83em; font-weight: bold; }
-h6 { margin-block: 2.33em; font-size: 0.67em; font-weight: bold; }</code></pre>
+:heading { font-weight: bold; }
+
+:heading(1) { margin-block: 0.67em; font-size: 2.00em; }
+:heading(2) { margin-block: 0.83em; font-size: 1.50em; }
+:heading(3) { margin-block: 1.00em; font-size: 1.17em; }
+:heading(4) { margin-block: 1.33em; font-size: 1.00em; }
+:heading(5) { margin-block: 1.67em; font-size: 0.83em; }
+:heading(6, 7, 8, 9) {
+  font-size: 0.67em;
+  margin-block: 2.33em;
+}
+</code></pre>