| 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 |
| 15 <title>iron-resizable-behavior tests</title> |
| 16 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0"> |
| 17 |
| 18 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 19 <script src="../../web-component-tester/browser.js"></script> |
| 20 <script src="../../test-fixture/test-fixture-mocha.js"></script> |
| 21 |
| 22 <link rel="import" href="../../test-fixture/test-fixture.html"> |
| 23 <link rel="import" href="../iron-resizable-behavior.html"> |
| 24 <link rel="import" href="test-elements.html"> |
| 25 |
| 26 </head> |
| 27 <body> |
| 28 |
| 29 <!-- |
| 30 |
| 31 Notes on Polyfill compatibility in tests: |
| 32 - Test elements loaded via imports, to ensure load order correctness |
| 33 w.r.t. Polymer.mixin being availbale |
| 34 - Resize notifications and asserts are done asynchronously, since |
| 35 there are timing differences w.r.t. when detached callbacks occur |
| 36 |
| 37 --> |
| 38 |
| 39 <test-fixture id="TestElement"> |
| 40 <template> |
| 41 <test-element></test-element> |
| 42 </template> |
| 43 </test-fixture> |
| 44 |
| 45 |
| 46 <script> |
| 47 |
| 48 suite('iron-resizable-behavior', function() { |
| 49 function ListenForResize(el, expectsResize) { |
| 50 var listener = function(event) { |
| 51 var target = event.path ? event.path[0] : event.target; |
| 52 pendingNotifications--; |
| 53 }; |
| 54 |
| 55 if (expectsResize !== false) { |
| 56 pendingNotifications++; |
| 57 } |
| 58 |
| 59 el.addEventListener('iron-resize', listener); |
| 60 |
| 61 return { |
| 62 el: el, |
| 63 remove: function() { |
| 64 el.removeEventListener('iron-resize', listener); |
| 65 } |
| 66 }; |
| 67 } |
| 68 |
| 69 function RemoveListeners(listeners) { |
| 70 listeners.forEach(function(listener) { |
| 71 listener.remove(); |
| 72 }); |
| 73 } |
| 74 |
| 75 var pendingNotifications; |
| 76 var testEl; |
| 77 |
| 78 setup(function() { |
| 79 pendingNotifications = 0; |
| 80 testEl = fixture('TestElement'); |
| 81 }); |
| 82 |
| 83 suite('x-resizer-parent', function() { |
| 84 |
| 85 test('notify resizables from window', function(done) { |
| 86 var listeners = [ |
| 87 ListenForResize(testEl.$.parent), |
| 88 ListenForResize(testEl.$.child1a), |
| 89 ListenForResize(testEl.$.child1b), |
| 90 ListenForResize(testEl.$.shadow1c.$.resizable), |
| 91 ListenForResize(testEl.$.shadow1d.$.resizable) |
| 92 ]; |
| 93 |
| 94 setTimeout(function() { |
| 95 try { |
| 96 window.dispatchEvent(new CustomEvent('resize', { bubbles: false })); |
| 97 |
| 98 expect(pendingNotifications).to.be.eql(0); |
| 99 |
| 100 RemoveListeners(listeners); |
| 101 |
| 102 done(); |
| 103 } catch (e) { |
| 104 done(e); |
| 105 } |
| 106 }, 0); |
| 107 }); |
| 108 |
| 109 test('notify resizables from parent', function(done) { |
| 110 var listeners = [ |
| 111 ListenForResize(testEl.$.parent), |
| 112 ListenForResize(testEl.$.child1a), |
| 113 ListenForResize(testEl.$.child1b), |
| 114 ListenForResize(testEl.$.shadow1c.$.resizable), |
| 115 ListenForResize(testEl.$.shadow1d.$.resizable) |
| 116 ]; |
| 117 |
| 118 setTimeout(function() { |
| 119 try { |
| 120 testEl.$.parent.notifyResize(); |
| 121 expect(pendingNotifications).to.be.eql(0); |
| 122 RemoveListeners(listeners); |
| 123 done(); |
| 124 } catch (e) { |
| 125 done(e); |
| 126 } |
| 127 }, 0); |
| 128 }); |
| 129 |
| 130 test('detach resizables then notify parent', function(done) { |
| 131 var listeners = [ |
| 132 ListenForResize(testEl.$.parent), |
| 133 ListenForResize(testEl.$.child1a, false), |
| 134 ListenForResize(testEl.$.child1b), |
| 135 ListenForResize(testEl.$.shadow1c.$.resizable, false), |
| 136 ListenForResize(testEl.$.shadow1d.$.resizable) |
| 137 ]; |
| 138 |
| 139 var el = Polymer.dom(testEl.root).querySelector('#child1a'); |
| 140 |
| 141 el.parentNode.removeChild(el); |
| 142 el = Polymer.dom(testEl.root).querySelector('#shadow1c'); |
| 143 el.parentNode.removeChild(el); |
| 144 |
| 145 setTimeout(function() { |
| 146 try { |
| 147 testEl.$.parent.notifyResize(); |
| 148 expect(pendingNotifications).to.be.eql(0); |
| 149 RemoveListeners(listeners); |
| 150 done(); |
| 151 } catch (e) { |
| 152 done(e); |
| 153 } |
| 154 }, 0); |
| 155 }); |
| 156 |
| 157 test('detach parent then notify window', function(done) { |
| 158 var listeners = [ |
| 159 ListenForResize(testEl.$.parent, false), |
| 160 ListenForResize(testEl.$.child1a, false), |
| 161 ListenForResize(testEl.$.child1b, false), |
| 162 ListenForResize(testEl.$.shadow1c.$.resizable, false), |
| 163 ListenForResize(testEl.$.shadow1d.$.resizable, false) |
| 164 ]; |
| 165 |
| 166 var el = Polymer.dom(testEl.root).querySelector('#parent'); |
| 167 |
| 168 el.parentNode.removeChild(el); |
| 169 |
| 170 setTimeout(function() { |
| 171 try { |
| 172 window.dispatchEvent(new CustomEvent('resize', { bubbles: false })); |
| 173 expect(pendingNotifications).to.be.eql(0); |
| 174 RemoveListeners(listeners); |
| 175 done(); |
| 176 } catch (e) { |
| 177 done(e); |
| 178 } |
| 179 }, 0); |
| 180 }); |
| 181 |
| 182 }); |
| 183 |
| 184 suite('x-resizer-parent-filtered', function() { |
| 185 |
| 186 test('notify resizables from window', function(done) { |
| 187 var listeners = [ |
| 188 ListenForResize(testEl.$.parentFiltered), |
| 189 ListenForResize(testEl.$.child2a), |
| 190 ListenForResize(testEl.$.child2b, false), |
| 191 ListenForResize(testEl.$.shadow2c.$.resizable, false), |
| 192 ListenForResize(testEl.$.shadow2d.$.resizable, false) |
| 193 ]; |
| 194 |
| 195 testEl.$.parentFiltered.active = testEl.$.child2a; |
| 196 |
| 197 setTimeout(function() { |
| 198 try { |
| 199 window.dispatchEvent(new CustomEvent('resize', { bubbles: false })); |
| 200 expect(pendingNotifications).to.be.eql(0); |
| 201 RemoveListeners(listeners); |
| 202 done(); |
| 203 } catch (e) { |
| 204 done(e); |
| 205 } |
| 206 }, 0); |
| 207 }); |
| 208 |
| 209 test('notify resizables from parent', function(done) { |
| 210 var listeners = [ |
| 211 ListenForResize(testEl.$.parentFiltered), |
| 212 ListenForResize(testEl.$.child2a), |
| 213 ListenForResize(testEl.$.child2b, false), |
| 214 ListenForResize(testEl.$.shadow2c.$.resizable, false), |
| 215 ListenForResize(testEl.$.shadow2d.$.resizable, false) |
| 216 ]; |
| 217 |
| 218 testEl.$.parentFiltered.active = testEl.$.child2a; |
| 219 |
| 220 setTimeout(function() { |
| 221 try { |
| 222 testEl.$.parentFiltered.notifyResize(); |
| 223 expect(pendingNotifications).to.be.eql(0); |
| 224 RemoveListeners(listeners); |
| 225 done(); |
| 226 } catch (e) { |
| 227 done(e); |
| 228 } |
| 229 }, 0); |
| 230 }); |
| 231 |
| 232 test('detach resizables then notify parent', function(done) { |
| 233 var listeners = [ |
| 234 ListenForResize(testEl.$.parentFiltered), |
| 235 ListenForResize(testEl.$.child2a, false), |
| 236 ListenForResize(testEl.$.child2b, false), |
| 237 ListenForResize(testEl.$.shadow2c.$.resizable, false), |
| 238 ListenForResize(testEl.$.shadow2d.$.resizable) |
| 239 ]; |
| 240 |
| 241 var el = Polymer.dom(testEl.root).querySelector('#child2a'); |
| 242 el.parentNode.removeChild(el); |
| 243 el = Polymer.dom(testEl.root).querySelector('#shadow2c'); |
| 244 el.parentNode.removeChild(el); |
| 245 |
| 246 testEl.$.parentFiltered.active = testEl.$.shadow2d.$.resizable; |
| 247 |
| 248 setTimeout(function() { |
| 249 try { |
| 250 testEl.$.parentFiltered.notifyResize(); |
| 251 expect(pendingNotifications).to.be.eql(0); |
| 252 RemoveListeners(listeners); |
| 253 done(); |
| 254 } catch (e) { |
| 255 done(e); |
| 256 } |
| 257 }, 0); |
| 258 }); |
| 259 }); |
| 260 }); |
| 261 </script> |
| 262 </body> |
| 263 </html> |
| OLD | NEW |