implement headingoffset & headingreset attributes

source

@@ -13194,6 +13194,8 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    <li><code data-x="attr-draggable">draggable</code></li>
    <li><code data-x="attr-enterkeyhint">enterkeyhint</code></li>
    <li><code data-x="attr-hidden">hidden</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-inert">inert</code></li>
    <li><code data-x="attr-inputmode">inputmode</code></li>
    <li><code data-x="attr-is">is</code></li>
@@ -19351,8 +19353,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 comptued 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
@@ -19400,6 +19403,93 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <h5>Heading Levels & 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 child elements.</p>
+
+  <p>The <dfn element-attr for="global"><code data-x="attr-headingreset">headingreset</code></dfn>
+  content attribute allows authors prevent a heading offset computation from traversing beyond this
+  point.</p>
+
+  <p>To <dfn>get an element's comptued heading level</dfn>, given an element <var>element</var>,
+  perform the following steps:</p>
+
+  <ol>
+   <li><p>Let <var>level</var> be zero.</p></li>
+
+   <li><p>Let <var>max</var> be zero.</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 and <var>max</var> to 8.</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 and <var>max</var> to 7.</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 and <var>max</var> to 6.</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 and <var>max</var> to 5.</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 and <var>max</var> to 4.</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 and <var>max</var> to 3.</p></li>
+
+   <li><p><span>Assert</span>: <var>level</var> is not zero.</p></li>
+
+   <li><p><span>Assert</span>: <var>max</var> is not zero.</p></li>
+
+   <li><p>Add 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> and <var>max</var> to
+   <var>level</var>.</p></li>
+
+   <li><p><span>Assert</span>: <var>level</var> is not greather than 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>,
+  and a non-negative integer <var>max</var>, perform the following steps. They return a
+  non-negative integer.</p>
+
+  <ol>
+   <li><p>Let <var>offset</var> be <var>element</var>'s <code
+   data-x="attr-headingoffset">headingoffset</code> attribute value.</p></li>
+
+   <li><p>If <var>offset</var> is less than zero, set <var>offset</var> to zero.</p></li>
+
+   <li><p>If the <code data-x="attr-headingreset">headingreset</code> attribute is present, then
+   return <var>offset</var>.</p></li>
+
+   <li><p>Let <var>ancestor</var> be <var>element</var>.</p></li>
+
+   <li>
+    <p>While <var>child</var> is not null:</p>
+
+    <ol>
+     <li><p>Let <var>nextAncestor</var> be the parent node of
+     <var>ancestor</var> within the <span>flat tree</span>.</p></li>
+
+     <li><p>If <var>nextAncestor</var>'s <code data-x="attr-headingreset">headingreset</code>
+     attribute is present, then return <var>offset</var>.</p></li>
+
+     <li><p>Let <var>nextOffset</var> be <var>nextAncestor</var>'s <code
+     data-x="attr-headingoffset">headingoffset</code> attribute value.</p></li>
+
+     <li><p>If <var>nextOffset</var> is less than zero, set <var>nextOffset</var> to zero.</p></li>
+
+     <li><p>Add <var>nextOffset</var> to <var>offset</var>.</p></li>
+
+     <li><p>If <var>offset</var> is greater than or equal to <var>max</var>, then return
+     <var>max</var>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Return <var>offset</var>.</p></li>
+  </ol>
 
   <h5>Sample outlines</h5>