OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <!-- |
| 3 @license |
| 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| 5 This code may only be used under the BSD style license found at http://polymer.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt |
| 10 --> |
| 11 |
| 12 <html> |
| 13 <head> |
| 14 <title>paper-ripple-behavior</title> |
| 15 |
| 16 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 17 <script src="../../web-component-tester/browser.js"></script> |
| 18 <script src="../../iron-test-helpers/mock-interactions.js"></script> |
| 19 |
| 20 <link rel="import" href="../../polymer/polymer.html"> |
| 21 <link rel="import" href="../../iron-behaviors/iron-button-state.html"> |
| 22 <link rel="import" href="../paper-ripple-behavior.html"> |
| 23 <link rel="import" href="shadowed-ripple.html"> |
| 24 </head> |
| 25 <body> |
| 26 |
| 27 <dom-module id="test-ripple"> |
| 28 <template> |
| 29 </template> |
| 30 <script> |
| 31 HTMLImports.whenReady(function() { |
| 32 Polymer({ |
| 33 is: 'test-ripple', |
| 34 behaviors: [ |
| 35 Polymer.IronButtonState, |
| 36 Polymer.IronControlState, |
| 37 Polymer.PaperRippleBehavior |
| 38 ] |
| 39 }); |
| 40 }); |
| 41 </script> |
| 42 </dom-module> |
| 43 |
| 44 <test-fixture id="basic"> |
| 45 <template> |
| 46 <test-ripple></test-ripple> |
| 47 </template> |
| 48 </test-fixture> |
| 49 |
| 50 <test-fixture id="ShadowBasic"> |
| 51 <template> |
| 52 <sd-ripple></sd-ripple> |
| 53 </template> |
| 54 </test-fixture> |
| 55 |
| 56 <test-fixture id="ShadowText"> |
| 57 <template> |
| 58 <sd-ripple>Howdy!</sd-ripple> |
| 59 </template> |
| 60 </test-fixture> |
| 61 |
| 62 <test-fixture id="ShadowElement"> |
| 63 <template> |
| 64 <sd-ripple> |
| 65 <div id="source">source!</div> |
| 66 </sd-ripple> |
| 67 </template> |
| 68 </test-fixture> |
| 69 |
| 70 <script> |
| 71 suite('PaperRippleBehavior', function() { |
| 72 var ripple; |
| 73 |
| 74 setup(function() { |
| 75 ripple = fixture('basic'); |
| 76 }); |
| 77 |
| 78 test('no ripple at startup', function() { |
| 79 assert.isFalse(ripple.hasRipple()); |
| 80 }); |
| 81 |
| 82 test('calling getRipple returns ripple', function() { |
| 83 assert.ok(ripple.getRipple()); |
| 84 }); |
| 85 |
| 86 test('focus generates ripple', function() { |
| 87 MockInteractions.focus(ripple); |
| 88 assert.ok(ripple.hasRipple()); |
| 89 }); |
| 90 |
| 91 test('down generates ripple', function() { |
| 92 MockInteractions.down(ripple); |
| 93 assert.ok(ripple.hasRipple()); |
| 94 MockInteractions.up(ripple); |
| 95 }); |
| 96 |
| 97 suite('Correct Targeting', function() { |
| 98 |
| 99 function assertInteractionCausesRipple(host, node, expected, msg) { |
| 100 var ripple = host.getRipple(); |
| 101 Polymer.dom.flush(); |
| 102 MockInteractions.down(node); |
| 103 assert.equal(ripple.ripples.length > 0, expected, msg); |
| 104 MockInteractions.up(node); |
| 105 } |
| 106 |
| 107 function assertInteractionAtLocationCausesRipple(host, node, location, e
xpected, msg) { |
| 108 var ripple = host.getRipple(); |
| 109 Polymer.dom.flush(); |
| 110 MockInteractions.down(node, location); |
| 111 assert.equal(ripple.ripples.length > 0, expected, msg); |
| 112 MockInteractions.up(node); |
| 113 } |
| 114 |
| 115 suite('basic', function() { |
| 116 suite('container = host', function() { |
| 117 |
| 118 setup(function() { |
| 119 ripple = fixture('ShadowBasic'); |
| 120 }); |
| 121 |
| 122 test('tap host', function() { |
| 123 assertInteractionCausesRipple(ripple, ripple, true, 'ripple'); |
| 124 }); |
| 125 test('tap #wrapper', function() { |
| 126 assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wr
apper'); |
| 127 }); |
| 128 test('tap #separate', function() { |
| 129 assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#s
eparate') |
| 130 }); |
| 131 }); |
| 132 |
| 133 suite('container = wrapper', function() { |
| 134 |
| 135 setup(function() { |
| 136 ripple = fixture('ShadowBasic'); |
| 137 ripple._rippleContainer = ripple.$.wrapper; |
| 138 }); |
| 139 |
| 140 test('tap host', function() { |
| 141 assertInteractionCausesRipple(ripple, ripple, false, 'ripple'); |
| 142 }); |
| 143 |
| 144 test('tap #wrapper', function() { |
| 145 assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wr
apper'); |
| 146 }); |
| 147 |
| 148 test('tap #separate', function() { |
| 149 assertInteractionCausesRipple(ripple, ripple.$.separate, false, '#
separate') |
| 150 }); |
| 151 }); |
| 152 |
| 153 suite('container = separate', function(done) { |
| 154 |
| 155 setup(function() { |
| 156 ripple = fixture('ShadowBasic'); |
| 157 ripple._rippleContainer = ripple.$.separate; |
| 158 }); |
| 159 |
| 160 test('tap host', function() { |
| 161 assertInteractionCausesRipple(ripple, ripple, false, 'ripple'); |
| 162 }); |
| 163 |
| 164 test('tap wrapper', function() { |
| 165 assertInteractionCausesRipple(ripple, ripple.$.wrapper, false, '#w
rapper'); |
| 166 }); |
| 167 |
| 168 test('tap separate', function() { |
| 169 assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#s
eparate') |
| 170 }); |
| 171 }); |
| 172 }); |
| 173 |
| 174 suite('distributed text', function() { |
| 175 var textLocation; |
| 176 |
| 177 function getTextLocation(ripple) { |
| 178 // build a Range to get the BCR of a given text node |
| 179 var r = document.createRange(); |
| 180 r.selectNode(Polymer.dom(ripple.$.content).getDistributedNodes()[0])
; |
| 181 return MockInteractions.middleOfNode(r); |
| 182 } |
| 183 |
| 184 suite('container = host', function() { |
| 185 setup(function() { |
| 186 ripple = fixture('ShadowText'); |
| 187 textLocation = getTextLocation(ripple); |
| 188 }); |
| 189 |
| 190 test('tap host', function() { |
| 191 assertInteractionCausesRipple(ripple, ripple, true, 'ripple'); |
| 192 }); |
| 193 |
| 194 test('tap wrapper', function() { |
| 195 assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wr
apper'); |
| 196 }); |
| 197 |
| 198 test('tap separate', function() { |
| 199 assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#s
eparate') |
| 200 }); |
| 201 |
| 202 test('tap text', function() { |
| 203 assertInteractionAtLocationCausesRipple(ripple, ripple.$.wrapper,
textLocation, true, 'text'); |
| 204 }); |
| 205 }); |
| 206 |
| 207 suite('container = wrapper', function() { |
| 208 setup(function() { |
| 209 ripple = fixture('ShadowText'); |
| 210 ripple._rippleContainer = ripple.$.wrapper; |
| 211 textLocation = getTextLocation(ripple); |
| 212 }); |
| 213 |
| 214 test('tap host', function() { |
| 215 assertInteractionCausesRipple(ripple, ripple, false, 'ripple'); |
| 216 }); |
| 217 |
| 218 test('tap wrapper', function() { |
| 219 assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wr
apper'); |
| 220 }); |
| 221 |
| 222 test('tap separate', function() { |
| 223 assertInteractionCausesRipple(ripple, ripple.$.separate, false, '#
separate') |
| 224 }); |
| 225 |
| 226 test('tap text', function() { |
| 227 assertInteractionAtLocationCausesRipple(ripple, ripple.$.wrapper,
textLocation, true, 'text'); |
| 228 }); |
| 229 }); |
| 230 |
| 231 suite('container = separate', function() { |
| 232 setup(function() { |
| 233 ripple = fixture('ShadowText'); |
| 234 ripple._rippleContainer = ripple.$.separate; |
| 235 textLocation = getTextLocation(ripple); |
| 236 }); |
| 237 |
| 238 test('tap host', function() { |
| 239 assertInteractionCausesRipple(ripple, ripple, false, 'ripple'); |
| 240 }); |
| 241 |
| 242 test('tap wrapper', function() { |
| 243 assertInteractionCausesRipple(ripple, ripple.$.wrapper, false, '#w
rapper'); |
| 244 }); |
| 245 |
| 246 test('tap separate', function() { |
| 247 assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#s
eparate') |
| 248 }); |
| 249 |
| 250 test('tap text', function() { |
| 251 assertInteractionAtLocationCausesRipple(ripple, ripple.$.wrapper,
textLocation, false, 'text'); |
| 252 }); |
| 253 }); |
| 254 }); |
| 255 |
| 256 suite('distributed element', function() { |
| 257 var source; |
| 258 |
| 259 suite('container = host', function() { |
| 260 setup(function() { |
| 261 ripple = fixture('ShadowElement'); |
| 262 source = Polymer.dom(ripple).querySelector('#source'); |
| 263 }); |
| 264 |
| 265 test('tap host', function() { |
| 266 assertInteractionCausesRipple(ripple, ripple, true, 'ripple'); |
| 267 }); |
| 268 |
| 269 test('tap wrapper', function() { |
| 270 assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wr
apper'); |
| 271 }); |
| 272 |
| 273 test('tap separate', function() { |
| 274 assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#s
eparate') |
| 275 }); |
| 276 |
| 277 test('tap source', function() { |
| 278 assertInteractionCausesRipple(ripple, source, true, '#source'); |
| 279 }); |
| 280 }); |
| 281 |
| 282 suite('container = wrapper', function() { |
| 283 setup(function() { |
| 284 ripple = fixture('ShadowElement'); |
| 285 ripple._rippleContainer = ripple.$.wrapper; |
| 286 source = Polymer.dom(ripple).querySelector('#source'); |
| 287 }); |
| 288 |
| 289 test('tap host', function() { |
| 290 assertInteractionCausesRipple(ripple, ripple, false, 'ripple'); |
| 291 }); |
| 292 |
| 293 test('tap wrapper', function() { |
| 294 assertInteractionCausesRipple(ripple, ripple.$.wrapper, true, '#wr
apper'); |
| 295 }); |
| 296 |
| 297 test('tap separate', function() { |
| 298 assertInteractionCausesRipple(ripple, ripple.$.separate, false, '#
separate') |
| 299 }); |
| 300 |
| 301 test('tap source', function() { |
| 302 assertInteractionCausesRipple(ripple, source, true, '#source'); |
| 303 }); |
| 304 }); |
| 305 |
| 306 suite('container = separate', function() { |
| 307 setup(function() { |
| 308 ripple = fixture('ShadowElement'); |
| 309 ripple._rippleContainer = ripple.$.separate; |
| 310 source = Polymer.dom(ripple).querySelector('#source'); |
| 311 }); |
| 312 |
| 313 test('tap host', function() { |
| 314 assertInteractionCausesRipple(ripple, ripple, false, 'ripple'); |
| 315 }); |
| 316 |
| 317 test('tap wrapper', function() { |
| 318 assertInteractionCausesRipple(ripple, ripple.$.wrapper, false, '#w
rapper'); |
| 319 }); |
| 320 |
| 321 test('tap separate', function() { |
| 322 assertInteractionCausesRipple(ripple, ripple.$.separate, true, '#s
eparate') |
| 323 }); |
| 324 |
| 325 test('tap source', function() { |
| 326 assertInteractionCausesRipple(ripple, source, false, '#source'); |
| 327 }); |
| 328 }); |
| 329 }); |
| 330 }); |
| 331 }); |
| 332 </script> |
| 333 |
| 334 </body> |
| 335 </html> |
OLD | NEW |