LayoutTests/accessibility/custom-elements/table.html

<!DOCTYPE html>
<html>
<body>
<script src="../../resources/js-test.js"></script>
<script src="../../resources/accessibility-helper.js"></script>
<custom-table id="table-1">
    <custom-row id="row-header" aria-rowindex="1">
        <custom-cell id="header-1" role="columnheader" aria-sort="ascending"></custom-cell>
    </custom-row>
    <custom-row id="row-1">
        <custom-cell id="cell1"></custom-cell>
        <custom-cell id="cell2" aria-colindex="3"></custom-cell>
        <custom-rowspan-cell id="cell3"></custom-rowspan-cell>
        <custom-rowspan-cell id="cell4" aria-colindex="5" aria-rowspan="3"></custom-rowspan-cell>
    </custom-row>
    <custom-row id="row-2" role="row" aria-rowindex="8">
        <custom-colspan-cell id="cell5"></custom-colspan-cell>
    </custom-row>
    <custom-row id="row-3" role="row" aria-rowindex="9">
        <custom-colspan-cell id="cell6" aria-colspan="3"></custom-colspan-cell>
    </custom-row>
</custom-table>
<script>

customElements.define('custom-table', class CustomTable extends HTMLElement {
    constructor()
    {
        super();
        const internals = this.attachInternals();
        internals.role = 'grid';
        internals.ariaColCount = '4';
        internals.ariaRowCount = '8';
    }
});

customElements.define('custom-row', class CustomRow extends HTMLElement {
    constructor()
    {
        super();
        const internals = this.attachInternals();
        internals.role = 'row';
        internals.ariaRowIndex = 7;
    }
});

customElements.define('custom-cell', class CustomCell extends HTMLElement {
    constructor()
    {
        super();
        const internals = this.attachInternals();
        internals.role = 'gridcell';
        internals.ariaColIndex = 2;
    }
});

customElements.define('custom-rowspan-cell', class CustomRowspanCell extends HTMLElement {
    constructor()
    {
        super();
        const internals = this.attachInternals();
        internals.role = 'gridcell';
        internals.ariaColIndex = 4;
        internals.ariaRowSpan = 2;
    }
});

customElements.define('custom-colspan-cell', class CustomColspanCell extends HTMLElement {
    constructor()
    {
        super();
        const internals = this.attachInternals();
        internals.role = 'gridcell';
        internals.ariaColIndex = 2;
        internals.ariaColSpan = 2;
    }
});

description("This tests that aria fallback roles work correctly.");
if (!window.accessibilityController)
    debug('This test requires accessibilityController');
else {
    shouldBeEqualToString('accessibilityController.accessibleElementById("table-1").role', 'AXRole: AXTable');
    shouldBe('accessibilityController.accessibleElementById("table-1").rowCount', '4');
    shouldBe('accessibilityController.accessibleElementById("table-1").columnCount', '4');
    shouldBe('accessibilityController.accessibleElementById("table-1").numberAttributeValue("AXARIAColumnCount")', '4');
    shouldBe('accessibilityController.accessibleElementById("table-1").numberAttributeValue("AXARIARowCount")', '8');
    shouldBeEqualToString('accessibilityController.accessibleElementById("row-header").role', 'AXRole: AXRow');
    if (accessibilityController.platformName == "atspi")
        shouldBeEqualToString('accessibilityController.accessibleElementById("header-1").role', 'AXRole: AXColumnHeader');
    else 
        shouldBeEqualToString('accessibilityController.accessibleElementById("header-1").role', 'AXRole: AXCell');
    shouldBeEqualToString('accessibilityController.accessibleElementById("header-1").sortDirection', 'AXAscendingSortDirection');

    shouldBeEqualToString('accessibilityController.accessibleElementById("row-1").role', 'AXRole: AXRow');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell1").role', 'AXRole: AXCell');
    shouldBe('accessibilityController.accessibleElementById("cell1").numberAttributeValue("AXARIARowIndex")', '7');
    shouldBe('accessibilityController.accessibleElementById("cell1").numberAttributeValue("AXARIAColumnIndex")', '2');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell2").role', 'AXRole: AXCell');
    shouldBe('accessibilityController.accessibleElementById("cell2").numberAttributeValue("AXARIARowIndex")', '7');
    shouldBe('accessibilityController.accessibleElementById("cell2").numberAttributeValue("AXARIAColumnIndex")', '3');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell3").role', 'AXRole: AXCell');
    shouldBe('accessibilityController.accessibleElementById("cell3").numberAttributeValue("AXARIARowIndex")', '7');
    shouldBe('accessibilityController.accessibleElementById("cell3").numberAttributeValue("AXARIAColumnIndex")', '4');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell3").rowIndexRange()', '{1, 2}');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell4").role', 'AXRole: AXCell');
    shouldBe('accessibilityController.accessibleElementById("cell4").numberAttributeValue("AXARIARowIndex")', '7');
    shouldBe('accessibilityController.accessibleElementById("cell4").numberAttributeValue("AXARIAColumnIndex")', '5');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell4").rowIndexRange()', '{1, 3}');

    shouldBeEqualToString('accessibilityController.accessibleElementById("row-2").role', 'AXRole: AXRow');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell5").role', 'AXRole: AXCell');
    shouldBe('accessibilityController.accessibleElementById("cell5").numberAttributeValue("AXARIARowIndex")', '8');
    shouldBe('accessibilityController.accessibleElementById("cell5").numberAttributeValue("AXARIAColumnIndex")', '2');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell5").rowIndexRange()', '{2, 1}');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell5").columnIndexRange()', '{0, 2}');

    shouldBeEqualToString('accessibilityController.accessibleElementById("row-3").role', 'AXRole: AXRow');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell6").role', 'AXRole: AXCell');
    shouldBe('accessibilityController.accessibleElementById("cell6").numberAttributeValue("AXARIARowIndex")', '9');
    shouldBe('accessibilityController.accessibleElementById("cell6").numberAttributeValue("AXARIAColumnIndex")', '2');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell6").rowIndexRange()', '{3, 1}');
    shouldBeEqualToString('accessibilityController.accessibleElementById("cell6").columnIndexRange()', '{0, 3}');
}

</script>
</body>
</html>