| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <html> |
| 3 <head> |
| 4 <title>polymer-selector-basic</title> |
| 5 <script src="../../../platform/platform.js"></script> |
| 6 <script src="../../../tools/test/htmltest.js"></script> |
| 7 <script src="../../../tools/test/chai/chai.js"></script> |
| 8 <link rel="import" href="../../polymer-selector.html"> |
| 9 <style> |
| 10 .polymer-selected { |
| 11 background: #ccc; |
| 12 } |
| 13 |
| 14 .my-selected { |
| 15 background: red; |
| 16 } |
| 17 </style> |
| 18 </head> |
| 19 <body> |
| 20 |
| 21 <polymer-selector id="selector1"> |
| 22 <div>Item 1</div> |
| 23 <div>Item 2</div> |
| 24 <div>Item 3</div> |
| 25 <div>Item 4</div> |
| 26 <div>Item 5</div> |
| 27 </polymer-selector> |
| 28 |
| 29 <br><br> |
| 30 |
| 31 <polymer-selector id="selector2" selected="item3" selectedClass="my-selected"
valueattr="id"> |
| 32 <div id="item1">Item 1</div> |
| 33 <div id="item2">Item 2</div> |
| 34 <div id="item3">Item 3</div> |
| 35 <div id="item4">Item 4</div> |
| 36 <div id="item5">Item 5</div> |
| 37 </polymer-selector> |
| 38 |
| 39 <script> |
| 40 var assert = chai.assert; |
| 41 var async = requestAnimationFrame; |
| 42 |
| 43 function oneMutation(node, options, cb) { |
| 44 var o = new MutationObserver(function() { |
| 45 cb(); |
| 46 o.disconnect(); |
| 47 }); |
| 48 o.observe(node, options); |
| 49 } |
| 50 |
| 51 document.addEventListener('polymer-ready', function() { |
| 52 // selector1 |
| 53 var s = document.querySelector('#selector1'); |
| 54 assert.equal(s.selected, null); |
| 55 assert.equal(s.selectedClass, 'polymer-selected'); |
| 56 assert.isFalse(s.multi); |
| 57 assert.equal(s.valueattr, 'name'); |
| 58 assert.equal(s.items.length, 5); |
| 59 // selector2 |
| 60 s = document.querySelector('#selector2'); |
| 61 assert.equal(s.selected, "item3"); |
| 62 assert.equal(s.selectedClass, 'my-selected'); |
| 63 // setup listener for polymer-select event |
| 64 var selectEventCounter = 0; |
| 65 s.addEventListener('polymer-select', function(e) { |
| 66 if (e.detail.isSelected) { |
| 67 selectEventCounter++; |
| 68 // selectedItem and detail.item should be the same |
| 69 assert.equal(e.detail.item, s.selectedItem); |
| 70 } |
| 71 }); |
| 72 // set selected |
| 73 s.selected = 'item5'; |
| 74 Platform.flush(); |
| 75 oneMutation(s, {attributes: true}, function() { |
| 76 // check polymer-select event |
| 77 assert.equal(selectEventCounter, 1); |
| 78 // check selected class |
| 79 assert.isTrue(s.children[4].classList.contains('my-selected')); |
| 80 // check selectedItem |
| 81 assert.equal(s.selectedItem, s.children[4]); |
| 82 // selecting the same value shouldn't fire polymer-select |
| 83 selectEventCounter = 0; |
| 84 s.selected = 'item5'; |
| 85 Platform.flush(); |
| 86 // TODO(ffu): would be better to wait for something to happen |
| 87 // instead of not to happen |
| 88 setTimeout(function() { |
| 89 assert.equal(selectEventCounter, 0); |
| 90 done(); |
| 91 }, 50); |
| 92 }); |
| 93 }); |
| 94 </script> |
| 95 </body> |
| 96 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 175443005:
[polymer] import all elements (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart