| 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 document.addEventListener('WebComponentsReady', function() { |
| 43 // selector1 |
| 44 var s = document.querySelector('#selector1'); |
| 45 assert.equal(s.selected, null); |
| 46 assert.equal(s.selectedClass, 'polymer-selected'); |
| 47 assert.isFalse(s.multi); |
| 48 assert.equal(s.valueattr, 'name'); |
| 49 assert.equal(s.items.length, 5); |
| 50 // selector2 |
| 51 s = document.querySelector('#selector2'); |
| 52 assert.equal(s.selected, "item3"); |
| 53 assert.equal(s.selectedClass, 'my-selected'); |
| 54 // setup listener for polymer-select event |
| 55 var selectEventCounter = 0; |
| 56 s.addEventListener('polymer-select', function(e) { |
| 57 if (e.detail.isSelected) { |
| 58 selectEventCounter++; |
| 59 // selectedItem and detail.item should be the same |
| 60 assert.equal(e.detail.item, s.selectedItem); |
| 61 } |
| 62 }); |
| 63 new PathObserver(s, 'selected', function() { |
| 64 // check polymer-select event |
| 65 assert.equal(selectEventCounter, 1); |
| 66 // check selected class |
| 67 assert.isTrue(s.children[4].classList.contains('my-selected')); |
| 68 // check selectedItem |
| 69 assert.equal(s.selectedItem, s.children[4]); |
| 70 // selecting the same value shouldn't fire polymer-select |
| 71 selectEventCounter = 0; |
| 72 s.selected = 'item5'; |
| 73 Platform.flush(); |
| 74 // TODO(ffu): would be better to wait for something to happen |
| 75 // instead of not to happen |
| 76 setTimeout(function() { |
| 77 assert.equal(selectEventCounter, 0); |
| 78 done(); |
| 79 }, 50); |
| 80 }); |
| 81 // set selected |
| 82 s.selected = 'item5'; |
| 83 Platform.flush(); |
| 84 }); |
| 85 </script> |
| 86 </body> |
| 87 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 141483005:
Add polymer-selector and polymer-selection to polymer. (Closed)
Base URL: svn://svn.chromium.org/chrome/trunk/src