| Index: third_party/polymer/polymer-selector/test/html/polymer-selector-basic.html
|
| diff --git a/third_party/polymer/polymer-selector/test/html/polymer-selector-basic.html b/third_party/polymer/polymer-selector/test/html/polymer-selector-basic.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..86f61fae2747b76a107aaf1f63ac0f927e3877f5
|
| --- /dev/null
|
| +++ b/third_party/polymer/polymer-selector/test/html/polymer-selector-basic.html
|
| @@ -0,0 +1,87 @@
|
| +<!doctype html>
|
| +<html>
|
| +<head>
|
| + <title>polymer-selector-basic</title>
|
| + <script src="../../../platform/platform.js"></script>
|
| + <script src="../../../tools/test/htmltest.js"></script>
|
| + <script src="../../../tools/test/chai/chai.js"></script>
|
| + <link rel="import" href="../../polymer-selector.html">
|
| + <style>
|
| + .polymer-selected {
|
| + background: #ccc;
|
| + }
|
| +
|
| + .my-selected {
|
| + background: red;
|
| + }
|
| + </style>
|
| +</head>
|
| +<body>
|
| +
|
| + <polymer-selector id="selector1">
|
| + <div>Item 1</div>
|
| + <div>Item 2</div>
|
| + <div>Item 3</div>
|
| + <div>Item 4</div>
|
| + <div>Item 5</div>
|
| + </polymer-selector>
|
| +
|
| + <br><br>
|
| +
|
| + <polymer-selector id="selector2" selected="item3" selectedClass="my-selected" valueattr="id">
|
| + <div id="item1">Item 1</div>
|
| + <div id="item2">Item 2</div>
|
| + <div id="item3">Item 3</div>
|
| + <div id="item4">Item 4</div>
|
| + <div id="item5">Item 5</div>
|
| + </polymer-selector>
|
| +
|
| + <script>
|
| + var assert = chai.assert;
|
| + var async = requestAnimationFrame;
|
| + document.addEventListener('WebComponentsReady', function() {
|
| + // selector1
|
| + var s = document.querySelector('#selector1');
|
| + assert.equal(s.selected, null);
|
| + assert.equal(s.selectedClass, 'polymer-selected');
|
| + assert.isFalse(s.multi);
|
| + assert.equal(s.valueattr, 'name');
|
| + assert.equal(s.items.length, 5);
|
| + // selector2
|
| + s = document.querySelector('#selector2');
|
| + assert.equal(s.selected, "item3");
|
| + assert.equal(s.selectedClass, 'my-selected');
|
| + // setup listener for polymer-select event
|
| + var selectEventCounter = 0;
|
| + s.addEventListener('polymer-select', function(e) {
|
| + if (e.detail.isSelected) {
|
| + selectEventCounter++;
|
| + // selectedItem and detail.item should be the same
|
| + assert.equal(e.detail.item, s.selectedItem);
|
| + }
|
| + });
|
| + new PathObserver(s, 'selected', function() {
|
| + // check polymer-select event
|
| + assert.equal(selectEventCounter, 1);
|
| + // check selected class
|
| + assert.isTrue(s.children[4].classList.contains('my-selected'));
|
| + // check selectedItem
|
| + assert.equal(s.selectedItem, s.children[4]);
|
| + // selecting the same value shouldn't fire polymer-select
|
| + selectEventCounter = 0;
|
| + s.selected = 'item5';
|
| + Platform.flush();
|
| + // TODO(ffu): would be better to wait for something to happen
|
| + // instead of not to happen
|
| + setTimeout(function() {
|
| + assert.equal(selectEventCounter, 0);
|
| + done();
|
| + }, 50);
|
| + });
|
| + // set selected
|
| + s.selected = 'item5';
|
| + Platform.flush();
|
| + });
|
| + </script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
