From 1f95e6808c7c057c2e03390e40df652162113e96 Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Mon, 10 Jul 2017 15:50:10 -0700
Subject: [PATCH 1/6] Fix ripples for checkboxes with `--paper-checkbox-size`
 in units other than 'px'.

---
 demo/index.html     |  1 +
 paper-checkbox.html | 12 +++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/demo/index.html b/demo/index.html
index 1c70803..7785458 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -61,6 +61,7 @@ <h3>Checkboxes can be styled using custom properties</h3>
           <custom-style>
             <style is="custom-style">
               paper-checkbox.red {
+                --paper-checkbox-size: 2em;
                 --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);
diff --git a/paper-checkbox.html b/paper-checkbox.html
index b2e653a..2d0ca52 100644
--- a/paper-checkbox.html
+++ b/paper-checkbox.html
@@ -274,7 +274,17 @@
           var inkSize = this.getComputedStyleValue('--calculated-paper-checkbox-ink-size').trim();
           // If unset, compute and set the default `--paper-checkbox-ink-size`.
           if (inkSize === '-1px') {
-            var checkboxSize = parseFloat(this.getComputedStyleValue('--calculated-paper-checkbox-size').trim());
+            var checkboxSizeText = this.getComputedStyleValue('--calculated-paper-checkbox-size').trim();
+
+            // Is the value not in units of 'px'?
+            if (!/[^a-zA-Z]px$/.test(checkboxSizeText)) {
+              this.updateStyles({
+                '--paper-checkbox-ink-size': 'calc(8 / 3 * ' + checkboxSizeText + ')',
+              });
+              return;
+            }
+
+            var checkboxSize = parseFloat(checkboxSizeText, 10);
             var defaultInkSize = Math.floor((8 / 3) * checkboxSize);
 
             // The checkbox and ripple need to have the same parity so that their

From 69b3c67e479d90af5cba713758ee5ee12c50014d Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Mon, 10 Jul 2017 16:27:05 -0700
Subject: [PATCH 2/6] Test that automatic ink sizing works for 'px' and
 non-'px' units.

---
 test/basic.html | 60 ++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/test/basic.html b/test/basic.html
index 9f71f59..5da943e 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -43,6 +43,22 @@
         --paper-checkbox-size: 71px;
       }
 
+      paper-checkbox.tiny-other-units {
+        --paper-checkbox-size: 0.5rem;
+      }
+
+      paper-checkbox.medium-other-units {
+        --paper-checkbox-size: 1.25em;
+      }
+
+      paper-checkbox.giant-other-units {
+        --paper-checkbox-size: 2.5in;
+      }
+
+      paper-checkbox.enormous-other-units {
+        --paper-checkbox-size: 25vmin;
+      }
+
       paper-checkbox.custom-ink-size {
         --paper-checkbox-size: 25px;
         --paper-checkbox-ink-size: 30px;
@@ -94,6 +110,15 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="WithNonPxSizes">
+    <template>
+      <paper-checkbox class="tiny-other-units"></paper-checkbox>
+      <paper-checkbox class="medium-other-units"></paper-checkbox>
+      <paper-checkbox class="giant-other-units"></paper-checkbox>
+      <paper-checkbox class="enormous-other-units"></paper-checkbox>
+    </template>
+  </test-fixture>
+
   <test-fixture id="CustomInkSize">
     <template>
       <paper-checkbox class="custom-ink-size"></paper-checkbox>
@@ -225,6 +250,15 @@
       });
 
       suite('ink size', function() {
+        function cssLengthToPx(cssLengthText) {
+          var div = document.createElement('div');
+          div.style.width = cssLengthText;
+          document.body.appendChild(div);
+          var lengthPx = div.getBoundingClientRect().width;
+          document.body.removeChild(div);
+          return lengthPx;
+        }
+
         var checkboxes;
 
         setup(function(done) {
@@ -242,25 +276,35 @@
 
         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);
+            var size = cssLengthToPx(checkbox.getComputedStyleValue('--calculated-paper-checkbox-size'));
+            var inkSize = cssLengthToPx(checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size'));
             assert.approximately(inkSize / size, 8 / 3, 0.1);
           });
         });
 
+        test('ink sizes are near (8/3 * checkbox size) when using non-px sizes', function(done) {
+          var checkboxes = fixture('WithNonPxSizes');
+          afterNextRenderAll(checkboxes, function() {
+            checkboxes.forEach(function(checkbox) {
+              var size = cssLengthToPx(checkbox.getComputedStyleValue('--calculated-paper-checkbox-size'));
+              var inkSize = cssLengthToPx(checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size'));
+              assert.approximately(inkSize / size, 8 / 3, 0.1);
+            });
+            done();
+          });
+        });
+
         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);
+            var inkSize = cssLengthToPx(checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size'));
+            assert.equal(inkSize, Math.floor(inkSize));
           });
         });
 
         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);
+            var size = cssLengthToPx(checkbox.getComputedStyleValue('--calculated-paper-checkbox-size'));
+            var inkSize = cssLengthToPx(checkbox.getComputedStyleValue('--calculated-paper-checkbox-ink-size'));
             assert.equal(size % 2, inkSize % 2);
           });
         });

From 83d4e4bc13e5bcf945001124c305e8673e06e527 Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Mon, 10 Jul 2017 17:09:20 -0700
Subject: [PATCH 3/6] Make 'px' the unique codepath.

---
 paper-checkbox.html | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/paper-checkbox.html b/paper-checkbox.html
index 2d0ca52..342cb21 100644
--- a/paper-checkbox.html
+++ b/paper-checkbox.html
@@ -276,25 +276,22 @@
           if (inkSize === '-1px') {
             var checkboxSizeText = this.getComputedStyleValue('--calculated-paper-checkbox-size').trim();
 
-            // Is the value not in units of 'px'?
-            if (!/[^a-zA-Z]px$/.test(checkboxSizeText)) {
-              this.updateStyles({
-                '--paper-checkbox-ink-size': 'calc(8 / 3 * ' + checkboxSizeText + ')',
-              });
-              return;
-            }
-
+            var units = checkboxSizeText.match(/[A-Za-z]+$/)[0] || 'px';
             var checkboxSize = parseFloat(checkboxSizeText, 10);
-            var defaultInkSize = Math.floor((8 / 3) * checkboxSize);
+            var defaultInkSize = (8 / 3) * checkboxSize;
+
+            if (units === 'px') {
+              defaultInkSize = Math.floor(defaultInkSize);
 
-            // The checkbox and ripple need to have the same parity so that their
-            // centers align.
-            if (defaultInkSize % 2 !== checkboxSize % 2) {
-              defaultInkSize++;
+              // The checkbox and ripple need to have the same parity so that their
+              // centers align.
+              if (defaultInkSize % 2 !== checkboxSize % 2) {
+                defaultInkSize++;
+              }
             }
 
             this.updateStyles({
-              '--paper-checkbox-ink-size': defaultInkSize + 'px',
+              '--paper-checkbox-ink-size': defaultInkSize + units,
             });
           }
         });

From befe1605a5f461cd8e634a6c82189e5997c91075 Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Wed, 12 Jul 2017 15:38:19 -0700
Subject: [PATCH 4/6] v2.0.0 -> v2.0.1

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index a3776b6..b528131 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-checkbox",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A material design checkbox",
   "authors": [
     "The Polymer Authors"

From 4354dcf8a5cf588a04cb7c120256895f89435850 Mon Sep 17 00:00:00 2001
From: dpapad <dpapad@chromium.org>
Date: Wed, 24 Jan 2018 09:42:58 -0800
Subject: [PATCH 5/6] Fix parseFloat() call to not throw JS Comp error.

---
 paper-checkbox.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/paper-checkbox.html b/paper-checkbox.html
index 342cb21..221685d 100644
--- a/paper-checkbox.html
+++ b/paper-checkbox.html
@@ -277,7 +277,7 @@
             var checkboxSizeText = this.getComputedStyleValue('--calculated-paper-checkbox-size').trim();
 
             var units = checkboxSizeText.match(/[A-Za-z]+$/)[0] || 'px';
-            var checkboxSize = parseFloat(checkboxSizeText, 10);
+            var checkboxSize = parseFloat(checkboxSizeText);
             var defaultInkSize = (8 / 3) * checkboxSize;
 
             if (units === 'px') {

From 8404761baae76f5229dd31f0ffe22ae400a67ee2 Mon Sep 17 00:00:00 2001
From: Russell Bicknell <bicknellr@google.com>
Date: Wed, 24 Jan 2018 11:00:20 -0800
Subject: [PATCH 6/6] v2.0.1 -> v2.0.2

---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index b528131..7ce176e 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-checkbox",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "A material design checkbox",
   "authors": [
     "The Polymer Authors"