diff --git a/test/benchmarks/mdc/button/button.perf-spec.ts b/test/benchmarks/mdc/button/button.perf-spec.ts
index 7321b9a7f495..25c06cc384a1 100644
--- a/test/benchmarks/mdc/button/button.perf-spec.ts
+++ b/test/benchmarks/mdc/button/button.perf-spec.ts
@@ -32,7 +32,15 @@ describe('button performance benchmarks', () => {
ignoreBrowserSynchronization: true,
params: [],
setup: async () => await $('#show').click(),
+<<<<<<< HEAD
+<<<<<<< HEAD
work: async () => await $('.mat-mdc-raised-button').click(),
+=======
+ work: async () => await $('.mat-raised-button').click(),
+>>>>>>> f1ae4d955... test(mdc-button): add performance tests for mdc-button
+=======
+ work: async () => await $('.mat-mdc-raised-button').click(),
+>>>>>>> 63f2747fc... fixup! test(mdc-button): add performance tests for mdc-button
});
});
});
diff --git a/test/benchmarks/mdc/form-field/BUILD.bazel b/test/benchmarks/mdc/form-field/BUILD.bazel
new file mode 100644
index 000000000000..dbb36ee40a15
--- /dev/null
+++ b/test/benchmarks/mdc/form-field/BUILD.bazel
@@ -0,0 +1,23 @@
+load("@npm_angular_dev_infra_private//benchmark/component_benchmark:component_benchmark.bzl", "component_benchmark")
+
+# TODO(wagnermaciel): Update this target to provide indigo-pink in a way that doesn't require having to import it with
+# stylesUrls inside the components once `component_benchmark` supports asset injection.
+
+component_benchmark(
+ name = "benchmark",
+ driver = ":form-field.perf-spec.ts",
+ driver_deps = [
+ "@npm//@angular/dev-infra-private",
+ "@npm//protractor",
+ "@npm//@types/jasmine",
+ ],
+ ng_deps = [
+ "@npm//@angular/core",
+ "@npm//@angular/platform-browser",
+ "//src/material-experimental/mdc-form-field",
+ "//src/material-experimental/mdc-input",
+ ],
+ ng_srcs = [":app.module.ts"],
+ prefix = "",
+ styles = ["//src/material-experimental/mdc-theming:indigo_pink_prebuilt"],
+)
diff --git a/test/benchmarks/mdc/form-field/app.module.ts b/test/benchmarks/mdc/form-field/app.module.ts
new file mode 100644
index 000000000000..29ca3b3b913c
--- /dev/null
+++ b/test/benchmarks/mdc/form-field/app.module.ts
@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component, NgModule, ViewEncapsulation} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+
+/** component: mdc-form-field */
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+
+
+
+
+ Input
+
+
+
+
+ Textarea
+
+
+ `,
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['//src/material-experimental/mdc-theming/prebuilt/indigo-pink.css'],
+})
+export class FormFieldBenchmarkApp {
+ isInputVisible = false;
+ isTextareaVisible = false;
+
+ showInput() { this.isInputVisible = true; }
+ showTextarea() { this.isTextareaVisible = true; }
+
+ hide() {
+ this.isInputVisible = false;
+ this.isTextareaVisible = false;
+ }
+}
+
+
+@NgModule({
+ declarations: [FormFieldBenchmarkApp],
+ imports: [
+ BrowserModule,
+ MatFormFieldModule,
+ MatInputModule,
+ ],
+ bootstrap: [FormFieldBenchmarkApp],
+})
+export class AppModule {}
diff --git a/test/benchmarks/mdc/form-field/form-field.perf-spec.ts b/test/benchmarks/mdc/form-field/form-field.perf-spec.ts
new file mode 100755
index 000000000000..e1b0af3eeda8
--- /dev/null
+++ b/test/benchmarks/mdc/form-field/form-field.perf-spec.ts
@@ -0,0 +1,35 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {$, browser} from 'protractor';
+import {runBenchmark} from '@angular/dev-infra-private/benchmark/driver-utilities';
+
+function runFormFieldRenderBenchmark(testId: string, showBtnId: string) {
+ return runBenchmark({
+ id: testId,
+ url: '',
+ ignoreBrowserSynchronization: true,
+ params: [],
+ prepare: async () => await $('#hide').click(),
+ work: async () => await $(showBtnId).click()
+ });
+}
+
+describe('form field performance benchmarks', () => {
+ beforeAll(() => {
+ browser.rootEl = '#root';
+ });
+
+ it('renders an input in a form field', async() => {
+ await runFormFieldRenderBenchmark('input-form-field-render', '#show-input');
+ });
+
+ it('renders an textarea in a form field', async() => {
+ await runFormFieldRenderBenchmark('textarea-form-field-render', '#show-textarea');
+ });
+});