Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

implement headingoffset & headingreset attributes #11086

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

implement headingoffset & headingreset attributes #11086

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d43c176
implement headingoffset & headingreset attributes
keithamus Feb 28, 2025
b3665a1
s/comptued/computed
keithamus Mar 1, 2025
6c54f76
s/child elements/descendants/
keithamus Mar 1, 2025
24845f2
s/authors prevent/authors to prevent/
keithamus Mar 1, 2025
a6b3420
add note on aria-level, example
keithamus Mar 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 92 additions & 2 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>

Expand Down