Merge remote-tracking branch 'origin/master' into svg-checkmark

PolymerElements · Jan 31, 2018 · 213807e · 213807e
2 parents 860d3f5 + 8404761
commit 213807e
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 16 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "paper-checkbox",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "A material design checkbox",
   "authors": [
     "The Polymer Authors"

diff --git 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
@@ -265,17 +265,24 @@
           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 defaultInkSize = Math.floor((8 / 3) * checkboxSize);
+            var checkboxSizeText = this.getComputedStyleValue('--calculated-paper-checkbox-size').trim();
 
-            // The checkbox and ripple need to have the same parity so that their
-            // centers align.
-            if (defaultInkSize % 2 !== checkboxSize % 2) {
-              defaultInkSize++;
+            var units = checkboxSizeText.match(/[A-Za-z]+$/)[0] || 'px';
+            var checkboxSize = parseFloat(checkboxSizeText);
+            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++;
+              }
             }
 
             this.updateStyles({
-              '--paper-checkbox-ink-size': defaultInkSize + 'px',
+              '--paper-checkbox-ink-size': defaultInkSize + units,
             });
           }
         });

diff --git 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);
           });
         });