| <!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> |
