| 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 <html> |
| 12 <head> |
| 13 |
| 14 <title>iron-overlay-behavior tests</title> |
| 15 |
| 16 <meta charset="utf-8"> |
| 17 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| 18 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initia
l-scale=1, user-scalable=yes"> |
| 19 |
| 20 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 21 |
| 22 <script src="../../web-component-tester/browser.js"></script> |
| 23 <script src="../../test-fixture/test-fixture-mocha.js"></script> |
| 24 <script src="../../iron-test-helpers/test-helpers.js"></script> |
| 25 |
| 26 <link rel="import" href="../../test-fixture/test-fixture.html"> |
| 27 <link rel="import" href="test-overlay.html"> |
| 28 |
| 29 </head> |
| 30 <body> |
| 31 |
| 32 <test-fixture id="basic"> |
| 33 <template> |
| 34 <test-overlay> |
| 35 Basic Overlay |
| 36 </test-overlay> |
| 37 </template> |
| 38 </test-fixture> |
| 39 |
| 40 <test-fixture id="opened"> |
| 41 <template> |
| 42 <test-overlay opened> |
| 43 Basic Overlay |
| 44 </test-overlay> |
| 45 </template> |
| 46 </test-fixture> |
| 47 |
| 48 <test-fixture id="autofocus"> |
| 49 <template> |
| 50 <test-overlay> |
| 51 Autofocus |
| 52 <button autofocus>button</button> |
| 53 </test-overlay> |
| 54 </template> |
| 55 </test-fixture> |
| 56 |
| 57 <test-fixture id="multiple"> |
| 58 <template> |
| 59 <test-overlay class="overlay-1"> |
| 60 Overlay 1 |
| 61 </test-overlay> |
| 62 <test-overlay class="overlay-2"> |
| 63 Overlay 2 |
| 64 </test-overlay> |
| 65 <test-overlay class="overlay-3"> |
| 66 Overlay 3 |
| 67 </test-overlay> |
| 68 </template> |
| 69 </test-fixture> |
| 70 |
| 71 <test-fixture id="backdrop-multiple"> |
| 72 <template> |
| 73 <test-overlay with-backdrop class="overlay-1"> |
| 74 Overlay 1 with backdrop |
| 75 </test-overlay> |
| 76 <test-overlay with-backdrop class="overlay-2"> |
| 77 Overlay 2 with backdrop |
| 78 </test-overlay> |
| 79 <test-overlay with-backdrop class="overlay-3"> |
| 80 Overlay 3 with backdrop |
| 81 </test-overlay> |
| 82 </template> |
| 83 </test-fixture> |
| 84 |
| 85 <script> |
| 86 |
| 87 function runAfterOpen(overlay, cb) { |
| 88 overlay.addEventListener('iron-overlay-opened', function() { |
| 89 cb(); |
| 90 }); |
| 91 overlay.open(); |
| 92 } |
| 93 |
| 94 suite('basic overlay tests', function() { |
| 95 var overlay; |
| 96 |
| 97 setup(function() { |
| 98 overlay = fixture('basic'); |
| 99 }); |
| 100 |
| 101 test('overlay starts hidden', function() { |
| 102 assert.isFalse(overlay.opened, 'overlay starts closed'); |
| 103 assert.equal(getComputedStyle(overlay).display, 'none', 'overlay start
s hidden'); |
| 104 }); |
| 105 |
| 106 test('overlay open by default', function() { |
| 107 overlay = fixture('opened'); |
| 108 runAfterOpen(overlay, function() { |
| 109 assert.isTrue(overlay.opened, 'overlay starts opened'); |
| 110 assert.notEqual(getComputedStyle(overlay).display, 'none', 'overlay
starts showing'); |
| 111 }); |
| 112 }); |
| 113 |
| 114 test('overlay open/close events', function(done) { |
| 115 var nevents = 0; |
| 116 |
| 117 overlay.addEventListener('iron-overlay-opened', function() { |
| 118 nevents += 1; |
| 119 overlay.opened = false; |
| 120 }); |
| 121 |
| 122 overlay.addEventListener('iron-overlay-closed', function() { |
| 123 nevents += 1; |
| 124 assert.equal(nevents, 2, 'opened and closed events fired'); |
| 125 done(); |
| 126 }); |
| 127 |
| 128 overlay.opened = true; |
| 129 }); |
| 130 |
| 131 test('close an overlay quickly after open', function(done) { |
| 132 // first, open the overlay |
| 133 overlay.open(); |
| 134 overlay.async(function() { |
| 135 // during the opening transition, close the overlay |
| 136 this.close(); |
| 137 // wait for any exceptions to be thrown until the transition is done |
| 138 this.async(function() { |
| 139 done(); |
| 140 }, 300); |
| 141 }); |
| 142 }); |
| 143 |
| 144 test('clicking an overlay does not close it', function(done) { |
| 145 runAfterOpen(overlay, function() { |
| 146 overlay.addEventListener('iron-overlay-closed', function() { |
| 147 assert('iron-overlay-closed should not fire'); |
| 148 }); |
| 149 overlay.fire('click'); |
| 150 setTimeout(function() { |
| 151 done(); |
| 152 }, 10); |
| 153 }); |
| 154 }); |
| 155 |
| 156 test('node with autofocus is focused', function(done) { |
| 157 overlay = fixture('autofocus'); |
| 158 runAfterOpen(overlay, function() { |
| 159 assert.equal(Polymer.dom(overlay).querySelector('[autofocus]'), docu
ment.activeElement, '<button autofocus> is focused'); |
| 160 done(); |
| 161 }); |
| 162 }); |
| 163 |
| 164 test('cancel an overlay by clicking outside', function(done) { |
| 165 runAfterOpen(overlay, function() { |
| 166 overlay.addEventListener('iron-overlay-closed', function(event) { |
| 167 assert.isTrue(event.detail.canceled, 'overlay is canceled'); |
| 168 done(); |
| 169 }); |
| 170 Polymer.Base.fire.call(document, 'click'); |
| 171 }); |
| 172 }); |
| 173 |
| 174 test('cancel an overlay with esc key', function(done) { |
| 175 runAfterOpen(overlay, function() { |
| 176 overlay.addEventListener('iron-overlay-closed', function(event) { |
| 177 assert.isTrue(event.detail.canceled, 'overlay is canceled'); |
| 178 done(); |
| 179 }); |
| 180 fireEvent('keydown', { |
| 181 keyCode: 27 |
| 182 }, document); |
| 183 }); |
| 184 }); |
| 185 |
| 186 test('no-cancel-on-outside-click property', function(done) { |
| 187 overlay.noCancelOnOutsideClick = true; |
| 188 runAfterOpen(overlay, function() { |
| 189 overlay.addEventListener('iron-overlay-closed', function() { |
| 190 assert('iron-overlay-closed should not fire'); |
| 191 }); |
| 192 Polymer.Base.fire.call(document, 'click'); |
| 193 setTimeout(function() { |
| 194 done(); |
| 195 }, 10); |
| 196 }); |
| 197 }); |
| 198 |
| 199 test('no-cancel-on-esc-key property', function(done) { |
| 200 overlay.noCancelOnEscKey = true; |
| 201 runAfterOpen(overlay, function() { |
| 202 overlay.addEventListener('iron-overlay-closed', function() { |
| 203 assert('iron-overlay-cancel should not fire'); |
| 204 }); |
| 205 fireEvent('keydown', { |
| 206 keyCode: 27 |
| 207 }, document); |
| 208 setTimeout(function() { |
| 209 done(); |
| 210 }, 10); |
| 211 }); |
| 212 }); |
| 213 |
| 214 }); |
| 215 |
| 216 suite('multiple overlays', function() { |
| 217 var overlays; |
| 218 |
| 219 setup(function() { |
| 220 overlays = fixture('multiple'); |
| 221 }); |
| 222 |
| 223 test('new overlays appear on top', function(done) { |
| 224 runAfterOpen(overlays[0], function() { |
| 225 runAfterOpen(overlays[1], function() { |
| 226 var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex,
10); |
| 227 var styleZ1 = parseInt(window.getComputedStyle(overlays[1]).zIndex
, 10); |
| 228 assert.isTrue(styleZ1 > styleZ, 'overlays[1] has higher z-index th
an overlays[0]'); |
| 229 done(); |
| 230 }); |
| 231 }); |
| 232 }); |
| 233 }); |
| 234 |
| 235 suite('overlays with backdrop', function() { |
| 236 var overlays; |
| 237 |
| 238 setup(function() { |
| 239 overlays = fixture('backdrop-multiple'); |
| 240 }); |
| 241 |
| 242 test('backdrop appears behind the overlay', function(done) { |
| 243 runAfterOpen(overlays[0], function() { |
| 244 assert.isDefined(overlays[0].backdropElement, 'backdrop is defined')
; |
| 245 assert.isDefined(overlays[0].backdropElement.parentNode, 'backdrop i
s inserted in the DOM'); |
| 246 |
| 247 styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex, 10); |
| 248 backdropStyleZ = parseInt(window.getComputedStyle(overlays[0].backdr
opElement).zIndex, 10); |
| 249 assert.isTrue(styleZ > backdropStyleZ, 'overlay has higher z-index t
han backdrop'); |
| 250 done(); |
| 251 }); |
| 252 }); |
| 253 |
| 254 test('backdrop is removed when the element is removed from DOM', functio
n(done) { |
| 255 runAfterOpen(overlays[0], function() { |
| 256 var backdrop = overlays[0].backdropElement; |
| 257 Polymer.dom(backdrop.parentNode).removeChild(backdrop); |
| 258 Polymer.dom.flush(); |
| 259 assert.isNull(backdrop.parentNode, 'backdrop is removed from DOM'); |
| 260 done(); |
| 261 }); |
| 262 }); |
| 263 |
| 264 test('backdrop is opened when iron-overlay-open-completed fires', functi
on(done) { |
| 265 runAfterOpen(overlays[0], function() { |
| 266 assert.isTrue(overlays[0].backdropElement.opened, 'backdrop is opene
d'); |
| 267 done(); |
| 268 }); |
| 269 }); |
| 270 }); |
| 271 |
| 272 suite('multiple overlays with backdrop', function() { |
| 273 var overlays; |
| 274 |
| 275 setup(function() { |
| 276 overlays = fixture('backdrop-multiple'); |
| 277 }); |
| 278 |
| 279 test('multiple overlays share the same backdrop', function() { |
| 280 assert.isTrue(overlays[0].backdropElement === overlays[1].backdropElem
ent, 'overlays[0] has the same backdrop element as overlays[1]'); |
| 281 }); |
| 282 |
| 283 test('newest overlay appear on top', function(done) { |
| 284 runAfterOpen(overlays[0], function() { |
| 285 runAfterOpen(overlays[1], function() { |
| 286 var styleZ = parseInt(window.getComputedStyle(overlays[0]).zIndex,
10); |
| 287 var style1Z = parseInt(window.getComputedStyle(overlays[1]).zIndex
, 10); |
| 288 var bgStyleZ = parseInt(window.getComputedStyle(overlays[0].backdr
opElement).zIndex, 10); |
| 289 assert.isTrue(style1Z > styleZ, 'overlays[1] has higher z-index th
an overlays[0]'); |
| 290 assert.isTrue(styleZ > bgStyleZ, 'overlays[0] has higher z-index t
han backdrop'); |
| 291 done(); |
| 292 }); |
| 293 }); |
| 294 }); |
| 295 |
| 296 }); |
| 297 |
| 298 suite('a11y', function() { |
| 299 |
| 300 test('overlay has aria-hidden=true when opened', function() { |
| 301 var overlay = fixture('basic'); |
| 302 assert.equal(overlay.getAttribute('aria-hidden'), 'true', 'overlay has
aria-hidden="true"'); |
| 303 overlay.open(); |
| 304 assert.isFalse(overlay.hasAttribute('aria-hidden'), 'overlay does not
have aria-hidden attribute'); |
| 305 overlay.close(); |
| 306 assert.equal(overlay.getAttribute('aria-hidden'), 'true', 'overlay has
aria-hidden="true"'); |
| 307 }); |
| 308 |
| 309 }) |
| 310 |
| 311 </script> |
| 312 |
| 313 </body> |
| 314 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1205703007:
Add polymer 1.0 to npm_modules (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master