PrintPreview: Migrate to Lit, part 8.

In this part migrating
 - ui/number_settings_section.ts
 - ui/print_preview_search_box.ts

Bug: 410607166
Change-Id: Iac17e1f6c5ea9a38c61a7c93dc368fae842c1b94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6485470
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1453029}
diff --git a/chrome/browser/resources/print_preview/BUILD.gn b/chrome/browser/resources/print_preview/BUILD.gn
index 3580e61..fb6a80c 100644
--- a/chrome/browser/resources/print_preview/BUILD.gn
+++ b/chrome/browser/resources/print_preview/BUILD.gn
@@ -98,7 +98,9 @@
     "ui/link_container.css",
     "ui/media_size_settings.css",
     "ui/more_settings.css",
+    "ui/number_settings_section.css",
     "ui/pages_settings.css",
+    "ui/print_preview_search_box.css",
     "ui/print_preview_shared.css",
     "ui/print_preview_shared_lit.css",
     "ui/print_preview_vars.css",
diff --git a/chrome/browser/resources/print_preview/ui/number_settings_section.css b/chrome/browser/resources/print_preview/ui/number_settings_section.css
new file mode 100644
index 0000000..aed0127
--- /dev/null
+++ b/chrome/browser/resources/print_preview/ui/number_settings_section.css
@@ -0,0 +1,42 @@
+/* Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* #css_wrapper_metadata_start
+ * #type=style-lit
+ * #import=./print_preview_shared_lit.css.js
+ * #import=./print_preview_vars.css.js
+ * #scheme=relative
+ * #include=print-preview-shared-lit
+ * #css_wrapper_metadata_end */
+
+:host {
+  /* Width = 3 digits + space + cr-input-padding-end/start */
+  --cr-input-width: calc(4em + 16px);
+}
+
+#sectionTitle {
+  align-self: baseline;
+}
+
+cr-input {
+  margin-inline-end: 16px;
+  min-height: var(--print-preview-row-height);
+  overflow: hidden;
+}
+
+.input-wrapper {
+  align-items: center;
+  display: flex;
+}
+
+:host([input-valid]) cr-input {
+  --cr-input-error-display: none;
+}
+
+span[slot=suffix] {
+  max-width: calc(100% - 5em);
+  min-height: var(--print-preview-row-height);
+  overflow: hidden;
+  word-wrap: break-word;
+}
diff --git a/chrome/browser/resources/print_preview/ui/number_settings_section.html b/chrome/browser/resources/print_preview/ui/number_settings_section.html
index b8c68352..5b5a856 100644
--- a/chrome/browser/resources/print_preview/ui/number_settings_section.html
+++ b/chrome/browser/resources/print_preview/ui/number_settings_section.html
@@ -1,44 +1,12 @@
-<style include="print-preview-shared">
-  :host {
-    /* Width = 3 digits + space + cr-input-padding-end/start */
-    --cr-input-width: calc(4em + 16px);
-  }
-
-  #sectionTitle {
-    align-self: baseline;
-  }
-
-  cr-input {
-    margin-inline-end: 16px;
-    min-height: var(--print-preview-row-height);
-    overflow: hidden;
-  }
-
-  .input-wrapper {
-    align-items: center;
-    display: flex;
-  }
-
-  :host([input-valid]) cr-input {
-    --cr-input-error-display: none;
-  }
-
-  span[slot=suffix] {
-    max-width: calc(100% - 5em);
-    min-height: var(--print-preview-row-height);
-    overflow: hidden;
-    word-wrap: break-word;
-  }
-</style>
 <print-preview-settings-section>
-  <span slot="title" id="sectionTitle">[[inputLabel]]</span>
+  <span slot="title" id="sectionTitle">${this.inputLabel}</span>
   <div slot="controls" id="controls">
     <span class="input-wrapper">
       <cr-input id="userValue" type="number" class="stroked"
-          max="[[maxValue]]" min="[[minValue]]" data-timeout-delay="250"
-          disabled$="[[getDisabled_(disabled)]]" on-keydown="onKeydown_"
-          on-blur="onBlur_" aria-label="[[inputAriaLabel]]"
-          error-message="[[errorMessage_]]" auto-validate>
+          max="${this.maxValue}" min="${this.minValue}" data-timeout-delay="250"
+          ?disabled="${this.getDisabled_()}" @keydown="${this.onKeydown_}"
+          @blur="${this.onBlur_}" aria-label="${this.inputAriaLabel}"
+          error-message="${this.errorMessage_}" auto-validate>
         <span slot="suffix">
           <slot name="opt-inside-content"></slot>
         </span>
diff --git a/chrome/browser/resources/print_preview/ui/number_settings_section.ts b/chrome/browser/resources/print_preview/ui/number_settings_section.ts
index b8bfd2d3c..0006379c 100644
--- a/chrome/browser/resources/print_preview/ui/number_settings_section.ts
+++ b/chrome/browser/resources/print_preview/ui/number_settings_section.ts
@@ -3,16 +3,16 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import './print_preview_shared.css.js';
-import './print_preview_vars.css.js';
 import './settings_section.js';
 
 import type {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import {WebUiListenerMixin} from 'chrome://resources/cr_elements/web_ui_listener_mixin.js';
-import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {WebUiListenerMixinLit} from 'chrome://resources/cr_elements/web_ui_listener_mixin_lit.js';
+import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';
+import type {PropertyValues} from 'chrome://resources/lit/v3_0/lit.rollup.js';
 
-import {InputMixin} from './input_mixin.js';
-import {getTemplate} from './number_settings_section.html.js';
+import {InputMixinLit} from './input_mixin_lit.js';
+import {getCss} from './number_settings_section.css.js';
+import {getHtml} from './number_settings_section.html.js';
 
 export interface PrintPreviewNumberSettingsSectionElement {
   $: {
@@ -21,7 +21,7 @@
 }
 
 const PrintPreviewNumberSettingsSectionElementBase =
-    WebUiListenerMixin(InputMixin(PolymerElement));
+    WebUiListenerMixinLit(InputMixinLit(CrLitElement));
 
 export class PrintPreviewNumberSettingsSectionElement extends
     PrintPreviewNumberSettingsSectionElementBase {
@@ -29,63 +29,70 @@
     return 'print-preview-number-settings-section';
   }
 
-  static get template() {
-    return getTemplate();
+  static override get styles() {
+    return getCss();
   }
 
-  static get properties() {
+  override render() {
+    return getHtml.bind(this)();
+  }
+
+  static override get properties() {
     return {
       inputValid: {
         type: Boolean,
         notify: true,
-        reflectToAttribute: true,
-        value: true,
+        reflect: true,
       },
 
       currentValue: {
         type: String,
         notify: true,
-        observer: 'onCurrentValueChanged_',
       },
 
-      defaultValue: String,
-
-      maxValue: Number,
-
-      minValue: Number,
-
-      inputLabel: String,
-
-      inputAriaLabel: String,
-
-      hintMessage: String,
-
-      disabled: Boolean,
-
-      errorMessage_: {
-        type: String,
-        computed: 'computeErrorMessage_(hintMessage, inputValid)',
-      },
+      defaultValue: {type: String},
+      maxValue: {type: Number},
+      minValue: {type: Number},
+      inputLabel: {type: String},
+      inputAriaLabel: {type: String},
+      hintMessage: {type: String},
+      disabled: {type: Boolean},
+      errorMessage_: {type: String},
     };
   }
 
-  declare currentValue: string;
-  declare defaultValue: string;
-  declare disabled: boolean;
-  declare hintMessage: string;
-  declare inputAriaLabel: string;
-  declare inputLabel: string;
-  declare inputValid: boolean;
-  declare minValue: number;
-  declare maxValue: number;
-  declare private errorMessage_: string;
+  accessor currentValue: string;
+  accessor defaultValue: string;
+  accessor disabled: boolean;
+  accessor hintMessage: string;
+  accessor inputAriaLabel: string;
+  accessor inputLabel: string;
+  accessor inputValid: boolean = true;
+  accessor minValue: number;
+  accessor maxValue: number;
+  protected accessor errorMessage_: string;
 
-  override ready() {
-    super.ready();
-
+  override firstUpdated() {
     this.addEventListener('input-change', e => this.onInputChangeEvent_(e));
   }
 
+  override willUpdate(changedProperties: PropertyValues<this>) {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('hintMessage') ||
+        changedProperties.has('inputValid')) {
+      this.errorMessage_ = this.inputValid ? '' : this.hintMessage;
+    }
+  }
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('currentValue')) {
+      this.onCurrentValueChanged_();
+    }
+  }
+
   /** @return The cr-input field element for InputBehavior. */
   override getInput() {
     return this.$.userValue;
@@ -108,11 +115,11 @@
   /**
    * @return Whether the input should be disabled.
    */
-  private getDisabled_(): boolean {
+  protected getDisabled_(): boolean {
     return this.disabled && this.inputValid;
   }
 
-  private onKeydown_(e: KeyboardEvent) {
+  protected onKeydown_(e: KeyboardEvent) {
     if (['.', 'e', 'E', '-', '+'].includes(e.key)) {
       e.preventDefault();
       return;
@@ -123,7 +130,7 @@
     }
   }
 
-  private onBlur_() {
+  protected onBlur_() {
     if (this.currentValue === '') {
       this.currentValue = this.defaultValue;
       this.inputValid = this.$.userValue.validate();
@@ -140,12 +147,11 @@
     }
     this.resetString();
   }
-
-  private computeErrorMessage_(): string {
-    return this.inputValid ? '' : this.hintMessage;
-  }
 }
 
+export type NumberSettingsSectionElement =
+    PrintPreviewNumberSettingsSectionElement;
+
 declare global {
   interface HTMLElementTagNameMap {
     'print-preview-number-settings-section':
diff --git a/chrome/browser/resources/print_preview/ui/print_preview_search_box.css b/chrome/browser/resources/print_preview/ui/print_preview_search_box.css
new file mode 100644
index 0000000..c8989d4c
--- /dev/null
+++ b/chrome/browser/resources/print_preview/ui/print_preview_search_box.css
@@ -0,0 +1,61 @@
+/* Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* #css_wrapper_metadata_start
+ * #type=style-lit
+ * #import=./print_preview_shared_lit.css.js
+ * #import=chrome://resources/cr_elements/cr_input/cr_input_style_lit.css.js
+ * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
+ * #scheme=relative
+ * #include=print-preview-shared-lit cr-input-style-lit
+ * #css_wrapper_metadata_end */
+
+:host {
+  display: flex;
+  --cr-input-error-display: none;
+}
+
+cr-input::part(row-container) {
+  min-height: 32px;
+}
+
+#icon,
+#clearSearch {
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+}
+
+#icon {
+  height: var(--search-icon-size);
+  width: var(--search-icon-size);
+}
+
+#clearSearch {
+  --clear-icon-size: 28px;
+  --cr-icon-button-size: var(--clear-icon-size);
+  --cr-icon-button-icon-size: 20px;
+  height: var(--clear-icon-size);
+  position: absolute;
+  right: 0;
+  width: var(--clear-icon-size);
+  /* Necessary to be above the '#hover-layer' in cr-input. */
+  z-index: 1;
+}
+
+:host-context([dir=rtl]) #clearSearch {
+  left: 0;
+  right: auto;
+}
+
+:host([has-search-text]) cr-input {
+  --cr-input-padding-end: 24px;
+}
+
+.search-box-input {
+  width: 100%;
+}
+
+.search-box-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
diff --git a/chrome/browser/resources/print_preview/ui/print_preview_search_box.html b/chrome/browser/resources/print_preview/ui/print_preview_search_box.html
index 48bb905..ef5d7838 100644
--- a/chrome/browser/resources/print_preview/ui/print_preview_search_box.html
+++ b/chrome/browser/resources/print_preview/ui/print_preview_search_box.html
@@ -1,60 +1,10 @@
-<style include="print-preview-shared cr-input-style">
-  :host {
-    display: flex;
-    --cr-input-error-display: none;
-  }
-
-  cr-input::part(row-container) {
-    min-height: 32px;
-  }
-
-  #icon,
-  #clearSearch {
-    margin-inline-end: 0;
-    margin-inline-start: 0;
-  }
-
-  #icon {
-    height: var(--search-icon-size);
-    width: var(--search-icon-size);
-  }
-
-  #clearSearch {
-    --clear-icon-size: 28px;
-    --cr-icon-button-size: var(--clear-icon-size);
-    --cr-icon-button-icon-size: 20px;
-    height: var(--clear-icon-size);
-    position: absolute;
-    right: 0;
-    width: var(--clear-icon-size);
-    /* Necessary to be above the '#hover-layer' in cr-input. */
-    z-index: 1;
-  }
-
-  :host-context([dir=rtl]) #clearSearch {
-    left: 0;
-    right: auto;
-  }
-
-  :host([has-search-text]) cr-input {
-    --cr-input-padding-end: 24px;
-  }
-
-  .search-box-input {
-    width: 100%;
-  }
-
-  .search-box-input::-webkit-search-cancel-button {
-    -webkit-appearance: none;
-  }
-</style>
 <cr-input type="search" id="searchInput" class="search-box-input"
-    on-search="onSearchTermSearch" on-input="onSearchTermInput"
-    aria-label$="[[label]]" placeholder="[[label]]"
-    autofocus="[[autofocus]]" spellcheck="false">
+    @search="${this.onSearchTermSearch}" @input="${this.onSearchTermInput}"
+    aria-label="${this.label}" placeholder="${this.label}"
+    autofocus="${this.autofocus}" spellcheck="false">
   <div slot="inline-prefix" id="icon" class="cr-icon icon-search" alt=""></div>
   <cr-icon-button id="clearSearch" class="icon-cancel"
-      hidden$="[[!hasSearchText]]" slot="suffix" on-click="onClearClick_"
-      title="$i18n{clearSearch}">
+      ?hidden="${!this.hasSearchText}" slot="suffix"
+      @click="${this.onClearClick_}" title="$i18n{clearSearch}">
   </cr-icon-button>
 </cr-input>
diff --git a/chrome/browser/resources/print_preview/ui/print_preview_search_box.ts b/chrome/browser/resources/print_preview/ui/print_preview_search_box.ts
index 3b531c7..701697fab 100644
--- a/chrome/browser/resources/print_preview/ui/print_preview_search_box.ts
+++ b/chrome/browser/resources/print_preview/ui/print_preview_search_box.ts
@@ -3,18 +3,17 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_icons.css.js';
-import 'chrome://resources/cr_elements/cr_shared_vars.css.js';
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.js';
 import 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import './print_preview_shared.css.js';
 
 import type {CrInputElement} from 'chrome://resources/cr_elements/cr_input/cr_input.js';
-import {CrSearchFieldMixin} from 'chrome://resources/cr_elements/cr_search_field/cr_search_field_mixin.js';
-import {WebUiListenerMixin} from 'chrome://resources/cr_elements/web_ui_listener_mixin.js';
+import {CrSearchFieldMixinLit} from 'chrome://resources/cr_elements/cr_search_field/cr_search_field_mixin_lit.js';
+import {WebUiListenerMixinLit} from 'chrome://resources/cr_elements/web_ui_listener_mixin_lit.js';
 import {stripDiacritics} from 'chrome://resources/js/search_highlight_utils.js';
-import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';
 
-import {getTemplate} from './print_preview_search_box.html.js';
+import {getCss} from './print_preview_search_box.css.js';
+import {getHtml} from './print_preview_search_box.html.js';
 
 declare global {
   interface HTMLElementEventMap {
@@ -31,7 +30,7 @@
 }
 
 const PrintPreviewSearchBoxElementBase =
-    CrSearchFieldMixin(WebUiListenerMixin(PolymerElement));
+    CrSearchFieldMixinLit(WebUiListenerMixinLit(CrLitElement));
 
 export class PrintPreviewSearchBoxElement extends
     PrintPreviewSearchBoxElementBase {
@@ -39,13 +38,17 @@
     return 'print-preview-search-box';
   }
 
-  static get template() {
-    return getTemplate();
+  static override get styles() {
+    return getCss();
   }
 
-  static get properties() {
+  override render() {
+    return getHtml.bind(this)();
+  }
+
+  static override get properties() {
     return {
-      autofocus: Boolean,
+      autofocus: {type: Boolean},
 
       searchQuery: {
         type: Object,
@@ -54,13 +57,11 @@
     };
   }
 
-  declare autofocus: boolean;
-  declare searchQuery: RegExp|null;
+  override accessor autofocus: boolean;
+  accessor searchQuery: RegExp|null;
   private lastQuery_: string = '';
 
-  override ready() {
-    super.ready();
-
+  override firstUpdated() {
     this.addEventListener('search-changed', e => this.onSearchChanged_(e));
   }
 
@@ -84,7 +85,7 @@
         safeQuery.length > 0 ? new RegExp(`(${safeQuery})`, 'ig') : null;
   }
 
-  private onClearClick_() {
+  protected onClearClick_() {
     this.setValue('');
     this.$.searchInput.focus();
   }
diff --git a/chrome/test/data/webui/print_preview/advanced_dialog_test.ts b/chrome/test/data/webui/print_preview/advanced_dialog_test.ts
index a6c1de7..bc33a2fe 100644
--- a/chrome/test/data/webui/print_preview/advanced_dialog_test.ts
+++ b/chrome/test/data/webui/print_preview/advanced_dialog_test.ts
@@ -8,7 +8,7 @@
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {keyEventOn} from 'chrome://webui-test/keyboard_mock_interactions.js';
 import {fakeDataBind} from 'chrome://webui-test/polymer_test_util.js';
-import {eventToPromise} from 'chrome://webui-test/test_util.js';
+import {eventToPromise, microtasksFinished} from 'chrome://webui-test/test_util.js';
 
 import {getCddTemplateWithAdvancedSettings} from './print_preview_test_utils.js';
 
@@ -171,34 +171,36 @@
 
   // Tests that the dialog correctly shows and hides settings based on the
   // value of the search query.
-  test(
-      'AdvancedSettingsFilter', function() {
-        setupDialog(3);
-        const searchBox = dialog.$.searchBox;
-        const items = dialog.shadowRoot!.querySelectorAll(
-            'print-preview-advanced-settings-item');
-        const noMatchHint = dialog.shadowRoot!.querySelector<HTMLElement>(
-            '.no-settings-match-hint')!;
+  test('AdvancedSettingsFilter', async function() {
+    setupDialog(3);
+    const searchBox = dialog.$.searchBox;
+    const items = dialog.shadowRoot!.querySelectorAll(
+        'print-preview-advanced-settings-item');
+    const noMatchHint = dialog.shadowRoot!.querySelector<HTMLElement>(
+        '.no-settings-match-hint')!;
 
-        // Query is initialized to null. All items are shown and the hint is
-        // hidden.
-        items.forEach(item => assertFalse(item.hidden));
-        assertTrue(noMatchHint.hidden);
+    // Query is initialized to null. All items are shown and the hint is
+    // hidden.
+    items.forEach(item => assertFalse(item.hidden));
+    assertTrue(noMatchHint.hidden);
 
-        // Searching for Watermark should show only the watermark setting.
-        searchBox.searchQuery = /(Watermark)/ig;
-        items.forEach((item, index) => assertEquals(index !== 2, item.hidden));
-        assertTrue(noMatchHint.hidden);
+    // Searching for Watermark should show only the watermark setting.
+    searchBox.searchQuery = /(Watermark)/ig;
+    await microtasksFinished();
+    items.forEach((item, index) => assertEquals(index !== 2, item.hidden));
+    assertTrue(noMatchHint.hidden);
 
-        // Searching for A4 should show only the print area setting.
-        searchBox.searchQuery = /(A4)/ig;
-        items.forEach((item, index) => assertEquals(index !== 0, item.hidden));
-        assertTrue(noMatchHint.hidden);
+    // Searching for A4 should show only the print area setting.
+    searchBox.searchQuery = /(A4)/ig;
+    await microtasksFinished();
+    items.forEach((item, index) => assertEquals(index !== 0, item.hidden));
+    assertTrue(noMatchHint.hidden);
 
-        // Searching for WXYZ should show no settings and display the "no match"
-        // hint.
-        searchBox.searchQuery = /(WXYZ)/ig;
-        items.forEach(item => assertTrue(item.hidden));
-        assertFalse(noMatchHint.hidden);
-      });
+    // Searching for WXYZ should show no settings and display the "no match"
+    // hint.
+    searchBox.searchQuery = /(WXYZ)/ig;
+    await microtasksFinished();
+    items.forEach(item => assertTrue(item.hidden));
+    assertFalse(noMatchHint.hidden);
+  });
 });
diff --git a/chrome/test/data/webui/print_preview/key_event_test.ts b/chrome/test/data/webui/print_preview/key_event_test.ts
index bb714d6..7cf6762 100644
--- a/chrome/test/data/webui/print_preview/key_event_test.ts
+++ b/chrome/test/data/webui/print_preview/key_event_test.ts
@@ -71,7 +71,7 @@
     keyEventOn(
         page.shadowRoot!.querySelector('print-preview-sidebar')!.shadowRoot!
             .querySelector('print-preview-copies-settings')!.shadowRoot
-            .querySelector('print-preview-number-settings-section')!.shadowRoot!
+            .querySelector('print-preview-number-settings-section')!.shadowRoot
             .querySelector('cr-input')!.inputElement,
         'keydown', 0, [], 'Enter');
     return whenPrintCalled;
diff --git a/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.ts b/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.ts
index f2fafb7..7a63458 100644
--- a/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.ts
+++ b/chrome/test/data/webui/print_preview/number_settings_section_interactive_test.ts
@@ -7,6 +7,7 @@
 import type {PrintPreviewNumberSettingsSectionElement} from 'chrome://print/print_preview.js';
 import {getTrustedHTML} from 'chrome://print/print_preview.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {microtasksFinished} from 'chrome://webui-test/test_util.js';
 
 import {triggerInputEvent} from './print_preview_test_utils.js';
 
@@ -30,7 +31,6 @@
     // Initial value is 10.
     const crInput = numberSettings.getInput();
     const input = crInput.inputElement;
-    await crInput.updateComplete;
     assertEquals('10', input.value);
 
     // Set something invalid in the input.
@@ -42,7 +42,7 @@
     // Blurring the input does not clear it or clear the error if there
     // is an explicit invalid value.
     input.blur();
-    await crInput.updateComplete;
+    await microtasksFinished();
     assertEquals('0', input.value);
     assertTrue(crInput.invalid);
 
@@ -55,7 +55,7 @@
 
     // Blurring the input clears it to the default when it is empty.
     input.blur();
-    await crInput.updateComplete;
+    await microtasksFinished();
     assertEquals('50', input.value);
     assertFalse(crInput.invalid);
   });
diff --git a/chrome/test/data/webui/print_preview/number_settings_section_test.ts b/chrome/test/data/webui/print_preview/number_settings_section_test.ts
index 1d9859dc..d6d87381 100644
--- a/chrome/test/data/webui/print_preview/number_settings_section_test.ts
+++ b/chrome/test/data/webui/print_preview/number_settings_section_test.ts
@@ -30,62 +30,46 @@
   });
 
   // Test that key events that would result in invalid values are blocked.
-  test(
-      'BlocksInvalidKeys', function() {
-        const input = numberSettings.$.userValue;
-        /**
-         * @param key Key name for the keyboard event that will be fired.
-         * @return Promise that resolves when 'keydown' is received by
-         *     |parentElement|.
-         */
-        function sendKeyDownAndReturnPromise(key: string):
-            Promise<KeyboardEvent> {
-          const whenKeyDown = eventToPromise('keydown', parentElement);
-          keyEventOn(input.inputElement, 'keydown', 0, undefined, key);
-          return whenKeyDown;
-        }
+  test('BlocksInvalidKeys', async function() {
+    const input = numberSettings.$.userValue;
+    /**
+     * @param key Key name for the keyboard event that will be fired.
+     * @return Promise that resolves when 'keydown' is received by
+     *     |parentElement|.
+     */
+    function sendKeyDownAndReturnPromise(key: string): Promise<KeyboardEvent> {
+      const whenKeyDown = eventToPromise('keydown', parentElement);
+      keyEventOn(input.inputElement, 'keydown', 0, undefined, key);
+      return whenKeyDown;
+    }
 
-        return sendKeyDownAndReturnPromise('e')
-            .then((e: KeyboardEvent) => {
-              assertTrue(e.defaultPrevented);
-              return sendKeyDownAndReturnPromise('.');
-            })
-            .then((e: KeyboardEvent) => {
-              assertTrue(e.defaultPrevented);
-              return sendKeyDownAndReturnPromise('-');
-            })
-            .then((e: KeyboardEvent) => {
-              assertTrue(e.defaultPrevented);
-              return sendKeyDownAndReturnPromise('E');
-            })
-            .then((e: KeyboardEvent) => {
-              assertTrue(e.defaultPrevented);
-              return sendKeyDownAndReturnPromise('+');
-            })
-            .then((e: KeyboardEvent) => {
-              assertTrue(e.defaultPrevented);
-              // Try a valid key.
-              return sendKeyDownAndReturnPromise('1');
-            })
-            .then((e: KeyboardEvent) => {
-              assertFalse(e.defaultPrevented);
-            });
-      });
+    let e = await sendKeyDownAndReturnPromise('e');
+    assertTrue(e.defaultPrevented);
+    e = await sendKeyDownAndReturnPromise('.');
+    assertTrue(e.defaultPrevented);
+    e = await sendKeyDownAndReturnPromise('-');
+    assertTrue(e.defaultPrevented);
+    e = await sendKeyDownAndReturnPromise('E');
+    assertTrue(e.defaultPrevented);
+    e = await sendKeyDownAndReturnPromise('+');
+    assertTrue(e.defaultPrevented);
+    // Try a valid key.
+    e = await sendKeyDownAndReturnPromise('1');
+    assertFalse(e.defaultPrevented);
+  });
 
-  test(
-      'UpdatesErrorMessage', function() {
-        const input = numberSettings.$.userValue;
+  test('UpdatesErrorMessage', async function() {
+    const input = numberSettings.$.userValue;
 
-        // The error message should be empty initially, since the input is
-        // valid.
-        assertTrue(numberSettings.inputValid);
-        assertEquals('', input.errorMessage);
+    // The error message should be empty initially, since the input is
+    // valid.
+    assertTrue(numberSettings.inputValid);
+    assertEquals('', input.errorMessage);
 
-        // Enter an out of range value, and confirm that the error message is
-        // updated correctly.
-        return triggerInputEvent(input, '300', numberSettings).then(() => {
-          assertFalse(numberSettings.inputValid);
-          assertEquals('incorrect value entered', input.errorMessage);
-        });
-      });
+    // Enter an out of range value, and confirm that the error message is
+    // updated correctly.
+    await triggerInputEvent(input, '300', numberSettings);
+    assertFalse(numberSettings.inputValid);
+    assertEquals('incorrect value entered', input.errorMessage);
+  });
 });
diff --git a/chrome/test/data/webui/print_preview/scaling_settings_test.ts b/chrome/test/data/webui/print_preview/scaling_settings_test.ts
index dc19429..841c6cf 100644
--- a/chrome/test/data/webui/print_preview/scaling_settings_test.ts
+++ b/chrome/test/data/webui/print_preview/scaling_settings_test.ts
@@ -7,6 +7,7 @@
 import type {PrintPreviewModelElement, PrintPreviewScalingSettingsElement} from 'chrome://print/print_preview.js';
 import {ScalingType} from 'chrome://print/print_preview.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {microtasksFinished} from 'chrome://webui-test/test_util.js';
 
 import {selectOption, triggerInputEvent} from './print_preview_test_utils.js';
 
@@ -109,7 +110,7 @@
     setDocumentPdf(true);
 
     // Default is 100
-    await scalingCrInput.updateComplete;
+    await microtasksFinished();
     validateState('100', true, ScalingType.DEFAULT, ScalingType.DEFAULT, '100');
     assertFalse(scalingSection.getSetting('scaling').setFromUi);
     assertFalse(scalingSection.getSetting('scalingType').setFromUi);
@@ -146,7 +147,7 @@
 
     // Select fit to page. Should clear the invalid value.
     await selectOption(scalingSection, ScalingType.FIT_TO_PAGE.toString());
-    await scalingCrInput.updateComplete;
+    await microtasksFinished();
     validateState(
         '105', true, ScalingType.CUSTOM, ScalingType.FIT_TO_PAGE, '105');
 
@@ -161,7 +162,7 @@
 
     // Pick default scaling. This should clear the error.
     await selectOption(scalingSection, ScalingType.DEFAULT.toString());
-    await scalingCrInput.updateComplete;
+    await microtasksFinished();
     validateState('105', true, ScalingType.DEFAULT, ScalingType.DEFAULT, '105');
 
     // Custom scaling should set to last valid.
diff --git a/chrome/test/data/webui/print_preview/system_dialog_test.ts b/chrome/test/data/webui/print_preview/system_dialog_test.ts
index adf9dcd5..a1ae174 100644
--- a/chrome/test/data/webui/print_preview/system_dialog_test.ts
+++ b/chrome/test/data/webui/print_preview/system_dialog_test.ts
@@ -6,7 +6,7 @@
 import {NativeLayerImpl, PluginProxyImpl, ScalingType, whenReady} from 'chrome://print/print_preview.js';
 import {assertEquals, assertFalse, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {waitBeforeNextRender} from 'chrome://webui-test/polymer_test_util.js';
-import {eventToPromise} from 'chrome://webui-test/test_util.js';
+import {eventToPromise, microtasksFinished} from 'chrome://webui-test/test_util.js';
 
 import {NativeLayerStub} from './native_layer_stub.js';
 import {getDefaultInitialSettings, selectOption} from './print_preview_test_utils.js';
@@ -81,7 +81,7 @@
     });
   });
 
-  test('InvalidSettingsDisableLink', function() {
+  test('InvalidSettingsDisableLink', async function() {
     assertFalse(linkContainer.disabled);
     assertFalse(link.hidden);
 
@@ -95,35 +95,31 @@
     let previewCalls = 0;
 
     // Set scaling settings to custom.
-    return selectOption(scalingSettings, ScalingType.CUSTOM.toString())
-        .then(() => {
-          previewCalls = nativeLayer.getCallCount('getPreview');
+    await selectOption(scalingSettings, ScalingType.CUSTOM.toString());
+    previewCalls = nativeLayer.getCallCount('getPreview');
 
-          // Set an invalid input.
-          const scalingSettingsInput =
-              scalingSettings.shadowRoot
-                  .querySelector('print-preview-number-settings-section')!.$
-                  .userValue.inputElement;
-          scalingSettingsInput.value = '0';
-          scalingSettingsInput.dispatchEvent(
-              new CustomEvent('input', {composed: true, bubbles: true}));
+    // Set an invalid input.
+    const scalingSettingsInput =
+        scalingSettings.shadowRoot
+            .querySelector('print-preview-number-settings-section')!.$.userValue
+            .inputElement;
+    scalingSettingsInput.value = '0';
+    scalingSettingsInput.dispatchEvent(
+        new CustomEvent('input', {composed: true, bubbles: true}));
 
-          return eventToPromise('input-change', scalingSettings);
-        })
-        .then(() => {
-          // Expect disabled print button
-          const parentElement =
-              sidebar.shadowRoot!.querySelector('print-preview-button-strip')!;
-          const printButton =
-              parentElement.shadowRoot.querySelector<CrButtonElement>(
-                  '.action-button')!;
-          assertTrue(printButton.disabled);
-          assertTrue(linkContainer.disabled);
-          assertFalse(link.hidden);
-          assertTrue(link.querySelector('cr-icon-button')!.disabled);
+    await eventToPromise('input-change', scalingSettings);
+    await microtasksFinished();
+    // Expect disabled print button
+    const parentElement =
+        sidebar.shadowRoot!.querySelector('print-preview-button-strip')!;
+    const printButton = parentElement.shadowRoot.querySelector<CrButtonElement>(
+        '.action-button')!;
+    assertTrue(printButton.disabled);
+    assertTrue(linkContainer.disabled);
+    assertFalse(link.hidden);
+    assertTrue(link.querySelector('cr-icon-button')!.disabled);
 
-          // No new preview
-          assertEquals(previewCalls, nativeLayer.getCallCount('getPreview'));
-        });
+    // No new preview
+    assertEquals(previewCalls, nativeLayer.getCallCount('getPreview'));
   });
 });