1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.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-checkbox-size').trim(), '25px');
216          assert.equal(checkbox.getComputedStyleValue('--calculated-paper-checkbox-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-paper-checkbox-size'), 10);
222            var inkSize = parseFloat(checkbox.getComputedStyleValue('--calculated-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-paper-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-paper-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>
276