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

<style>
.pseudo::after {
  content: url(resources/svg-circle.svg);
  width: 18px;
  height: 20px;
  position: absolute;
  margin-top: 6px;
  right: 6px
}

.pseudo.hidden::after {
    content: ' ';
}
</style>

<body id="body">

<div id="container">
<div id="test" style="float : left;">
<span>Language</span>
<input id="test">
</div>

<div id="float" style="display: inline-block;" class="pseudo">
<span required="" style="color: rgb(194, 0, 0);">Email</span>
<input type="text" required="" aria-required="true" value="" onkeyup="hidePseudo();">
</div>

</div>

<p id="description"></p>
<div id="console"></div>

<script>

    description("Make sure that we are updating the render block flow element's children correctly.");

    if (window.accessibilityController) {
        var element = accessibilityController.accessibleElementById("float");
        if (accessibilityController.platformName != "atk")
            shouldBe("element.childrenCount", "3");
        else
            shouldBe("element.childrenCount", "2");
        
        eventSender.keyDown('\t');
        eventSender.keyDown('\t');
        
        if (accessibilityController.platformName != "atk")
            shouldBe("element.childrenCount", "2");
        else
            shouldBe("element.childrenCount", "1");
        showPseudo();
        
        function hidePseudo() {
            document.getElementById("float").className += "hidden"
        }
        
        function showPseudo() {
            document.getElementById("float").className = "pseudo";
        }
                
        // Make sure getting the attributes of its children won't cause crash
        element.attributesOfChildren();
    }

</script>

<script src="../resources/js-test-post.js"></script>
</body>
</html>