third_party/WebKit/LayoutTests/fast/css/target-fragment-match.html

   1 <!DOCTYPE html>
   2 <style type="text/css">
   3   div {
   4     background-color: rgb(255, 255, 255);
   5   }
   6
   7   div:target {
   8     background-color: rgb(102, 204, 255);
   9   }
  10 </style>
  11
  12 <script src="../../resources/js-test.js"></script>
  13 <script>
  14   jsTestIsAsync = true;
  15   description('Verify that css :target selector is correctly updated during hash and history navigations');
  16
  17   // Increase the navigation delay outside test runner to make the effect visible
  18   var delay = window.testRunner ? 0 : 500;
  19
  20   onload = function() {
  21     // Location changes need to happen outside the onload handler to generate history entries.
  22     setTimeout(function() {
  23       window.location.hash = '#target-01';
  24     }, delay);
  25   };
  26
  27   window.addEventListener('hashchange', function() {
  28     if (window.location.hash == "#target-01") {
  29       document.body.offsetTop;
  30       shouldBeEqualToString("getComputedStyle(document.getElementById('target-01')).backgroundColor", "rgb(102, 204, 255)");
  31       setTimeout(function() {
  32         window.history.back();
  33       }, delay);
  34     } else {
  35       document.body.offsetTop;
  36       shouldBeEqualToString("getComputedStyle(document.getElementById('target-01')).backgroundColor", "rgb(255, 255, 255)");
  37       finishJSTest();
  38     }
  39   });
  40 </script>
  41
  42 <div id="target-01">
  43   <p>I should be highlighted first because of the anchor, and de-highlighted when there is no fragment.</p>
  44 </div>