зеркало из https://github.com/mozilla/gecko-dev.git
95 строки
3.3 KiB
HTML
95 строки
3.3 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
|
||
|
|
<script>
|
||
|
|
var mouseEnterCount = 0;
|
||
|
|
function mouseEnter() {
|
||
|
|
++mouseEnterCount;
|
||
|
|
}
|
||
|
|
var mouseLeaveCount = 0;
|
||
|
|
function mouseLeave() {
|
||
|
|
++mouseLeaveCount;
|
||
|
|
}
|
||
|
|
|
||
|
|
var pointerEnterCount = 0;
|
||
|
|
function pointerEnter() {
|
||
|
|
++pointerEnterCount;
|
||
|
|
}
|
||
|
|
var pointerLeaveCount = 0;
|
||
|
|
function pointerLeave() {
|
||
|
|
++pointerLeaveCount;
|
||
|
|
}
|
||
|
|
|
||
|
|
function pointerEventsEnabled() {
|
||
|
|
return "onpointerenter" in document.body;
|
||
|
|
}
|
||
|
|
|
||
|
|
function checkEventCounts(expected, msg) {
|
||
|
|
parent.is(mouseEnterCount, expected.mouseEnterCount, msg + ": mouseenter event count");
|
||
|
|
parent.is(mouseLeaveCount, expected.mouseLeaveCount, msg + ": mouseleave event count");
|
||
|
|
if (pointerEventsEnabled()) {
|
||
|
|
parent.is(pointerEnterCount, expected.pointerEnterCount, msg + ": pointerenter event count");
|
||
|
|
parent.is(pointerLeaveCount, expected.pointerLeaveCount, msg + ": pointerleave event count");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function test() {
|
||
|
|
var lightDiv = document.getElementById("lightDiv");
|
||
|
|
var host = document.getElementById("host");
|
||
|
|
var sr = host.attachShadow({mode: "closed"});
|
||
|
|
sr.innerHTML = "<div>shadow DOM<div>";
|
||
|
|
var shadowDiv = sr.firstChild;
|
||
|
|
|
||
|
|
host.addEventListener("mouseenter", mouseEnter, true);
|
||
|
|
host.addEventListener("mouseleave", mouseLeave, true);
|
||
|
|
host.addEventListener("pointerenter", pointerEnter, true);
|
||
|
|
host.addEventListener("pointerleave", pointerLeave, true);
|
||
|
|
|
||
|
|
shadowDiv.addEventListener("mouseenter", mouseEnter, true);
|
||
|
|
shadowDiv.addEventListener("mouseleave", mouseLeave, true);
|
||
|
|
shadowDiv.addEventListener("pointerenter", pointerEnter, true);
|
||
|
|
shadowDiv.addEventListener("pointerleave", pointerLeave, true);
|
||
|
|
|
||
|
|
synthesizeMouseAtCenter(lightDiv, { type: "mousemove" });
|
||
|
|
checkEventCounts({ mouseEnterCount: 0,
|
||
|
|
mouseLeaveCount: 0,
|
||
|
|
pointerEnterCount: 0,
|
||
|
|
pointerLeaveCount: 0
|
||
|
|
},
|
||
|
|
"Entered light DOM"
|
||
|
|
);
|
||
|
|
|
||
|
|
synthesizeMouseAtCenter(shadowDiv, { type: "mousemove" })
|
||
|
|
checkEventCounts({ mouseEnterCount: 2,
|
||
|
|
mouseLeaveCount: 0,
|
||
|
|
pointerEnterCount: 2,
|
||
|
|
pointerLeaveCount: 0
|
||
|
|
},
|
||
|
|
"Entered shadow DOM");
|
||
|
|
|
||
|
|
synthesizeMouseAtCenter(lightDiv, { type: "mousemove" })
|
||
|
|
checkEventCounts({ mouseEnterCount: 2,
|
||
|
|
mouseLeaveCount: 2,
|
||
|
|
pointerEnterCount: 2,
|
||
|
|
pointerLeaveCount: 2
|
||
|
|
},
|
||
|
|
"Left shadow DOM"
|
||
|
|
);
|
||
|
|
|
||
|
|
parent.SimpleTest.finish();
|
||
|
|
}
|
||
|
|
|
||
|
|
function lazyRequestAnimationFrame(fn) {
|
||
|
|
requestAnimationFrame(
|
||
|
|
function() {
|
||
|
|
setTimeout(fn);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body onload="lazyRequestAnimationFrame(test)">
|
||
|
|
<div id="lightDiv">light DOM</div>
|
||
|
|
<div id="host"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|