Files
polymer/test/html/event-path.html
T
2013-05-13 18:07:25 -07:00

105 lines
2.6 KiB
HTML

<!doctype html>
<html>
<head>
<title>event path</title>
<script src="../../polymer.js"></script>
<script src="../../tools/test/htmltest.js"></script>
<script src="../../node_modules/chai/chai.js"></script>
</head>
<body>
<x-menu-button id="menuButton">
<div id="item1"><div id="source"></div>Item1</div>
<div id="item2">Item2</div>
</x-menu-button>
<element name="x-selector">
<template>
<div id="selectorDiv">
<content id="selectorContent"></content>
</div>
</template>
<script>
Polymer.register(this);
</script>
</element>
<element name="x-menu" extends="x-selector">
<template>
<div id="menuDiv">
<shadow id="menuShadow"></shadow>
</div>
</template>
<script>
Polymer.register(this);
</script>
</element>
<element name="x-overlay">
<template>
<content id="overlayContent"></content>
</template>
<script>
Polymer.register(this);
</script>
</element>
<element name="x-menu-button">
<template>
<x-overlay id="overlay">
<div id="menuButtonDiv">
<x-menu id="menu">
<content id="menuButtonContent"></content>
</x-menu>
</div>
</x-overlay>
</template>
<script>
Polymer.register(this);
</script>
</element>
<script>
document.addEventListener('WebComponentsReady', function() {
setTimeout(function() {
item1 = wrap(item1);
menuButton = wrap(menuButton);
menu = menuButton.$.menu;
path = [
item1,
menuButton.$.menuButtonContent,
menu.$.selectorContent,
menu.$.selectorDiv,
menu.$.menuShadow.olderShadowRoot,
menu.$.menuShadow,
menu.$.menuDiv,
menu.webkitShadowRoot,
menu,
menuButton.$.menuButtonDiv,
menuButton.$.overlay.$.overlayContent,
menuButton.$.overlay.webkitShadowRoot,
menuButton.$.overlay,
menuButton.webkitShadowRoot,
menuButton
];
var x = 0;
path.forEach(function(n, i) {
n.addEventListener('x', function(e) {
//console.log(e.currentTarget.id, x, i);
chai.assert.equal(e.currentTarget.id, n.id, 'menu current target is as expected');
chai.assert.equal(x++, i, 'event listener order is correct');
if (i == path.length-1) {
done();
}
});
});
item1.dispatchEvent(new Event('x', {bubbles: true}));
});
})
</script>
</body>
</html>