third_party/WebKit/LayoutTests/fast/css/pseudo-target-indirect-sibling-002.html

   1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
   2 <html>
   3 <head>
   4 <script src="../../resources/js-test.js"></script>
   5 <script>
   6 if (window.testRunner)
   7     testRunner.waitUntilDone();
   8
   9 window.jsTestIsAsync = true;
  10
  11 </script>
  12
  13 <style>
  14 div.class { background-color: red; }
  15 :hover {background-color:blue; }
  16 :target~#first { background-color: green; }
  17 </style>
  18
  19 </head>
  20 <body onhashchange="hashchange();">
  21 <p id="description"></p>
  22 <div tabindex=1" id="first" class="class"></div>
  23 <div tabindex=2" id="second" class="class"></div>
  24 <div tabindex=3" id="third" class="class"></div>
  25 <div tabindex=4" id="fourth" class="class"></div>
  26 <div id="console"></div>
  27 <script>
  28 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.');
  29
  30
  31 if (window.location.hash.indexOf("second") == -1)
  32     window.location.hash = "#second";
  33
  34 function hashchange() {
  35 el = document.getElementById("first");
  36 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");
  37
  38 el = document.getElementById("second");
  39 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");
  40
  41 el = document.getElementById("third");
  42 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");
  43
  44 el = document.getElementById("fourth");
  45 shouldBe("document.defaultView.getComputedStyle(el, null).getPropertyValue('background-color')", "'rgb(255, 0, 0)'");
  46 finishJSTest();
  47 }
  48 </script>
  49 </body>
  50 </html>