<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
    WebInspector.domTreeManager.requestDocument(function(documentNode) {
        WebInspector.domTreeManager.querySelector(documentNode.id, "#none", function(nodeId) {
            var domNode = WebInspector.domTreeManager.nodeForId(nodeId);
            InspectorTest.log("");
            InspectorTest.expectThat(domNode, "Got DOMNode for #none");
            InspectorTest.assert(!domNode.pseudoType());
            InspectorTest.expectThat(!domNode.hasPseudoElements(), "DOMNode has no pseudo elements");
            InspectorTest.assert(domNode.pseudoElements().size === 0);
            InspectorTest.assert(!domNode.beforePseudoElement());
            InspectorTest.assert(!domNode.afterPseudoElement());
        });

        WebInspector.domTreeManager.querySelector(documentNode.id, "#b", function(nodeId) {
            var domNode = WebInspector.domTreeManager.nodeForId(nodeId);
            InspectorTest.log("");
            InspectorTest.expectThat(domNode, "Got DOMNode for #b");
            InspectorTest.assert(!domNode.pseudoType());
            InspectorTest.expectThat(domNode.hasPseudoElements(), "DOMNode has pseudo elements");
            InspectorTest.expectThat(domNode.pseudoElements().size === 1, "DOMNode has 1 pseudo elements");
            InspectorTest.expectThat(domNode.beforePseudoElement(), "DOMNode has a before pseudo element");
            InspectorTest.expectThat(!domNode.afterPseudoElement(), "DOMNode does not have an after pseudo element");
            InspectorTest.expectThat(domNode.beforePseudoElement().pseudoType() === WebInspector.DOMNode.PseudoElementType.Before, "DOMNode for before pseudo element has the right type");
        });

        WebInspector.domTreeManager.querySelector(documentNode.id, "#a", function(nodeId) {
            var domNode = WebInspector.domTreeManager.nodeForId(nodeId);
            InspectorTest.log("");
            InspectorTest.expectThat(domNode, "Got DOMNode for #a");
            InspectorTest.assert(!domNode.pseudoType());
            InspectorTest.expectThat(domNode.hasPseudoElements(), "DOMNode has pseudo elements");
            InspectorTest.expectThat(domNode.pseudoElements().size === 1, "DOMNode has 1 pseudo elements");
            InspectorTest.expectThat(!domNode.beforePseudoElement(), "DOMNode does not have a before pseudo element");
            InspectorTest.expectThat(domNode.afterPseudoElement(), "DOMNode has an after pseudo element");
            InspectorTest.expectThat(domNode.afterPseudoElement().pseudoType() === WebInspector.DOMNode.PseudoElementType.After, "DOMNode for after pseudo element has the right type");
        });

        WebInspector.domTreeManager.querySelector(documentNode.id, "#x", function(nodeId) {
            var domNode = WebInspector.domTreeManager.nodeForId(nodeId);
            InspectorTest.log("");
            InspectorTest.expectThat(domNode, "Got DOMNode for #x");
            InspectorTest.assert(!domNode.pseudoType());
            InspectorTest.expectThat(domNode.hasPseudoElements(), "DOMNode has pseudo elements");
            InspectorTest.expectThat(domNode.pseudoElements().size === 2, "DOMNode has 2 pseudo elements");
            InspectorTest.expectThat(domNode.beforePseudoElement(), "DOMNode has a before pseudo element");
            InspectorTest.expectThat(domNode.afterPseudoElement(), "DOMNode has an after pseudo element");
            InspectorTest.expectThat(domNode.beforePseudoElement().pseudoType() === WebInspector.DOMNode.PseudoElementType.Before, "DOMNode for before pseudo element has the right type");
            InspectorTest.expectThat(domNode.afterPseudoElement().pseudoType() === WebInspector.DOMNode.PseudoElementType.After, "DOMNode for after pseudo element has the right type");
            InspectorTest.completeTest();
        });
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Test for basic DOMNode pseudo element support.</p>

    <style>
    #x:before, #b:before { content: "before"; }
    #x:after, #a:after { content: "after"; }
    </style>

    <div id="none">TEST ELEMENT: No Pseudo Elements</div>
    <div id="b">TEST ELEMENT: Has Before Pseudo Element</div>
    <div id="a">TEST ELEMENT: Has After Pseudo Element</div>
    <div id="x">TEST ELEMENT: Has Before and After Pseudo Elements</div>

</body>
</html>