<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<div class="container" id="container1" role="group" aria-label="Container">
    <div id="heading1" role="heading" aria-owns="menu1">heading</div>
    <div id="menu1" role="menu">menu</div>
</div>

<script>
test(function(t) {
    // No problem with using aria-owns to put a menu inside a heading.
    var axHeading1 = accessibilityController.accessibleElementById("heading1");
    assert_equals(axHeading1.name, "heading");
    var axContainer1 = accessibilityController.accessibleElementById("container1");
    assert_equals(axContainer1.childrenCount, 1);
    assert_equals(axContainer1.childAtIndex(0).role, "AXRole: AXHeading");
}, "Aria-owns should re-parent a target when the source role allows children.");
</script>

<div class="container" id="container2" role="group" aria-label="Container">
    <div id="button2" role="button" aria-owns="menu2">button</div>
    <div id="menu2" role="menu">menu</div>
</div>

<script>
test(function(t)
{
    // A button can't have children, so we should ignore aria-owns.
    var axButton2 = accessibilityController.accessibleElementById("button2");
    assert_equals(axButton2.name, "button");
    var axContainer2 = accessibilityController.accessibleElementById("container2");
    assert_equals(axContainer2.childrenCount, 2);
    assert_equals(axContainer2.childAtIndex(0).role, "AXRole: AXButton");
    assert_equals(axContainer2.childAtIndex(1).role, "AXRole: AXMenu");
}, "Aria-owns doesn't move an element if the role doesn't allow children.");
</script>

<style>
input, textarea {
    display: block;
}
</style>

<div class="container" id="container3" role="group" aria-label="Container">
    <input id="textfield3" aria-owns="menu3" aria-label="textfield">
    <div id="menu3" role="menu">menu</div>
</div>

<script>
test(function(t)
{
    var axTextfield3 = accessibilityController.accessibleElementById("textfield3");
    assert_equals(axTextfield3.name, "textfield");
    var axContainer3 = accessibilityController.accessibleElementById("container3");
    assert_equals(axContainer3.childrenCount, 2);
    assert_equals(axContainer3.childAtIndex(0).role, "AXRole: AXTextField");
    // An input element naturally gets 1 child that corresponds to the anonymous
    // inner editor element.
    assert_equals(axContainer3.childAtIndex(0).childrenCount, 1);
    assert_equals(axContainer3.childAtIndex(1).role, "AXRole: AXMenu");
}, "Aria-owns doesn't create extra children of an input element.");
</script>

<div class="container" id="container4" role="group" aria-label="Container">
    <textarea id="textfield4" aria-owns="menu4" aria-label="textfield">
    </textarea>
    <div id="menu4" role="menu">menu</div>
</div>

<script>
test(function(t)
{
    var axTextfield4 = accessibilityController.accessibleElementById("textfield4");
    assert_equals(axTextfield4.name, "textfield");
    var axContainer4 = accessibilityController.accessibleElementById("container4");
    assert_equals(axContainer4.childrenCount, 2);
    assert_equals(axContainer4.childAtIndex(0).role, "AXRole: AXTextField");
    assert_equals(axContainer4.childAtIndex(1).role, "AXRole: AXMenu");
}, "Aria-owns doesn't create children of a textarea element.");
</script>

<div class="container" id="container5" role="group" aria-label="Container">
    <div id="textfield5" aria-owns="menu5" aria-label="textfield"
         contentEditable="true">
    </div>
    <div id="menu5" role="menu">menu</div>
</div>

<script>
test(function(t)
{
    var axTextfield5 = accessibilityController.accessibleElementById("textfield5");
    assert_equals(axTextfield5.name, "textfield");
    var axContainer5 = accessibilityController.accessibleElementById("container5");
    assert_equals(axContainer5.childrenCount, 2);
    assert_equals(axContainer5.childAtIndex(0).role, "AXRole: AXGenericContainer");
    assert_equals(axContainer5.childAtIndex(0).childrenCount, 0);
    assert_equals(axContainer5.childAtIndex(1).role, "AXRole: AXMenu");
}, "Aria-owns doesn't create children of a contenteditable element.");
</script>