Description
Setting the --paper-checkbox-size custom property to calc( anything ) will flag up an error but the result of the CSS calc() function will still show correctly on the checkbox. However there will be no ink effect when pressed.
--paper-checkbox-ink-size can be set directly to restore the ink effect and no error will be thrown.
Perhaps it would be better to throw a warning telling users to set --paper-checkbox-ink-size directly if they wish to use calc() on --paper-checkbox-size
First time reporting an error on Github, I'm not a really techy guy, How'd I do?
Expected outcome
No error message on console. paper-checkbox has ink effect.
Actual outcome
The paper-checkbox has no ink effect
on console:
"TypeError: Cannot read property '0' of null
at HTMLElement.<anonymous> (https://polygit.org/components/paper-checkbox/paper-checkbox.html:279:61)
at callMethod (https://polygit.org/components/polymer/lib/utils/render-status.html:51:16)
at runQueue (https://polygit.org/components/polymer/lib/utils/render-status.html:42:7)
at https://polygit.org/components/polymer/lib/utils/render-status.html:29:9"
When calculating the value of --paper-checkbox-ink-size on line 279
var units = checkboxSizeText.match(/[A-Za-z]+$/)[0] || 'px';
It looks for the CSS measurement unit on --paper-checkbox-size but when a bracket is encountered it'll throw the error.
Live Demo
https://jsbin.com/piholapude/1/edit?html,console,output
Steps to reproduce
set --paper-checkbox-size custom property to calc( 10px * 3)
Browsers Affected