Test dots intervals in SAML smart card PIN

Non-functional changes:

* Add browser test boilerplate for testing the <security-token-pin>
  Polymer element.
* Add a test that an 8-character PIN fits into the input field
  (which tests the functionality initially added in
  https://crrev.com/c/2069324);
* Add a test that the letter-spacing attribute doesn't fall back to the
  default value (which tests the regression that was fixed in
  https://crrev.com/c/2082378);

Functional changes:
* Reduce the interval between the dots by one pixel, so that 8 dots
  actually fit into the input field (the interval used before this CL
  turned out to be exceeding the input width by 1 pixel).

Bug: 1051859
Change-Id: If93757b19806067e29718e00c64f4ce5549931a7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2081420Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Commit-Queue: Maksim Ivanov <emaxx@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747326}

chrome/browser/resources/chromeos/login/security_token_pin.css

@@ -11,7 +11,7 @@
   --pin-keyboard-pin-input-style: {
     width: 192px;
   };
-  --pin-keyboard-input-letter-spacing: 14px;
+  --pin-keyboard-input-letter-spacing: 13px;
   --pin-keyboard-number-color: var(--google-grey-900);
   --cr-icon-button-margin-start: 5px;
 }

chrome/browser/resources/chromeos/login/security_token_pin_browsertest.js

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Tests for the <security-token-pin> Polymer element.
+ */
+
+GEN_INCLUDE([
+  '//chrome/test/data/webui/polymer_browser_test_base.js',
+]);
+
+var PolymerSecurityTokenPinTest = class extends PolymerTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://oobe/login';
+  }
+};
+
+TEST_F('PolymerSecurityTokenPinTest', 'All', function() {
+  const DEFAULT_PARAMETERS = {
+    codeType: OobeTypes.SecurityTokenPinDialogType.PIN,
+    enableUserInput: true,
+    errorLabel: OobeTypes.SecurityTokenPinDialogErrorType.NONE,
+    attemptsLeft: -1
+  };
+
+  let securityTokenPin;
+  let inputField;
+
+  setup(() => {
+    securityTokenPin = document.createElement('security-token-pin');
+    document.body.appendChild(securityTokenPin);
+    securityTokenPin.parameters = DEFAULT_PARAMETERS;
+
+    inputField =
+        securityTokenPin.$$('#pinKeyboard').$$('#pinInput').$$('input');
+    assert(inputField);
+  });
+
+  // Test that no scrolling is necessary in order to see all dots after entering
+  // a PIN of a typical length.
+  test('8-digit PIN fits into input', () => {
+    const PIN_LENGTH = 8;
+    inputField.value = '0'.repeat(PIN_LENGTH);
+    expectGT(inputField.scrollWidth, 0);
+    expectLE(inputField.scrollWidth, inputField.clientWidth);
+  });
+
+  // Test that the distance between characters (dots) is set in a correct way
+  // and doesn't fall back to the default value.
+  test('PIN input letter-spacing is correctly set up', () => {
+    expectNotEquals(
+        getComputedStyle(inputField).getPropertyValue('letter-spacing'),
+        'normal');
+  });
+
+  mocha.run();
+});

chrome/test/data/webui/BUILD.gn

@@ -129,6 +129,7 @@ js2gtest("browser_tests_js_webui") {
 
   if (is_chromeos) {
     sources += [
+      "../../../browser/resources/chromeos/login/security_token_pin_browsertest.js",
       "../../../browser/ui/webui/chromeos/account_migration_welcome_test.js",
       "../../../browser/ui/webui/chromeos/bluetooth_pairing_dialog_browsertest.js",
       "../../../browser/ui/webui/chromeos/certificate_manager_dialog_browsertest.js",