pseudo-target-indirect-sibling-002.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test.js"></script>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

window.jsTestIsAsync = true;

</script>

<style>
div.class { background-color: red; }
:hover {background-color:blue; }
:target~#first { background-color: green; }
</style>

</head>
<body onhashchange="hashchange();">
<p id="description"></p>
<div tabindex=1" id="first" class="class"></div>
<div tabindex=2" id="second" class="class"></div>
<div tabindex=3" id="third" class="class"></div>
<div tabindex=4" id="fourth" class="class"></div>
<div id="console"></div>
<script>
description('This test passes if it does not find the element whose id is "first", because even though it has a sibling whose id matches the fragment of the url of this test, that sibling comes after, not before the "first" element.');


if (window.location.hash.indexOf("second") == -1)
    window.location.hash = "#second";

function hashchange() {
el = document.getElementById("first");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");

el = document.getElementById("second");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");

el = document.getElementById("third");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");

el = document.getElementById("fourth");
shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");
finishJSTest();
}
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/pseudo-target-indirect-sibling-002.html
