<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
doesnotexist:first-letter { color: red; }
doesnotexist > #targeta:first-letter { color: red; }
doesnotexist #targetb:first-letter { color: red; }
doesnotexist + #targetc:first-letter { color: red; }
doesnotexist ~ #targetd:first-letter { color: red; }
</style>

<script type="text/javascript">
if (window.testRunner)
    testRunner.dumpAsText();

function test()
{
    document.body.offsetTop;
    document.getElementById("targeta").innerHTML = "PASS";
    document.getElementById("targetb").firstChild.data = "PASS";
    document.getElementById("targetc").replaceChild(document.createTextNode("PASS"), document.getElementById("targetc").firstChild);
    document.getElementById("targetd").textContent = "PASS";
}
</script>

</head>
<body onload="test()">
<p>
The style resolution has an optimization to detect if a selector has certain pseudo element. The optimization should only happen if the selector completely match with the exception of the pseudo element.
</p>
<p>This test pass if all the lines read "PASS".</p>
<hr>
<p id="targeta">didn&rsquo;t run</p>
<p id="targetb">didn&rsquo;t run</p>
<p id="targetc">didn&rsquo;t run</p>
<p id="targetd">didn&rsquo;t run</p>
</body>
</html>
