diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-checkbox/test/basic.html')
-rw-r--r-- | catapult/third_party/polymer/components/paper-checkbox/test/basic.html | 275 |
1 files changed, 275 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-checkbox/test/basic.html b/catapult/third_party/polymer/components/paper-checkbox/test/basic.html new file mode 100644 index 00000000..8626a07b --- /dev/null +++ b/catapult/third_party/polymer/components/paper-checkbox/test/basic.html @@ -0,0 +1,275 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> +<html> +<head> + <meta charset="UTF-8"> + <title>paper-checkbox basic tests</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <script src="../../web-component-tester/browser.js"></script> + <script src="../../iron-test-helpers/mock-interactions.js"></script> + + <link rel="import" href="../paper-checkbox.html"> + + <style is="custom-style"> + paper-checkbox.no-label-spacing { + --paper-checkbox-label-spacing: 0; + } + + paper-checkbox.tiny { + --paper-checkbox-size: 5px; + } + + paper-checkbox.medium { + --paper-checkbox-size: 37px; + } + + paper-checkbox.giant { + --paper-checkbox-size: 50px; + } + + paper-checkbox.enormous { + --paper-checkbox-size: 71px; + } + + paper-checkbox.custom-ink-size { + --paper-checkbox-size: 25px; + --paper-checkbox-ink-size: 30px; + } + + paper-checkbox.large-line-height { + line-height: 3; + } + + paper-checkbox.small-line-height { + line-height: 0.25; + } + </style> +</head> +<body> + + <test-fixture id="NoLabel"> + <template> + <paper-checkbox id="check1"></paper-checkbox> + </template> + </test-fixture> + + <test-fixture id="WithLabel"> + <template> + <paper-checkbox id="check2">Batman</paper-checkbox> + </template> + </test-fixture> + + <test-fixture id="AriaLabel"> + <template> + <paper-checkbox id="check3" aria-label="Batman">Robin</paper-checkbox> + </template> + </test-fixture> + + <test-fixture id="WithDifferentSizes"> + <template> + <paper-checkbox class="no-label-spacing"></paper-checkbox> + <paper-checkbox class="no-label-spacing giant"></paper-checkbox> + <paper-checkbox class="no-label-spacing tiny"></paper-checkbox> + </template> + </test-fixture> + + <test-fixture id="WithDifferentSizes2"> + <template> + <paper-checkbox class="tiny"></paper-checkbox> + <paper-checkbox></paper-checkbox> + <paper-checkbox class="medium"></paper-checkbox> + <paper-checkbox class="giant"></paper-checkbox> + <paper-checkbox class="enormous"></paper-checkbox> + </template> + </test-fixture> + + <test-fixture id="CustomInkSize"> + <template> + <paper-checkbox class="custom-ink-size"></paper-checkbox> + </template> + </test-fixture> + + <test-fixture id="WithLineHeight"> + <template> + <paper-checkbox class="large-line-height">Checkbox</paper-checkbox> + <paper-checkbox class="small-line-height">Checkbox</paper-checkbox> + </template> + </test-fixture> + + <script> + suite('defaults', function() { + var c1; + + setup(function() { + c1 = fixture('NoLabel'); + }); + + test('check checkbox via click', function(done) { + c1.addEventListener('click', function() { + assert.isTrue(c1.getAttribute('aria-checked') == 'true'); + assert.isTrue(c1.checked); + done(); + }); + MockInteractions.tap(c1); + }); + + test('toggle checkbox via click', function(done) { + c1.checked = true; + c1.addEventListener('click', function() { + assert.isFalse(c1.getAttribute('aria-checked') != 'false'); + assert.isFalse(c1.checked); + done(); + }); + MockInteractions.tap(c1); + }); + + test('disabled checkbox cannot be clicked', function(done) { + c1.disabled = true; + c1.checked = true; + MockInteractions.tap(c1); + setTimeout(function() { + assert.isTrue(c1.getAttribute('aria-checked') == 'true'); + assert.isTrue(c1.checked); + done(); + }, 1); + }); + + test('checkbox can be validated', function() { + c1.required = true; + assert.isFalse(c1.validate()); + + c1.checked = true; + assert.isTrue(c1.validate()); + }); + + test('disabled checkbox is always valid', function() { + c1.disabled = true; + c1.required = true; + assert.isTrue(c1.validate()); + + c1.checked = true; + assert.isTrue(c1.validate()); + }); + + test('checkbox can check sizes', function() { + var c2 = fixture('WithDifferentSizes'); + var normal = c2[0].getBoundingClientRect(); + var giant = c2[1].getBoundingClientRect(); + var tiny = c2[2].getBoundingClientRect(); + + assert.isTrue(5 === tiny.height); + assert.isTrue(tiny.height < normal.height); + assert.isTrue(normal.height < giant.height); + assert.isTrue(giant.height <= 50); + + assert.isTrue(5 === tiny.width); + assert.isTrue(tiny.width < normal.width); + assert.isTrue(normal.width < giant.width); + assert.isTrue(giant.width === 50); + }); + + suite('checkbox line-height', function() { + var large; + var small; + + setup(function() { + var checkboxes = fixture('WithLineHeight'); + large = checkboxes[0]; + small = checkboxes[1]; + }); + + test('checkboxes with >1 line-height have an equal height', function() { + var largeRect = large.getBoundingClientRect(); + var largeStyle = getComputedStyle(large); + + assert.isTrue(largeRect.height === 3 * parseFloat(largeStyle.fontSize)); + }); + + test('checkbox with <1 line-height are at least 1em tall', function() { + var smallRect = small.getBoundingClientRect(); + var smallStyle = getComputedStyle(small); + + assert.isTrue(smallRect.height >= 1 * parseFloat(smallStyle.fontSize)); + }); + }); + + suite('ink size', function() { + var checkboxes; + + setup(function() { + checkboxes = fixture('WithDifferentSizes2'); + }); + + test('`--paper-checkbox-ink-size` sets the ink size', function() { + var checkbox = fixture('CustomInkSize'); + assert.equal(checkbox.getComputedStyleValue('--calculated-paper-checkbox-size').trim(), '25px'); + assert.equal(checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size').trim(), '30px'); + }); + + test('ink sizes are near (8/3 * checkbox size) by default', function() { + checkboxes.forEach(function(checkbox) { + var size = parseFloat(checkbox.getComputedStyleValue('--calculated-paper-checkbox-size'), 10); + var inkSize = parseFloat(checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size'), 10); + assert.approximately(inkSize / size, 8 / 3, 0.1); + }); + }); + + test('ink sizes are integers', function() { + checkboxes.forEach(function(checkbox) { + var unparsedInkSize = checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size'); + var floatInkSize = parseFloat(unparsedInkSize, 10); + var intInkSize = parseInt(unparsedInkSize, 10); + assert.equal(floatInkSize, intInkSize); + }); + }); + + test('ink size parity matches checkbox size parity (centers are aligned)', function() { + checkboxes.forEach(function(checkbox) { + var size = parseInt(checkbox.getComputedStyleValue('--calculated-paper-checkbox-size'), 10); + var inkSize = parseInt(checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size'), 10); + assert.equal(size % 2, inkSize % 2); + }); + }); + }); + }); + + suite('a11y', function() { + var c1; + var c2; + + setup(function() { + c1 = fixture('NoLabel'); + c2 = fixture('WithLabel'); + }); + + test('has aria role "checkbox"', function() { + assert.isTrue(c1.getAttribute('role') == 'checkbox'); + assert.isTrue(c2.getAttribute('role') == 'checkbox'); + }); + + test('checkbox with no label has no aria label', function() { + assert.isTrue(!c1.getAttribute('aria-label')); + }); + + test('checkbox respects the user set aria-label', function() { + var c = fixture('AriaLabel'); + assert.isTrue(c.getAttribute('aria-label') == "Batman"); + }); + + a11ySuite('NoLabel'); + a11ySuite('WithLabel'); + a11ySuite('AriaLabel'); + }); + </script> +</body> +</html> |