Fixes inverted keys regression and adds a unit test.

BUG=327551

Review URL: https://codereview.chromium.org/111643003

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@240634 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 11 insertions, 10 deletions

diff --git a/ui/keyboard/resources/elements/kb-key-sequence.html b/ui/keyboard/resources/elements/kb-key-sequence.html
index 0157f93..b0bbc23 100644
--- a/ui/keyboard/resources/elements/kb-key-sequence.html
+++ b/ui/keyboard/resources/elements/kb-key-sequence.html
@@ -33,6 +33,7 @@
           var newKeys = this.getAttribute('keys');
           var newHintTexts = this.getAttribute('hintTexts');
           var keyCodes = this.getAttribute('hintCodes') || newKeys;
+          var invert = this.getAttribute('invert');
           if (newKeys) {
             if (newHintTexts && newKeys.length != newHintTexts.length) {
               console.error('keys and hintTexts do not match');
@@ -50,7 +51,7 @@
               if (newHintTexts)
                 key.hintText = newHintTexts[i];
               var keyCodeIndex = keyCodes[i];
-              if (this.invert) {
+              if (invert) {
                 key.invert = true;
                 key.char = newKeys[i];
                 keyCodeIndex = key.hintText;
diff --git a/ui/keyboard/resources/elements/kb-key.html b/ui/keyboard/resources/elements/kb-key.html
index a7dae77..447c491 100644
--- a/ui/keyboard/resources/elements/kb-key.html
+++ b/ui/keyboard/resources/elements/kb-key.html
@@ -43,26 +43,26 @@
         top: 0;
       }
 
-      ::part(key)[inverted] {
-        color: #7c7c7c;
-      }
-
-     ::part(hint) {
+      ::part(hint) {
         color: #7c7c7c;
         font-size: 70%;
         position: absolute;
         right: 7%;
         top: 5%;
-      } 
+      }
+
+      :host[invert] ::part(key) {
+        color: #7c7c7c;
+      }
 
-      ::part(hint)[inverted] {
+      :host[invert] ::part(hint) {
         color: #ffffff;
       }
     </style>
-    <div id="key" part="key" inverted?={{invert}}>
+    <div id="key" part="key">
       <content></content>
     </div>
-    <div part="hint" inverted?={{invert}}>{{hintText}}</div>
+    <div part="hint">{{hintText}}</div>
   </template>
   <script>
     Polymer('kb-key', {