Index: LayoutTests/fast/css/target-fragment-match.html |
diff --git a/LayoutTests/fast/css/target-fragment-match.html b/LayoutTests/fast/css/target-fragment-match.html |
index 765d98c3704b367138edc42cfa5d98ee26309d64..c81e2dc20bf159a73caaf3b3fd800ebe0c705515 100644 |
--- a/LayoutTests/fast/css/target-fragment-match.html |
+++ b/LayoutTests/fast/css/target-fragment-match.html |
@@ -1,34 +1,44 @@ |
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
-<html> |
-<head> |
+<!DOCTYPE html> |
<style type="text/css"> |
-div:target { |
- background-color: #66CCFF; |
-} |
+ div { |
+ background-color: rgb(255, 255, 255); |
+ } |
+ |
+ div:target { |
+ background-color: rgb(102, 204, 255); |
+ } |
</style> |
+ |
+<script src="../../resources/js-test.js"></script> |
<script> |
-function test() |
-{ |
- if (window.testRunner) |
- testRunner.waitUntilDone(); |
+ 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(runTest, 0); |
-} |
+ setTimeout(function() { |
+ window.location.hash = '#target-01'; |
+ }, delay); |
+ }; |
-function runTest() { |
- window.location.hash ='#target-01'; |
- document.body.offsetTop; |
- window.history.back(); // This queues up a navigation, so we need to delay the call to notifyDone. |
- if (window.testRunner) |
- window.onpopstate = function() { testRunner.notifyDone() }; |
-} |
+ 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> |
-</head> |
-<body onload="test()"> |
<div id="target-01"> |
<p>I should be highlighted first because of the anchor, and de-highlighted when there is no fragment.</p> |
-</div> |
- |
-</body></html> |
+</div> |