<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script src="../resources/run-after-layout-and-paint.js"></script>

<canvas>
  <ul id="container"><li>One</li><li>Two</li><li>Three</li></ul>
</canvas>

<script>
async_test(function(t) {
    var container = document.getElementById("container");
    var axContainer = accessibilityController.accessibleElementById("container");
    assert_equals(axContainer.childrenCount, 3, "Initial");

    var newNode = document.createElement("li");
    newNode.innerText = "Four";
    container.appendChild(newNode);

    assert_equals(axContainer.childrenCount, 4, "After appendChild");

    container.removeChild(newNode);
    // Removing a child inside a canvas doesn't cause the lifecycle state to reset,
    // so wait for the next lifecycle update.
    runAfterLayoutAndPaint(t.step_func(() => {
        assert_equals(axContainer.childrenCount, 3, "After removeChild");
        t.done();
    }));
}, "Children count is correct inside a canvas");

</script>