1<!DOCTYPE html> 2<!-- 3@license 4Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8Code distributed by Google as part of the polymer project is also 9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10--> 11<html> 12<head> 13<meta charset="utf-8"> 14<meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1"> 15<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 16 17<script src="../../webcomponentsjs/webcomponents-lite.js"></script> 18<script src="../../web-component-tester/browser.js"></script> 19<script src="../../test-fixture/test-fixture-mocha.js"></script> 20 21<link rel="import" href="../../test-fixture/test-fixture.html"> 22<link rel="import" href="../../neon-animation/neon-animated-pages.html"> 23<link rel="import" href="../../neon-animation/neon-animation-behavior.html"> 24<link rel="import" href="../../iron-selector/iron-selector.html"> 25 26</head> 27<body> 28 29<test-fixture id="descendant-selection"> 30 <template> 31 <neon-animated-pages entry-animation="test-animation" animate-initial-selection> 32 <iron-selector selected="0" id="selector"> 33 <div>1</div> 34 <div id="target">2</div> 35 </iron-selector> 36 </neon-animated-pages> 37 </template> 38</test-fixture> 39 40<test-fixture id="selecting-item"> 41 <template> 42 <neon-animated-pages entry-animation="test-animation" animate-initial-selection> 43 <x-selecting-element></x-selecting-element> 44 <div id="target"></div> 45 </neon-animated-pages> 46 </template> 47</test-fixture> 48 49<dom-module id="x-selecting-element"> 50 <template> 51 <iron-selector selected="0" id="selector"> 52 <div>1</div> 53 <div id="target">2</div> 54 </iron-selector> 55 </template> 56</dom-module> 57 58<dom-module id="test-element"> 59 <template> 60 <neon-animated-pages entry-animation="test-animation" animate-initial-selection> 61 <content></content> 62 </neon-animated-pages> 63 </template> 64</dom-module> 65 66<script> 67 HTMLImports.whenReady(function() { 68 Polymer({ is: 'x-selecting-element' }); 69 Polymer({ is: 'test-element' }); 70 Polymer({ 71 is: 'test-animation', 72 behaviors: [ 73 Polymer.NeonAnimationBehavior 74 ], 75 configure: function(config) { 76 config.node.animated = true; 77 } 78 }); 79 }); 80</script> 81 82<test-fixture id="distributed-children"> 83 <template> 84 <test-element> 85 <div>1</div> 86 <div id="target">2</div> 87 </test-element> 88 </template> 89</test-fixture> 90 91<script> 92suite('descendant selection', function() { 93 test('descendents of other selectors are not animated', function() { 94 var animatedPages = fixture('descendant-selection'); 95 var selector = Polymer.dom(animatedPages).querySelector('#selector'); 96 var target = Polymer.dom(animatedPages).querySelector('#target'); 97 Polymer.dom(selector).setAttribute('selected', '1'); 98 assert(!target.animated); 99 }); 100 test('elements distributed as children are animated', function() { 101 var testElement = fixture('distributed-children'); 102 var target = Polymer.dom(testElement).querySelector('#target'); 103 var animatedPages = Polymer.dom(testElement.root).querySelector("neon-animated-pages"); 104 Polymer.dom(animatedPages).setAttribute('selected', '1'); 105 assert(target.animated); 106 }); 107 test('ignores selection from shadow descendants of its items', function() { 108 var pages = fixture('selecting-item'); 109 var target = Polymer.dom(pages).querySelector('#target'); 110 var selecting = Polymer.dom(pages).querySelector('x-selecting-element'); 111 selecting.$.selector.selected = 1; 112 assert(!target.animated); 113 }); 114}); 115</script> 116 117</body> 118</html> 119