| 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>paper-dialog-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 |
| 25 <link rel="import" href="../../test-fixture/test-fixture.html"> |
| 26 <link rel="import" href="test-dialog.html"> |
| 27 |
| 28 </head> |
| 29 <body> |
| 30 |
| 31 <test-fixture id="basic"> |
| 32 <template> |
| 33 <test-dialog> |
| 34 <p>Dialog</p> |
| 35 <div class="buttons"> |
| 36 <button extra>extra</button> |
| 37 <button dialog-dismiss>dismiss</button> |
| 38 <button dialog-confirm>confirm</button> |
| 39 </div> |
| 40 </test-dialog> |
| 41 </template> |
| 42 </test-fixture> |
| 43 |
| 44 <test-fixture id="modal"> |
| 45 <template> |
| 46 <test-dialog modal> |
| 47 <p>Dialog</p> |
| 48 <div class="buttons"> |
| 49 <button dialog-dismiss>dismiss</button> |
| 50 <button dialog-confirm autofocus>confirm</button> |
| 51 </div> |
| 52 </test-dialog> |
| 53 </template> |
| 54 </test-fixture> |
| 55 |
| 56 <test-fixture id="backdrop"> |
| 57 <template> |
| 58 <test-dialog with-backdrop> |
| 59 <p>Dialog</p> |
| 60 <div class="buttons"> |
| 61 <button dialog-dismiss>dismiss</button> |
| 62 <button dialog-confirm autofocus>confirm</button> |
| 63 </div> |
| 64 </test-dialog> |
| 65 </template> |
| 66 </test-fixture> |
| 67 |
| 68 <test-fixture id="header"> |
| 69 <template> |
| 70 <test-dialog> |
| 71 <h2>Dialog</h2> |
| 72 <div class="buttons"> |
| 73 <button dialog-dismiss>dismiss</button> |
| 74 <button dialog-confirm autofocus>confirm</button> |
| 75 </div> |
| 76 </test-dialog> |
| 77 </template> |
| 78 </test-fixture> |
| 79 |
| 80 <test-fixture id="header-with-id"> |
| 81 <template> |
| 82 <test-dialog> |
| 83 <h2 id="header">Dialog</h2> |
| 84 <div class="buttons"> |
| 85 <button dialog-dismiss>dismiss</button> |
| 86 <button dialog-confirm autofocus>confirm</button> |
| 87 </div> |
| 88 </test-dialog> |
| 89 </template> |
| 90 </test-fixture> |
| 91 |
| 92 <script> |
| 93 |
| 94 function runAfterOpen(dialog, cb) { |
| 95 dialog.addEventListener('iron-overlay-opened', function() { |
| 96 cb(); |
| 97 }); |
| 98 dialog.open(); |
| 99 } |
| 100 |
| 101 suite('basic', function() { |
| 102 |
| 103 test('clicking dialog does not cancel the dialog', function(done) { |
| 104 var dialog = fixture('basic'); |
| 105 runAfterOpen(dialog, function() { |
| 106 dialog.addEventListener('iron-overlay-closed', function() { |
| 107 assert('dialog should not close'); |
| 108 }); |
| 109 dialog.click(); |
| 110 setTimeout(function() { |
| 111 done(); |
| 112 }, 100); |
| 113 }); |
| 114 }); |
| 115 |
| 116 test('clicking dialog-dismiss button closes the dialog without confirmat
ion', function(done) { |
| 117 var dialog = fixture('basic'); |
| 118 runAfterOpen(dialog, function() { |
| 119 dialog.addEventListener('iron-overlay-closed', function(event) { |
| 120 assert.isFalse(event.detail.canceled, 'dialog is not canceled'); |
| 121 assert.isFalse(event.detail.confirmed, 'dialog is not confirmed'); |
| 122 done(); |
| 123 }); |
| 124 Polymer.dom(dialog).querySelector('[dialog-dismiss]').click(); |
| 125 }); |
| 126 }); |
| 127 |
| 128 test('clicking dialog-confirm button closes the dialog with confirmation
', function(done) { |
| 129 var dialog = fixture('basic'); |
| 130 runAfterOpen(dialog, function() { |
| 131 dialog.addEventListener('iron-overlay-closed', function(event) { |
| 132 assert.isFalse(event.detail.canceled, 'dialog is not canceled'); |
| 133 assert.isTrue(event.detail.confirmed, 'dialog is confirmed'); |
| 134 done(); |
| 135 }); |
| 136 Polymer.dom(dialog).querySelector('[dialog-confirm]').click(); |
| 137 }); |
| 138 }); |
| 139 |
| 140 test('with-backdrop works', function() { |
| 141 var dialog = fixture('backdrop'); |
| 142 runAfterOpen(dialog, function() { |
| 143 assert.isTrue(dialog.backdropElement.opened, 'backdrop is open'); |
| 144 }); |
| 145 }); |
| 146 |
| 147 test('modal dialog has backdrop', function() { |
| 148 var dialog = fixture('modal'); |
| 149 assert.isTrue(dialog.withBackdrop, 'withBackdrop is true'); |
| 150 }); |
| 151 |
| 152 test('modal dialog has no-cancel-on-outside-click', function() { |
| 153 var dialog = fixture('modal'); |
| 154 assert.isTrue(dialog.noCancelOnOutsideClick, 'noCancelOnOutsideClick i
s true'); |
| 155 }); |
| 156 |
| 157 test('clicking outside a modal dialog does not move focus from dialog',
function(done) { |
| 158 var dialog = fixture('modal'); |
| 159 runAfterOpen(dialog, function() { |
| 160 dialog.backdropElement.click(); |
| 161 setTimeout(function() { |
| 162 assert.equal(document.activeElement, Polymer.dom(dialog).querySele
ctor('[autofocus]'), 'document.activeElement is the autofocused button'); |
| 163 done(); |
| 164 }, 10); |
| 165 }); |
| 166 }); |
| 167 |
| 168 test('removing a child element on click does not cause an exception', fu
nction(done) { |
| 169 var dialog = fixture('basic'); |
| 170 runAfterOpen(dialog, function() { |
| 171 var button = Polymer.dom(dialog).querySelector('[extra]'); |
| 172 button.addEventListener('click', function(event) { |
| 173 Polymer.dom(event.target.parentNode).removeChild(event.target); |
| 174 // should not throw exception here |
| 175 done(); |
| 176 }); |
| 177 button.click(); |
| 178 }); |
| 179 }); |
| 180 |
| 181 }); |
| 182 |
| 183 suite('a11y', function() { |
| 184 |
| 185 test('dialog has role="dialog"', function() { |
| 186 var dialog = fixture('basic'); |
| 187 assert.equal(dialog.getAttribute('role'), 'dialog', 'has role="dialog"
'); |
| 188 }); |
| 189 |
| 190 test('dialog has aria-modal=false', function() { |
| 191 var dialog = fixture('basic'); |
| 192 assert.equal(dialog.getAttribute('aria-modal'), 'false', 'has aria-mod
al="false"'); |
| 193 }); |
| 194 |
| 195 test('modal dialog has aria-modal=true', function() { |
| 196 var dialog = fixture('modal'); |
| 197 assert.equal(dialog.getAttribute('aria-modal'), 'true', 'has aria-moda
l="true"'); |
| 198 }); |
| 199 |
| 200 test('dialog with header has aria-labelledby', function() { |
| 201 var dialog = fixture('header'); |
| 202 var header = Polymer.dom(dialog).querySelector('h2'); |
| 203 assert.ok(header.getAttribute('id'), 'header has auto-generated id'); |
| 204 assert.equal(dialog.getAttribute('aria-labelledby'), header.getAttribu
te('id'), 'aria-labelledby is set to header id'); |
| 205 }); |
| 206 |
| 207 test('dialog with lazily created header has aria-labelledby', function(d
one) { |
| 208 var dialog = fixture('basic'); |
| 209 var header = document.createElement('h2'); |
| 210 Polymer.dom(dialog).appendChild(header); |
| 211 Polymer.dom.flush(); |
| 212 setTimeout(function() { |
| 213 assert.ok(header.getAttribute('id'), 'header has auto-generated id')
; |
| 214 assert.equal(dialog.getAttribute('aria-labelledby'), header.getAttri
bute('id'), 'aria-labelledby is set to header id'); |
| 215 done(); |
| 216 }, 10); |
| 217 }); |
| 218 |
| 219 test('dialog with header with id preserves id and has aria-labelledby',
function() { |
| 220 var dialog = fixture('header-with-id'); |
| 221 var header = Polymer.dom(dialog).querySelector('h2'); |
| 222 assert.equal(header.getAttribute('id'), 'header', 'header has preset i
d'); |
| 223 assert.equal(dialog.getAttribute('aria-labelledby'), 'header', 'aria-l
abelledby is set to header id'); |
| 224 }); |
| 225 |
| 226 }); |
| 227 |
| 228 </script> |
| 229 |
| 230 </body> |
| 231 </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