From 3a142557020b14cee654770b68122cef8311da4c Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Mon, 8 Aug 2016 11:10:02 -0700
Subject: [PATCH] paper-checkbox-light

---
 demo/paper-checkbox-light.html           | 105 ++++++----
 paper-checkbox-light.html                | 254 +++++++++++++----------
 test/index.html                          |   6 +-
 test/paper-checkbox-light.html           | 208 +++++++++++++++++++
 test/{basic.html => paper-checkbox.html} |   0
 5 files changed, 421 insertions(+), 152 deletions(-)
 create mode 100644 test/paper-checkbox-light.html
 rename test/{basic.html => paper-checkbox.html} (100%)

diff --git a/demo/paper-checkbox-light.html b/demo/paper-checkbox-light.html
index 9017a69..5ab5512 100644
--- a/demo/paper-checkbox-light.html
+++ b/demo/paper-checkbox-light.html
@@ -24,7 +24,7 @@
     <style is="custom-style" include="demo-pages-shared-styles">
       paper-checkbox-light {
         display: block;
-        margin-right: 24px;
+        margin: 12px;
       }
 
       demo-snippet {
@@ -40,75 +40,110 @@
       <h3>Checkboxes can be checked or unchecked, or disabled entirely</h3>
       <demo-snippet class="centered-demo">
         <template>
-          <paper-checkbox-light>Checkbox</paper-checkbox-light>
-          <paper-checkbox-light checked>Checkbox</paper-checkbox-light>
-          <paper-checkbox-light disabled>Disabled</paper-checkbox-light>
+          <paper-checkbox-light></paper-checkbox-light>
+          <paper-checkbox-light checked></paper-checkbox-light>
+          <paper-checkbox-light disabled></paper-checkbox-light>
         </template>
       </demo-snippet>
 
       <h3>Checkboxes can hide the ripple effect using the <i>noink</i> attribute</h3>
       <demo-snippet class="centered-demo">
         <template>
-          <paper-checkbox-light noink>Checkbox</paper-checkbox-light>
+          <paper-checkbox-light noink></paper-checkbox-light>
         </template>
       </demo-snippet>
 
-      <h3>Checkboxes can be styled using custom properties</h3>
+      <h3>
+        Use ARIA attributes (such as <code>aria-label</code>) to provide an
+        accessible description of the checkbox to the user.<br>
+        Checkboxes can be styled using custom properties.
+      </h3>
       <demo-snippet class="centered-demo small-text">
         <template>
           <style is="custom-style">
-            paper-checkbox-light.red {
+            .checkbox-wrapper {
+              display: flex;
+              padding: 8px 16px;
+            }
+
+            .checkbox-wrapper.align-center {
+              align-items: center;
+            }
+
+            .checkbox-wrapper paper-checkbox-light {
+              margin: 8px 16px 8px 0;
+            }
+
+            .checkbox-wrapper .subtitle {
+              display: block;
+              font-size: 0.8em;
+              margin-top: 2px;
+              max-width: 150px;
+            }
+
+            .checkbox-wrapper.red {
+              color: var(--paper-red-500);
+            }
+
+            .checkbox-wrapper.red paper-checkbox-light {
               --paper-checkbox-checked-color: var(--paper-red-500);
               --paper-checkbox-checked-ink-color: var(--paper-red-500);
               --paper-checkbox-unchecked-color: var(--paper-red-900);
               --paper-checkbox-unchecked-ink-color: var(--paper-red-900);
-              --paper-checkbox-label-color: var(--paper-red-500);
               --paper-checkbox-vertical-align: top;
             }
 
-            paper-checkbox-light.green {
-              align-self: center;
+            .checkbox-wrapper.green {
               border: 1px solid var(--paper-green-200);
-              padding: 8px 16px;
+              color: var(--paper-green-500);
+            }
 
+            .checkbox-wrapper.green paper-checkbox-light {
               --paper-checkbox-checked-color: var(--paper-green-500);
               --paper-checkbox-checked-ink-color: var(--paper-green-500);
               --paper-checkbox-unchecked-color: var(--paper-green-900);
               --paper-checkbox-unchecked-ink-color: var(--paper-green-900);
-              --paper-checkbox-label-color: var(--paper-green-500);
-              --paper-checkbox-label-spacing: 0;
-              --paper-checkbox-margin: 8px 16px 8px 0;
               --paper-checkbox-vertical-align: top;
             }
 
-            paper-checkbox-light.blue {
+            .checkbox-wrapper.blue {
+              color: var(--paper-blue-500);
+            }
+
+            .checkbox-wrapper.blue paper-checkbox-light {
               --paper-checkbox-checked-color: var(--paper-blue-500);
               --paper-checkbox-checked-ink-color: var(--paper-blue-500);
               --paper-checkbox-unchecked-color: var(--paper-blue-900);
               --paper-checkbox-unchecked-ink-color: var(--paper-blue-900);
-              --paper-checkbox-label-color: var(--paper-blue-500);
-              --paper-checkbox-label-checked-color: var(--paper-blue-900);
-            }
-
-            paper-checkbox-light .subtitle {
-              display: block;
-              font-size: 0.8em;
-              margin-top: 2px;
-              max-width: 150px;
             }
           </style>
 
-          <paper-checkbox-light class="red">
-            Checkbox
-            <span class="subtitle">With a subtitle</span>
-          </paper-checkbox-light>
-          <paper-checkbox-light checked class="green">
-            Checkbox
-            <span class="subtitle">
-              With a longer subtitle that wraps to another line
-            </span>
-          </paper-checkbox-light>
-          <paper-checkbox-light class="blue">Checkbox</paper-checkbox-light>
+          <div class="checkbox-wrapper align-center red">
+            <paper-checkbox-light aria-label="A red checkbox"></paper-checkbox-light>
+            <div>
+              A red checkbox
+            </div>
+          </div>
+          <div class="checkbox-wrapper green">
+            <paper-checkbox-light checked aria-labelledby="label-green"></paper-checkbox-light>
+            <div>
+              <span id="label-green">A green checkbox</span>
+              <span class="subtitle">
+                with a subtitle that wraps to a few lines because that's what
+                happens when it's so long
+              </span>
+            </div>
+          </div>
+          <div class="checkbox-wrapper align-center blue">
+            <paper-checkbox-light aria-labelledby="label-blue"></paper-checkbox-light>
+            <div>
+              <span id="label-blue">A blue checkbox</span>
+              <span class="subtitle">
+                with a subtitle that's also really long but the checkbox is
+                center aligned
+              </span>
+            </div>
+          </div>
         </template>
       </demo-snippet>
     </div>
diff --git a/paper-checkbox-light.html b/paper-checkbox-light.html
index 3c1fe98..4595197 100644
--- a/paper-checkbox-light.html
+++ b/paper-checkbox-light.html
@@ -10,22 +10,31 @@
 
 <link rel="import" href="../polymer/polymer.html">
 <link rel="import" href="../paper-styles/default-theme.html">
-<link rel="import" href="../paper-behaviors/paper-checked-element-behavior.html">
+<link rel="import" href="../paper-ripple/paper-ripple.html">
 
 <!--
 Material design: [Checkbox](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox)
 
-`paper-checkbox` is a button that can be either checked or unchecked.  User
-can tap the checkbox to check or uncheck it.  Usually you use checkboxes
-to allow user to select multiple options from a set.  If you have a single
+`paper-checkbox-light` is a button that can be either checked or unchecked. The
+user can tap the checkbox to check or uncheck it. Usually you use checkboxes
+to allow user to select multiple options from a set. If you have a single
 ON/OFF option, avoid using a single checkbox and use `paper-toggle-button`
 instead.
 
-Example:
+`paper-checkbox-light` differs from `paper-checkbox` in that it prioritizes
+rendering speed over features and ease of use. This means the majority of the
+behaviors included in `paper-checkbox` are not included in
+`paper-checkbox-light`. For example, `paper-checkbox-light` does not
+support use within `iron-form` (i.e. it does not include
+IronFormElementBehavior) and it does not support validation (i.e. it does not
+include IronValidatableBehavior). More importantly, the checkbox no longer
+supports children, which were previously used as a label. *Use ARIA attributes
+(such as `aria-label`) to provide users an accessible description of the
+checkbox.*
 
-    <paper-checkbox>label</paper-checkbox>
+Example:
 
-    <paper-checkbox checked> label</paper-checkbox>
+    <paper-checkbox-light aria-label="A checkbox."></paper-checkbox-light>
 
 ### Styling
 
@@ -39,16 +48,8 @@
 `--paper-checkbox-checked-color` | Checkbox color when the input is checked | `--primary-color`
 `--paper-checkbox-checked-ink-color` | Selected/focus ripple color when the input is checked | `--primary-color`
 `--paper-checkbox-checkmark-color` | Checkmark color | `white`
-`--paper-checkbox-label-color` | Label color | `--primary-text-color`
-`--paper-checkbox-label-checked-color` | Label color when the input is checked | `--paper-checkbox-label-color`
-`--paper-checkbox-label-spacing` | Spacing between the label and the checkbox | `8px`
-`--paper-checkbox-label` | Mixin applied to the label | `{}`
-`--paper-checkbox-label-checked` | Mixin applied to the label when the input is checked | `{}`
-`--paper-checkbox-error-color` | Checkbox color when invalid | `--error-color`
 `--paper-checkbox-size` | Size of the checkbox | `18px`
 `--paper-checkbox-ink-size` | Size of the ripple | `48px`
-`--paper-checkbox-margin` | Margin around the checkbox container | `initial`
-`--paper-checkbox-vertical-align` | Vertical alignment of the checkbox container | `middle`
 
 This element applies the mixin `--paper-font-common-base` but does not import `paper-styles/typography.html`.
 In order to apply the `Roboto` font to this element, make sure you've imported `paper-styles/typography.html`.
@@ -56,18 +57,20 @@
 @demo demo/index.html
 -->
 
-<dom-module id="paper-checkbox">
+<dom-module id="paper-checkbox-light">
   <template strip-whitespace>
     <style>
       :host {
         display: inline-block;
-        white-space: nowrap;
         cursor: pointer;
         --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
         /* -1px is a sentinel for the default and is replaced in `attached`. */
         --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1px);
-        @apply(--paper-font-common-base);
-        line-height: 0;
+        position: relative;
+        width: var(--calculated-paper-checkbox-size);
+        height: var(--calculated-paper-checkbox-size);
+        min-width: var(--calculated-paper-checkbox-size);
+        background-color: var(--paper-checkbox-unchecked-background-color, transparent);
         -webkit-tap-highlight-color: transparent;
       }
 
@@ -79,22 +82,7 @@
         outline: none;
       }
 
-      .hidden {
-        display: none;
-      }
-
-      #checkboxContainer {
-        display: inline-block;
-        position: relative;
-        width: var(--calculated-paper-checkbox-size);
-        height: var(--calculated-paper-checkbox-size);
-        min-width: var(--calculated-paper-checkbox-size);
-        margin: var(--paper-checkbox-margin, initial);
-        vertical-align: var(--paper-checkbox-vertical-align, middle);
-        background-color: var(--paper-checkbox-unchecked-background-color, transparent);
-      }
-
-      #ink {
+      paper-ripple {
         position: absolute;
 
         /* Center the ripple in the checkbox by negative offsetting it by
@@ -108,12 +96,12 @@
         pointer-events: none;
       }
 
-      :host-context([dir="rtl"]) #ink {
+      :host-context([dir="rtl"]) paper-ripple {
         right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculated-paper-checkbox-size)) / 2);
         left: auto;
       }
 
-      #ink[checked] {
+      :host([checked]) paper-ripple {
         color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
       }
 
@@ -130,7 +118,7 @@
       }
 
       /* checkbox checked animations */
-      #checkbox.checked #checkmark {
+      :host([checked]) #checkbox #checkmark {
         -webkit-animation: checkmark-expand 140ms ease-out forwards;
         animation: checkmark-expand 140ms ease-out forwards;
       }
@@ -153,12 +141,13 @@
         }
       }
 
-      #checkbox.checked {
+      :host([checked]) #checkbox {
         background-color: var(--paper-checkbox-checked-color, var(--primary-color));
         border-color: var(--paper-checkbox-checked-color, var(--primary-color));
       }
 
       #checkmark {
+        display: none;
         position: absolute;
         width: 36%;
         height: 70%;
@@ -173,37 +162,15 @@
         box-sizing: content-box; /* protect against page-level box-sizing */
       }
 
+      :host([checked]) #checkmark {
+        display: block;
+      }
+
       :host-context([dir="rtl"]) #checkmark {
         -webkit-transform-origin: 50% 14%;
         transform-origin: 50% 14%;
       }
 
-      /* label */
-      #checkboxLabel {
-        position: relative;
-        display: inline-block;
-        vertical-align: middle;
-        padding-left: var(--paper-checkbox-label-spacing, 8px);
-        white-space: normal;
-        line-height: normal;
-        color: var(--paper-checkbox-label-color, var(--primary-text-color));
-        @apply(--paper-checkbox-label);
-      }
-
-      :host([checked]) #checkboxLabel {
-        color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-color, var(--primary-text-color)));
-        @apply(--paper-checkbox-label-checked);
-      }
-
-      :host-context([dir="rtl"]) #checkboxLabel {
-        padding-right: var(--paper-checkbox-label-spacing, 8px);
-        padding-left: 0;
-      }
-
-      #checkboxLabel[hidden] {
-        display: none;
-      }
-
       /* disabled state */
 
       :host([disabled]) #checkbox {
@@ -215,59 +182,83 @@
         background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-color));
         opacity: 0.5;
       }
-
-      :host([disabled]) #checkboxLabel  {
-        opacity: 0.65;
-      }
-
-      /* invalid state */
-      #checkbox.invalid:not(.checked) {
-        border-color: var(--paper-checkbox-error-color, var(--error-color));
-      }
     </style>
 
-    <div id="checkboxContainer">
-      <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
-        <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
-      </div>
+    <div id="checkbox">
+      <div id="checkmark"></div>
     </div>
-
-    <div id="checkboxLabel"><content></content></div>
   </template>
 
   <script>
     Polymer({
-      is: 'paper-checkbox',
-
-      behaviors: [
-        Polymer.PaperCheckedElementBehavior
-      ],
+      is: 'paper-checkbox-light',
 
       hostAttributes: {
         role: 'checkbox',
-        'aria-checked': false,
         tabindex: 0
       },
 
+      /**
+       * Focus events occuring less than this value (in milliseconds) after a
+       * 'down' event are considered to be the result of a pointer.
+       */
+      __POINTER_FOCUS_WINDOW: 30,
+
       properties: {
-        /**
-         * Fired when the checked state changes due to user interaction.
-         *
-         * @event change
-         */
-
-        /**
-         * Fired when the checked state changes.
-         *
-         * @event iron-change
-         */
-        ariaActiveAttribute: {
-          type: String,
-          value: 'aria-checked'
-        }
+        checked: {
+          type: Boolean,
+          notify: true,
+          reflectToAttribute: true,
+          observer: '_checkedChanged'
+        },
+
+        disabled: {
+          type: Boolean,
+          reflectToAttribute: true,
+          observer: '_disabledChanged'
+        },
+
+        noink: {
+          type: Boolean,
+          observer: '_noinkChanged'
+        },
+      },
+
+      listeners: {
+        'tap': '_onTap',
+        'keypress': '_onKeypress',
+        'down': '_onDown',
+        'up': '_onUp',
+        'focus': '_onFocus',
+        'blur': '_onBlur'
+      },
+
+      created: function() {
+        this._lastDown = 0;
       },
 
       attached: function() {
+        Polymer.RenderStatus.afterNextRender(this, function() {
+          this.setAttribute('aria-checked', !!this.checked);
+          this.setAttribute('aria-disabled', !!this.disabled);
+        });
+      },
+
+      _checkedChanged: function(checked) {
+        this.setAttribute('aria-checked', this.checked);
+      },
+
+      _disabledChanged: function(disabled) {
+        this.setAttribute('aria-disabled', this.disabled);
+      },
+
+      _noinkChanged: function(noink) {
+        if (this._ripple) {
+          this._ripple.noink = noink;
+        }
+      },
+
+      _updateInkSize: function() {
         var inkSize = this.getComputedStyleValue('--calculated-paper-checkbox-ink-size');
         // If unset, compute and set the default `--paper-checkbox-ink-size`.
         if (inkSize === '-1px') {
@@ -285,27 +276,60 @@
         }
       },
 
-      _computeCheckboxClass: function(checked, invalid) {
-        var className = '';
-        if (checked) {
-          className += 'checked ';
+      _onTap: function() {
+        if (!this.disabled) {
+          this.checked = !this.checked;
         }
-        if (invalid) {
-          className += 'invalid';
+      },
+
+      _onKeypress: function(event) {
+        var isSpace = event.key === ' ' || event.code === 'Space' || event.keyCode === 32;
+        var isEnter = event.key === 'Enter' || event.code === 'Enter' || event.keyCode === 13;
+        if (isSpace || isEnter) {
+          event.preventDefault();
+
+          if (!this.disabled) {
+            this.checked = !this.checked;
+          }
         }
-        return className;
       },
 
-      _computeCheckmarkClass: function(checked) {
-        return checked ? '' : 'hidden';
+      _onDown: function() {
+        this._lastDown = Date.now();
+        this._updateInkSize();
       },
 
-      // create ripple inside the checkboxContainer
-      _createRipple: function() {
-        this._rippleContainer = this.$.checkboxContainer;
-        return Polymer.PaperInkyFocusBehaviorImpl._createRipple.call(this);
-      }
+      _onUp: function() {
+        this._getRipple().holdDown = false;
+      },
+
+      _onFocus: function() {
+        this._updateInkSize();
+        var ripple = this._getRipple();
+        if ((Date.now() - this._lastDown) > this.__POINTER_FOCUS_WINDOW) {
+          ripple.holdDown = true;
+          this._lastDown = 0;
+          ripple.downAction();
+        }
+      },
 
+      _onBlur: function() {
+        var ripple = this._getRipple()
+        ripple.holdDown = false;
+        ripple.upAction();
+      },
+
+      _getRipple: function() {
+        if (!this._ripple) {
+          var ripple = document.createElement('paper-ripple');
+          ripple.center = true;
+          ripple.classList.add('circle');
+          ripple.noink = this.noink;
+          Polymer.dom(this.root).appendChild(ripple);
+          this._ripple = ripple;
+        }
+        return this._ripple;
+      },
     });
   </script>
 </dom-module>
diff --git a/test/index.html b/test/index.html
index 947efec..1273c54 100644
--- a/test/index.html
+++ b/test/index.html
@@ -15,8 +15,10 @@
 <body>
   <script>
     WCT.loadSuites([
-      'basic.html',
-      'basic.html?dom=shadow'
+      'paper-checkbox.html',
+      'paper-checkbox.html?dom=shadow',
+      'paper-checkbox-light.html',
+      'paper-checkbox-light.html?dom=shadow'
     ]);
   </script>
 
diff --git a/test/paper-checkbox-light.html b/test/paper-checkbox-light.html
new file mode 100644
index 0000000..023daac
--- /dev/null
+++ b/test/paper-checkbox-light.html
@@ -0,0 +1,208 @@
+<!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-light 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-light.html">
+
+  <style is="custom-style">
+    paper-checkbox-light.tiny {
+      --paper-checkbox-size: 5px;
+    }
+
+    paper-checkbox-light.medium {
+      --paper-checkbox-size: 37px;
+    }
+
+    paper-checkbox-light.giant {
+      --paper-checkbox-size: 50px;
+    }
+
+    paper-checkbox-light.enormous {
+      --paper-checkbox-size: 71px;
+    }
+
+    paper-checkbox-light.custom-ink-size {
+      --paper-checkbox-size: 25px;
+      --paper-checkbox-ink-size: 30px;
+    }
+  </style>
+</head>
+<body>
+
+  <test-fixture id="Basic">
+    <template>
+      <paper-checkbox-light></paper-checkbox-light>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="AriaLabel">
+    <template>
+      <paper-checkbox-light aria-label="Batman"></paper-checkbox-light>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="WithDifferentSizes">
+    <template>
+      <paper-checkbox-light></paper-checkbox-light>
+      <paper-checkbox-light class="giant"></paper-checkbox-light>
+      <paper-checkbox-light class="tiny"></paper-checkbox-light>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="WithDifferentSizes2">
+    <template>
+      <paper-checkbox-light class="tiny"></paper-checkbox-light>
+      <paper-checkbox-light></paper-checkbox-light>
+      <paper-checkbox-light class="medium"></paper-checkbox-light>
+      <paper-checkbox-light class="giant"></paper-checkbox-light>
+      <paper-checkbox-light class="enormous"></paper-checkbox-light>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="CustomInkSize">
+    <template>
+      <paper-checkbox-light class="custom-ink-size"></paper-checkbox-light>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('defaults', function() {
+      var c1;
+
+      setup(function() {
+        c1 = fixture('Basic');
+      });
+
+      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 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('ink size', function() {
+        var checkboxes;
+
+        setup(function() {
+          checkboxes = fixture('WithDifferentSizes2');
+          checkboxes.forEach(function(checkbox) {
+            // Trigger ink size calculation.
+            MockInteractions.tap(checkbox);
+          });
+        });
+
+        test('`--paper-checkbox-ink-size` sets the ink size', function() {
+          var checkbox = fixture('CustomInkSize');
+          assert.equal(checkbox.getComputedStyleValue('--calculated-paper-checkbox-size'), '25px');
+          assert.equal(checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size'), '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;
+
+      setup(function() {
+        c1 = fixture('Basic');
+      });
+
+      test('has aria role "checkbox"', function() {
+        assert.isTrue(c1.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('Basic');
+      a11ySuite('AriaLabel');
+    });
+  </script>
+</body>
+</html>
diff --git a/test/basic.html b/test/paper-checkbox.html
similarity index 100%
rename from test/basic.html
rename to test/paper-checkbox.html