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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
<!DOCTYPE html>
<html>
<head>
<style>
#red {
background-color: red;
position: absolute;
left: 50px;
top: 50px;
height: 100px;
width: 100px;
}
#blue {
background-color: blue;
position: absolute;
left: 50px;
top: 200px;
height: 100px;
width: 100px;
}
#blue:hover::after {
content: "Hovered.";
}
</style>
<script src="../../resources/js-test.js"></script>
</head>
<body onload="runtest()" style="margin:0">
<script type="text/javascript">
var redDiv;
var blueDiv;
var containerDiv;
var blueText;
var redTextWhenHovered = "Red hovered.";
var blueTextWhenNotHovered = "";
var blueTextWhenHovered = '"Hovered."';
function runtest()
{
if (!window.testRunner || !window.eventSender)
return;
if (!window.internals || !window.internals.setIsCursorVisible) {
debug("window.internals.setIsCursorVisible is required to run this test.");
return;
}
testRunner.waitUntilDone();
containerDiv = document.getElementById('container');
redDiv = document.createElement("div");
redDiv.id = "red";
blueDiv = document.createElement("div");
blueDiv.id = "blue";
insertDivs();
document.addEventListener('keydown', function(e) {
blueDiv.style.top = "50px";
redDiv.parentNode.removeChild(redDiv);
});
initialHoverOverRedDiv();
debug("Mouse is visible, deleting the red div.");
eventSender.keyDown("a");
window.setTimeout(testAfterDeleteCursorVisible, 0);
}
function testAfterDeleteCursorVisible()
{
checkBlueHoverText(blueTextWhenHovered);
window.setTimeout(testWithInvisibleCursor, 0);
}
function testWithInvisibleCursor()
{
blueDiv.parentNode.removeChild(blueDiv);
insertDivs();
initialHoverOverRedDiv();
debug("Setting the mouse cursor to be invisible.");
internals.setIsCursorVisible(document, false);
shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered);
shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered);
debug("Mouse is invisible, deleting the red div.");
eventSender.keyDown("a");
window.setTimeout(testAfterDeleteCursorInvisible, 0);
}
function testAfterDeleteCursorInvisible()
{
checkBlueHoverText(blueTextWhenNotHovered);
testRunner.notifyDone();
}
// Helper functions
function checkBlueHoverText(expectedText)
{
shouldBe("blueDiv.offsetTop", "50");
blueText = window.getComputedStyle(document.querySelector('#blue'), ':after').content;
shouldBeEqualToString("blueText", expectedText);
}
function insertDivs()
{
debug("Adding the red and blue divs.");
blueDiv.style.top = "200px";
containerDiv.appendChild(redDiv);
containerDiv.appendChild(blueDiv);
redDiv.addEventListener('mouseover', function(e) {
this.innerHTML = redTextWhenHovered;
});
shouldBe("blueDiv.offsetTop", "200");
shouldBe("redDiv.offsetTop", "50");
}
function initialHoverOverRedDiv()
{
debug("Mouse is visible, moving it over the red div.");
internals.setIsCursorVisible(document, true);
eventSender.mouseMoveTo(100, 100);
shouldBeEqualToString("redDiv.innerHTML", redTextWhenHovered);
shouldBeEqualToString("blueDiv.innerHTML", blueTextWhenNotHovered);
}
</script>
<div id="container">
</div>
<p>Test for <a href="http://crbug.com/240722">http://crbug.com/240722</a>. If the mouse cursor is not visible, no new hover effects should be invoked when the currently hovered node is removed from the DOM. Press any key to delete the red div.</p>
<div id="console"></div>
</body>
</html>
|
