mirror of
https://github.com/Polymer/polymer.git
synced 2026-08-19 01:14:44 -05:00
77 lines
2.0 KiB
HTML
77 lines
2.0 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" foo="foo">
|
|
<div id="item1">Item</div>
|
|
</x-menu-button>
|
|
|
|
<element name="x-selector" attributes="selected">
|
|
<template>
|
|
<content id="selectorContent"></content>
|
|
</template>
|
|
<script>
|
|
Polymer.register(this, {
|
|
selectedChanged: function() {
|
|
var distributed = this.$.selectorContent.getDistributedNodes()
|
|
console.log('must access distributed nodes', distributed);
|
|
}
|
|
});
|
|
</script>
|
|
</element>
|
|
|
|
<element name="x-menu-button" attributes="foo">
|
|
<template>
|
|
<div foo="{{foo}}">
|
|
<x-selector id="selector" selected="0">
|
|
<content id="menuButtonContent"></content>
|
|
</x-selector>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
Polymer.register(this);
|
|
</script>
|
|
</element>
|
|
|
|
<script>
|
|
document.addEventListener('WebComponentsReady', function() {
|
|
setTimeout(function() {
|
|
item1 = wrap(item1);
|
|
menuButton = wrap(menuButton);
|
|
selector = menuButton.$.selector;
|
|
|
|
path = [
|
|
item1,
|
|
menuButton.$.menuButtonContent,
|
|
selector.$.selectorContent,
|
|
selector.webkitShadowRoot,
|
|
selector,
|
|
menuButton.webkitShadowRoot,
|
|
menuButton
|
|
];
|
|
|
|
var x = 0;
|
|
path.forEach(function(n, i) {
|
|
n.addEventListener('x', function(e) {
|
|
console.log(e.currentTarget.localName + ':' + e.currentTarget.id);
|
|
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>
|