| <!-- |
| @BLINK-ALLOW:hierarchicalLevel* |
| @MAC-ALLOW:AXDisclosureLevel |
| @WIN-ALLOW:level:* |
| @WIN-ALLOW:xml-roles* |
| @UIA-WIN-ALLOW:Level* |
| @AURALINUX-ALLOW:level:* |
| @AURALINUX-ALLOW:xml-roles* |
| --> |
| <html> |
| <body> |
| <div headingoffset=1 title="container headingoffset=1"> <!-- h1s are now h2s and so on --> |
| <h1><!-- Level 2, h1 + 1 = 2 --></h1> |
| <h2><!-- Level 3, h2 + 1 = 3 --></h2> |
| <h3><!-- Level 4, h3 + 1 = 4 --></h3> |
| <div headingoffset=2 title="container headingoffset=2"> <!-- h1s are now h4s --> |
| <h1><!-- Level 4, h1 + 2 + 1 = 4 --></h1> |
| <h2><!-- Level 5, h2 + 2 + 1 = 5 --></h2> |
| <div headingreset title="container headingreset"> <!-- h1s are now h1s --> |
| <h1><!-- Level 1, h1 (headingreset)--></h1> |
| </div> |
| <dialog open title="container dialog"> <!-- non-modal dialogs do not headingreset, h1s are still h4s --> |
| <h1><!-- Level 4, h1 + 2 + 1 = 4 --></h1> |
| <h1 headingreset><!-- Level 1, h1 (headingreset) --></h1> |
| </dialog> |
| </div> |
| </div> |
| <!-- Clamping --> |
| <div headingoffset=8 title="container headingoffset=8"> <!-- h1s are now h9s --> |
| <h1><!-- Level 9, h1 + 8 --></h1> |
| <h2><!-- Level 9, h2 + 8 (clamped) --></h2> |
| <h3><!-- Level 9, h3 + 8 (clamped) --></h3> |
| <h4><!-- Level 9, h4 + 8 (clamped) --></h4> |
| <h5><!-- Level 9, h5 + 8 (clamped) --></h5> |
| <h6><!-- Level 9, h6 + 8 (clamped) --></h6> |
| <div headingreset title="container headingreset"> <!-- h1s are now h1s --> |
| <h1><!-- Level 1, h1 (headingreset)--></h1> |
| </div> |
| <dialog open title="container dialog"> <!-- non-modal dialogs do not headingreset, h1s are still h4s --> |
| <h1><!-- Level 9, h1 + 8 --></h1> |
| </dialog> |
| </div> |
| <!-- Negative headingoffsets are clamped to `0` --> |
| <div headingoffset="-3" title="container headingoffset=-3"> |
| <h1><!-- Level 1, h1 + (-3 clamped to 0) --></h1> |
| <h2><!-- Level 2, h2 + (-3 clamped to 0) --></h2> |
| <h3><!-- Level 3, h3 + (-3 clamped to 0) --></h3> |
| <h4><!-- Level 4, h4 + (-3 clamped to 0) --></h4> |
| <h5><!-- Level 5, h5 + (-3 clamped to 0) --></h5> |
| <h6><!-- Level 6, h6 + (-3 clamped to 0) --></h6> |
| <div headingreset title="container headingreset"> <!-- h1s are now h1s --> |
| <h1><!-- Level 1, h1 (headingreset)--></h1> |
| </div> |
| <dialog open title="container dialog"> <!-- non-modal dialogs do not headingreset, h1s are still h1s --> |
| <h1><!-- Level 1, h1 + (-3 clamped to 0) --></h1> |
| </dialog> |
| </div> |
| <!-- Ensure shadow roots work --> |
| <div headingoffset=1 title="container shadowroot headingoffset=1"> |
| <template shadowrootmode="open"> |
| <h1><!-- Level 2, h1 + 1 --></h1> |
| <h2 headingreset><!-- Level 2, h2 (headingreset) --></h2> |
| </template> |
| </div> |
| <!-- Ensure slotted elements are correctly set --> |
| <div headingoffset=1 title="container shadowroot slotted headingoffset=1"> |
| <template shadowrootmode="open"> |
| <h1><!-- Level 2, h1 + 1 --></h1> |
| <h2><!-- Level 3, h2 + 1 --></h2> |
| <h3 headingreset><!-- Level 3, h3 (headingreset) --></h3> |
| <slot></slot> |
| </template> |
| <h1><!-- Level 2, h1 + 1 --></h1> |
| </div> |
| <!-- Ensure slotted elements respect their parents --> |
| <div headingoffset=1 title="container shadowroot slotted with container headingoffset=1"> |
| <template shadowrootmode="open"> |
| <h1><!-- Level 2, h1 + 1 --></h1> |
| <div headingoffset=1 title="container inside shadowroot headingoffset=1"> |
| <slot></slot> |
| </div> |
| </template> |
| <h2><!-- Level 4, h2 + 1 + 1 --></h2> |
| <h4><!-- Level 6, h4 + 1 + 1 --></h4> |
| <h4 headingreset><!-- Level 4, h4 (headingreset) --></h4> |
| </div> |
| <!-- Ensure the slot can be decorated with headingoffset --> |
| <div headingoffset=1 title="container shadowroot slot with attr headingoffset=1"> |
| <template shadowrootmode="open"> |
| <h1><!-- Level 2, h1 + 1 --></h1> |
| <slot headingoffset=1></slot> |
| </template> |
| <h2><!-- Level 4, h2 + 1 + 1 --></h2> |
| </div> |
| <h1 headingoffset=1><!-- Level 2, h1 + 1 --></h1> |
| <h2 headingoffset=1><!-- Level 3, h2 + 1 --></h2> |
| <h1 headingoffset=2><!-- Level 3, h1 + 2--></h1> |
| <h2 headingoffset=2><!-- Level 4, h2 + 2 --></h2> |
| <h1 headingoffset=1 headingreset><!-- Level 2, h1 + 1 (headingreset) --></h1> |
| <h2 headingoffset=1 headingreset><!-- Level 3, h2 + 1 (headingreset) --></h2> |
| <h1 headingoffset=2 headingreset><!-- Level 3, h1 + 2 (headingreset) --></h1> |
| <h2 headingoffset=2 headingreset><!-- Level 4, h2 + 2 (headingreset) --></h2> |
| <h1 headingoffset=20 headingreset><!-- Level 9, h1 + 20 (clamped) --></h1> |
| <h2 headingoffset=20 headingreset><!-- Level 9, h2 + 20 (clamped) --></h2> |
| <h1 headingoffset=0 headingreset><!-- Level 1, h1 + 0 --></h1> |
| <h2 headingoffset=0 headingreset><!-- Level 2, h2 + 0 --></h2> |
| <div title="container with no attr"> |
| <h1 headingoffset=1><!-- Level 2, h1 + 1 --></h1> |
| <h2 headingoffset=1><!-- Level 3, h2 + 1 --></h2> |
| <h1 headingoffset=1 headingreset><!-- Level 2, h1 + 1 --></h1> |
| <h2 headingoffset=1 headingreset><!-- Level 3, h2 + 1 --></h2> |
| <h1 headingoffset="-1" headingreset><!-- Level 1, h1 + (-1 clamped to 0) --></h1> |
| <h2 headingoffset="-1" headingreset><!-- Level 2, h2 + (-1 clamped to 0) --></h2> |
| </div> |
| <div headingreset title="many nested + and - values"> |
| <div headingoffset="-1"> |
| <div headingoffset="3"> |
| <div headingoffset="-6"> |
| <div headingoffset="1"> |
| <h1><!-- Level 5, h1 + 1 + (-6 clamped ot 0) + 3 + (-1 clamped to 0) --></h1> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <h1 headingoffset="9" aria-level="3"><!-- Level 3 --></h1> |
| </body> |
| </html> |
