@kato-lee/cdk 14.2.7 → 20.2.14

package/testing/index.d.ts

@@ -0,0 +1,98 @@
+export { AsyncFactoryFn, AsyncOptionPredicate, AsyncPredicate, BaseHarnessFilters, ComponentHarness, ComponentHarnessConstructor, ContentContainerComponentHarness, ElementDimensions, EventData, HarnessEnvironment, HarnessLoader, HarnessPredicate, HarnessQuery, LocatorFactory, LocatorFnResult, ModifierKeys, TestElement, TestKey, TextOptions } from '../harness-environment.d.js';
+
+/**
+ * Returns an error which reports that no keys have been specified.
+ * @docs-private
+ */
+declare function getNoKeysSpecifiedError(): Error;
+
+/**
+ * Gets text of element excluding certain selectors within the element.
+ * @param element Element to get text from,
+ * @param excludeSelector Selector identifying which elements to exclude,
+ */
+declare function _getTextWithExcludedElements(element: Element, excludeSelector: string): string;
+
+/**
+ * The status of the test harness auto change detection. If not diabled test harnesses will
+ * automatically trigger change detection after every action (such as a click) and before every read
+ * (such as getting the text of an element).
+ */
+interface AutoChangeDetectionStatus {
+    /** Whether auto change detection is disabled. */
+    isDisabled: boolean;
+    /**
+     * An optional callback, if present it indicates that change detection should be run immediately,
+     * while handling the status change. The callback should then be called as soon as change
+     * detection is done.
+     */
+    onDetectChangesNow?: () => void;
+}
+/**
+ * Allows a test `HarnessEnvironment` to install its own handler for auto change detection status
+ * changes.
+ * @param handler The handler for the auto change detection status.
+ */
+declare function handleAutoChangeDetectionStatus(handler: (status: AutoChangeDetectionStatus) => void): void;
+/** Allows a `HarnessEnvironment` to stop handling auto change detection status changes. */
+declare function stopHandlingAutoChangeDetectionStatus(): void;
+/**
+ * Disables the harness system's auto change detection for the duration of the given function.
+ * @param fn The function to disable auto change detection for.
+ * @return The result of the given function.
+ */
+declare function manualChangeDetection<T>(fn: () => Promise<T>): Promise<T>;
+/**
+ * Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change
+ * detection over the entire operation such that change detection occurs exactly once before
+ * resolving the values and once after.
+ * @param values A getter for the async values to resolve in parallel with batched change detection.
+ * @return The resolved values.
+ */
+declare function parallel<T1, T2, T3, T4, T5>(values: () => [
+    T1 | PromiseLike<T1>,
+    T2 | PromiseLike<T2>,
+    T3 | PromiseLike<T3>,
+    T4 | PromiseLike<T4>,
+    T5 | PromiseLike<T5>
+]): Promise<[T1, T2, T3, T4, T5]>;
+/**
+ * Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change
+ * detection over the entire operation such that change detection occurs exactly once before
+ * resolving the values and once after.
+ * @param values A getter for the async values to resolve in parallel with batched change detection.
+ * @return The resolved values.
+ */
+declare function parallel<T1, T2, T3, T4>(values: () => [
+    T1 | PromiseLike<T1>,
+    T2 | PromiseLike<T2>,
+    T3 | PromiseLike<T3>,
+    T4 | PromiseLike<T4>
+]): Promise<[T1, T2, T3, T4]>;
+/**
+ * Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change
+ * detection over the entire operation such that change detection occurs exactly once before
+ * resolving the values and once after.
+ * @param values A getter for the async values to resolve in parallel with batched change detection.
+ * @return The resolved values.
+ */
+declare function parallel<T1, T2, T3>(values: () => [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>, T3 | PromiseLike<T3>]): Promise<[T1, T2, T3]>;
+/**
+ * Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change
+ * detection over the entire operation such that change detection occurs exactly once before
+ * resolving the values and once after.
+ * @param values A getter for the async values to resolve in parallel with batched change detection.
+ * @return The resolved values.
+ */
+declare function parallel<T1, T2>(values: () => [T1 | PromiseLike<T1>, T2 | PromiseLike<T2>]): Promise<[T1, T2]>;
+/**
+ * Resolves the given list of async values in parallel (i.e. via Promise.all) while batching change
+ * detection over the entire operation such that change detection occurs exactly once before
+ * resolving the values and once after.
+ * @param values A getter for the async values to resolve in parallel with batched change detection.
+ * @return The resolved values.
+ */
+declare function parallel<T>(values: () => (T | PromiseLike<T>)[]): Promise<T[]>;
+
+export { _getTextWithExcludedElements, getNoKeysSpecifiedError, handleAutoChangeDetectionStatus, manualChangeDetection, parallel, stopHandlingAutoChangeDetectionStatus };
+export type { AutoChangeDetectionStatus };

package/testing/selenium-webdriver/index.d.ts

@@ -0,0 +1,150 @@
+import * as webdriver from 'selenium-webdriver';
+import { TestElement, ModifierKeys, TestKey, TextOptions, ElementDimensions, EventData, HarnessEnvironment, HarnessLoader } from '../../harness-environment.d.js';
+
+/** A `TestElement` implementation for WebDriver. */
+declare class SeleniumWebDriverElement implements TestElement {
+    readonly element: () => webdriver.WebElement;
+    private _stabilize;
+    constructor(element: () => webdriver.WebElement, _stabilize: () => Promise<void>);
+    /** Blur the element. */
+    blur(): Promise<void>;
+    /** Clear the element's input (for input and textarea elements only). */
+    clear(): Promise<void>;
+    /**
+     * Click the element at the default location for the current environment. If you need to guarantee
+     * the element is clicked at a specific location, consider using `click('center')` or
+     * `click(x, y)` instead.
+     */
+    click(modifiers?: ModifierKeys): Promise<void>;
+    /** Click the element at the element's center. */
+    click(location: 'center', modifiers?: ModifierKeys): Promise<void>;
+    /**
+     * Click the element at the specified coordinates relative to the top-left of the element.
+     * @param relativeX Coordinate within the element, along the X-axis at which to click.
+     * @param relativeY Coordinate within the element, along the Y-axis at which to click.
+     * @param modifiers Modifier keys held while clicking
+     */
+    click(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
+    /**
+     * Right clicks on the element at the specified coordinates relative to the top-left of it.
+     * @param relativeX Coordinate within the element, along the X-axis at which to click.
+     * @param relativeY Coordinate within the element, along the Y-axis at which to click.
+     * @param modifiers Modifier keys held while clicking
+     */
+    rightClick(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
+    /** Focus the element. */
+    focus(): Promise<void>;
+    /** Get the computed value of the given CSS property for the element. */
+    getCssValue(property: string): Promise<string>;
+    /** Hovers the mouse over the element. */
+    hover(): Promise<void>;
+    /** Moves the mouse away from the element. */
+    mouseAway(): Promise<void>;
+    /**
+     * Sends the given string to the input as a series of key presses. Also fires input events
+     * and attempts to add the string to the Element's value.
+     */
+    sendKeys(...keys: (string | TestKey)[]): Promise<void>;
+    /**
+     * Sends the given string to the input as a series of key presses. Also fires input events
+     * and attempts to add the string to the Element's value.
+     */
+    sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
+    /**
+     * Gets the text from the element.
+     * @param options Options that affect what text is included.
+     */
+    text(options?: TextOptions): Promise<string>;
+    /**
+     * Sets the value of a `contenteditable` element.
+     * @param value Value to be set on the element.
+     */
+    setContenteditableValue(value: string): Promise<void>;
+    /** Gets the value for the given attribute from the element. */
+    getAttribute(name: string): Promise<string | null>;
+    /** Checks whether the element has the given class. */
+    hasClass(name: string): Promise<boolean>;
+    /** Gets the dimensions of the element. */
+    getDimensions(): Promise<ElementDimensions>;
+    /** Gets the value of a property of an element. */
+    getProperty<T = any>(name: string): Promise<T>;
+    /** Sets the value of a property of an input. */
+    setInputValue(newValue: string): Promise<void>;
+    /** Selects the options at the specified indexes inside of a native `select` element. */
+    selectOptions(...optionIndexes: number[]): Promise<void>;
+    /** Checks whether this element matches the given selector. */
+    matchesSelector(selector: string): Promise<boolean>;
+    /** Checks whether the element is focused. */
+    isFocused(): Promise<boolean>;
+    /**
+     * Dispatches an event with a particular name.
+     * @param name Name of the event to be dispatched.
+     */
+    dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void>;
+    /** Gets the webdriver action sequence. */
+    private _actions;
+    /** Executes a function in the browser. */
+    private _executeScript;
+    /** Dispatches all the events that are part of a click event sequence. */
+    private _dispatchClickEventSequence;
+}
+
+/**
+ * An Angular framework stabilizer function that takes a callback and calls it when the application
+ * is stable, passing a boolean indicating if any work was done.
+ */
+declare interface FrameworkStabilizer {
+    (callback: (didWork: boolean) => void): void;
+}
+declare global {
+    interface Window {
+        /**
+         * These hooks are exposed by Angular to register a callback for when the application is stable
+         * (no more pending tasks).
+         *
+         * For the implementation, see: https://github.com/
+         *  angular/angular/blob/main/packages/platform-browser/src/browser/testability.ts#L30-L49
+         */
+        frameworkStabilizers: FrameworkStabilizer[];
+    }
+}
+/** Options to configure the environment. */
+interface WebDriverHarnessEnvironmentOptions {
+    /** The query function used to find DOM elements. */
+    queryFn: (selector: string, root: () => webdriver.WebElement) => Promise<webdriver.WebElement[]>;
+}
+/** Waits for angular to be ready after the page load. */
+declare function waitForAngularReady(wd: webdriver.WebDriver): Promise<void>;
+/** A `HarnessEnvironment` implementation for WebDriver. */
+declare class SeleniumWebDriverHarnessEnvironment extends HarnessEnvironment<() => webdriver.WebElement> {
+    /** The options for this environment. */
+    private _options;
+    /** Environment stabilization callback passed to the created test elements. */
+    private _stabilizeCallback;
+    protected constructor(rawRootElement: () => webdriver.WebElement, options?: WebDriverHarnessEnvironmentOptions);
+    /** Gets the ElementFinder corresponding to the given TestElement. */
+    static getNativeElement(el: TestElement): webdriver.WebElement;
+    /** Creates a `HarnessLoader` rooted at the document root. */
+    static loader(driver: webdriver.WebDriver, options?: WebDriverHarnessEnvironmentOptions): HarnessLoader;
+    /**
+     * Flushes change detection and async tasks captured in the Angular zone.
+     * In most cases it should not be necessary to call this manually. However, there may be some edge
+     * cases where it is needed to fully flush animation events.
+     */
+    forceStabilize(): Promise<void>;
+    /** @docs-private */
+    waitForTasksOutsideAngular(): Promise<void>;
+    /** Gets the root element for the document. */
+    protected getDocumentRoot(): () => webdriver.WebElement;
+    /** Creates a `TestElement` from a raw element. */
+    protected createTestElement(element: () => webdriver.WebElement): TestElement;
+    /** Creates a `HarnessLoader` rooted at the given raw element. */
+    protected createEnvironment(element: () => webdriver.WebElement): HarnessEnvironment<() => webdriver.WebElement>;
+    /**
+     * Gets a list of all elements matching the given selector under this environment's root element.
+     */
+    protected getAllRawElements(selector: string): Promise<(() => webdriver.WebElement)[]>;
+}
+
+export { SeleniumWebDriverElement, SeleniumWebDriverHarnessEnvironment, waitForAngularReady };
+export type { WebDriverHarnessEnvironmentOptions };

package/testing/testbed/index.d.ts

@@ -0,0 +1,157 @@
+import { HarnessEnvironment, HarnessLoader, TestElement, ComponentHarness, ComponentHarnessConstructor, ModifierKeys, TestKey, TextOptions, ElementDimensions, EventData } from '../../harness-environment.d.js';
+import { ComponentFixture } from '@angular/core/testing';
+
+/** Options to configure the environment. */
+interface TestbedHarnessEnvironmentOptions {
+    /** The query function used to find DOM elements. */
+    queryFn: (selector: string, root: Element) => Iterable<Element> | ArrayLike<Element>;
+}
+/** A `HarnessEnvironment` implementation for Angular's Testbed. */
+declare class TestbedHarnessEnvironment extends HarnessEnvironment<Element> {
+    private _fixture;
+    /** Whether the environment has been destroyed. */
+    private _destroyed;
+    /** Observable that emits whenever the test task state changes. */
+    private _taskState?;
+    /** The options for this environment. */
+    private _options;
+    /** Environment stabilization callback passed to the created test elements. */
+    private _stabilizeCallback;
+    protected constructor(rawRootElement: Element, _fixture: ComponentFixture<unknown>, options?: TestbedHarnessEnvironmentOptions);
+    /** Creates a `HarnessLoader` rooted at the given fixture's root element. */
+    static loader(fixture: ComponentFixture<unknown>, options?: TestbedHarnessEnvironmentOptions): HarnessLoader;
+    /**
+     * Creates a `HarnessLoader` at the document root. This can be used if harnesses are
+     * located outside of a fixture (e.g. overlays appended to the document body).
+     */
+    static documentRootLoader(fixture: ComponentFixture<unknown>, options?: TestbedHarnessEnvironmentOptions): HarnessLoader;
+    /** Gets the native DOM element corresponding to the given TestElement. */
+    static getNativeElement(el: TestElement): Element;
+    /**
+     * Creates an instance of the given harness type, using the fixture's root element as the
+     * harness's host element. This method should be used when creating a harness for the root element
+     * of a fixture, as components do not have the correct selector when they are created as the root
+     * of the fixture.
+     */
+    static harnessForFixture<T extends ComponentHarness>(fixture: ComponentFixture<unknown>, harnessType: ComponentHarnessConstructor<T>, options?: TestbedHarnessEnvironmentOptions): Promise<T>;
+    /**
+     * Flushes change detection and async tasks captured in the Angular zone.
+     * In most cases it should not be necessary to call this manually. However, there may be some edge
+     * cases where it is needed to fully flush animation events.
+     */
+    forceStabilize(): Promise<void>;
+    /**
+     * Waits for all scheduled or running async tasks to complete. This allows harness
+     * authors to wait for async tasks outside of the Angular zone.
+     */
+    waitForTasksOutsideAngular(): Promise<void>;
+    /** Gets the root element for the document. */
+    protected getDocumentRoot(): Element;
+    /** Creates a `TestElement` from a raw element. */
+    protected createTestElement(element: Element): TestElement;
+    /** Creates a `HarnessLoader` rooted at the given raw element. */
+    protected createEnvironment(element: Element): HarnessEnvironment<Element>;
+    /**
+     * Gets a list of all elements matching the given selector under this environment's root element.
+     */
+    protected getAllRawElements(selector: string): Promise<Element[]>;
+}
+
+/** A `TestElement` implementation for unit tests. */
+declare class UnitTestElement implements TestElement {
+    readonly element: Element;
+    private _stabilize;
+    constructor(element: Element, _stabilize: () => Promise<void>);
+    /** Blur the element. */
+    blur(): Promise<void>;
+    /** Clear the element's input (for input and textarea elements only). */
+    clear(): Promise<void>;
+    /**
+     * Click the element at the default location for the current environment. If you need to guarantee
+     * the element is clicked at a specific location, consider using `click('center')` or
+     * `click(x, y)` instead.
+     */
+    click(modifiers?: ModifierKeys): Promise<void>;
+    /** Click the element at the element's center. */
+    click(location: 'center', modifiers?: ModifierKeys): Promise<void>;
+    /**
+     * Click the element at the specified coordinates relative to the top-left of the element.
+     * @param relativeX Coordinate within the element, along the X-axis at which to click.
+     * @param relativeY Coordinate within the element, along the Y-axis at which to click.
+     * @param modifiers Modifier keys held while clicking
+     */
+    click(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
+    /**
+     * Right clicks on the element at the specified coordinates relative to the top-left of it.
+     * @param relativeX Coordinate within the element, along the X-axis at which to click.
+     * @param relativeY Coordinate within the element, along the Y-axis at which to click.
+     * @param modifiers Modifier keys held while clicking
+     */
+    rightClick(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
+    /** Focus the element. */
+    focus(): Promise<void>;
+    /** Get the computed value of the given CSS property for the element. */
+    getCssValue(property: string): Promise<string>;
+    /** Hovers the mouse over the element. */
+    hover(): Promise<void>;
+    /** Moves the mouse away from the element. */
+    mouseAway(): Promise<void>;
+    /**
+     * Sends the given string to the input as a series of key presses. Also fires input events
+     * and attempts to add the string to the Element's value. Note that this cannot
+     * reproduce native browser behavior for keyboard shortcuts such as Tab, Ctrl + A, etc.
+     */
+    sendKeys(...keys: (string | TestKey)[]): Promise<void>;
+    /**
+     * Sends the given string to the input as a series of key presses. Also fires input events
+     * and attempts to add the string to the Element's value.
+     */
+    sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
+    /**
+     * Gets the text from the element.
+     * @param options Options that affect what text is included.
+     */
+    text(options?: TextOptions): Promise<string>;
+    /**
+     * Sets the value of a `contenteditable` element.
+     * @param value Value to be set on the element.
+     */
+    setContenteditableValue(value: string): Promise<void>;
+    /** Gets the value for the given attribute from the element. */
+    getAttribute(name: string): Promise<string | null>;
+    /** Checks whether the element has the given class. */
+    hasClass(name: string): Promise<boolean>;
+    /** Gets the dimensions of the element. */
+    getDimensions(): Promise<ElementDimensions>;
+    /** Gets the value of a property of an element. */
+    getProperty<T = any>(name: string): Promise<T>;
+    /** Sets the value of a property of an input. */
+    setInputValue(value: string): Promise<void>;
+    /** Selects the options at the specified indexes inside of a native `select` element. */
+    selectOptions(...optionIndexes: number[]): Promise<void>;
+    /** Checks whether this element matches the given selector. */
+    matchesSelector(selector: string): Promise<boolean>;
+    /** Checks whether the element is focused. */
+    isFocused(): Promise<boolean>;
+    /**
+     * Dispatches an event with a particular name.
+     * @param name Name of the event to be dispatched.
+     */
+    dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void>;
+    /**
+     * Dispatches a pointer event on the current element if the browser supports it.
+     * @param name Name of the pointer event to be dispatched.
+     * @param clientX Coordinate of the user's pointer along the X axis.
+     * @param clientY Coordinate of the user's pointer along the Y axis.
+     * @param button Mouse button that should be pressed when dispatching the event.
+     */
+    private _dispatchPointerEventIfSupported;
+    /**
+     * Dispatches all the events that are part of a mouse event sequence
+     * and then emits a given primary event at the end, if speciifed.
+     */
+    private _dispatchMouseEventSequence;
+}
+
+export { TestbedHarnessEnvironment, UnitTestElement };
+export type { TestbedHarnessEnvironmentOptions };

package/text-field/_index.scss

@@ -1,89 +1,89 @@
-// Structural styles for the autosize text fields.
-@mixin text-field-autosize() {
-  // Remove the resize handle on autosizing textareas, because whatever height
-  // the user resized to will be overwritten once they start typing again.
-  textarea.cdk-textarea-autosize {
-    resize: none;
-  }
-
-  // This class is temporarily applied to the textarea when it is being measured. It is immediately
-  // removed when measuring is complete. We use `!important` rules here to make sure user-specified
-  // rules do not interfere with the measurement.
-  textarea.cdk-textarea-autosize-measuring {
-    @include _autosize-measuring-base;
-    height: auto !important;
-    overflow: hidden !important;
-  }
-
-  // Similar to the `cdk-textarea-autosize-measuring` class, but only applied on Firefox. We need
-  // to use this class, because Firefox has a bug where changing the `overflow` breaks the user's
-  // ability to undo/redo what they were typing (see #16629). This class is only scoped to Firefox,
-  // because the measurements there don't seem to be affected by the `height: 0`, whereas on other
-  // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.
-  // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784
-  textarea.cdk-textarea-autosize-measuring-firefox {
-    @include _autosize-measuring-base;
-    height: 0 !important;
-  }
-}
-
-// Core styles that enable monitoring autofill state of text fields.
-@mixin text-field-autofill() {
-  // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
-  // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
-  // needed to prevent LibSass from stripping the keyframes out.
-  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
-  @keyframes cdk-text-field-autofill-start {/*!*/}
-  @keyframes cdk-text-field-autofill-end {/*!*/}
-
-  .cdk-text-field-autofill-monitored:-webkit-autofill {
-    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
-    animation: cdk-text-field-autofill-start 0s 1ms;
-  }
-
-  .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
-    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
-    animation: cdk-text-field-autofill-end 0s 1ms;
-  }
-}
-
-@mixin _autosize-measuring-base {
-  // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
-  // measurement. We just have to account for it later and subtract it off the final result.
-  padding: 2px 0 !important;
-  box-sizing: content-box !important;
-}
-
-// Used to generate UIDs for keyframes used to change the text field autofill styles.
-$autofill-color-frame-count: 0;
-
-// Mixin used to apply custom background and foreground colors to an autofilled text field.
-// Based on: https://stackoverflow.com/questions/2781549/
-// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
-@mixin text-field-autofill-color($background, $foreground:'') {
-  @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {
-    to {
-      background: $background;
-      @if $foreground != '' { color: $foreground; }
-    }
-  }
-
-  &:-webkit-autofill {
-    animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
-  }
-
-  &.cdk-text-field-autofill-monitored:-webkit-autofill {
-    // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
-    // event won't fire.
-    animation: cdk-text-field-autofill-start 0s 1ms,
-               cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
-  }
-
-  $autofill-color-frame-count: $autofill-color-frame-count + 1 !global;
-}
-
-// @deprecated Use `autosize` and `autofill` instead.
-@mixin text-field {
-  @include text-field-autosize();
-  @include text-field-autofill();
-}
+// Structural styles for the autosize text fields.
+@mixin text-field-autosize() {
+  // Remove the resize handle on autosizing textareas, because whatever height
+  // the user resized to will be overwritten once they start typing again.
+  textarea.cdk-textarea-autosize {
+    resize: none;
+  }
+
+  // This class is temporarily applied to the textarea when it is being measured. It is immediately
+  // removed when measuring is complete. We use `!important` rules here to make sure user-specified
+  // rules do not interfere with the measurement.
+  textarea.cdk-textarea-autosize-measuring {
+    @include _autosize-measuring-base;
+    height: auto !important;
+    overflow: hidden !important;
+  }
+
+  // Similar to the `cdk-textarea-autosize-measuring` class, but only applied on Firefox. We need
+  // to use this class, because Firefox has a bug where changing the `overflow` breaks the user's
+  // ability to undo/redo what they were typing (see #16629). This class is only scoped to Firefox,
+  // because the measurements there don't seem to be affected by the `height: 0`, whereas on other
+  // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.
+  // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784
+  textarea.cdk-textarea-autosize-measuring-firefox {
+    @include _autosize-measuring-base;
+    height: 0 !important;
+  }
+}
+
+// Core styles that enable monitoring autofill state of text fields.
+@mixin text-field-autofill() {
+  // Keyframes that apply no styles, but allow us to monitor when a text field becomes autofilled
+  // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
+  // needed to prevent LibSass from stripping the keyframes out.
+  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
+  @keyframes cdk-text-field-autofill-start {/*!*/}
+  @keyframes cdk-text-field-autofill-end {/*!*/}
+
+  .cdk-text-field-autofill-monitored:-webkit-autofill {
+    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
+    animation: cdk-text-field-autofill-start 0s 1ms;
+  }
+
+  .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
+    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
+    animation: cdk-text-field-autofill-end 0s 1ms;
+  }
+}
+
+@mixin _autosize-measuring-base {
+  // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
+  // measurement. We just have to account for it later and subtract it off the final result.
+  padding: 2px 0 !important;
+  box-sizing: content-box !important;
+}
+
+// Used to generate UIDs for keyframes used to change the text field autofill styles.
+$autofill-color-frame-count: 0;
+
+// Mixin used to apply custom background and foreground colors to an autofilled text field.
+// Based on: https://stackoverflow.com/questions/2781549/
+// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
+@mixin text-field-autofill-color($background, $foreground:'') {
+  @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {
+    to {
+      background: $background;
+      @if $foreground != '' { color: $foreground; }
+    }
+  }
+
+  &:-webkit-autofill {
+    animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
+  }
+
+  &.cdk-text-field-autofill-monitored:-webkit-autofill {
+    // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
+    // event won't fire.
+    animation: cdk-text-field-autofill-start 0s 1ms,
+               cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;
+  }
+
+  $autofill-color-frame-count: $autofill-color-frame-count + 1 !global;
+}
+
+// @deprecated Use `autosize` and `autofill` instead.
+@mixin text-field {
+  @include text-field-autosize();
+  @include text-field-autofill();
+}