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

<!DOCTYPE html>
<html>
<body>
  <div>
    <input id="input">
    <label id="input-name" for="input">cats</label>
  </div>

  <div id="main" role="main" aria-labelledby="main-name">
  </div>
  <h1 id="main-name">apples</h1>

  <div id="nav" role="navigation" aria-describedby="nav-desc">
  </div>
  <h1 id="nav-desc">butter</h1>

</body>
</html>

<script>
function axElementById(id) {
    return accessibilityController.accessibleElementById(id);
}

test(function(t) {
    var ax = axElementById("input");
    assert_equals(ax.name, "cats");
    document.getElementById("input-name").innerText = "dogs";
    assert_equals(ax.name, "dogs");
}, "Changing text in a <label for> changes a name pointed to by @for");

test(function(t) {
    var ax = axElementById("main");
    assert_equals(ax.name, "apples");
    document.getElementById("main-name").innerText = "oranges";
    assert_equals(ax.name, "oranges");
}, "Changing text pointed to by aria-labelledby changes the name pointed to by @aria-labelledby");

test(function(t) {
    var ax = axElementById("nav");
    assert_equals(ax.description, "butter");
    document.getElementById("nav-desc").innerText = "margarine";
    assert_equals(ax.description, "margarine");
}, "Changing text pointed to by aria-describedby changes the description pointed to by @aria-describedby");
</script>