| 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 <meta charset="UTF-8"> |
| 14 <title>paper-checkbox basic tests</title> |
| 15 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0"> |
| 16 |
| 17 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> |
| 18 <script src="../../web-component-tester/browser.js"></script> |
| 19 <script src="../../iron-test-helpers/mock-interactions.js"></script> |
| 20 |
| 21 <link rel="import" href="../paper-checkbox.html"> |
| 22 |
| 23 <style is="custom-style"> |
| 24 paper-checkbox.no-label-spacing { |
| 25 --paper-checkbox-label-spacing: 0; |
| 26 } |
| 27 |
| 28 paper-checkbox.tiny { |
| 29 --paper-checkbox-size: 5px; |
| 30 } |
| 31 |
| 32 paper-checkbox.medium { |
| 33 --paper-checkbox-size: 37px; |
| 34 } |
| 35 |
| 36 paper-checkbox.giant { |
| 37 --paper-checkbox-size: 50px; |
| 38 } |
| 39 |
| 40 paper-checkbox.enormous { |
| 41 --paper-checkbox-size: 71px; |
| 42 } |
| 43 |
| 44 paper-checkbox.custom-ink-size { |
| 45 --paper-checkbox-size: 25px; |
| 46 --paper-checkbox-ink-size: 30px; |
| 47 } |
| 48 |
| 49 paper-checkbox.large-line-height { |
| 50 line-height: 3; |
| 51 } |
| 52 |
| 53 paper-checkbox.small-line-height { |
| 54 line-height: 0.25; |
| 55 } |
| 56 </style> |
| 57 </head> |
| 58 <body> |
| 59 |
| 60 <test-fixture id="NoLabel"> |
| 61 <template> |
| 62 <paper-checkbox id="check1"></paper-checkbox> |
| 63 </template> |
| 64 </test-fixture> |
| 65 |
| 66 <test-fixture id="WithLabel"> |
| 67 <template> |
| 68 <paper-checkbox id="check2">Batman</paper-checkbox> |
| 69 </template> |
| 70 </test-fixture> |
| 71 |
| 72 <test-fixture id="AriaLabel"> |
| 73 <template> |
| 74 <paper-checkbox id="check3" aria-label="Batman">Robin</paper-checkbox> |
| 75 </template> |
| 76 </test-fixture> |
| 77 |
| 78 <test-fixture id="WithDifferentSizes"> |
| 79 <template> |
| 80 <paper-checkbox class="no-label-spacing"></paper-checkbox> |
| 81 <paper-checkbox class="no-label-spacing giant"></paper-checkbox> |
| 82 <paper-checkbox class="no-label-spacing tiny"></paper-checkbox> |
| 83 </template> |
| 84 </test-fixture> |
| 85 |
| 86 <test-fixture id="WithDifferentSizes2"> |
| 87 <template> |
| 88 <paper-checkbox class="tiny"></paper-checkbox> |
| 89 <paper-checkbox></paper-checkbox> |
| 90 <paper-checkbox class="medium"></paper-checkbox> |
| 91 <paper-checkbox class="giant"></paper-checkbox> |
| 92 <paper-checkbox class="enormous"></paper-checkbox> |
| 93 </template> |
| 94 </test-fixture> |
| 95 |
| 96 <test-fixture id="CustomInkSize"> |
| 97 <template> |
| 98 <paper-checkbox class="custom-ink-size"></paper-checkbox> |
| 99 </template> |
| 100 </test-fixture> |
| 101 |
| 102 <test-fixture id="WithLineHeight"> |
| 103 <template> |
| 104 <paper-checkbox class="large-line-height">Checkbox</paper-checkbox> |
| 105 <paper-checkbox class="small-line-height">Checkbox</paper-checkbox> |
| 106 </template> |
| 107 </test-fixture> |
| 108 |
| 109 <script> |
| 110 suite('defaults', function() { |
| 111 var c1; |
| 112 |
| 113 setup(function() { |
| 114 c1 = fixture('NoLabel'); |
| 115 }); |
| 116 |
| 117 test('check checkbox via click', function(done) { |
| 118 c1.addEventListener('click', function() { |
| 119 assert.isTrue(c1.getAttribute('aria-checked') == 'true'); |
| 120 assert.isTrue(c1.checked); |
| 121 done(); |
| 122 }); |
| 123 MockInteractions.tap(c1); |
| 124 }); |
| 125 |
| 126 test('toggle checkbox via click', function(done) { |
| 127 c1.checked = true; |
| 128 c1.addEventListener('click', function() { |
| 129 assert.isFalse(c1.getAttribute('aria-checked') != 'false'); |
| 130 assert.isFalse(c1.checked); |
| 131 done(); |
| 132 }); |
| 133 MockInteractions.tap(c1); |
| 134 }); |
| 135 |
| 136 test('disabled checkbox cannot be clicked', function(done) { |
| 137 c1.disabled = true; |
| 138 c1.checked = true; |
| 139 MockInteractions.tap(c1); |
| 140 setTimeout(function() { |
| 141 assert.isTrue(c1.getAttribute('aria-checked') == 'true'); |
| 142 assert.isTrue(c1.checked); |
| 143 done(); |
| 144 }, 1); |
| 145 }); |
| 146 |
| 147 test('checkbox can be validated', function() { |
| 148 c1.required = true; |
| 149 assert.isFalse(c1.validate()); |
| 150 |
| 151 c1.checked = true; |
| 152 assert.isTrue(c1.validate()); |
| 153 }); |
| 154 |
| 155 test('disabled checkbox is always valid', function() { |
| 156 c1.disabled = true; |
| 157 c1.required = true; |
| 158 assert.isTrue(c1.validate()); |
| 159 |
| 160 c1.checked = true; |
| 161 assert.isTrue(c1.validate()); |
| 162 }); |
| 163 |
| 164 test('checkbox can check sizes', function() { |
| 165 var c2 = fixture('WithDifferentSizes'); |
| 166 var normal = c2[0].getBoundingClientRect(); |
| 167 var giant = c2[1].getBoundingClientRect(); |
| 168 var tiny = c2[2].getBoundingClientRect(); |
| 169 |
| 170 assert.isTrue(5 === tiny.height); |
| 171 assert.isTrue(tiny.height < normal.height); |
| 172 assert.isTrue(normal.height < giant.height); |
| 173 assert.isTrue(giant.height <= 50); |
| 174 |
| 175 assert.isTrue(5 === tiny.width); |
| 176 assert.isTrue(tiny.width < normal.width); |
| 177 assert.isTrue(normal.width < giant.width); |
| 178 assert.isTrue(giant.width === 50); |
| 179 }); |
| 180 |
| 181 suite('checkbox line-height', function() { |
| 182 var large; |
| 183 var small; |
| 184 |
| 185 setup(function() { |
| 186 var checkboxes = fixture('WithLineHeight'); |
| 187 large = checkboxes[0]; |
| 188 small = checkboxes[1]; |
| 189 }); |
| 190 |
| 191 test('checkboxes with >1 line-height have an equal height', function() { |
| 192 var largeRect = large.getBoundingClientRect(); |
| 193 var largeStyle = getComputedStyle(large); |
| 194 |
| 195 assert.isTrue(largeRect.height === 3 * parseFloat(largeStyle.fontSize)
); |
| 196 }); |
| 197 |
| 198 test('checkbox with <1 line-height are at least 1em tall', function() { |
| 199 var smallRect = small.getBoundingClientRect(); |
| 200 var smallStyle = getComputedStyle(small); |
| 201 |
| 202 assert.isTrue(smallRect.height >= 1 * parseFloat(smallStyle.fontSize))
; |
| 203 }); |
| 204 }); |
| 205 |
| 206 suite('ink size', function() { |
| 207 var checkboxes; |
| 208 |
| 209 setup(function() { |
| 210 checkboxes = fixture('WithDifferentSizes2'); |
| 211 }); |
| 212 |
| 213 test('`--paper-checkbox-ink-size` sets the ink size', function() { |
| 214 var checkbox = fixture('CustomInkSize'); |
| 215 assert.equal(checkbox.getComputedStyleValue('--calculated-paper-checkb
ox-size').trim(), '25px'); |
| 216 assert.equal(checkbox.getComputedStyleValue('--calculated-paper-checkb
ox-ink-size').trim(), '30px'); |
| 217 }); |
| 218 |
| 219 test('ink sizes are near (8/3 * checkbox size) by default', function() { |
| 220 checkboxes.forEach(function(checkbox) { |
| 221 var size = parseFloat(checkbox.getComputedStyleValue('--calculated-p
aper-checkbox-size'), 10); |
| 222 var inkSize = parseFloat(checkbox.getComputedStyleValue('--calculate
d-paper-checkbox-ink-size'), 10); |
| 223 assert.approximately(inkSize / size, 8 / 3, 0.1); |
| 224 }); |
| 225 }); |
| 226 |
| 227 test('ink sizes are integers', function() { |
| 228 checkboxes.forEach(function(checkbox) { |
| 229 var unparsedInkSize = checkbox.getComputedStyleValue('--calculated-p
aper-checkbox-ink-size'); |
| 230 var floatInkSize = parseFloat(unparsedInkSize, 10); |
| 231 var intInkSize = parseInt(unparsedInkSize, 10); |
| 232 assert.equal(floatInkSize, intInkSize); |
| 233 }); |
| 234 }); |
| 235 |
| 236 test('ink size parity matches checkbox size parity (centers are aligned)
', function() { |
| 237 checkboxes.forEach(function(checkbox) { |
| 238 var size = parseInt(checkbox.getComputedStyleValue('--calculated-pap
er-checkbox-size'), 10); |
| 239 var inkSize = parseInt(checkbox.getComputedStyleValue('--calculated-
paper-checkbox-ink-size'), 10); |
| 240 assert.equal(size % 2, inkSize % 2); |
| 241 }); |
| 242 }); |
| 243 }); |
| 244 }); |
| 245 |
| 246 suite('a11y', function() { |
| 247 var c1; |
| 248 var c2; |
| 249 |
| 250 setup(function() { |
| 251 c1 = fixture('NoLabel'); |
| 252 c2 = fixture('WithLabel'); |
| 253 }); |
| 254 |
| 255 test('has aria role "checkbox"', function() { |
| 256 assert.isTrue(c1.getAttribute('role') == 'checkbox'); |
| 257 assert.isTrue(c2.getAttribute('role') == 'checkbox'); |
| 258 }); |
| 259 |
| 260 test('checkbox with no label has no aria label', function() { |
| 261 assert.isTrue(!c1.getAttribute('aria-label')); |
| 262 }); |
| 263 |
| 264 test('checkbox respects the user set aria-label', function() { |
| 265 var c = fixture('AriaLabel'); |
| 266 assert.isTrue(c.getAttribute('aria-label') == "Batman"); |
| 267 }); |
| 268 |
| 269 a11ySuite('NoLabel'); |
| 270 a11ySuite('WithLabel'); |
| 271 a11ySuite('AriaLabel'); |
| 272 }); |
| 273 </script> |
| 274 </body> |
| 275 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2906483004:
[pinpoint] Add iron-form and paper-checkbox to polymer components. (Closed)
