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
|
<!doctype html>
<html>
<head>
<template id='template'>
<style>
div {
background-color: rgb(255, 0, 0);
}
div:hover {
background-color: rgb(0, 128, 0);
}
div:hover:active {
background-color: rgb(0, 255, 255);
}
div:active {
background-color: rgb(0, 0, 255);
}
</style>
<div id='div-in-shadow'>
<content></content>
</div>
</template>
<style>
span:hover {
color: rgb(0, 128, 0);
}
span:active:hover {
color: rgb(0, 255, 255);
}
span:active {
color: rgb(0, 0, 255);
}
</style>
</head>
<body>
<div id='host'>Top-level text <span>Nested text</span></div>
<div id='other'>Other div</div>
<pre id='console'></pre>
</body>
<script src="../../../resources/js-test.js"></script>
<script>
var backgroundColor, textColor;
function shouldHaveBackgroundColor(element, bg) {
backgroundColor = getComputedStyle(element, null).getPropertyValue("background-color")
shouldBeEqualToString('backgroundColor', bg)
}
function shouldHaveTextColor(element, col) {
textColor = getComputedStyle(element, null).getPropertyValue("color")
shouldBeEqualToString('textColor', col)
}
var host = document.getElementById('host');
var shadowRoot = host.createShadowRoot();
var temp = document.getElementById('template');
shadowRoot.appendChild(temp.content.cloneNode(true));
var div = shadowRoot.querySelector('div');
var span = host.querySelector(':scope > span');
var divRect = div.getBoundingClientRect();
var spanRect = span.getBoundingClientRect();
var otherRect = document.getElementById('other').getBoundingClientRect();
eventSender.dragMode = false;
eventSender.mouseDown();
eventSender.mouseUp();
var posDivNotSpanX = parseInt((spanRect.right + divRect.right) / 2);
var spanCenterPosX = parseInt((spanRect.left + spanRect.right) / 2);
var spanCenterPosY = parseInt((spanRect.top + spanRect.bottom) / 2);
var topTextPosX = parseInt((divRect.left + spanRect.left) / 2);
var topTextPosY = spanCenterPosY;
var otherPosX = parseInt((otherRect.left + otherRect.right) / 2);
var otherPosY = parseInt((otherRect.top + otherRect.bottom) / 2);
eventSender.mouseMoveTo(posDivNotSpanX, spanCenterPosY);
shouldHaveBackgroundColor(div, 'rgb(0, 128, 0)');
eventSender.mouseDown();
shouldHaveBackgroundColor(div, 'rgb(0, 255, 255)');
eventSender.mouseUp();
shouldHaveBackgroundColor(div, 'rgb(0, 128, 0)');
eventSender.mouseMoveTo(otherPosX, otherPosY);
shouldHaveBackgroundColor(div, 'rgb(255, 0, 0)');
eventSender.mouseMoveTo(spanCenterPosX, spanCenterPosY);
shouldHaveBackgroundColor(div, 'rgb(0, 128, 0)');
shouldHaveTextColor(span, 'rgb(0, 128, 0)');
eventSender.mouseDown();
shouldHaveBackgroundColor(div, 'rgb(0, 255, 255)');
shouldHaveTextColor(span, 'rgb(0, 255, 255)');
eventSender.mouseUp();
shouldHaveBackgroundColor(div, 'rgb(0, 128, 0)');
shouldHaveTextColor(span, 'rgb(0, 128, 0)');
eventSender.mouseMoveTo(otherPosX, otherPosY);
shouldHaveBackgroundColor(div, 'rgb(255, 0, 0)');
shouldHaveTextColor(span, 'rgb(0, 0, 0)');
eventSender.mouseMoveTo(topTextPosX, topTextPosY);
shouldHaveBackgroundColor(div, 'rgb(0, 128, 0)');
eventSender.mouseDown();
shouldHaveBackgroundColor(div, 'rgb(0, 255, 255)');
eventSender.mouseUp();
shouldHaveBackgroundColor(div, 'rgb(0, 128, 0)');
eventSender.mouseMoveTo(otherPosX, otherPosY);
shouldHaveBackgroundColor(div, 'rgb(255, 0, 0)');
</script>
</html>
|
