LayoutTests/accessibility/heading-level.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../resources/accessibility-helper.js"></script>
<script src="../resources/js-test.js"></script>
</head>
<body>

<!-- implicit level of tag -->
<h1 id="ex0" class="ex" data-expected="1">X</h1>
<h2 id="ex1" class="ex" data-expected="2">X</h2>
<h3 id="ex2" class="ex" data-expected="3">X</h3>
<h4 id="ex3" class="ex" data-expected="4">X</h4>
<h5 id="ex4" class="ex" data-expected="5">X</h5>
<h6 id="ex5" class="ex" data-expected="6">X</h6>

<!-- explicit aria-level overrides on h1-h6 (withOUT explicit heading role declaration) -->
<h6 id="ex6" class="ex" data-expected="1" aria-level="1">X</h6>
<h5 id="ex7" class="ex" data-expected="2" aria-level="2">X</h5>
<h4 id="ex8" class="ex" data-expected="3" aria-level="3">X</h4>
<h3 id="ex9" class="ex" data-expected="4" aria-level="4">X</h3>
<h2 id="ex10" class="ex" data-expected="5" aria-level="5">X</h2>
<h1 id="ex11" class="ex" data-expected="6" aria-level="6">X</h1>

<!-- explicit aria-level overrides on h1-h6 (with explicit heading role declaration) -->
<h6 id="ex12" class="ex" role="heading" data-expected="1" aria-level="1">X</h6>
<h5 id="ex13" class="ex" role="heading" data-expected="2" aria-level="2">X</h5>
<h4 id="ex14" class="ex" role="heading" data-expected="3" aria-level="3">X</h4>
<h3 id="ex15" class="ex" role="heading" data-expected="4" aria-level="4">X</h3>
<h2 id="ex16" class="ex" role="heading" data-expected="5" aria-level="5">X</h2>
<h1 id="ex17" class="ex" role="heading" data-expected="6" aria-level="6">X</h1>

<!-- explicit aria-level set on div with explicit heading role declaration -->
<div id="ex18" class="ex" role="heading" data-expected="1" aria-level="1">X</div>
<div id="ex19" class="ex" role="heading" data-expected="2" aria-level="2">X</div>
<div id="ex20" class="ex" role="heading" data-expected="3" aria-level="3">X</div>
<div id="ex21" class="ex" role="heading" data-expected="4" aria-level="4">X</div>
<div id="ex22" class="ex" role="heading" data-expected="5" aria-level="5">X</div>
<div id="ex23" class="ex" role="heading" data-expected="6" aria-level="6">X</div>

<div id="dynamic-aria-heading" role="heading" aria-level="1">X</div>

<!-- todo: h1 elements nested in section elements should inherit nested level. -->

<script>
    var testOutput = "This tests that headings have a level matching the implicit default value or explicitly defined aria-level value.\n\n";

    if (window.accessibilityController) {
        window.jsTestIsAsync = true;

        var axElement, el;
        setTimeout(async () => {
            const examples = document.querySelectorAll('.ex');
            for (let i = 0; i < examples.length; ++i) {
                el = examples[i];

                axElement = await waitForElementById(el.id);

                // Test AXLevel.
                testOutput += expect("axElement.intValue", "parseInt(el.getAttribute('data-expected'))");
                el.style.display = 'none'; // Hide each example after verification.
            }

            testOutput += "\nVerifying initial heading level of #dynamic-aria-heading.\n";
            axElement = await waitForElementById("dynamic-aria-heading");
            testOutput += expect("axElement.intValue", "1");
            testOutput += "\nUpdating the aria-level of #dynamic-aria-heading to 2.\n";
            document.getElementById("dynamic-aria-heading").setAttribute("aria-level", "2");
            await waitFor(() => axElement.intValue === 2);
            testOutput += expect("axElement.intValue", "2");

            debug(testOutput);
            finishJSTest();
        }, 0);
    }
</script>
</body>
</html>