1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<!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>
|
