<html>
<head>
    <style>
    div {
        margin: 0px;
        padding: 0px;
        border: none;
    }
    div.a:after { 
        content: 'This sentence should be after "First." and "Second."'; 
        color: red; 
    }
    </style>
    <script>
    if (window.testRunner)
        testRunner.dumpAsText();

    function test(){
        var first = document.getElementById("first");
        var second = document.getElementById("second");
    
        //Test whether the first and second lines are laid out sequentially.
        //If there is something between them then it must be the css generated
        //content which means this bug is not fixed.
        if(second.offsetTop != first.offsetTop + first.offsetHeight)
            document.getElementById("result").innerHTML = "FAIL";
        else
            document.getElementById("result").innerHTML = "PASS";
    }    
    </script>
</head>
<body onload="test()">
    <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=32288">32288</a> - :after selector displays in wrong place with nested div</p>
    <div class="a" id="container">
        <div id="first">First.</div>
        <div id="second">Second.</div>  
    </div>
    <p id="result"></div>
</body>
</html>