<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<script>
jsTestIsAsync = true;

if (window.testRunner)
    window.testRunner.keepWebHistory();

function compareStyles()
{
    var anchor = document.createElement("a");
    anchor.href="resources/dummy.html";
    anchor.setAttribute("id", "one");
    anchor.classList.add("ok");
    anchor.classList.add("ng");
    anchor.innerHTML = "One";
    document.getElementById('enclosure').appendChild(anchor);

    if (window.internals) {
        firstStyle = internals.computedStyleIncludingVisitedInfo(document.getElementById('one'));
        secondStyle = internals.computedStyleIncludingVisitedInfo(document.getElementById('two'));
        shouldBecomeDifferent('firstStyle.color', 'secondStyle.color', finishJSTest);
    }
}
</script>
<style>
a { color: green }
:visited.ok > a.ok { color: orange }
:visited.ok > span.ok { color: orange }
</style>
</head>
<body onload="compareStyles()">
<iframe src="resources/dummy.html" style="display:none"></iframe>

<p>These contents (not underline) of two links should be different colors (green and orange):</p>
<p style="color:green">
<a id="enclosure" class="ok" href="resources/dummy.html"></a>
<a class="ok" href="resources/dummy.html"><span class="ok" id="two">Two</span></a>
</p>
<div id=console></div>
</body>
<script src="../../resources/js-test-post.js"></script>
</html>