1 <!DOCTYPE html> 2 <!-- 3 @license 4 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject 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> 92 suite('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
