<!DOCTYPE html>
<style type="text/css">
  div {
    background-color: rgb(255, 255, 255);
  }
  
  div:target {
    background-color: rgb(102, 204, 255);
  }
</style>

<script src="../../resources/js-test.js"></script>
<script>
  jsTestIsAsync = true;
  description('Verify that css :target selector is correctly updated during hash and history navigations');

  // Increase the navigation delay outside test runner to make the effect visible
  var delay = window.testRunner ? 0 : 500;

  onload = function() {
    // Location changes need to happen outside the onload handler to generate history entries.
    setTimeout(function() {
      window.location.hash = '#target-01';
    }, delay);
  };

  window.addEventListener('hashchange', function() {
    if (window.location.hash == "#target-01") {
      document.body.offsetTop;
      shouldBeEqualToString("getComputedStyle(document.getElementById('target-01')).backgroundColor", "rgb(102, 204, 255)");
      setTimeout(function() {
        window.history.back();
      }, delay);
    } else {
      document.body.offsetTop;
      shouldBeEqualToString("getComputedStyle(document.getElementById('target-01')).backgroundColor", "rgb(255, 255, 255)");
      finishJSTest();
    }
  });
</script>

<div id="target-01">
  <p>I should be highlighted first because of the anchor, and de-highlighted when there is no fragment.</p>
</div>