diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index e1b0625bb95..985a25735d4 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -19,7 +19,15 @@ import {
   ViewChild,
   ViewChildren,
 } from '@angular/core';
-import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';
+import {
+  async,
+  ComponentFixture,
+  fakeAsync,
+  flush,
+  inject,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
 import {
   ControlValueAccessor,
   FormControl,
@@ -47,7 +55,7 @@ import {MatSelect} from './select';
 import {
   getMatSelectDynamicMultipleError,
   getMatSelectNonArrayValueError,
-  getMatSelectNonFunctionValueError
+  getMatSelectNonFunctionValueError,
 } from './select-errors';
 
 /** The debounce interval when typing letters to select an option. */
@@ -62,731 +70,2116 @@ describe('MatSelect', () => {
   let scrolledSubject = new Subject();
   let viewportRuler: ViewportRuler;
 
-  beforeEach(fakeAsync(() => {
+  // Providers used for all mat-select tests
+  const commonProviders = [
+    {
+      provide: OverlayContainer, useFactory: () => {
+        overlayContainerElement = document.createElement('div') as HTMLElement;
+        overlayContainerElement.classList.add('cdk-overlay-container');
+
+        document.body.appendChild(overlayContainerElement);
+
+        // remove body padding to keep consistent cross-browser
+        document.body.style.padding = '0';
+        document.body.style.margin = '0';
+
+        return {getContainerElement: () => overlayContainerElement};
+      },
+    },
+    {provide: Directionality, useFactory: () => dir = {value: 'ltr'}},
+    {
+      provide: ScrollDispatcher, useFactory: () => ({
+        scrolled: () => scrolledSubject.asObservable(),
+      }),
+    },
+  ];
+
+  // NgModule imports used for all mat-select tests.
+  const commonModuleImports = [
+    MatFormFieldModule,
+    MatSelectModule,
+    ReactiveFormsModule,
+    FormsModule,
+    NoopAnimationsModule,
+  ];
+
+  /**
+   * Configures the test module for MatSelect with the given declarations. This is broken out so
+   * that we're only compiling the necessary test components for each test in order to speed up
+   * overall test time.
+   * @param declarations Components to declare for this block
+   */
+  function configureMatSelectTestingModule(declarations) {
     TestBed.configureTestingModule({
-      imports: [
-        MatFormFieldModule,
-        MatSelectModule,
-        ReactiveFormsModule,
-        FormsModule,
-        NoopAnimationsModule
-      ],
-      declarations: [
-        BasicSelect,
-        NgModelSelect,
-        ManySelects,
-        NgIfSelect,
-        SelectInitWithoutOptions,
-        SelectWithChangeEvent,
-        CustomSelectAccessor,
-        CompWithCustomSelect,
-        MultiSelect,
-        FloatPlaceholderSelect,
-        SelectWithErrorSibling,
-        ThrowsErrorOnInit,
-        BasicSelectOnPush,
-        BasicSelectOnPushPreselected,
-        SelectWithPlainTabindex,
-        SelectEarlyAccessSibling,
-        BasicSelectInitiallyHidden,
-        BasicSelectNoPlaceholder,
-        BasicSelectWithTheming,
-        ResetValuesSelect,
-        FalsyValueSelect,
-        SelectWithGroups,
-        InvalidSelectInForm,
-        BasicSelectWithoutForms,
-        BasicSelectWithoutFormsPreselected,
-        BasicSelectWithoutFormsMultiple,
-        SelectInsideFormGroup,
-        SelectWithCustomTrigger,
-        FalsyValueSelect,
-        SelectInsideFormGroup,
-        NgModelCompareWithSelect,
-        CustomErrorBehaviorSelect,
-        SingleSelectWithPreselectedArrayValues,
-      ],
-      providers: [
-        {provide: OverlayContainer, useFactory: () => {
-          overlayContainerElement = document.createElement('div') as HTMLElement;
-          overlayContainerElement.classList.add('cdk-overlay-container');
-
-          document.body.appendChild(overlayContainerElement);
-
-          // remove body padding to keep consistent cross-browser
-          document.body.style.padding = '0';
-          document.body.style.margin = '0';
-
-          return {getContainerElement: () => overlayContainerElement};
-        }},
-        {provide: Directionality, useFactory: () => dir = { value: 'ltr' }},
-        {provide: ScrollDispatcher, useFactory: () => ({
-          scrolled: () => scrolledSubject.asObservable()
-        })}
-      ]
+      imports: commonModuleImports,
+      declarations: declarations,
+      providers: commonProviders,
     }).compileComponents();
-  }));
+  }
 
-  beforeEach(fakeAsync(inject([ViewportRuler], (_ruler: ViewportRuler) => {
-    viewportRuler = _ruler;
-  })));
-
-  afterEach(fakeAsync(() => {
+  afterEach(() => {
     document.body.removeChild(overlayContainerElement);
-  }));
+  });
 
-  it('should select the proper option when the list of options is initialized at a later point',
-      fakeAsync(() => {
-        let fixture = TestBed.createComponent(SelectInitWithoutOptions);
-        let instance = fixture.componentInstance;
+  describe('core', () => {
+    beforeEach(async(() => {
+      configureMatSelectTestingModule([
+        BasicSelect,
+        MultiSelect,
+        SelectWithGroups,
+      ]);
+    }));
 
+    describe('accessibility', () => {
+      describe('for select', () => {
+        let fixture: ComponentFixture<BasicSelect>;
+        let select: HTMLElement;
+
+        beforeEach(fakeAsync(() => {
+          fixture = TestBed.createComponent(BasicSelect);
+          fixture.detectChanges();
+          select = fixture.debugElement.query(By.css('mat-select')).nativeElement;
+        }));
+
+        it('should set the role of the select to listbox', fakeAsync(() => {
+          expect(select.getAttribute('role')).toEqual('listbox');
+        }));
+
+        it('should set the aria label of the select to the placeholder', fakeAsync(() => {
+          expect(select.getAttribute('aria-label')).toEqual('Food');
+        }));
+
+        it('should support setting a custom aria-label', fakeAsync(() => {
+          fixture.componentInstance.ariaLabel = 'Custom Label';
+          fixture.detectChanges();
+
+          expect(select.getAttribute('aria-label')).toEqual('Custom Label');
+        }));
+
+        it('should not set an aria-label if aria-labelledby is specified', fakeAsync(() => {
+          fixture.componentInstance.ariaLabelledby = 'myLabelId';
+          fixture.detectChanges();
+
+          expect(select.getAttribute('aria-label')).toBeFalsy('Expected no aria-label to be set.');
+          expect(select.getAttribute('aria-labelledby')).toBe('myLabelId');
+        }));
+
+        it('should not have aria-labelledby in the DOM if it`s not specified', fakeAsync(() => {
+          fixture.detectChanges();
+          expect(select.hasAttribute('aria-labelledby')).toBeFalsy();
+        }));
+
+        it('should set the tabindex of the select to 0 by default', fakeAsync(() => {
+          expect(select.getAttribute('tabindex')).toEqual('0');
+        }));
+
+        it('should be able to override the tabindex', fakeAsync(() => {
+          fixture.componentInstance.tabIndexOverride = 3;
+          fixture.detectChanges();
+
+          expect(select.getAttribute('tabindex')).toBe('3');
+        }));
+
+        it('should set aria-required for required selects', fakeAsync(() => {
+          expect(select.getAttribute('aria-required'))
+              .toEqual('false', `Expected aria-required attr to be false for normal selects.`);
+
+          fixture.componentInstance.isRequired = true;
+          fixture.detectChanges();
+
+          expect(select.getAttribute('aria-required'))
+              .toEqual('true', `Expected aria-required attr to be true for required selects.`);
+        }));
+
+        it('should set the mat-select-required class for required selects', fakeAsync(() => {
+          expect(select.classList).not.toContain(
+              'mat-select-required', `Expected the mat-select-required class not to be set.`);
+
+          fixture.componentInstance.isRequired = true;
+          fixture.detectChanges();
+
+          expect(select.classList).toContain(
+              'mat-select-required', `Expected the mat-select-required class to be set.`);
+        }));
+
+        it('should set aria-invalid for selects that are invalid and touched', fakeAsync(() => {
+          expect(select.getAttribute('aria-invalid'))
+              .toEqual('false', `Expected aria-invalid attr to be false for valid selects.`);
+
+          fixture.componentInstance.isRequired = true;
+          fixture.componentInstance.control.markAsTouched();
+          fixture.detectChanges();
+
+          expect(select.getAttribute('aria-invalid'))
+              .toEqual('true', `Expected aria-invalid attr to be true for invalid selects.`);
+        }));
+
+        it('should set aria-disabled for disabled selects', fakeAsync(() => {
+          expect(select.getAttribute('aria-disabled')).toEqual('false');
+
+          fixture.componentInstance.control.disable();
+          fixture.detectChanges();
+
+          expect(select.getAttribute('aria-disabled')).toEqual('true');
+        }));
+
+        it('should set the tabindex of the select to -1 if disabled', fakeAsync(() => {
+          fixture.componentInstance.control.disable();
+          fixture.detectChanges();
+          expect(select.getAttribute('tabindex')).toEqual('-1');
+
+          fixture.componentInstance.control.enable();
+          fixture.detectChanges();
+          expect(select.getAttribute('tabindex')).toEqual('0');
+        }));
+
+        it('should select options via the arrow keys on a closed select', fakeAsync(() => {
+          const formControl = fixture.componentInstance.control;
+          const options = fixture.componentInstance.options.toArray();
+
+          expect(formControl.value).toBeFalsy('Expected no initial value.');
+
+          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+
+          expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
+          expect(formControl.value).toBe(options[0].value,
+              'Expected value from first option to have been set on the model.');
+
+          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+
+          // Note that the third option is skipped, because it is disabled.
+          expect(options[3].selected).toBe(true, 'Expected fourth option to be selected.');
+          expect(formControl.value).toBe(options[3].value,
+              'Expected value from fourth option to have been set on the model.');
+
+          dispatchKeyboardEvent(select, 'keydown', UP_ARROW);
+
+          expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
+          expect(formControl.value).toBe(options[1].value,
+              'Expected value from second option to have been set on the model.');
+        }));
+
+        it('should be able to select options by typing on a closed select', fakeAsync(() => {
+          const formControl = fixture.componentInstance.control;
+          const options = fixture.componentInstance.options.toArray();
+
+          expect(formControl.value).toBeFalsy('Expected no initial value.');
+
+          dispatchEvent(select, createKeyboardEvent('keydown', 80, undefined, 'p'));
+          tick(200);
+
+          expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
+          expect(formControl.value).toBe(options[1].value,
+            'Expected value from second option to have been set on the model.');
+
+          dispatchEvent(select, createKeyboardEvent('keydown', 69, undefined, 'e'));
+          tick(200);
+
+          expect(options[5].selected).toBe(true, 'Expected sixth option to be selected.');
+          expect(formControl.value).toBe(options[5].value,
+            'Expected value from sixth option to have been set on the model.');
+        }));
+
+        it('should open the panel when pressing the arrow keys on a closed multiple select',
+            fakeAsync(() => {
+              fixture.destroy();
+
+              const multiFixture = TestBed.createComponent(MultiSelect);
+              const instance = multiFixture.componentInstance;
+
+              multiFixture.detectChanges();
+              select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
+
+              const initialValue = instance.control.value;
+
+              expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
+
+              const event = dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+
+              expect(instance.select.panelOpen).toBe(true, 'Expected panel to be open.');
+              expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
+              expect(event.defaultPrevented).toBe(true, 'Expected default to be prevented.');
+            }));
+
+        it('should do nothing when typing on a closed multi-select', fakeAsync(() => {
+          fixture.destroy();
+
+          const multiFixture = TestBed.createComponent(MultiSelect);
+          const instance = multiFixture.componentInstance;
+
+          multiFixture.detectChanges();
+          select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
+
+          const initialValue = instance.control.value;
+
+          expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
+
+          dispatchEvent(select, createKeyboardEvent('keydown', 80, undefined, 'p'));
+
+          expect(instance.select.panelOpen).toBe(false, 'Expected panel to stay closed.');
+          expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
+        }));
+
+        it('should do nothing if the key manager did not change the active item', fakeAsync(() => {
+          const formControl = fixture.componentInstance.control;
+
+          expect(formControl.value).toBeNull('Expected form control value to be empty.');
+          expect(formControl.pristine).toBe(true, 'Expected form control to be clean.');
+
+          dispatchKeyboardEvent(select, 'keydown', 16); // Press a random key.
+
+          expect(formControl.value).toBeNull('Expected form control value to stay empty.');
+          expect(formControl.pristine).toBe(true, 'Expected form control to stay clean.');
+        }));
+
+        it('should continue from the selected option when the value is set programmatically',
+            fakeAsync(() => {
+              const formControl = fixture.componentInstance.control;
+
+              formControl.setValue('eggs-5');
+              fixture.detectChanges();
+
+              dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+
+              expect(formControl.value).toBe('pasta-6');
+              expect(fixture.componentInstance.options.toArray()[6].selected).toBe(true);
+            }));
+
+        it('should not shift focus when the selected options are updated programmatically ' +
+            'in a multi select', fakeAsync(() => {
+          fixture.destroy();
+
+          const multiFixture = TestBed.createComponent(MultiSelect);
+
+          multiFixture.detectChanges();
+          select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
+          multiFixture.componentInstance.select.open();
+          multiFixture.detectChanges();
+
+          const options =
+              overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+
+          options[3].focus();
+          expect(document.activeElement).toBe(options[3], 'Expected fourth option to be focused.');
+
+          multiFixture.componentInstance.control.setValue(['steak-0', 'sushi-7']);
+          multiFixture.detectChanges();
+
+          expect(document.activeElement)
+              .toBe(options[3], 'Expected fourth option to remain focused.');
+        }));
+
+        it('should not cycle through the options if the control is disabled', fakeAsync(() => {
+          const formControl = fixture.componentInstance.control;
+
+          formControl.setValue('eggs-5');
+          formControl.disable();
+
+          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+
+          expect(formControl.value).toBe('eggs-5', 'Expected value to remain unchaged.');
+        }));
+
+        it('should not wrap selection after reaching the end of the options', fakeAsync(() => {
+          const lastOption = fixture.componentInstance.options.last;
+
+          fixture.componentInstance.options.forEach(() => {
+            dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+          });
+
+          expect(lastOption.selected).toBe(true, 'Expected last option to be selected.');
+
+          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+
+          expect(lastOption.selected).toBe(true, 'Expected last option to stay selected.');
+        }));
+
+        it('should not open a multiple select when tabbing through', fakeAsync(() => {
+          fixture.destroy();
+
+          const multiFixture = TestBed.createComponent(MultiSelect);
+
+          multiFixture.detectChanges();
+          select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
+
+          expect(multiFixture.componentInstance.select.panelOpen)
+              .toBe(false, 'Expected panel to be closed initially.');
+
+          dispatchKeyboardEvent(select, 'keydown', TAB);
+
+          expect(multiFixture.componentInstance.select.panelOpen)
+              .toBe(false, 'Expected panel to stay closed.');
+        }));
+
+        it('should prevent the default action when pressing space', fakeAsync(() => {
+          const event = dispatchKeyboardEvent(select, 'keydown', SPACE);
+          expect(event.defaultPrevented).toBe(true);
+        }));
+
+        it('should consider the selection a result of a user action when closed', fakeAsync(() => {
+          const option = fixture.componentInstance.options.first;
+          const spy = jasmine.createSpy('option selection spy');
+          const subscription =
+              option.onSelectionChange.pipe(map(e => e.isUserInput)).subscribe(spy);
+
+          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+          expect(spy).toHaveBeenCalledWith(true);
+
+          subscription.unsubscribe();
+        }));
+
+        it('should be able to focus the select trigger', fakeAsync(() => {
+          document.body.focus(); // ensure that focus isn't on the trigger already
+
+          fixture.componentInstance.select.focus();
+
+          expect(document.activeElement).toBe(select, 'Expected select element to be focused.');
+        }));
+
+        // Having `aria-hidden` on the trigger avoids issues where
+        // screen readers read out the wrong amount of options.
+        it('should set aria-hidden on the trigger element', fakeAsync(() => {
+          const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+
+          expect(trigger.getAttribute('aria-hidden'))
+              .toBe('true', 'Expected aria-hidden to be true when the select is open.');
+        }));
+
+        it('should set `aria-multiselectable` to true on multi-select instances', fakeAsync(() => {
+          fixture.destroy();
+
+          const multiFixture = TestBed.createComponent(MultiSelect);
+
+          multiFixture.detectChanges();
+          select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
+
+          expect(select.getAttribute('aria-multiselectable')).toBe('true');
+        }));
+
+        it('should set aria-multiselectable false on single-selection instances', fakeAsync(() => {
+          expect(select.getAttribute('aria-multiselectable')).toBe('false');
+        }));
+
+        it('should set aria-activedescendant only while the panel is open', fakeAsync(() => {
+          fixture.componentInstance.control.setValue('chips-4');
+          fixture.detectChanges();
+
+          const host = fixture.debugElement.query(By.css('mat-select')).nativeElement;
+
+          expect(host.hasAttribute('aria-activedescendant'))
+              .toBe(false, 'Expected no aria-activedescendant on init.');
+
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          const options = overlayContainerElement.querySelectorAll('mat-option');
+
+          expect(host.getAttribute('aria-activedescendant'))
+              .toBe(options[4].id, 'Expected aria-activedescendant to match the active option.');
+
+          fixture.componentInstance.select.close();
+          fixture.detectChanges();
+          flush();
+
+          expect(host.hasAttribute('aria-activedescendant'))
+              .toBe(false, 'Expected no aria-activedescendant when closed.');
+        }));
+
+        it('should set aria-activedescendant based on the focused option', fakeAsync(() => {
+          const host = fixture.debugElement.query(By.css('mat-select')).nativeElement;
+
+          fixture.componentInstance.select.open();
+          fixture.detectChanges();
+          flush();
+
+          const options = overlayContainerElement.querySelectorAll('mat-option');
+
+          expect(host.getAttribute('aria-activedescendant')).toBe(options[0].id);
+
+          [1, 2, 3].forEach(() => {
+            dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
+            fixture.detectChanges();
+          });
+
+          expect(host.getAttribute('aria-activedescendant')).toBe(options[4].id);
+
+          dispatchKeyboardEvent(host, 'keydown', UP_ARROW);
+          fixture.detectChanges();
+
+          expect(host.getAttribute('aria-activedescendant')).toBe(options[3].id);
+        }));
+
+      });
+
+      describe('for options', () => {
+        let fixture: ComponentFixture<BasicSelect>;
+        let trigger: HTMLElement;
+        let options: NodeListOf<HTMLElement>;
+
+        beforeEach(fakeAsync(() => {
+          fixture = TestBed.createComponent(BasicSelect);
+          fixture.detectChanges();
+          trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+          trigger.click();
+          fixture.detectChanges();
+
+          options =
+              overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        }));
+
+        it('should set the role of mat-option to option', fakeAsync(() => {
+          expect(options[0].getAttribute('role')).toEqual('option');
+          expect(options[1].getAttribute('role')).toEqual('option');
+          expect(options[2].getAttribute('role')).toEqual('option');
+        }));
+
+        it('should set aria-selected on each option', fakeAsync(() => {
+          expect(options[0].getAttribute('aria-selected')).toEqual('false');
+          expect(options[1].getAttribute('aria-selected')).toEqual('false');
+          expect(options[2].getAttribute('aria-selected')).toEqual('false');
+
+          options[1].click();
+          fixture.detectChanges();
+
+          trigger.click();
+          fixture.detectChanges();
+          flush();
+
+          expect(options[0].getAttribute('aria-selected')).toEqual('false');
+          expect(options[1].getAttribute('aria-selected')).toEqual('true');
+          expect(options[2].getAttribute('aria-selected')).toEqual('false');
+        }));
+
+        it('should set the tabindex of each option according to disabled state', fakeAsync(() => {
+          expect(options[0].getAttribute('tabindex')).toEqual('0');
+          expect(options[1].getAttribute('tabindex')).toEqual('0');
+          expect(options[2].getAttribute('tabindex')).toEqual('-1');
+        }));
+
+        it('should set aria-disabled for disabled options', fakeAsync(() => {
+          expect(options[0].getAttribute('aria-disabled')).toEqual('false');
+          expect(options[1].getAttribute('aria-disabled')).toEqual('false');
+          expect(options[2].getAttribute('aria-disabled')).toEqual('true');
+
+          fixture.componentInstance.foods[2]['disabled'] = false;
+          fixture.detectChanges();
+
+          expect(options[0].getAttribute('aria-disabled')).toEqual('false');
+          expect(options[1].getAttribute('aria-disabled')).toEqual('false');
+          expect(options[2].getAttribute('aria-disabled')).toEqual('false');
+        }));
+      });
+
+      describe('for option groups', () => {
+        let fixture: ComponentFixture<SelectWithGroups>;
+        let trigger: HTMLElement;
+        let groups: NodeListOf<HTMLElement>;
+
+        beforeEach(fakeAsync(() => {
+          fixture = TestBed.createComponent(SelectWithGroups);
+          fixture.detectChanges();
+          trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+          trigger.click();
+          fixture.detectChanges();
+          groups =
+              overlayContainerElement.querySelectorAll('mat-optgroup') as NodeListOf<HTMLElement>;
+        }));
+
+        it('should set the appropriate role', fakeAsync(() => {
+          expect(groups[0].getAttribute('role')).toBe('group');
+        }));
+
+        it('should set the `aria-labelledby` attribute', fakeAsync(() => {
+          let group = groups[0];
+          let label = group.querySelector('label')!;
+
+          expect(label.getAttribute('id')).toBeTruthy('Expected label to have an id.');
+          expect(group.getAttribute('aria-labelledby'))
+              .toBe(label.getAttribute('id'), 'Expected `aria-labelledby` to match the label id.');
+        }));
+
+        it('should set the `aria-disabled` attribute if the group is disabled', fakeAsync(() => {
+          expect(groups[1].getAttribute('aria-disabled')).toBe('true');
+        }));
+      });
+    });
+
+    describe('overlay panel', () => {
+      let fixture: ComponentFixture<BasicSelect>;
+      let trigger: HTMLElement;
+
+      beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(BasicSelect);
         fixture.detectChanges();
-        flush();
-
-        // Wait for the initial writeValue promise.
-        expect(instance.select.selected).toBeFalsy();
-
-        instance.addOptions();
-        fixture.detectChanges();
-        flush();
-
-        // Wait for the next writeValue promise.
-        expect(instance.select.selected).toBe(instance.options.toArray()[1]);
+        trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
       }));
 
-  describe('overlay panel', () => {
-    let fixture: ComponentFixture<BasicSelect>;
+      it('should not throw when attempting to open too early', () => {
+        // Create component and then immediately open without running change detection
+        fixture = TestBed.createComponent(BasicSelect);
+        expect(() => fixture.componentInstance.select.open()).not.toThrow();
+      });
+
+      it('should open the panel when trigger is clicked', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        expect(fixture.componentInstance.select.panelOpen).toBe(true);
+        expect(overlayContainerElement.textContent).toContain('Steak');
+        expect(overlayContainerElement.textContent).toContain('Pizza');
+        expect(overlayContainerElement.textContent).toContain('Tacos');
+      }));
+
+      it('should close the panel when an item is clicked', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+        option.click();
+        fixture.detectChanges();
+        flush();
+
+        expect(overlayContainerElement.textContent).toEqual('');
+        expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      }));
+
+      it('should close the panel when a click occurs outside the panel', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const backdrop =
+            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+
+        backdrop.click();
+        fixture.detectChanges();
+        flush();
+
+        expect(overlayContainerElement.textContent).toEqual('');
+        expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      }));
+
+      it('should set the width of the overlay based on the trigger', fakeAsync(() => {
+        trigger.style.width = '200px';
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+        expect(pane.style.minWidth).toBe('200px');
+      }));
+
+
+
+      it('should not attempt to open a select that does not have any options', fakeAsync(() => {
+        fixture.componentInstance.foods = [];
+        fixture.detectChanges();
+
+        trigger.click();
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      }));
+
+
+
+      it('should close the panel when tabbing out', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        expect(fixture.componentInstance.select.panelOpen).toBe(true);
+
+        dispatchKeyboardEvent(trigger, 'keydown', TAB);
+        fixture.detectChanges();
+        flush();
+
+        expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      }));
+
+      it('should focus the first option when pressing HOME', fakeAsync(() => {
+        fixture.componentInstance.control.setValue('pizza-1');
+        fixture.detectChanges();
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const event = dispatchKeyboardEvent(trigger, 'keydown', HOME);
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.select._keyManager.activeItemIndex).toBe(0);
+        expect(event.defaultPrevented).toBe(true);
+      }));
+
+      it('should focus the last option when pressing END', fakeAsync(() => {
+        fixture.componentInstance.control.setValue('pizza-1');
+        fixture.detectChanges();
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const event = dispatchKeyboardEvent(trigger, 'keydown', END);
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.select._keyManager.activeItemIndex).toBe(7);
+        expect(event.defaultPrevented).toBe(true);
+      }));
+
+      it('should be able to set extra classes on the panel', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+
+        const panel = overlayContainerElement.querySelector('.mat-select-panel') as HTMLElement;
+
+        expect(panel.classList).toContain('custom-one');
+        expect(panel.classList).toContain('custom-two');
+      }));
+
+      it('should prevent the default action when pressing SPACE on an option', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+
+        const option = overlayContainerElement.querySelector('mat-option')!;
+        const event = dispatchKeyboardEvent(option, 'keydown', SPACE);
+
+        expect(event.defaultPrevented).toBe(true);
+      }));
+
+      it('should prevent the default action when pressing ENTER on an option', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+
+        const option = overlayContainerElement.querySelector('mat-option')!;
+        const event = dispatchKeyboardEvent(option, 'keydown', ENTER);
+
+        expect(event.defaultPrevented).toBe(true);
+      }));
+
+      it('should update disableRipple properly on each option', fakeAsync(() => {
+        const options = fixture.componentInstance.options.toArray();
+
+        expect(options.every(option => option.disableRipple === false))
+            .toBeTruthy('Expected all options to have disableRipple set to false initially.');
+
+        fixture.componentInstance.disableRipple = true;
+        fixture.detectChanges();
+
+        expect(options.every(option => option.disableRipple === true))
+            .toBeTruthy('Expected all options to have disableRipple set to true.');
+      }));
+
+      it('should not show ripples if they were disabled', fakeAsync(() => {
+        fixture.componentInstance.disableRipple = true;
+        fixture.detectChanges();
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const option = overlayContainerElement.querySelector('mat-option')!;
+
+        dispatchFakeEvent(option, 'mousedown');
+        dispatchFakeEvent(option, 'mouseup');
+
+        expect(option.querySelectorAll('.mat-ripple-element').length).toBe(0);
+      }));
+    });
+
+    describe('selection logic', () => {
+      let fixture: ComponentFixture<BasicSelect>;
+      let trigger: HTMLElement;
+      let formField: HTMLElement;
+
+      beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(BasicSelect);
+        fixture.detectChanges();
+        trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+        formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+      }));
+
+      it('should not float placeholder if no option is selected', fakeAsync(() => {
+        expect(formField.classList.contains('mat-form-field-should-float'))
+            .toBe(false, 'placeholder should not be floating');
+      }));
+
+      it('should focus the first option if no option is selected', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        expect(fixture.componentInstance.select._keyManager.activeItemIndex).toEqual(0);
+      }));
+
+      it('should select an option when it is clicked', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        let option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+        option.click();
+        fixture.detectChanges();
+        flush();
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+
+        expect(option.classList).toContain('mat-selected');
+        expect(fixture.componentInstance.options.first.selected).toBe(true);
+        expect(fixture.componentInstance.select.selected)
+            .toBe(fixture.componentInstance.options.first);
+      }));
+
+      it('should deselect other options when one is selected', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        let options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+
+        options[0].click();
+        fixture.detectChanges();
+        flush();
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        expect(options[1].classList).not.toContain('mat-selected');
+        expect(options[2].classList).not.toContain('mat-selected');
+
+        const optionInstances = fixture.componentInstance.options.toArray();
+        expect(optionInstances[1].selected).toBe(false);
+        expect(optionInstances[2].selected).toBe(false);
+      }));
+
+      it('should deselect other options when one is programmatically selected', fakeAsync(() => {
+        let control = fixture.componentInstance.control;
+        let foods = fixture.componentInstance.foods;
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        let options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+
+        options[0].click();
+        fixture.detectChanges();
+        flush();
+
+        control.setValue(foods[1].value);
+        fixture.detectChanges();
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+
+        expect(options[0].classList)
+            .not.toContain('mat-selected', 'Expected first option to no longer be selected');
+        expect(options[1].classList)
+            .toContain('mat-selected', 'Expected second option to be selected');
+
+        const optionInstances = fixture.componentInstance.options.toArray();
+
+        expect(optionInstances[0].selected)
+            .toBe(false, 'Expected first option to no longer be selected');
+        expect(optionInstances[1].selected)
+            .toBe(true, 'Expected second option to be selected');
+      }));
+
+      it('should remove selection if option has been removed', fakeAsync(() => {
+        let select = fixture.componentInstance.select;
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        let firstOption = overlayContainerElement.querySelectorAll('mat-option')[0] as HTMLElement;
+
+        firstOption.click();
+        fixture.detectChanges();
+
+        expect(select.selected).toBe(select.options.first, 'Expected first option to be selected.');
+
+        fixture.componentInstance.foods = [];
+        fixture.detectChanges();
+        flush();
+
+        expect(select.selected)
+            .toBeUndefined('Expected selection to be removed when option no longer exists.');
+      }));
+
+      it('should display the selected option in the trigger', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+        option.click();
+        fixture.detectChanges();
+        flush();
+
+        const value = fixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
+
+        expect(formField.classList.contains('mat-form-field-should-float'))
+            .toBe(true, 'placeholder should be floating');
+        expect(value.textContent).toContain('Steak');
+      }));
+
+      it('should focus the selected option if an option is selected', fakeAsync(() => {
+        // must wait for initial writeValue promise to finish
+        flush();
+
+        fixture.componentInstance.control.setValue('pizza-1');
+        fixture.detectChanges();
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        // must wait for animation to finish
+        fixture.detectChanges();
+        expect(fixture.componentInstance.select._keyManager.activeItemIndex).toEqual(1);
+      }));
+
+      it('should select an option that was added after initialization', fakeAsync(() => {
+        fixture.componentInstance.foods.push({viewValue: 'Potatoes', value: 'potatoes-8'});
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        options[8].click();
+        fixture.detectChanges();
+        flush();
+
+        expect(trigger.textContent).toContain('Potatoes');
+        expect(fixture.componentInstance.select.selected)
+            .toBe(fixture.componentInstance.options.last);
+      }));
+
+      it('should not select disabled options', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+
+        const options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        options[2].click();
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.select.panelOpen).toBe(true);
+        expect(options[2].classList).not.toContain('mat-selected');
+        expect(fixture.componentInstance.select.selected).toBeUndefined();
+      }));
+
+      it('should not select options inside a disabled group', fakeAsync(() => {
+        fixture.destroy();
+
+        const groupFixture = TestBed.createComponent(SelectWithGroups);
+        groupFixture.detectChanges();
+        groupFixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
+        groupFixture.detectChanges();
+
+        const disabledGroup = overlayContainerElement.querySelectorAll('mat-optgroup')[1];
+        const options = disabledGroup.querySelectorAll('mat-option');
+
+        (options[0] as HTMLElement).click();
+        groupFixture.detectChanges();
+
+        expect(groupFixture.componentInstance.select.panelOpen).toBe(true);
+        expect(options[0].classList).not.toContain('mat-selected');
+        expect(groupFixture.componentInstance.select.selected).toBeUndefined();
+      }));
+
+      it('should not throw if triggerValue accessed with no selected value', fakeAsync(() => {
+        expect(() => fixture.componentInstance.select.triggerValue).not.toThrow();
+      }));
+    });
+
+    describe('forms integration', () => {
+      let fixture: ComponentFixture<BasicSelect>;
+      let trigger: HTMLElement;
+
+      beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(BasicSelect);
+        fixture.detectChanges();
+        trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+      }));
+
+      it('should take an initial view value with reactive forms', fakeAsync(() => {
+        fixture.componentInstance.control = new FormControl('pizza-1');
+        fixture.detectChanges();
+
+        const value = fixture.debugElement.query(By.css('.mat-select-value'));
+        expect(value.nativeElement.textContent)
+            .toContain('Pizza', `Expected trigger to be populated by the control's initial value.`);
+
+        trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        expect(options[1].classList)
+            .toContain('mat-selected',
+                `Expected option with the control's initial value to be selected.`);
+      }));
+
+      it('should set the view value from the form', fakeAsync(() => {
+        let value = fixture.debugElement.query(By.css('.mat-select-value'));
+        expect(value.nativeElement.textContent.trim()).toBe('');
+
+        fixture.componentInstance.control.setValue('pizza-1');
+        fixture.detectChanges();
+
+        value = fixture.debugElement.query(By.css('.mat-select-value'));
+        expect(value.nativeElement.textContent)
+            .toContain('Pizza', `Expected trigger to be populated by the control's new value.`);
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        expect(options[1].classList).toContain(
+            'mat-selected', `Expected option with the control's new value to be selected.`);
+      }));
+
+      it('should update the form value when the view changes', fakeAsync(() => {
+        expect(fixture.componentInstance.control.value)
+            .toEqual(null, `Expected the control's value to be empty initially.`);
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+        option.click();
+        fixture.detectChanges();
+        flush();
+
+        expect(fixture.componentInstance.control.value)
+            .toEqual('steak-0', `Expected control's value to be set to the new option.`);
+      }));
+
+      it('should clear the selection when a nonexistent option value is selected', fakeAsync(() => {
+        fixture.componentInstance.control.setValue('pizza-1');
+        fixture.detectChanges();
+
+        fixture.componentInstance.control.setValue('gibberish');
+        fixture.detectChanges();
+
+        const value = fixture.debugElement.query(By.css('.mat-select-value'));
+        expect(value.nativeElement.textContent.trim())
+            .toBe('', `Expected trigger to be cleared when option value is not found.`);
+        expect(trigger.textContent)
+            .not.toContain('Pizza', `Expected trigger is cleared when option value is not found.`);
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        expect(options[1].classList)
+            .not.toContain('mat-selected', `Expected option w/ the old value not to be selected.`);
+      }));
+
+
+      it('should clear the selection when the control is reset', fakeAsync(() => {
+        fixture.componentInstance.control.setValue('pizza-1');
+        fixture.detectChanges();
+
+        fixture.componentInstance.control.reset();
+        fixture.detectChanges();
+
+        const value = fixture.debugElement.query(By.css('.mat-select-value'));
+        expect(value.nativeElement.textContent.trim())
+            .toBe('', `Expected trigger to be cleared when option value is not found.`);
+        expect(trigger.textContent)
+            .not.toContain('Pizza', `Expected trigger is cleared when option value is not found.`);
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        expect(options[1].classList)
+            .not.toContain('mat-selected', `Expected option w/ the old value not to be selected.`);
+      }));
+
+      it('should set the control to touched when the select is touched', fakeAsync(() => {
+        expect(fixture.componentInstance.control.touched)
+            .toEqual(false, `Expected the control to start off as untouched.`);
+
+        trigger.click();
+        dispatchFakeEvent(trigger, 'blur');
+        fixture.detectChanges();
+        flush();
+
+        expect(fixture.componentInstance.control.touched)
+            .toEqual(false, `Expected the control to stay untouched when menu opened.`);
+
+        const backdrop =
+            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+        backdrop.click();
+        dispatchFakeEvent(trigger, 'blur');
+        fixture.detectChanges();
+        flush();
+
+        expect(fixture.componentInstance.control.touched)
+            .toEqual(true, `Expected the control to be touched as soon as focus left the select.`);
+      }));
+
+      it('should not set touched when a disabled select is touched', fakeAsync(() => {
+        expect(fixture.componentInstance.control.touched)
+            .toBe(false, 'Expected the control to start off as untouched.');
+
+        fixture.componentInstance.control.disable();
+        dispatchFakeEvent(trigger, 'blur');
+
+        expect(fixture.componentInstance.control.touched)
+            .toBe(false, 'Expected the control to stay untouched.');
+      }));
+
+      it('should set the control to dirty when the select value changes in DOM', fakeAsync(() => {
+        expect(fixture.componentInstance.control.dirty)
+            .toEqual(false, `Expected control to start out pristine.`);
+
+        trigger.click();
+        fixture.detectChanges();
+        flush();
+
+        const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+        option.click();
+        fixture.detectChanges();
+        flush();
+
+        expect(fixture.componentInstance.control.dirty)
+            .toEqual(true, `Expected control to be dirty after value was changed by user.`);
+      }));
+
+      it('should not set the control to dirty when the value changes programmatically',
+          fakeAsync(() => {
+            expect(fixture.componentInstance.control.dirty)
+                .toEqual(false, `Expected control to start out pristine.`);
+
+            fixture.componentInstance.control.setValue('pizza-1');
+
+            expect(fixture.componentInstance.control.dirty)
+                .toEqual(false, `Expected control to stay pristine after programmatic change.`);
+          }));
+
+      it('should set an asterisk after the placeholder if control is required', fakeAsync(() => {
+        let requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'));
+        expect(requiredMarker)
+            .toBeNull(`Expected placeholder not to have an asterisk, as control was not required.`);
+
+        fixture.componentInstance.isRequired = true;
+        fixture.detectChanges();
+
+        requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'));
+        expect(requiredMarker)
+            .not.toBeNull(`Expected placeholder to have an asterisk, as control was required.`);
+      }));
+    });
+
+    describe('disabled behavior', () => {
+      it('should disable itself when control is disabled programmatically', fakeAsync(() => {
+        const fixture = TestBed.createComponent(BasicSelect);
+        fixture.detectChanges();
+
+        fixture.componentInstance.control.disable();
+        fixture.detectChanges();
+        let trigger =
+            fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+        expect(getComputedStyle(trigger).getPropertyValue('cursor'))
+            .toEqual('default', `Expected cursor to be default arrow on disabled control.`);
+
+        trigger.click();
+        fixture.detectChanges();
+
+        expect(overlayContainerElement.textContent)
+            .toEqual('', `Expected select panel to stay closed.`);
+        expect(fixture.componentInstance.select.panelOpen)
+            .toBe(false, `Expected select panelOpen property to stay false.`);
+
+        fixture.componentInstance.control.enable();
+        fixture.detectChanges();
+        expect(getComputedStyle(trigger).getPropertyValue('cursor'))
+            .toEqual('pointer', `Expected cursor to be a pointer on enabled control.`);
+
+        trigger.click();
+        fixture.detectChanges();
+
+        expect(overlayContainerElement.textContent)
+            .toContain('Steak', `Expected select panel to open normally on re-enabled control`);
+        expect(fixture.componentInstance.select.panelOpen)
+            .toBe(true, `Expected select panelOpen property to become true.`);
+      }));
+    });
+
+    describe('animations', () => {
+      let fixture: ComponentFixture<BasicSelect>;
+      let trigger: HTMLElement;
+      let formField: HTMLElement;
+
+      beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(BasicSelect);
+        fixture.detectChanges();
+
+        trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+        formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+      }));
+
+      it('should float the placeholder when the panel is open and unselected', fakeAsync(() => {
+        expect(formField.classList.contains('mat-form-field-should-float'))
+            .toBe(false, 'Expected placeholder to initially have a normal position.');
+
+        fixture.componentInstance.select.open();
+        fixture.detectChanges();
+        flush();
+
+        expect(formField.classList).toContain('mat-form-field-should-float',
+            'Expected placeholder to animate up to floating position.');
+
+        fixture.componentInstance.select.close();
+        fixture.detectChanges();
+        flush();
+
+        expect(formField.classList).not.toContain('mat-form-field-should-float',
+            'Expected placeholder to animate back down to normal position.');
+      }));
+
+      it('should add a class to the panel when the menu is done animating', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+
+        const panel = overlayContainerElement.querySelector('.mat-select-panel')!;
+
+        expect(panel.classList).not.toContain('mat-select-panel-done-animating');
+
+        flush();
+        fixture.detectChanges();
+
+        expect(panel.classList).toContain('mat-select-panel-done-animating');
+      }));
+    });
+
+    describe('keyboard scrolling', () => {
+      let fixture: ComponentFixture<BasicSelect>;
+      let host: HTMLElement;
+      let panel: HTMLElement;
+
+      beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(BasicSelect);
+
+        fixture.componentInstance.foods = [];
+
+        for (let i = 0; i < 30; i++) {
+          fixture.componentInstance.foods.push({value: `value-${i}`, viewValue: `Option ${i}`});
+        }
+
+        fixture.detectChanges();
+        fixture.componentInstance.select.open();
+        fixture.detectChanges();
+        flush();
+
+        host = fixture.debugElement.query(By.css('mat-select')).nativeElement;
+        panel = overlayContainerElement.querySelector('.mat-select-panel')! as HTMLElement;
+      }));
+
+      it('should not scroll to options that are completely in the view', fakeAsync(() => {
+        const initialScrollPosition = panel.scrollTop;
+
+        [1, 2, 3].forEach(() => {
+          dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
+        });
+
+        expect(panel.scrollTop)
+            .toBe(initialScrollPosition, 'Expected scroll position not to change');
+      }));
+
+      it('should scroll down to the active option', fakeAsync(() => {
+        for (let i = 0; i < 15; i++) {
+          dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
+        }
+
+        // <option index * height> - <panel height> = 16 * 48 - 256 = 512
+        expect(panel.scrollTop).toBe(512, 'Expected scroll to be at the 16th option.');
+      }));
+
+      it('should scroll up to the active option', fakeAsync(() => {
+        // Scroll to the bottom.
+        for (let i = 0; i < fixture.componentInstance.foods.length; i++) {
+          dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
+        }
+
+        for (let i = 0; i < 20; i++) {
+          dispatchKeyboardEvent(host, 'keydown', UP_ARROW);
+        }
+
+        // <option index * height> = 9 * 48 = 432
+        expect(panel.scrollTop).toBe(432, 'Expected scroll to be at the 9th option.');
+      }));
+
+      it('should skip option group labels', fakeAsync(() => {
+        fixture.destroy();
+
+        const groupFixture = TestBed.createComponent(SelectWithGroups);
+
+        groupFixture.detectChanges();
+        groupFixture.componentInstance.select.open();
+        groupFixture.detectChanges();
+        flush();
+
+        host = groupFixture.debugElement.query(By.css('mat-select')).nativeElement;
+        panel = overlayContainerElement.querySelector('.mat-select-panel')! as HTMLElement;
+
+        for (let i = 0; i < 5; i++) {
+          dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
+        }
+
+        // Note that we press down 5 times, but it will skip
+        // 3 options because the second group is disabled.
+        // <(option index + group labels) * height> - <panel height> = (9 + 3) * 48 - 256 = 320
+        expect(panel.scrollTop).toBe(320, 'Expected scroll to be at the 9th option.');
+      }));
+
+      it('should scroll top the top when pressing HOME', fakeAsync(() => {
+        for (let i = 0; i < 20; i++) {
+          dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
+          fixture.detectChanges();
+        }
+
+        expect(panel.scrollTop).toBeGreaterThan(0, 'Expected panel to be scrolled down.');
+
+        dispatchKeyboardEvent(host, 'keydown', HOME);
+        fixture.detectChanges();
+
+        expect(panel.scrollTop).toBe(0, 'Expected panel to be scrolled to the top');
+      }));
+
+      it('should scroll to the bottom of the panel when pressing END', fakeAsync(() => {
+        dispatchKeyboardEvent(host, 'keydown', END);
+        fixture.detectChanges();
+
+        // <option amount> * <option height> - <panel height> = 30 * 48 - 256 = 1184
+        expect(panel.scrollTop).toBe(1184, 'Expected panel to be scrolled to the bottom');
+      }));
+
+      it('should scroll to the active option when typing', fakeAsync(() => {
+        for (let i = 0; i < 15; i++) {
+          // Press the letter 'o' 15 times since all the options are named 'Option <index>'
+          dispatchEvent(host, createKeyboardEvent('keydown', 79, undefined, 'o'));
+          fixture.detectChanges();
+          tick(LETTER_KEY_DEBOUNCE_INTERVAL);
+        }
+        flush();
+
+        // <option index * height> - <panel height> = 16 * 48 - 256 = 512
+        expect(panel.scrollTop).toBe(512, 'Expected scroll to be at the 16th option.');
+      }));
+
+    });
+  });
+
+  describe('when initialized without options', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([SelectInitWithoutOptions])));
+
+    it('should select the proper option when option list is initialized later', fakeAsync(() => {
+      const fixture = TestBed.createComponent(SelectInitWithoutOptions);
+      const instance = fixture.componentInstance;
+
+      fixture.detectChanges();
+      flush();
+
+      // Wait for the initial writeValue promise.
+      expect(instance.select.selected).toBeFalsy();
+
+      instance.addOptions();
+      fixture.detectChanges();
+      flush();
+
+      // Wait for the next writeValue promise.
+      expect(instance.select.selected).toBe(instance.options.toArray()[1]);
+    }));
+  });
+
+  describe('with a selectionChange event handler', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([SelectWithChangeEvent])));
+
+    let fixture: ComponentFixture<SelectWithChangeEvent>;
     let trigger: HTMLElement;
 
     beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(BasicSelect);
+      fixture = TestBed.createComponent(SelectWithChangeEvent);
       fixture.detectChanges();
+
       trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
     }));
 
-    it('should open the panel when trigger is clicked', fakeAsync(() => {
+    it('should emit an event when the selected option has changed', fakeAsync(() => {
+      trigger.click();
+      fixture.detectChanges();
+
+      (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
+
+      expect(fixture.componentInstance.changeListener).toHaveBeenCalled();
+    }));
+
+    it('should not emit multiple change events for the same option', fakeAsync(() => {
+      trigger.click();
+      fixture.detectChanges();
+
+      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
+
+      option.click();
+      option.click();
+
+      expect(fixture.componentInstance.changeListener).toHaveBeenCalledTimes(1);
+    }));
+
+    it('should only emit one event when pressing arrow keys on closed select', fakeAsync(() => {
+      const select = fixture.debugElement.query(By.css('mat-select')).nativeElement;
+      dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+
+      expect(fixture.componentInstance.changeListener).toHaveBeenCalledTimes(1);
+    }));
+  });
+
+  describe('with ngModel', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([NgModelSelect])));
+
+    it('should disable itself when control is disabled using the property', fakeAsync(() => {
+      const fixture = TestBed.createComponent(NgModelSelect);
+      fixture.detectChanges();
+
+      fixture.componentInstance.isDisabled = true;
+      fixture.detectChanges();
+      flush();
+
+      fixture.detectChanges();
+      const trigger =
+          fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+      expect(getComputedStyle(trigger).getPropertyValue('cursor'))
+          .toEqual('default', `Expected cursor to be default arrow on disabled control.`);
+
+      trigger.click();
+      fixture.detectChanges();
+
+      expect(overlayContainerElement.textContent)
+          .toEqual('', `Expected select panel to stay closed.`);
+      expect(fixture.componentInstance.select.panelOpen)
+          .toBe(false, `Expected select panelOpen property to stay false.`);
+
+      fixture.componentInstance.isDisabled = false;
+      fixture.detectChanges();
+      flush();
+
+      fixture.detectChanges();
+      expect(getComputedStyle(trigger).getPropertyValue('cursor'))
+          .toEqual('pointer', `Expected cursor to be a pointer on enabled control.`);
+
+      trigger.click();
+      fixture.detectChanges();
+
+      expect(overlayContainerElement.textContent)
+          .toContain('Steak', `Expected select panel to open normally on re-enabled control`);
+      expect(fixture.componentInstance.select.panelOpen)
+          .toBe(true, `Expected select panelOpen property to become true.`);
+    }));
+  });
+
+  describe('with ngIf', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([NgIfSelect])));
+
+    it('should handle nesting in an ngIf', fakeAsync(() => {
+      const fixture = TestBed.createComponent(NgIfSelect);
+      fixture.detectChanges();
+
+      fixture.componentInstance.isShowing = true;
+      fixture.detectChanges();
+
+      const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+      trigger.style.width = '300px';
+
       trigger.click();
       fixture.detectChanges();
       flush();
 
+      const value = fixture.debugElement.query(By.css('.mat-select-value'));
+      expect(value.nativeElement.textContent)
+          .toContain('Pizza', `Expected trigger to be populated by the control's initial value.`);
+
+      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+      expect(pane.style.minWidth).toEqual('300px');
+
       expect(fixture.componentInstance.select.panelOpen).toBe(true);
       expect(overlayContainerElement.textContent).toContain('Steak');
       expect(overlayContainerElement.textContent).toContain('Pizza');
       expect(overlayContainerElement.textContent).toContain('Tacos');
     }));
+  });
 
-    it('should close the panel when an item is clicked', fakeAsync(() => {
-      trigger.click();
+  describe('with multiple mat-select elements in one view', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([ManySelects])));
+
+      let fixture: ComponentFixture<ManySelects>;
+      let triggers: DebugElement[];
+      let options: NodeListOf<HTMLElement>;
+
+      beforeEach(fakeAsync(() => {
+        fixture = TestBed.createComponent(ManySelects);
+        fixture.detectChanges();
+        triggers = fixture.debugElement.queryAll(By.css('.mat-select-trigger'));
+
+        triggers[0].nativeElement.click();
+        fixture.detectChanges();
+        flush();
+
+        options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+      }));
+
+      it('should set aria-owns properly', fakeAsync(() => {
+        const selects = fixture.debugElement.queryAll(By.css('mat-select'));
+
+        expect(selects[0].nativeElement.getAttribute('aria-owns'))
+            .toContain(options[0].id, `Expected aria-owns to contain IDs of its child options.`);
+        expect(selects[0].nativeElement.getAttribute('aria-owns'))
+            .toContain(options[1].id, `Expected aria-owns to contain IDs of its child options.`);
+
+        const backdrop =
+            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+        backdrop.click();
+        fixture.detectChanges();
+        flush();
+
+        triggers[1].nativeElement.click();
+        fixture.detectChanges();
+        flush();
+
+        options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        expect(selects[1].nativeElement.getAttribute('aria-owns'))
+            .toContain(options[0].id, `Expected aria-owns to contain IDs of its child options.`);
+        expect(selects[1].nativeElement.getAttribute('aria-owns'))
+            .toContain(options[1].id, `Expected aria-owns to contain IDs of its child options.`);
+      }));
+
+      it('should set the option id properly', fakeAsync(() => {
+        let firstOptionID = options[0].id;
+
+        expect(options[0].id)
+            .toContain('mat-option', `Expected option ID to have the correct prefix.`);
+        expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
+
+        const backdrop =
+            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+        backdrop.click();
+        fixture.detectChanges();
+        flush();
+
+        triggers[1].nativeElement.click();
+        fixture.detectChanges();
+        flush();
+
+        options =
+            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+        expect(options[0].id)
+            .toContain('mat-option', `Expected option ID to have the correct prefix.`);
+        expect(options[0].id).not.toEqual(firstOptionID, `Expected option IDs to be unique.`);
+        expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
+      }));
+  });
+
+  describe('with floatPlaceholder', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([FloatPlaceholderSelect])));
+
+    let fixture: ComponentFixture<FloatPlaceholderSelect>;
+    let formField: HTMLElement;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(FloatPlaceholderSelect);
       fixture.detectChanges();
-      flush();
-
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
-      option.click();
-      fixture.detectChanges();
-      flush();
-
-      expect(overlayContainerElement.textContent).toEqual('');
-      expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
     }));
 
-    it('should close the panel when a click occurs outside the panel', fakeAsync(() => {
-      trigger.click();
+    it('should be able to disable the floating placeholder', fakeAsync(() => {
+      fixture.componentInstance.floatPlaceholder = 'never';
       fixture.detectChanges();
-      flush();
 
-      const backdrop =
-          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
+      expect(formField.classList.contains('mat-form-field-can-float'))
+          .toBe(false, 'Floating placeholder should be disabled');
 
-      backdrop.click();
+      fixture.componentInstance.control.setValue('pizza-1');
       fixture.detectChanges();
-      flush();
 
-      expect(overlayContainerElement.textContent).toEqual('');
-      expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      expect(formField.classList.contains('mat-form-field-can-float'))
+          .toBe(false, 'Floating placeholder should be disabled');
     }));
 
-    it('should set the width of the overlay based on the trigger', fakeAsync(() => {
-      trigger.style.width = '200px';
+    it('should be able to always float the placeholder', fakeAsync(() => {
+      expect(fixture.componentInstance.control.value).toBeFalsy();
 
-      trigger.click();
+      fixture.componentInstance.floatPlaceholder = 'always';
       fixture.detectChanges();
-      flush();
 
-      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
-      expect(pane.style.minWidth).toBe('200px');
+      expect(formField.classList.contains('mat-form-field-can-float'))
+          .toBe(true, 'Placeholder should be able to float');
+      expect(formField.classList.contains('mat-form-field-should-float'))
+          .toBe(true, 'Placeholder should be floating');
     }));
 
+    it ('should default to global floating placeholder type', fakeAsync(() => {
+      fixture.destroy();
+
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [
+          MatFormFieldModule,
+          MatSelectModule,
+          ReactiveFormsModule,
+          FormsModule,
+          NoopAnimationsModule
+        ],
+        declarations: [
+          FloatPlaceholderSelect
+        ],
+        providers: [{ provide: MAT_PLACEHOLDER_GLOBAL_OPTIONS, useValue: { float: 'always' } }]
+      });
+
+      fixture = TestBed.createComponent(FloatPlaceholderSelect);
+      fixture.componentInstance.floatPlaceholder = null;
+      fixture.detectChanges();
+      formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+
+      expect(formField.classList.contains('mat-form-field-can-float'))
+          .toBe(true, 'Placeholder should be able to float');
+      expect(formField.classList.contains('mat-form-field-should-float'))
+          .toBe(true, 'Placeholder should be floating');
+    }));
+  });
+
+  describe('with a sibling component that throws an error', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([
+      SelectWithErrorSibling,
+      ThrowsErrorOnInit,
+    ])));
+
+    it('should not crash the browser when a sibling throws an error on init', fakeAsync(() => {
+      // Note that this test can be considered successful if the error being thrown didn't
+      // end up crashing the testing setup altogether.
+      expect(() => {
+        TestBed.createComponent(SelectWithErrorSibling).detectChanges();
+      }).toThrowError(new RegExp('Oh no!', 'g'));
+    }));
+  });
+
+  describe('with tabindex', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([SelectWithPlainTabindex])));
+
+    it('should be able to set the tabindex via the native attribute', fakeAsync(() => {
+      const fixture = TestBed.createComponent(SelectWithPlainTabindex);
+      fixture.detectChanges();
+
+      const select = fixture.debugElement.query(By.css('mat-select')).nativeElement;
+      expect(select.getAttribute('tabindex')).toBe('5');
+    }));
+  });
+
+  describe('when initially hidden', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([BasicSelectInitiallyHidden])));
+
     it('should set the width of the overlay if the element was hidden initially', fakeAsync(() => {
-      let initiallyHidden = TestBed.createComponent(BasicSelectInitiallyHidden);
+      const fixture = TestBed.createComponent(BasicSelectInitiallyHidden);
+      fixture.detectChanges();
 
-      initiallyHidden.detectChanges();
-      trigger = initiallyHidden.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+      const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
       trigger.style.width = '200px';
-
-      initiallyHidden.componentInstance.isVisible = true;
-      initiallyHidden.detectChanges();
+      fixture.componentInstance.isVisible = true;
+      fixture.detectChanges();
 
       trigger.click();
-      initiallyHidden.detectChanges();
+      fixture.detectChanges();
       flush();
 
       const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(pane.style.minWidth).toBe('200px');
     }));
+  });
 
-    it('should not attempt to open a select that does not have any options', fakeAsync(() => {
-      fixture.componentInstance.foods = [];
-      fixture.detectChanges();
-
-      trigger.click();
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.select.panelOpen).toBe(false);
-    }));
+  describe('with no placeholder', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([BasicSelectNoPlaceholder])));
 
     it('should set the width of the overlay if there is no placeholder', fakeAsync(() => {
-      let noPlaceholder = TestBed.createComponent(BasicSelectNoPlaceholder);
+      const fixture = TestBed.createComponent(BasicSelectNoPlaceholder);
 
-      noPlaceholder.detectChanges();
-      trigger = noPlaceholder.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+      fixture.detectChanges();
+      const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
 
       trigger.click();
-      noPlaceholder.detectChanges();
+      fixture.detectChanges();
       flush();
 
       const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
       expect(parseInt(pane.style.minWidth as string)).toBeGreaterThan(0);
     }));
+  });
 
-    it('should close the panel when tabbing out', fakeAsync(() => {
-      trigger.click();
+  describe('with theming', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([BasicSelectWithTheming])));
+
+    let fixture: ComponentFixture<BasicSelectWithTheming>;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(BasicSelectWithTheming);
       fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.select.panelOpen).toBe(true);
-
-      dispatchKeyboardEvent(trigger, 'keydown', TAB);
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.select.panelOpen).toBe(false);
     }));
 
-    it('should focus the first option when pressing HOME', fakeAsync(() => {
-      fixture.componentInstance.control.setValue('pizza-1');
+    it('should transfer the theme to the select panel', fakeAsync(() => {
+      fixture.componentInstance.theme = 'warn';
       fixture.detectChanges();
 
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const event = dispatchKeyboardEvent(trigger, 'keydown', HOME);
+      fixture.componentInstance.select.open();
       fixture.detectChanges();
 
-      expect(fixture.componentInstance.select._keyManager.activeItemIndex).toBe(0);
-      expect(event.defaultPrevented).toBe(true);
-    }));
-
-    it('should focus the last option when pressing END', fakeAsync(() => {
-      fixture.componentInstance.control.setValue('pizza-1');
-      fixture.detectChanges();
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const event = dispatchKeyboardEvent(trigger, 'keydown', END);
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.select._keyManager.activeItemIndex).toBe(7);
-      expect(event.defaultPrevented).toBe(true);
-    }));
-
-    it('should be able to set extra classes on the panel', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-
-      const panel = overlayContainerElement.querySelector('.mat-select-panel') as HTMLElement;
-
-      expect(panel.classList).toContain('custom-one');
-      expect(panel.classList).toContain('custom-two');
-    }));
-
-    it('should prevent the default action when pressing SPACE on an option', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-
-      const option = overlayContainerElement.querySelector('mat-option')!;
-      const event = dispatchKeyboardEvent(option, 'keydown', SPACE);
-
-      expect(event.defaultPrevented).toBe(true);
-    }));
-
-    it('should prevent the default action when pressing ENTER on an option', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-
-      const option = overlayContainerElement.querySelector('mat-option')!;
-      const event = dispatchKeyboardEvent(option, 'keydown', ENTER);
-
-      expect(event.defaultPrevented).toBe(true);
-    }));
-
-    it('should update disableRipple properly on each option', fakeAsync(() => {
-      const options = fixture.componentInstance.options.toArray();
-
-      expect(options.every(option => option.disableRipple === false))
-          .toBeTruthy('Expected all options to have disableRipple set to false initially.');
-
-      fixture.componentInstance.disableRipple = true;
-      fixture.detectChanges();
-
-      expect(options.every(option => option.disableRipple === true))
-          .toBeTruthy('Expected all options to have disableRipple set to true.');
-    }));
-
-    it('should not show ripples if they were disabled', fakeAsync(() => {
-      fixture.componentInstance.disableRipple = true;
-      fixture.detectChanges();
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const option = overlayContainerElement.querySelector('mat-option')!;
-
-      dispatchFakeEvent(option, 'mousedown');
-      dispatchFakeEvent(option, 'mouseup');
-
-      expect(option.querySelectorAll('.mat-ripple-element').length).toBe(0);
+      const panel = overlayContainerElement.querySelector('.mat-select-panel')! as HTMLElement;
+      expect(panel.classList).toContain('mat-warn');
     }));
   });
 
-  describe('selection logic', () => {
-    let fixture: ComponentFixture<BasicSelect>;
-    let trigger: HTMLElement;
-    let formField: HTMLElement;
+  describe('when invalid inside a form', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([InvalidSelectInForm])));
+
+    it('should not throw SelectionModel errors in addition to ngModel errors', fakeAsync(() => {
+      const fixture = TestBed.createComponent(InvalidSelectInForm);
+
+      // The first change detection run will throw the "ngModel is missing a name" error.
+      expect(() => fixture.detectChanges()).toThrowError(/the name attribute must be set/g);
+
+      // The second run shouldn't throw selection-model related errors.
+      expect(() => fixture.detectChanges()).not.toThrow();
+    }));
+  });
+
+  describe('with ngModel using compareWith', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([NgModelCompareWithSelect])));
+
+    let fixture: ComponentFixture<NgModelCompareWithSelect>;
+    let instance: NgModelCompareWithSelect;
 
     beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(BasicSelect);
+      fixture = TestBed.createComponent(NgModelCompareWithSelect);
+      instance = fixture.componentInstance;
       fixture.detectChanges();
-      trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-      formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
     }));
 
-    it('should not float placeholder if no option is selected', fakeAsync(() => {
-      expect(formField.classList.contains('mat-form-field-should-float'))
-          .toBe(false, 'placeholder should not be floating');
+    describe('comparing by value', () => {
+
+      it('should have a selection', fakeAsync(() => {
+        const selectedOption = instance.select.selected as MatOption;
+        expect(selectedOption.value.value).toEqual('pizza-1');
+      }));
+
+      it('should update when making a new selection', fakeAsync(() => {
+        instance.options.last._selectViaInteraction();
+        fixture.detectChanges();
+        flush();
+
+        const selectedOption = instance.select.selected as MatOption;
+        expect(instance.selectedFood.value).toEqual('tacos-2');
+        expect(selectedOption.value.value).toEqual('tacos-2');
+      }));
+    });
+
+    describe('comparing by reference', () => {
+      beforeEach(fakeAsync(() => {
+        spyOn(instance, 'compareByReference').and.callThrough();
+        instance.useCompareByReference();
+        fixture.detectChanges();
+      }));
+
+      it('should use the comparator', fakeAsync(() => {
+        expect(instance.compareByReference).toHaveBeenCalled();
+      }));
+
+      it('should initialize with no selection despite having a value', fakeAsync(() => {
+        expect(instance.selectedFood.value).toBe('pizza-1');
+        expect(instance.select.selected).toBeUndefined();
+      }));
+
+      it('should not update the selection if value is copied on change', fakeAsync(() => {
+        instance.options.first._selectViaInteraction();
+        fixture.detectChanges();
+        flush();
+
+        expect(instance.selectedFood.value).toEqual('steak-0');
+        expect(instance.select.selected).toBeUndefined();
+      }));
+
+      it('should throw an error when using a non-function comparator', fakeAsync(() => {
+        instance.useNullComparator();
+
+        expect(() => {
+          fixture.detectChanges();
+        }).toThrowError(wrappedErrorMessage(getMatSelectNonFunctionValueError()));
+      }));
+    });
+  });
+
+  describe(`when the select's value is accessed on initialization`, () => {
+    beforeEach(async(() => configureMatSelectTestingModule([SelectEarlyAccessSibling])));
+
+    it('should not throw when trying to access the selected value on init', fakeAsync(() => {
+      expect(() => {
+        TestBed.createComponent(SelectEarlyAccessSibling).detectChanges();
+      }).not.toThrow();
+    }));
+  });
+
+  describe('inside of a form group', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([SelectInsideFormGroup])));
+
+    let fixture: ComponentFixture<SelectInsideFormGroup>;
+    let testComponent: SelectInsideFormGroup;
+    let select: HTMLElement;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(SelectInsideFormGroup);
+      fixture.detectChanges();
+      testComponent = fixture.componentInstance;
+      select = fixture.debugElement.query(By.css('mat-select')).nativeElement;
     }));
 
-    it('should focus the first option if no option is selected', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.select._keyManager.activeItemIndex).toEqual(0);
+    it('should not set the invalid class on a clean select', fakeAsync(() => {
+      expect(testComponent.formGroup.untouched).toBe(true, 'Expected the form to be untouched.');
+      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid.');
+      expect(select.classList)
+          .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
+      expect(select.getAttribute('aria-invalid'))
+          .toBe('false', 'Expected aria-invalid to be set to false.');
     }));
 
-    it('should select an option when it is clicked', fakeAsync(() => {
-      trigger.click();
+    it('should appear as invalid if it becomes touched', fakeAsync(() => {
+      expect(select.classList)
+          .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
+      expect(select.getAttribute('aria-invalid'))
+          .toBe('false', 'Expected aria-invalid to be set to false.');
+
+      testComponent.formControl.markAsTouched();
       fixture.detectChanges();
-      flush();
 
-      let option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
-      option.click();
-      fixture.detectChanges();
-      flush();
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
-
-      expect(option.classList).toContain('mat-selected');
-      expect(fixture.componentInstance.options.first.selected).toBe(true);
-      expect(fixture.componentInstance.select.selected)
-          .toBe(fixture.componentInstance.options.first);
+      expect(select.classList)
+          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
+      expect(select.getAttribute('aria-invalid'))
+          .toBe('true', 'Expected aria-invalid to be set to true.');
     }));
 
-    it('should deselect other options when one is selected', fakeAsync(() => {
-      trigger.click();
+    it('should not have the invalid class when the select becomes valid', fakeAsync(() => {
+      testComponent.formControl.markAsTouched();
       fixture.detectChanges();
-      flush();
 
-      let options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+      expect(select.classList)
+          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
+      expect(select.getAttribute('aria-invalid'))
+          .toBe('true', 'Expected aria-invalid to be set to true.');
 
-      options[0].click();
+      testComponent.formControl.setValue('pizza-1');
       fixture.detectChanges();
-      flush();
 
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      expect(options[1].classList).not.toContain('mat-selected');
-      expect(options[2].classList).not.toContain('mat-selected');
-
-      const optionInstances = fixture.componentInstance.options.toArray();
-      expect(optionInstances[1].selected).toBe(false);
-      expect(optionInstances[2].selected).toBe(false);
+      expect(select.classList)
+          .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
+      expect(select.getAttribute('aria-invalid'))
+          .toBe('false', 'Expected aria-invalid to be set to false.');
     }));
 
-    it('should deselect other options when one is programmatically selected', fakeAsync(() => {
-      let control = fixture.componentInstance.control;
-      let foods = fixture.componentInstance.foods;
+    it('should appear as invalid when the parent form group is submitted', fakeAsync(() => {
+      expect(select.classList)
+          .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
+      expect(select.getAttribute('aria-invalid'))
+          .toBe('false', 'Expected aria-invalid to be set to false.');
 
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      let options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-
-      options[0].click();
-      fixture.detectChanges();
-      flush();
-
-      control.setValue(foods[1].value);
+      dispatchFakeEvent(fixture.debugElement.query(By.css('form')).nativeElement, 'submit');
       fixture.detectChanges();
 
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-
-      expect(options[0].classList)
-          .not.toContain('mat-selected', 'Expected first option to no longer be selected');
-      expect(options[1].classList)
-          .toContain('mat-selected', 'Expected second option to be selected');
-
-      const optionInstances = fixture.componentInstance.options.toArray();
-
-      expect(optionInstances[0].selected)
-          .toBe(false, 'Expected first option to no longer be selected');
-      expect(optionInstances[1].selected)
-          .toBe(true, 'Expected second option to be selected');
+      expect(select.classList)
+          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
+      expect(select.getAttribute('aria-invalid'))
+          .toBe('true', 'Expected aria-invalid to be set to true.');
     }));
 
-    it('should remove selection if option has been removed', fakeAsync(() => {
-      let select = fixture.componentInstance.select;
+    it('should render the error messages when the parent form is submitted', fakeAsync(() => {
+      const debugEl = fixture.debugElement.nativeElement;
 
-      trigger.click();
-      fixture.detectChanges();
-      flush();
+      expect(debugEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error messages');
 
-      let firstOption = overlayContainerElement.querySelectorAll('mat-option')[0] as HTMLElement;
-
-      firstOption.click();
+      dispatchFakeEvent(fixture.debugElement.query(By.css('form')).nativeElement, 'submit');
       fixture.detectChanges();
 
-      expect(select.selected).toBe(select.options.first, 'Expected first option to be selected.');
-
-      fixture.componentInstance.foods = [];
-      fixture.detectChanges();
-      flush();
-
-      expect(select.selected)
-          .toBeUndefined('Expected selection to be removed when option no longer exists.');
+      expect(debugEl.querySelectorAll('mat-error').length).toBe(1, 'Expected one error message');
     }));
 
-    it('should display the selected option in the trigger', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-      flush();
+    it('should override error matching behavior via injection token', fakeAsync(() => {
+      const errorStateMatcher: ErrorStateMatcher = {
+        isErrorState: jasmine.createSpy('error state matcher').and.returnValue(true)
+      };
 
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
-      option.click();
-      fixture.detectChanges();
-      flush();
-
-      const value = fixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
-
-      expect(formField.classList.contains('mat-form-field-should-float'))
-          .toBe(true, 'placeholder should be floating');
-      expect(value.textContent).toContain('Steak');
-    }));
-
-    it('should focus the selected option if an option is selected', fakeAsync(() => {
-      // must wait for initial writeValue promise to finish
-      flush();
-
-      fixture.componentInstance.control.setValue('pizza-1');
-      fixture.detectChanges();
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      // must wait for animation to finish
-      fixture.detectChanges();
-      expect(fixture.componentInstance.select._keyManager.activeItemIndex).toEqual(1);
-    }));
-
-    it('should select an option that was added after initialization', fakeAsync(() => {
-      fixture.componentInstance.foods.push({viewValue: 'Potatoes', value: 'potatoes-8'});
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      options[8].click();
-      fixture.detectChanges();
-      flush();
-
-      expect(trigger.textContent).toContain('Potatoes');
-      expect(fixture.componentInstance.select.selected)
-          .toBe(fixture.componentInstance.options.last);
-    }));
-
-    it('should not select disabled options', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-
-      const options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      options[2].click();
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.select.panelOpen).toBe(true);
-      expect(options[2].classList).not.toContain('mat-selected');
-      expect(fixture.componentInstance.select.selected).toBeUndefined();
-    }));
-
-    it('should not select options inside a disabled group', fakeAsync(() => {
       fixture.destroy();
 
-      const groupFixture = TestBed.createComponent(SelectWithGroups);
-      groupFixture.detectChanges();
-      groupFixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
-      groupFixture.detectChanges();
+      TestBed.resetTestingModule().configureTestingModule({
+        imports: [MatSelectModule, ReactiveFormsModule, FormsModule, NoopAnimationsModule],
+        declarations: [SelectInsideFormGroup],
+        providers: [{ provide: ErrorStateMatcher, useValue: errorStateMatcher }],
+      });
 
-      const disabledGroup = overlayContainerElement.querySelectorAll('mat-optgroup')[1];
-      const options = disabledGroup.querySelectorAll('mat-option');
+      const errorFixture = TestBed.createComponent(SelectInsideFormGroup);
+      const component = errorFixture.componentInstance;
 
-      (options[0] as HTMLElement).click();
-      groupFixture.detectChanges();
+      errorFixture.detectChanges();
 
-      expect(groupFixture.componentInstance.select.panelOpen).toBe(true);
-      expect(options[0].classList).not.toContain('mat-selected');
-      expect(groupFixture.componentInstance.select.selected).toBeUndefined();
+      expect(component.select.errorState).toBe(true);
+      expect(errorStateMatcher.isErrorState).toHaveBeenCalled();
     }));
   });
 
-  describe('forms integration', () => {
-    let fixture: ComponentFixture<BasicSelect>;
-    let trigger: HTMLElement;
+  describe('with custom error behavior', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([CustomErrorBehaviorSelect])));
+
+    it('should be able to override the error matching behavior via an @Input', fakeAsync(() => {
+      const fixture = TestBed.createComponent(CustomErrorBehaviorSelect);
+      const component = fixture.componentInstance;
+      const matcher = jasmine.createSpy('error state matcher').and.returnValue(true);
 
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(BasicSelect);
       fixture.detectChanges();
-      trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+
+      expect(component.control.invalid).toBe(false);
+      expect(component.select.errorState).toBe(false);
+
+      fixture.componentInstance.errorStateMatcher = { isErrorState: matcher };
+      fixture.detectChanges();
+
+      expect(component.select.errorState).toBe(true);
+      expect(matcher).toHaveBeenCalled();
     }));
+  });
 
-    it('should take an initial view value with reactive forms', fakeAsync(() => {
-      fixture.componentInstance.control = new FormControl('pizza-1');
-      fixture.detectChanges();
+  describe('with preselected array values', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([
+      SingleSelectWithPreselectedArrayValues,
+    ])));
 
-      const value = fixture.debugElement.query(By.css('.mat-select-value'));
-      expect(value.nativeElement.textContent)
-          .toContain('Pizza', `Expected trigger to be populated by the control's initial value.`);
-
-      trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-      trigger.click();
+    it('should be able to preselect an array value in single-selection mode', fakeAsync(() => {
+      const fixture = TestBed.createComponent(SingleSelectWithPreselectedArrayValues);
       fixture.detectChanges();
       flush();
+      fixture.detectChanges();
 
-      const options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      expect(options[1].classList)
-          .toContain('mat-selected',
-              `Expected option with the control's initial value to be selected.`);
+      const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+
+      expect(trigger.textContent).toContain('Pizza');
+      expect(fixture.componentInstance.options.toArray()[1].selected).toBe(true);
     }));
+  });
 
-    it('should set the view value from the form', fakeAsync(() => {
-      let value = fixture.debugElement.query(By.css('.mat-select-value'));
-      expect(value.nativeElement.textContent.trim()).toBe('');
+  describe('with custom value accessor', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([
+      CompWithCustomSelect,
+      CustomSelectAccessor,
+    ])));
 
-      fixture.componentInstance.control.setValue('pizza-1');
+    it('should support use inside a custom value accessor', fakeAsync(() => {
+      const fixture = TestBed.createComponent(CompWithCustomSelect);
+      spyOn(fixture.componentInstance.customAccessor, 'writeValue');
       fixture.detectChanges();
 
-      value = fixture.debugElement.query(By.css('.mat-select-value'));
-      expect(value.nativeElement.textContent)
-          .toContain('Pizza', `Expected trigger to be populated by the control's new value.`);
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      expect(options[1].classList).toContain(
-          'mat-selected', `Expected option with the control's new value to be selected.`);
+      expect(fixture.componentInstance.customAccessor.select.ngControl)
+          .toBeFalsy('Expected mat-select NOT to inherit control from parent value accessor.');
+      expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
     }));
+  });
 
-    it('should update the form value when the view changes', fakeAsync(() => {
-      expect(fixture.componentInstance.control.value)
-          .toEqual(null, `Expected the control's value to be empty initially.`);
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
-      option.click();
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.control.value)
-          .toEqual('steak-0', `Expected control's value to be set to the new option.`);
-    }));
-
-    it('should clear the selection when a nonexistent option value is selected', fakeAsync(() => {
-      fixture.componentInstance.control.setValue('pizza-1');
-      fixture.detectChanges();
-
-      fixture.componentInstance.control.setValue('gibberish');
-      fixture.detectChanges();
-
-      const value = fixture.debugElement.query(By.css('.mat-select-value'));
-      expect(value.nativeElement.textContent.trim())
-          .toBe('', `Expected trigger to be cleared when option value is not found.`);
-      expect(trigger.textContent)
-          .not.toContain('Pizza', `Expected trigger to be cleared when option value is not found.`);
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      expect(options[1].classList)
-          .not.toContain('mat-selected', `Expected option with the old value not to be selected.`);
-    }));
-
-
-    it('should clear the selection when the control is reset', fakeAsync(() => {
-      fixture.componentInstance.control.setValue('pizza-1');
-      fixture.detectChanges();
-
-      fixture.componentInstance.control.reset();
-      fixture.detectChanges();
-
-      const value = fixture.debugElement.query(By.css('.mat-select-value'));
-      expect(value.nativeElement.textContent.trim())
-          .toBe('', `Expected trigger to be cleared when option value is not found.`);
-      expect(trigger.textContent)
-          .not.toContain('Pizza', `Expected trigger to be cleared when option value is not found.`);
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const options =
-          overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      expect(options[1].classList)
-          .not.toContain('mat-selected', `Expected option with the old value not to be selected.`);
-    }));
-
-    it('should set the control to touched when the select is touched', fakeAsync(() => {
-      expect(fixture.componentInstance.control.touched)
-          .toEqual(false, `Expected the control to start off as untouched.`);
-
-      trigger.click();
-      dispatchFakeEvent(trigger, 'blur');
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.control.touched)
-          .toEqual(false, `Expected the control to stay untouched when menu opened.`);
-
-      const backdrop =
-          overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-      backdrop.click();
-      dispatchFakeEvent(trigger, 'blur');
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.control.touched)
-          .toEqual(true, `Expected the control to be touched as soon as focus left the select.`);
-    }));
-
-    it('should not set touched when a disabled select is touched', fakeAsync(() => {
-      expect(fixture.componentInstance.control.touched)
-          .toBe(false, 'Expected the control to start off as untouched.');
-
-      fixture.componentInstance.control.disable();
-      dispatchFakeEvent(trigger, 'blur');
-
-      expect(fixture.componentInstance.control.touched)
-          .toBe(false, 'Expected the control to stay untouched.');
-    }));
-
-    it('should set the control to dirty when the select value changes in the DOM', fakeAsync(() => {
-      expect(fixture.componentInstance.control.dirty)
-          .toEqual(false, `Expected control to start out pristine.`);
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
-      option.click();
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.control.dirty)
-          .toEqual(true, `Expected control to be dirty after value was changed by user.`);
-    }));
-
-    it('should not set the control to dirty when the value changes programmatically',
-        fakeAsync(() => {
-          expect(fixture.componentInstance.control.dirty)
-              .toEqual(false, `Expected control to start out pristine.`);
-
-          fixture.componentInstance.control.setValue('pizza-1');
-
-          expect(fixture.componentInstance.control.dirty)
-              .toEqual(false, `Expected control to stay pristine after programmatic change.`);
-        }));
-
-    it('should set an asterisk after the placeholder if the control is required', fakeAsync(() => {
-      let requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'));
-      expect(requiredMarker)
-          .toBeNull(`Expected placeholder not to have an asterisk, as control was not required.`);
-
-      fixture.componentInstance.isRequired = true;
-      fixture.detectChanges();
-
-      requiredMarker = fixture.debugElement.query(By.css('.mat-form-field-required-marker'));
-      expect(requiredMarker)
-          .not.toBeNull(`Expected placeholder to have an asterisk, as control was required.`);
-    }));
+  describe('with a falsy value', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([FalsyValueSelect])));
 
     it('should be able to programmatically select a falsy option', fakeAsync(() => {
-      fixture.destroy();
+      const fixture = TestBed.createComponent(FalsyValueSelect);
 
-      const falsyFixture = TestBed.createComponent(FalsyValueSelect);
-
-      falsyFixture.detectChanges();
-      falsyFixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
-      falsyFixture.componentInstance.control.setValue(0);
-      falsyFixture.detectChanges();
+      fixture.detectChanges();
+      fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement.click();
+      fixture.componentInstance.control.setValue(0);
+      fixture.detectChanges();
       flush();
 
-      expect(falsyFixture.componentInstance.options.first.selected)
+      expect(fixture.componentInstance.options.first.selected)
           .toBe(true, 'Expected first option to be selected');
       expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList)
           .toContain('mat-selected', 'Expected first option to be selected');
     }));
   });
 
-  describe('selection without Angular forms', () => {
+  describe('with OnPush', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([
+      BasicSelectOnPush,
+      BasicSelectOnPushPreselected,
+    ])));
+
+    it('should set the trigger text based on the value when initialized', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicSelectOnPushPreselected);
+
+      fixture.detectChanges();
+      flush();
+
+      const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+
+      fixture.detectChanges();
+
+      expect(trigger.textContent).toContain('Pizza');
+    }));
+
+    it('should update the trigger based on the value', fakeAsync(() => {
+      const fixture = TestBed.createComponent(BasicSelectOnPush);
+      fixture.detectChanges();
+      const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+
+      fixture.componentInstance.control.setValue('pizza-1');
+      fixture.detectChanges();
+
+      expect(trigger.textContent).toContain('Pizza');
+
+      fixture.componentInstance.control.reset();
+      fixture.detectChanges();
+
+      expect(trigger.textContent).not.toContain('Pizza');
+    }));
+  });
+
+  describe('with custom trigger', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([SelectWithCustomTrigger])));
+
+    it('should allow the user to customize the label', fakeAsync(() => {
+      const fixture = TestBed.createComponent(SelectWithCustomTrigger);
+      fixture.detectChanges();
+
+      fixture.componentInstance.control.setValue('pizza-1');
+      fixture.detectChanges();
+
+      const label = fixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
+
+      expect(label.textContent).toContain('azziP',
+          'Expected the displayed text to be "Pizza" in reverse.');
+    }));
+  });
+
+  describe('when reseting the value by setting null or undefined', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([ResetValuesSelect])));
+
+    let fixture: ComponentFixture<ResetValuesSelect>;
+    let trigger: HTMLElement;
+    let formField: HTMLElement;
+    let options: NodeListOf<HTMLElement>;
+
+    beforeEach(fakeAsync(() => {
+      fixture = TestBed.createComponent(ResetValuesSelect);
+      fixture.detectChanges();
+      trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
+      formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
+
+      trigger.click();
+      fixture.detectChanges();
+      flush();
+
+      options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
+      options[0].click();
+      fixture.detectChanges();
+      flush();
+    }));
+
+    it('should reset when an option with an undefined value is selected', fakeAsync(() => {
+      options[4].click();
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.control.value).toBeUndefined();
+      expect(fixture.componentInstance.select.selected).toBeFalsy();
+      expect(formField.classList).not.toContain('mat-form-field-should-float');
+      expect(trigger.textContent).not.toContain('Undefined');
+    }));
+
+    it('should reset when an option with a null value is selected', fakeAsync(() => {
+      options[5].click();
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.control.value).toBeNull();
+      expect(fixture.componentInstance.select.selected).toBeFalsy();
+      expect(formField.classList).not.toContain('mat-form-field-should-float');
+      expect(trigger.textContent).not.toContain('Null');
+    }));
+
+    it('should reset when a blank option is selected', fakeAsync(() => {
+      options[6].click();
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.control.value).toBeUndefined();
+      expect(fixture.componentInstance.select.selected).toBeFalsy();
+      expect(formField.classList).not.toContain('mat-form-field-should-float');
+      expect(trigger.textContent).not.toContain('None');
+    }));
+
+    it('should not reset when any other falsy option is selected', fakeAsync(() => {
+      options[3].click();
+      fixture.detectChanges();
+      flush();
+
+      expect(fixture.componentInstance.control.value).toBe(false);
+      expect(fixture.componentInstance.select.selected).toBeTruthy();
+      expect(formField.classList).toContain('mat-form-field-should-float');
+      expect(trigger.textContent).toContain('Falsy');
+    }));
+
+    it('should not consider the reset values as selected when resetting the form control',
+        fakeAsync(() => {
+          expect(formField.classList).toContain('mat-form-field-should-float');
+
+          fixture.componentInstance.control.reset();
+          fixture.detectChanges();
+
+          expect(fixture.componentInstance.control.value).toBeNull();
+          expect(fixture.componentInstance.select.selected).toBeFalsy();
+          expect(formField.classList).not.toContain('mat-formf-field-should-float');
+          expect(trigger.textContent).not.toContain('Null');
+          expect(trigger.textContent).not.toContain('Undefined');
+        }));
+  });
+
+  describe('without Angular forms', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([
+      BasicSelectWithoutForms,
+      BasicSelectWithoutFormsPreselected,
+      BasicSelectWithoutFormsMultiple,
+    ])));
+
     it('should set the value when options are clicked', fakeAsync(() => {
       const fixture = TestBed.createComponent(BasicSelectWithoutForms);
 
@@ -939,152 +2332,17 @@ describe('MatSelect', () => {
     }));
   });
 
-  describe('disabled behavior', () => {
-    it('should disable itself when control is disabled programmatically', fakeAsync(() => {
-      const fixture = TestBed.createComponent(BasicSelect);
-      fixture.detectChanges();
-
-      fixture.componentInstance.control.disable();
-      fixture.detectChanges();
-      let trigger =
-          fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-      expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-          .toEqual('default', `Expected cursor to be default arrow on disabled control.`);
-
-      trigger.click();
-      fixture.detectChanges();
-
-      expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected select panel to stay closed.`);
-      expect(fixture.componentInstance.select.panelOpen)
-          .toBe(false, `Expected select panelOpen property to stay false.`);
-
-      fixture.componentInstance.control.enable();
-      fixture.detectChanges();
-      expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-          .toEqual('pointer', `Expected cursor to be a pointer on enabled control.`);
-
-      trigger.click();
-      fixture.detectChanges();
-
-      expect(overlayContainerElement.textContent)
-          .toContain('Steak', `Expected select panel to open normally on re-enabled control`);
-      expect(fixture.componentInstance.select.panelOpen)
-          .toBe(true, `Expected select panelOpen property to become true.`);
-    }));
-
-    it('should disable itself when control is disabled using the property', fakeAsync(() => {
-      const fixture = TestBed.createComponent(NgModelSelect);
-      fixture.detectChanges();
-
-      fixture.componentInstance.isDisabled = true;
-      fixture.detectChanges();
-      flush();
-
-      fixture.detectChanges();
-      let trigger =
-          fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-      expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-          .toEqual('default', `Expected cursor to be default arrow on disabled control.`);
-
-      trigger.click();
-      fixture.detectChanges();
-
-      expect(overlayContainerElement.textContent)
-          .toEqual('', `Expected select panel to stay closed.`);
-      expect(fixture.componentInstance.select.panelOpen)
-          .toBe(false, `Expected select panelOpen property to stay false.`);
-
-      fixture.componentInstance.isDisabled = false;
-      fixture.detectChanges();
-      flush();
-
-      fixture.detectChanges();
-      expect(getComputedStyle(trigger).getPropertyValue('cursor'))
-          .toEqual('pointer', `Expected cursor to be a pointer on enabled control.`);
-
-      trigger.click();
-      fixture.detectChanges();
-
-      expect(overlayContainerElement.textContent)
-          .toContain('Steak', `Expected select panel to open normally on re-enabled control`);
-      expect(fixture.componentInstance.select.panelOpen)
-          .toBe(true, `Expected select panelOpen property to become true.`);
-    }));
-
-    it('should be able to preselect an array value in single-selection mode', fakeAsync(() => {
-      const fixture = TestBed.createComponent(SingleSelectWithPreselectedArrayValues);
-      fixture.detectChanges();
-      flush();
-      fixture.detectChanges();
-
-      const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-
-      expect(trigger.textContent).toContain('Pizza');
-      expect(fixture.componentInstance.options.toArray()[1].selected).toBe(true);
-    }));
-  });
-
-  describe('misc forms', () => {
-    it('should support use inside a custom value accessor', fakeAsync(() => {
-      const fixture = TestBed.createComponent(CompWithCustomSelect);
-      spyOn(fixture.componentInstance.customAccessor, 'writeValue');
-      fixture.detectChanges();
-
-      expect(fixture.componentInstance.customAccessor.select.ngControl)
-          .toBeFalsy('Expected mat-select NOT to inherit control from parent value accessor.');
-      expect(fixture.componentInstance.customAccessor.writeValue).toHaveBeenCalled();
-    }));
-  });
-
-  describe('animations', () => {
-    let fixture: ComponentFixture<BasicSelect>;
-    let trigger: HTMLElement;
-    let formField: HTMLElement;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(BasicSelect);
-      fixture.detectChanges();
-
-      trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-      formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
-    }));
-
-    it('should float the placeholder when the panel is open and unselected', fakeAsync(() => {
-      expect(formField.classList.contains('mat-form-field-should-float'))
-          .toBe(false, 'Expected placeholder to initially have a normal position.');
-
-      fixture.componentInstance.select.open();
-      fixture.detectChanges();
-      flush();
-
-      expect(formField.classList).toContain('mat-form-field-should-float',
-          'Expected placeholder to animate up to floating position.');
-
-      fixture.componentInstance.select.close();
-      fixture.detectChanges();
-      flush();
-
-      expect(formField.classList).not.toContain('mat-form-field-should-float',
-          'Expected placeholder to animate back down to normal position.');
-    }));
-
-    it('should add a class to the panel when the menu is done animating', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-
-      const panel = overlayContainerElement.querySelector('.mat-select-panel')!;
-
-      expect(panel.classList).not.toContain('mat-select-panel-done-animating');
-
-      flush();
-      fixture.detectChanges();
-
-      expect(panel.classList).toContain('mat-select-panel-done-animating');
-    }));
-  });
-
   describe('positioning', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([
+      BasicSelect,
+      MultiSelect,
+      SelectWithGroups,
+    ])));
+
+    beforeEach((inject([ViewportRuler], (vr: ViewportRuler) => {
+      viewportRuler = vr;
+    })));
+
     let fixture: ComponentFixture<BasicSelect>;
     let trigger: HTMLElement;
     let select: HTMLElement;
@@ -1883,780 +3141,9 @@ describe('MatSelect', () => {
     });
   });
 
-  describe('accessibility', () => {
-    describe('for select', () => {
-      let fixture: ComponentFixture<BasicSelect>;
-      let select: HTMLElement;
+  describe('with multiple selection', () => {
+    beforeEach(async(() => configureMatSelectTestingModule([MultiSelect])));
 
-      beforeEach(fakeAsync(() => {
-        fixture = TestBed.createComponent(BasicSelect);
-        fixture.detectChanges();
-        select = fixture.debugElement.query(By.css('mat-select')).nativeElement;
-      }));
-
-      it('should set the role of the select to listbox', fakeAsync(() => {
-        expect(select.getAttribute('role')).toEqual('listbox');
-      }));
-
-      it('should set the aria label of the select to the placeholder', fakeAsync(() => {
-        expect(select.getAttribute('aria-label')).toEqual('Food');
-      }));
-
-      it('should support setting a custom aria-label', fakeAsync(() => {
-        fixture.componentInstance.ariaLabel = 'Custom Label';
-        fixture.detectChanges();
-
-        expect(select.getAttribute('aria-label')).toEqual('Custom Label');
-      }));
-
-      it('should not set an aria-label if aria-labelledby is specified', fakeAsync(() => {
-        fixture.componentInstance.ariaLabelledby = 'myLabelId';
-        fixture.detectChanges();
-
-        expect(select.getAttribute('aria-label')).toBeFalsy('Expected no aria-label to be set.');
-        expect(select.getAttribute('aria-labelledby')).toBe('myLabelId');
-      }));
-
-      it('should not have aria-labelledby in the DOM if it`s not specified', fakeAsync(() => {
-        fixture.detectChanges();
-        expect(select.hasAttribute('aria-labelledby')).toBeFalsy();
-      }));
-
-      it('should set the tabindex of the select to 0 by default', fakeAsync(() => {
-        expect(select.getAttribute('tabindex')).toEqual('0');
-      }));
-
-      it('should be able to override the tabindex', fakeAsync(() => {
-        fixture.componentInstance.tabIndexOverride = 3;
-        fixture.detectChanges();
-
-        expect(select.getAttribute('tabindex')).toBe('3');
-      }));
-
-      it('should be able to set the tabindex via the native attribute', fakeAsync(() => {
-        fixture.destroy();
-
-        const plainTabindexFixture = TestBed.createComponent(SelectWithPlainTabindex);
-
-        plainTabindexFixture.detectChanges();
-        select = plainTabindexFixture.debugElement.query(By.css('mat-select')).nativeElement;
-
-        expect(select.getAttribute('tabindex')).toBe('5');
-      }));
-
-      it('should set aria-required for required selects', fakeAsync(() => {
-        expect(select.getAttribute('aria-required'))
-            .toEqual('false', `Expected aria-required attr to be false for normal selects.`);
-
-        fixture.componentInstance.isRequired = true;
-        fixture.detectChanges();
-
-        expect(select.getAttribute('aria-required'))
-            .toEqual('true', `Expected aria-required attr to be true for required selects.`);
-      }));
-
-      it('should set the mat-select-required class for required selects', fakeAsync(() => {
-        expect(select.classList).not.toContain(
-            'mat-select-required', `Expected the mat-select-required class not to be set.`);
-
-        fixture.componentInstance.isRequired = true;
-        fixture.detectChanges();
-
-        expect(select.classList).toContain(
-            'mat-select-required', `Expected the mat-select-required class to be set.`);
-      }));
-
-      it('should set aria-invalid for selects that are invalid and touched', fakeAsync(() => {
-        expect(select.getAttribute('aria-invalid'))
-            .toEqual('false', `Expected aria-invalid attr to be false for valid selects.`);
-
-        fixture.componentInstance.isRequired = true;
-        fixture.componentInstance.control.markAsTouched();
-        fixture.detectChanges();
-
-        expect(select.getAttribute('aria-invalid'))
-            .toEqual('true', `Expected aria-invalid attr to be true for invalid selects.`);
-      }));
-
-      it('should set aria-disabled for disabled selects', fakeAsync(() => {
-        expect(select.getAttribute('aria-disabled')).toEqual('false');
-
-        fixture.componentInstance.control.disable();
-        fixture.detectChanges();
-
-        expect(select.getAttribute('aria-disabled')).toEqual('true');
-      }));
-
-      it('should set the tabindex of the select to -1 if disabled', fakeAsync(() => {
-        fixture.componentInstance.control.disable();
-        fixture.detectChanges();
-        expect(select.getAttribute('tabindex')).toEqual('-1');
-
-        fixture.componentInstance.control.enable();
-        fixture.detectChanges();
-        expect(select.getAttribute('tabindex')).toEqual('0');
-      }));
-
-      it('should be able to select options via the arrow keys on a closed select', fakeAsync(() => {
-        const formControl = fixture.componentInstance.control;
-        const options = fixture.componentInstance.options.toArray();
-
-        expect(formControl.value).toBeFalsy('Expected no initial value.');
-
-        dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-
-        expect(options[0].selected).toBe(true, 'Expected first option to be selected.');
-        expect(formControl.value).toBe(options[0].value,
-            'Expected value from first option to have been set on the model.');
-
-        dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-        dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-
-        // Note that the third option is skipped, because it is disabled.
-        expect(options[3].selected).toBe(true, 'Expected fourth option to be selected.');
-        expect(formControl.value).toBe(options[3].value,
-            'Expected value from fourth option to have been set on the model.');
-
-        dispatchKeyboardEvent(select, 'keydown', UP_ARROW);
-
-        expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
-        expect(formControl.value).toBe(options[1].value,
-            'Expected value from second option to have been set on the model.');
-      }));
-
-      it('should be able to select options by typing on a closed select', fakeAsync(() => {
-        const formControl = fixture.componentInstance.control;
-        const options = fixture.componentInstance.options.toArray();
-
-        expect(formControl.value).toBeFalsy('Expected no initial value.');
-
-        dispatchEvent(select, createKeyboardEvent('keydown', 80, undefined, 'p'));
-        tick(200);
-
-        expect(options[1].selected).toBe(true, 'Expected second option to be selected.');
-        expect(formControl.value).toBe(options[1].value,
-          'Expected value from second option to have been set on the model.');
-
-        dispatchEvent(select, createKeyboardEvent('keydown', 69, undefined, 'e'));
-        tick(200);
-
-        expect(options[5].selected).toBe(true, 'Expected sixth option to be selected.');
-        expect(formControl.value).toBe(options[5].value,
-          'Expected value from sixth option to have been set on the model.');
-      }));
-
-      it('should open the panel when pressing the arrow keys on a closed multiple select',
-          fakeAsync(() => {
-            fixture.destroy();
-
-            const multiFixture = TestBed.createComponent(MultiSelect);
-            const instance = multiFixture.componentInstance;
-
-            multiFixture.detectChanges();
-            select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
-
-            const initialValue = instance.control.value;
-
-            expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
-
-            const event = dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-
-            expect(instance.select.panelOpen).toBe(true, 'Expected panel to be open.');
-            expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
-            expect(event.defaultPrevented).toBe(true, 'Expected default to be prevented.');
-          }));
-
-      it('should do nothing when typing on a closed multi-select', fakeAsync(() => {
-        fixture.destroy();
-
-        const multiFixture = TestBed.createComponent(MultiSelect);
-        const instance = multiFixture.componentInstance;
-
-        multiFixture.detectChanges();
-        select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
-
-        const initialValue = instance.control.value;
-
-        expect(instance.select.panelOpen).toBe(false, 'Expected panel to be closed.');
-
-        dispatchEvent(select, createKeyboardEvent('keydown', 80, undefined, 'p'));
-
-        expect(instance.select.panelOpen).toBe(false, 'Expected panel to stay closed.');
-        expect(instance.control.value).toBe(initialValue, 'Expected value to stay the same.');
-      }));
-
-      it('should do nothing if the key manager did not change the active item', fakeAsync(() => {
-        const formControl = fixture.componentInstance.control;
-
-        expect(formControl.value).toBeNull('Expected form control value to be empty.');
-        expect(formControl.pristine).toBe(true, 'Expected form control to be clean.');
-
-        dispatchKeyboardEvent(select, 'keydown', 16); // Press a random key.
-
-        expect(formControl.value).toBeNull('Expected form control value to stay empty.');
-        expect(formControl.pristine).toBe(true, 'Expected form control to stay clean.');
-      }));
-
-      it('should continue from the selected option when the value is set programmatically',
-          fakeAsync(() => {
-            const formControl = fixture.componentInstance.control;
-
-            formControl.setValue('eggs-5');
-            fixture.detectChanges();
-
-            dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-
-            expect(formControl.value).toBe('pasta-6');
-            expect(fixture.componentInstance.options.toArray()[6].selected).toBe(true);
-          }));
-
-      it('should not shift focus when the selected options are updated programmatically ' +
-          'in a multi select', fakeAsync(() => {
-        fixture.destroy();
-
-        const multiFixture = TestBed.createComponent(MultiSelect);
-
-        multiFixture.detectChanges();
-        select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
-        multiFixture.componentInstance.select.open();
-        multiFixture.detectChanges();
-
-        const options =
-            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-
-        options[3].focus();
-        expect(document.activeElement).toBe(options[3], 'Expected fourth option to be focused.');
-
-        multiFixture.componentInstance.control.setValue(['steak-0', 'sushi-7']);
-        multiFixture.detectChanges();
-
-        expect(document.activeElement)
-            .toBe(options[3], 'Expected fourth option to remain focused.');
-      }));
-
-      it('should not cycle through the options if the control is disabled', fakeAsync(() => {
-        const formControl = fixture.componentInstance.control;
-
-        formControl.setValue('eggs-5');
-        formControl.disable();
-
-        dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-
-        expect(formControl.value).toBe('eggs-5', 'Expected value to remain unchaged.');
-      }));
-
-      it('should not wrap selection around after reaching the end of the options', fakeAsync(() => {
-        const lastOption = fixture.componentInstance.options.last;
-
-        fixture.componentInstance.options.forEach(() => {
-          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-        });
-
-        expect(lastOption.selected).toBe(true, 'Expected last option to be selected.');
-
-        dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-
-        expect(lastOption.selected).toBe(true, 'Expected last option to stay selected.');
-      }));
-
-      it('should not open a multiple select when tabbing through', fakeAsync(() => {
-        fixture.destroy();
-
-        const multiFixture = TestBed.createComponent(MultiSelect);
-
-        multiFixture.detectChanges();
-        select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
-
-        expect(multiFixture.componentInstance.select.panelOpen)
-            .toBe(false, 'Expected panel to be closed initially.');
-
-        dispatchKeyboardEvent(select, 'keydown', TAB);
-
-        expect(multiFixture.componentInstance.select.panelOpen)
-            .toBe(false, 'Expected panel to stay closed.');
-      }));
-
-      it('should prevent the default action when pressing space', fakeAsync(() => {
-        const event = dispatchKeyboardEvent(select, 'keydown', SPACE);
-        expect(event.defaultPrevented).toBe(true);
-      }));
-
-      it('should consider the selection a result of a user action when closed', fakeAsync(() => {
-        const option = fixture.componentInstance.options.first;
-        const spy = jasmine.createSpy('option selection spy');
-        const subscription = option.onSelectionChange.pipe(map(e => e.isUserInput)).subscribe(spy);
-
-        dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-        expect(spy).toHaveBeenCalledWith(true);
-
-        subscription.unsubscribe();
-      }));
-
-      it('should be able to focus the select trigger', fakeAsync(() => {
-        document.body.focus(); // ensure that focus isn't on the trigger already
-
-        fixture.componentInstance.select.focus();
-
-        expect(document.activeElement).toBe(select, 'Expected select element to be focused.');
-      }));
-
-      // Having `aria-hidden` on the trigger avoids issues where
-      // screen readers read out the wrong amount of options.
-      it('should set aria-hidden on the trigger element', fakeAsync(() => {
-        const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-
-        expect(trigger.getAttribute('aria-hidden'))
-            .toBe('true', 'Expected aria-hidden to be true when the select is open.');
-      }));
-
-      it('should set `aria-multiselectable` to true on multi-select instances', fakeAsync(() => {
-        fixture.destroy();
-
-        const multiFixture = TestBed.createComponent(MultiSelect);
-
-        multiFixture.detectChanges();
-        select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
-
-        expect(select.getAttribute('aria-multiselectable')).toBe('true');
-      }));
-
-      it('should set `aria-multiselectable` false on single-selection instances', fakeAsync(() => {
-        expect(select.getAttribute('aria-multiselectable')).toBe('false');
-      }));
-
-      it('should set aria-activedescendant only while the panel is open', fakeAsync(() => {
-        fixture.componentInstance.control.setValue('chips-4');
-        fixture.detectChanges();
-
-        const host = fixture.debugElement.query(By.css('mat-select')).nativeElement;
-
-        expect(host.hasAttribute('aria-activedescendant'))
-            .toBe(false, 'Expected no aria-activedescendant on init.');
-
-        fixture.componentInstance.select.open();
-        fixture.detectChanges();
-        flush();
-
-        const options = overlayContainerElement.querySelectorAll('mat-option');
-
-        expect(host.getAttribute('aria-activedescendant'))
-            .toBe(options[4].id, 'Expected aria-activedescendant to match the active option.');
-
-        fixture.componentInstance.select.close();
-        fixture.detectChanges();
-        flush();
-
-        expect(host.hasAttribute('aria-activedescendant'))
-            .toBe(false, 'Expected no aria-activedescendant when closed.');
-      }));
-
-      it('should set aria-activedescendant based on the focused option', fakeAsync(() => {
-        const host = fixture.debugElement.query(By.css('mat-select')).nativeElement;
-
-        fixture.componentInstance.select.open();
-        fixture.detectChanges();
-        flush();
-
-        const options = overlayContainerElement.querySelectorAll('mat-option');
-
-        expect(host.getAttribute('aria-activedescendant')).toBe(options[0].id);
-
-        [1, 2, 3].forEach(() => {
-          dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
-          fixture.detectChanges();
-        });
-
-        expect(host.getAttribute('aria-activedescendant')).toBe(options[4].id);
-
-        dispatchKeyboardEvent(host, 'keydown', UP_ARROW);
-        fixture.detectChanges();
-
-        expect(host.getAttribute('aria-activedescendant')).toBe(options[3].id);
-      }));
-
-    });
-
-    describe('for options', () => {
-      let fixture: ComponentFixture<BasicSelect>;
-      let trigger: HTMLElement;
-      let options: NodeListOf<HTMLElement>;
-
-      beforeEach(fakeAsync(() => {
-        fixture = TestBed.createComponent(BasicSelect);
-        fixture.detectChanges();
-        trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-        trigger.click();
-        fixture.detectChanges();
-
-        options =
-            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      }));
-
-      it('should set the role of mat-option to option', fakeAsync(() => {
-        expect(options[0].getAttribute('role')).toEqual('option');
-        expect(options[1].getAttribute('role')).toEqual('option');
-        expect(options[2].getAttribute('role')).toEqual('option');
-      }));
-
-      it('should set aria-selected on each option', fakeAsync(() => {
-        expect(options[0].getAttribute('aria-selected')).toEqual('false');
-        expect(options[1].getAttribute('aria-selected')).toEqual('false');
-        expect(options[2].getAttribute('aria-selected')).toEqual('false');
-
-        options[1].click();
-        fixture.detectChanges();
-
-        trigger.click();
-        fixture.detectChanges();
-        flush();
-
-        expect(options[0].getAttribute('aria-selected')).toEqual('false');
-        expect(options[1].getAttribute('aria-selected')).toEqual('true');
-        expect(options[2].getAttribute('aria-selected')).toEqual('false');
-      }));
-
-      it('should set the tabindex of each option according to disabled state', fakeAsync(() => {
-        expect(options[0].getAttribute('tabindex')).toEqual('0');
-        expect(options[1].getAttribute('tabindex')).toEqual('0');
-        expect(options[2].getAttribute('tabindex')).toEqual('-1');
-      }));
-
-      it('should set aria-disabled for disabled options', fakeAsync(() => {
-        expect(options[0].getAttribute('aria-disabled')).toEqual('false');
-        expect(options[1].getAttribute('aria-disabled')).toEqual('false');
-        expect(options[2].getAttribute('aria-disabled')).toEqual('true');
-
-        fixture.componentInstance.foods[2]['disabled'] = false;
-        fixture.detectChanges();
-
-        expect(options[0].getAttribute('aria-disabled')).toEqual('false');
-        expect(options[1].getAttribute('aria-disabled')).toEqual('false');
-        expect(options[2].getAttribute('aria-disabled')).toEqual('false');
-      }));
-    });
-
-    describe('for option groups', () => {
-      let fixture: ComponentFixture<SelectWithGroups>;
-      let trigger: HTMLElement;
-      let groups: NodeListOf<HTMLElement>;
-
-      beforeEach(fakeAsync(() => {
-        fixture = TestBed.createComponent(SelectWithGroups);
-        fixture.detectChanges();
-        trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-        trigger.click();
-        fixture.detectChanges();
-        groups =
-            overlayContainerElement.querySelectorAll('mat-optgroup') as NodeListOf<HTMLElement>;
-      }));
-
-      it('should set the appropriate role', fakeAsync(() => {
-        expect(groups[0].getAttribute('role')).toBe('group');
-      }));
-
-      it('should set the `aria-labelledby` attribute', fakeAsync(() => {
-        let group = groups[0];
-        let label = group.querySelector('label')!;
-
-        expect(label.getAttribute('id')).toBeTruthy('Expected label to have an id.');
-        expect(group.getAttribute('aria-labelledby'))
-            .toBe(label.getAttribute('id'), 'Expected `aria-labelledby` to match the label id.');
-      }));
-
-      it('should set the `aria-disabled` attribute if the group is disabled', fakeAsync(() => {
-        expect(groups[1].getAttribute('aria-disabled')).toBe('true');
-      }));
-    });
-
-    describe('aria-owns', () => {
-      let fixture: ComponentFixture<ManySelects>;
-      let triggers: DebugElement[];
-      let options: NodeListOf<HTMLElement>;
-
-      beforeEach(fakeAsync(() => {
-        fixture = TestBed.createComponent(ManySelects);
-        fixture.detectChanges();
-        triggers = fixture.debugElement.queryAll(By.css('.mat-select-trigger'));
-
-        triggers[0].nativeElement.click();
-        fixture.detectChanges();
-        flush();
-
-        options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      }));
-
-      it('should set aria-owns properly', fakeAsync(() => {
-        const selects = fixture.debugElement.queryAll(By.css('mat-select'));
-
-        expect(selects[0].nativeElement.getAttribute('aria-owns'))
-            .toContain(options[0].id, `Expected aria-owns to contain IDs of its child options.`);
-        expect(selects[0].nativeElement.getAttribute('aria-owns'))
-            .toContain(options[1].id, `Expected aria-owns to contain IDs of its child options.`);
-
-        const backdrop =
-            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-        backdrop.click();
-        fixture.detectChanges();
-        flush();
-
-        triggers[1].nativeElement.click();
-        fixture.detectChanges();
-        flush();
-
-        options =
-            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-        expect(selects[1].nativeElement.getAttribute('aria-owns'))
-            .toContain(options[0].id, `Expected aria-owns to contain IDs of its child options.`);
-        expect(selects[1].nativeElement.getAttribute('aria-owns'))
-            .toContain(options[1].id, `Expected aria-owns to contain IDs of its child options.`);
-      }));
-
-      it('should set the option id properly', fakeAsync(() => {
-        let firstOptionID = options[0].id;
-
-        expect(options[0].id)
-            .toContain('mat-option', `Expected option ID to have the correct prefix.`);
-        expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
-
-        const backdrop =
-            overlayContainerElement.querySelector('.cdk-overlay-backdrop') as HTMLElement;
-        backdrop.click();
-        fixture.detectChanges();
-        flush();
-
-        triggers[1].nativeElement.click();
-        fixture.detectChanges();
-        flush();
-
-        options =
-            overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-        expect(options[0].id)
-            .toContain('mat-option', `Expected option ID to have the correct prefix.`);
-        expect(options[0].id).not.toEqual(firstOptionID, `Expected option IDs to be unique.`);
-        expect(options[0].id).not.toEqual(options[1].id, `Expected option IDs to be unique.`);
-      }));
-    });
-  });
-
-  describe('special cases', () => {
-    it('should handle nesting in an ngIf', fakeAsync(() => {
-      const fixture = TestBed.createComponent(NgIfSelect);
-      fixture.detectChanges();
-
-      fixture.componentInstance.isShowing = true;
-      fixture.detectChanges();
-
-      const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-      trigger.style.width = '300px';
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      const value = fixture.debugElement.query(By.css('.mat-select-value'));
-      expect(value.nativeElement.textContent)
-          .toContain('Pizza', `Expected trigger to be populated by the control's initial value.`);
-
-      const pane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
-      expect(pane.style.minWidth).toEqual('300px');
-
-      expect(fixture.componentInstance.select.panelOpen).toBe(true);
-      expect(overlayContainerElement.textContent).toContain('Steak');
-      expect(overlayContainerElement.textContent).toContain('Pizza');
-      expect(overlayContainerElement.textContent).toContain('Tacos');
-    }));
-
-    it('should not crash the browser when a sibling throws an error on init', fakeAsync(() => {
-      // Note that this test can be considered successful if the error being thrown didn't
-      // end up crashing the testing setup altogether.
-      expect(() => {
-        TestBed.createComponent(SelectWithErrorSibling).detectChanges();
-      }).toThrowError(new RegExp('Oh no!', 'g'));
-    }));
-
-    it('should not throw when trying to access the selected value on init', fakeAsync(() => {
-      expect(() => {
-        TestBed.createComponent(SelectEarlyAccessSibling).detectChanges();
-      }).not.toThrow();
-    }));
-
-    it('should not throw selection model-related errors in addition to the errors from ngModel',
-        fakeAsync(() => {
-          const fixture = TestBed.createComponent(InvalidSelectInForm);
-
-          // The first change detection run will throw the "ngModel is missing a name" error.
-          expect(() => fixture.detectChanges()).toThrowError(/the name attribute must be set/g);
-
-          // The second run shouldn't throw selection-model related errors.
-          expect(() => fixture.detectChanges()).not.toThrow();
-        }));
-
-    it('should not throw when the triggerValue is accessed when there is no selected value',
-        fakeAsync(() => {
-          const fixture = TestBed.createComponent(BasicSelect);
-          fixture.detectChanges();
-
-          expect(() => fixture.componentInstance.select.triggerValue).not.toThrow();
-        }));
-
-    it('should allow the user to customize the label', fakeAsync(() => {
-      const fixture = TestBed.createComponent(SelectWithCustomTrigger);
-      fixture.detectChanges();
-
-      fixture.componentInstance.control.setValue('pizza-1');
-      fixture.detectChanges();
-
-      const label = fixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
-
-      expect(label.textContent).toContain('azziP',
-          'Expected the displayed text to be "Pizza" in reverse.');
-    }));
-
-    it('should not throw when attempting to open too early', () => {
-      const fixture = TestBed.createComponent(BasicSelect);
-      expect(() => fixture.componentInstance.select.open()).not.toThrow();
-    });
-  });
-
-  describe('change event', () => {
-    let fixture: ComponentFixture<SelectWithChangeEvent>;
-    let trigger: HTMLElement;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(SelectWithChangeEvent);
-      fixture.detectChanges();
-
-      trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-    }));
-
-    it('should emit an event when the selected option has changed', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-
-      (overlayContainerElement.querySelector('mat-option') as HTMLElement).click();
-
-      expect(fixture.componentInstance.changeListener).toHaveBeenCalled();
-    }));
-
-    it('should not emit multiple change events for the same option', fakeAsync(() => {
-      trigger.click();
-      fixture.detectChanges();
-
-      const option = overlayContainerElement.querySelector('mat-option') as HTMLElement;
-
-      option.click();
-      option.click();
-
-      expect(fixture.componentInstance.changeListener).toHaveBeenCalledTimes(1);
-    }));
-
-    it('should only emit one event when pressing the arrow keys on a closed select',
-        fakeAsync(() => {
-          const select = fixture.debugElement.query(By.css('mat-select')).nativeElement;
-          dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
-
-          expect(fixture.componentInstance.changeListener).toHaveBeenCalledTimes(1);
-        }));
-  });
-
-  describe('floatPlaceholder option', () => {
-    let fixture: ComponentFixture<FloatPlaceholderSelect>;
-    let formField: HTMLElement;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(FloatPlaceholderSelect);
-      fixture.detectChanges();
-      formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
-    }));
-
-    it('should be able to disable the floating placeholder', fakeAsync(() => {
-      fixture.componentInstance.floatPlaceholder = 'never';
-      fixture.detectChanges();
-
-      expect(formField.classList.contains('mat-form-field-can-float'))
-          .toBe(false, 'Floating placeholder should be disabled');
-
-      fixture.componentInstance.control.setValue('pizza-1');
-      fixture.detectChanges();
-
-      expect(formField.classList.contains('mat-form-field-can-float'))
-          .toBe(false, 'Floating placeholder should be disabled');
-    }));
-
-    it('should be able to always float the placeholder', fakeAsync(() => {
-      expect(fixture.componentInstance.control.value).toBeFalsy();
-
-      fixture.componentInstance.floatPlaceholder = 'always';
-      fixture.detectChanges();
-
-      expect(formField.classList.contains('mat-form-field-can-float'))
-          .toBe(true, 'Placeholder should be able to float');
-      expect(formField.classList.contains('mat-form-field-should-float'))
-          .toBe(true, 'Placeholder should be floating');
-    }));
-
-    it ('should default to global floating placeholder type', fakeAsync(() => {
-      fixture.destroy();
-
-      TestBed.resetTestingModule();
-      TestBed.configureTestingModule({
-        imports: [
-          MatFormFieldModule,
-          MatSelectModule,
-          ReactiveFormsModule,
-          FormsModule,
-          NoopAnimationsModule
-        ],
-        declarations: [
-          FloatPlaceholderSelect
-        ],
-        providers: [{ provide: MAT_PLACEHOLDER_GLOBAL_OPTIONS, useValue: { float: 'always' } }]
-      });
-
-      fixture = TestBed.createComponent(FloatPlaceholderSelect);
-      fixture.componentInstance.floatPlaceholder = null;
-      fixture.detectChanges();
-      formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
-
-      expect(formField.classList.contains('mat-form-field-can-float'))
-          .toBe(true, 'Placeholder should be able to float');
-      expect(formField.classList.contains('mat-form-field-should-float'))
-          .toBe(true, 'Placeholder should be floating');
-    }));
-  });
-
-  describe('with OnPush change detection', () => {
-    it('should set the trigger text based on the value when initialized', fakeAsync(() => {
-      let fixture = TestBed.createComponent(BasicSelectOnPushPreselected);
-
-      fixture.detectChanges();
-      flush();
-
-      let trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-
-      fixture.detectChanges();
-
-      expect(trigger.textContent).toContain('Pizza');
-    }));
-
-    it('should update the trigger based on the value', fakeAsync(() => {
-      let fixture = TestBed.createComponent(BasicSelectOnPush);
-      fixture.detectChanges();
-      let trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-
-      fixture.componentInstance.control.setValue('pizza-1');
-      fixture.detectChanges();
-
-      expect(trigger.textContent).toContain('Pizza');
-
-      fixture.componentInstance.control.reset();
-      fixture.detectChanges();
-
-      expect(trigger.textContent).not.toContain('Pizza');
-    }));
-  });
-
-  describe('multiple selection', () => {
     let fixture: ComponentFixture<MultiSelect>;
     let testInstance: MultiSelect;
     let trigger: HTMLElement;
@@ -2809,7 +3296,7 @@ describe('MatSelect', () => {
       expect(fixture.componentInstance.control.value).toEqual(['steak-0', 'pizza-1', 'tacos-2']);
     }));
 
-    it('should sort the values, that get set via the model, based on the panel order',
+    it('should sort the values that get set via the model based on the panel order',
         fakeAsync(() => {
           trigger.click();
           fixture.detectChanges();
@@ -2857,413 +3344,11 @@ describe('MatSelect', () => {
       expect(testInstance.options.toArray().every(option => !!option.multiple)).toBe(true,
           'Expected `multiple` to have been set on dynamically-added option.');
     }));
-  });
-
-  describe('theming', () => {
-    let fixture: ComponentFixture<BasicSelectWithTheming>;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(BasicSelectWithTheming);
-      fixture.detectChanges();
-    }));
-
-    it('should transfer the theme to the select panel', fakeAsync(() => {
-      fixture.componentInstance.theme = 'warn';
-      fixture.detectChanges();
-
-      fixture.componentInstance.select.open();
-      fixture.detectChanges();
-
-      const panel = overlayContainerElement.querySelector('.mat-select-panel')! as HTMLElement;
-      expect(panel.classList).toContain('mat-warn');
-    }));
-  });
-
-  describe('reset values', () => {
-    let fixture: ComponentFixture<ResetValuesSelect>;
-    let trigger: HTMLElement;
-    let formField: HTMLElement;
-    let options: NodeListOf<HTMLElement>;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(ResetValuesSelect);
-      fixture.detectChanges();
-      trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
-      formField = fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
-
-      trigger.click();
-      fixture.detectChanges();
-      flush();
-
-      options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf<HTMLElement>;
-      options[0].click();
-      fixture.detectChanges();
-      flush();
-    }));
-
-    it('should reset when an option with an undefined value is selected', fakeAsync(() => {
-      options[4].click();
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.control.value).toBeUndefined();
-      expect(fixture.componentInstance.select.selected).toBeFalsy();
-      expect(formField.classList).not.toContain('mat-form-field-should-float');
-      expect(trigger.textContent).not.toContain('Undefined');
-    }));
-
-    it('should reset when an option with a null value is selected', fakeAsync(() => {
-      options[5].click();
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.control.value).toBeNull();
-      expect(fixture.componentInstance.select.selected).toBeFalsy();
-      expect(formField.classList).not.toContain('mat-form-field-should-float');
-      expect(trigger.textContent).not.toContain('Null');
-    }));
-
-    it('should reset when a blank option is selected', fakeAsync(() => {
-      options[6].click();
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.control.value).toBeUndefined();
-      expect(fixture.componentInstance.select.selected).toBeFalsy();
-      expect(formField.classList).not.toContain('mat-form-field-should-float');
-      expect(trigger.textContent).not.toContain('None');
-    }));
-
-    it('should not reset when any other falsy option is selected', fakeAsync(() => {
-      options[3].click();
-      fixture.detectChanges();
-      flush();
-
-      expect(fixture.componentInstance.control.value).toBe(false);
-      expect(fixture.componentInstance.select.selected).toBeTruthy();
-      expect(formField.classList).toContain('mat-form-field-should-float');
-      expect(trigger.textContent).toContain('Falsy');
-    }));
-
-    it('should not consider the reset values as selected when resetting the form control',
-        fakeAsync(() => {
-          expect(formField.classList).toContain('mat-form-field-should-float');
-
-          fixture.componentInstance.control.reset();
-          fixture.detectChanges();
-
-          expect(fixture.componentInstance.control.value).toBeNull();
-          expect(fixture.componentInstance.select.selected).toBeFalsy();
-          expect(formField.classList).not.toContain('mat-formf-field-should-float');
-          expect(trigger.textContent).not.toContain('Null');
-          expect(trigger.textContent).not.toContain('Undefined');
-        }));
-  });
-
-  describe('error state', () => {
-    let fixture: ComponentFixture<SelectInsideFormGroup>;
-    let testComponent: SelectInsideFormGroup;
-    let select: HTMLElement;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(SelectInsideFormGroup);
-      fixture.detectChanges();
-      testComponent = fixture.componentInstance;
-      select = fixture.debugElement.query(By.css('mat-select')).nativeElement;
-    }));
-
-    it('should not set the invalid class on a clean select', fakeAsync(() => {
-      expect(testComponent.formGroup.untouched).toBe(true, 'Expected the form to be untouched.');
-      expect(testComponent.formControl.invalid).toBe(true, 'Expected form control to be invalid.');
-      expect(select.classList)
-          .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
-      expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
-    }));
-
-    it('should appear as invalid if it becomes touched', fakeAsync(() => {
-      expect(select.classList)
-          .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
-      expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
-
-      testComponent.formControl.markAsTouched();
-      fixture.detectChanges();
-
-      expect(select.classList)
-          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
-      expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
-    }));
-
-    it('should not have the invalid class when the select becomes valid', fakeAsync(() => {
-      testComponent.formControl.markAsTouched();
-      fixture.detectChanges();
-
-      expect(select.classList)
-          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
-      expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
-
-      testComponent.formControl.setValue('pizza-1');
-      fixture.detectChanges();
-
-      expect(select.classList)
-          .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
-      expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
-    }));
-
-    it('should appear as invalid when the parent form group is submitted', fakeAsync(() => {
-      expect(select.classList)
-          .not.toContain('mat-select-invalid', 'Expected select not to appear invalid.');
-      expect(select.getAttribute('aria-invalid'))
-          .toBe('false', 'Expected aria-invalid to be set to false.');
-
-      dispatchFakeEvent(fixture.debugElement.query(By.css('form')).nativeElement, 'submit');
-      fixture.detectChanges();
-
-      expect(select.classList)
-          .toContain('mat-select-invalid', 'Expected select to appear invalid.');
-      expect(select.getAttribute('aria-invalid'))
-          .toBe('true', 'Expected aria-invalid to be set to true.');
-    }));
-
-    it('should render the error messages when the parent form is submitted', fakeAsync(() => {
-      const debugEl = fixture.debugElement.nativeElement;
-
-      expect(debugEl.querySelectorAll('mat-error').length).toBe(0, 'Expected no error messages');
-
-      dispatchFakeEvent(fixture.debugElement.query(By.css('form')).nativeElement, 'submit');
-      fixture.detectChanges();
-
-      expect(debugEl.querySelectorAll('mat-error').length).toBe(1, 'Expected one error message');
-    }));
-
-    it('should be able to override the error matching behavior via an @Input', fakeAsync(() => {
-      fixture.destroy();
-
-      const customErrorFixture = TestBed.createComponent(CustomErrorBehaviorSelect);
-      const component = customErrorFixture.componentInstance;
-      const matcher = jasmine.createSpy('error state matcher').and.returnValue(true);
-
-      customErrorFixture.detectChanges();
-
-      expect(component.control.invalid).toBe(false);
-      expect(component.select.errorState).toBe(false);
-
-      customErrorFixture.componentInstance.errorStateMatcher = { isErrorState: matcher };
-      customErrorFixture.detectChanges();
-
-      expect(component.select.errorState).toBe(true);
-      expect(matcher).toHaveBeenCalled();
-    }));
-
-    it('should be able to override the error matching behavior via the injection token',
-        fakeAsync(() => {
-          const errorStateMatcher: ErrorStateMatcher = {
-            isErrorState: jasmine.createSpy('error state matcher').and.returnValue(true)
-          };
-
-          fixture.destroy();
-
-          TestBed.resetTestingModule().configureTestingModule({
-            imports: [MatSelectModule, ReactiveFormsModule, FormsModule, NoopAnimationsModule],
-            declarations: [SelectInsideFormGroup],
-            providers: [{ provide: ErrorStateMatcher, useValue: errorStateMatcher }],
-          });
-
-          const errorFixture = TestBed.createComponent(SelectInsideFormGroup);
-          const component = errorFixture.componentInstance;
-
-          errorFixture.detectChanges();
-
-          expect(component.select.errorState).toBe(true);
-          expect(errorStateMatcher.isErrorState).toHaveBeenCalled();
-        }));
-  });
-
-  describe('compareWith behavior', () => {
-    let fixture: ComponentFixture<NgModelCompareWithSelect>;
-    let instance: NgModelCompareWithSelect;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(NgModelCompareWithSelect);
-      instance = fixture.componentInstance;
-      fixture.detectChanges();
-    }));
-
-    describe('when comparing by value', () => {
-
-      it('should have a selection', fakeAsync(() => {
-        const selectedOption = instance.select.selected as MatOption;
-        expect(selectedOption.value.value).toEqual('pizza-1');
-      }));
-
-      it('should update when making a new selection', fakeAsync(() => {
-        instance.options.last._selectViaInteraction();
-        fixture.detectChanges();
-        flush();
-
-        const selectedOption = instance.select.selected as MatOption;
-        expect(instance.selectedFood.value).toEqual('tacos-2');
-        expect(selectedOption.value.value).toEqual('tacos-2');
-      }));
-
-    });
-
-    describe('when comparing by reference', () => {
-      beforeEach(fakeAsync(() => {
-        spyOn(instance, 'compareByReference').and.callThrough();
-        instance.useCompareByReference();
-        fixture.detectChanges();
-      }));
-
-      it('should use the comparator', fakeAsync(() => {
-        expect(instance.compareByReference).toHaveBeenCalled();
-      }));
-
-      it('should initialize with no selection despite having a value', fakeAsync(() => {
-        expect(instance.selectedFood.value).toBe('pizza-1');
-        expect(instance.select.selected).toBeUndefined();
-      }));
-
-      it('should not update the selection if value is copied on change', fakeAsync(() => {
-        instance.options.first._selectViaInteraction();
-        fixture.detectChanges();
-        flush();
-
-        expect(instance.selectedFood.value).toEqual('steak-0');
-        expect(instance.select.selected).toBeUndefined();
-      }));
-
-      it('should throw an error when using a non-function comparator', fakeAsync(() => {
-        instance.useNullComparator();
-
-        expect(() => {
-          fixture.detectChanges();
-        }).toThrowError(wrappedErrorMessage(getMatSelectNonFunctionValueError()));
-      }));
-    });
-  });
-
-  describe('keyboard scrolling', () => {
-    let fixture: ComponentFixture<BasicSelect>;
-    let host: HTMLElement;
-    let panel: HTMLElement;
-
-    beforeEach(fakeAsync(() => {
-      fixture = TestBed.createComponent(BasicSelect);
-
-      fixture.componentInstance.foods = [];
-
-      for (let i = 0; i < 30; i++) {
-        fixture.componentInstance.foods.push({value: `value-${i}`, viewValue: `Option ${i}`});
-      }
-
-      fixture.detectChanges();
-      fixture.componentInstance.select.open();
-      fixture.detectChanges();
-      flush();
-
-      host = fixture.debugElement.query(By.css('mat-select')).nativeElement;
-      panel = overlayContainerElement.querySelector('.mat-select-panel')! as HTMLElement;
-    }));
-
-    it('should not scroll to options that are completely in the view', fakeAsync(() => {
-      const initialScrollPosition = panel.scrollTop;
-
-      [1, 2, 3].forEach(() => {
-        dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
-      });
-
-      expect(panel.scrollTop).toBe(initialScrollPosition, 'Expected scroll position not to change');
-    }));
-
-    it('should scroll down to the active option', fakeAsync(() => {
-      for (let i = 0; i < 15; i++) {
-        dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
-      }
-
-      // <option index * height> - <panel height> = 16 * 48 - 256 = 512
-      expect(panel.scrollTop).toBe(512, 'Expected scroll to be at the 16th option.');
-    }));
-
-    it('should scroll up to the active option', fakeAsync(() => {
-      // Scroll to the bottom.
-      for (let i = 0; i < fixture.componentInstance.foods.length; i++) {
-        dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
-      }
-
-      for (let i = 0; i < 20; i++) {
-        dispatchKeyboardEvent(host, 'keydown', UP_ARROW);
-      }
-
-      // <option index * height> = 9 * 48 = 432
-      expect(panel.scrollTop).toBe(432, 'Expected scroll to be at the 9th option.');
-    }));
-
-    it('should skip option group labels', fakeAsync(() => {
-      fixture.destroy();
-
-      const groupFixture = TestBed.createComponent(SelectWithGroups);
-
-      groupFixture.detectChanges();
-      groupFixture.componentInstance.select.open();
-      groupFixture.detectChanges();
-      flush();
-
-      host = groupFixture.debugElement.query(By.css('mat-select')).nativeElement;
-      panel = overlayContainerElement.querySelector('.mat-select-panel')! as HTMLElement;
-
-      for (let i = 0; i < 5; i++) {
-        dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
-      }
-
-      // Note that we press down 5 times, but it will skip
-      // 3 options because the second group is disabled.
-      // <(option index + group labels) * height> - <panel height> = (9 + 3) * 48 - 256 = 320
-      expect(panel.scrollTop).toBe(320, 'Expected scroll to be at the 9th option.');
-    }));
-
-    it('should scroll top the top when pressing HOME', fakeAsync(() => {
-      for (let i = 0; i < 20; i++) {
-        dispatchKeyboardEvent(host, 'keydown', DOWN_ARROW);
-        fixture.detectChanges();
-      }
-
-      expect(panel.scrollTop).toBeGreaterThan(0, 'Expected panel to be scrolled down.');
-
-      dispatchKeyboardEvent(host, 'keydown', HOME);
-      fixture.detectChanges();
-
-      expect(panel.scrollTop).toBe(0, 'Expected panel to be scrolled to the top');
-    }));
-
-    it('should scroll to the bottom of the panel when pressing END', fakeAsync(() => {
-      dispatchKeyboardEvent(host, 'keydown', END);
-      fixture.detectChanges();
-
-      // <option amount> * <option height> - <panel height> = 30 * 48 - 256 = 1184
-      expect(panel.scrollTop).toBe(1184, 'Expected panel to be scrolled to the bottom');
-    }));
-
-    it('should scroll to the active option when typing', fakeAsync(() => {
-      for (let i = 0; i < 15; i++) {
-        // Press the letter 'o' 15 times since all the options are named 'Option <index>'
-        dispatchEvent(host, createKeyboardEvent('keydown', 79, undefined, 'o'));
-        fixture.detectChanges();
-        tick(LETTER_KEY_DEBOUNCE_INTERVAL);
-      }
-      flush();
-
-      // <option index * height> - <panel height> = 16 * 48 - 256 = 512
-      expect(panel.scrollTop).toBe(512, 'Expected scroll to be at the 16th option.');
-    }));
 
   });
 });
 
+
 @Component({
   selector: 'basic-select',
   template: `
@@ -3637,7 +3722,6 @@ class BasicSelectWithTheming {
   theme: string;
 }
 
-
 @Component({
   selector: 'reset-values-select',
   template: `
@@ -3685,7 +3769,6 @@ class FalsyValueSelect {
   @ViewChildren(MatOption) options: QueryList<MatOption>;
 }
 
-
 @Component({
   selector: 'select-with-groups',
   template: `
@@ -3743,7 +3826,6 @@ class SelectWithGroups {
   @ViewChildren(MatOption) options: QueryList<MatOption>;
 }
 
-
 @Component({
   template: `
     <form>
@@ -3757,7 +3839,6 @@ class InvalidSelectInForm {
   value: any;
 }
 
-
 @Component({
   template: `
     <form [formGroup]="formGroup">
@@ -3781,7 +3862,6 @@ class SelectInsideFormGroup {
   });
 }
 
-
 @Component({
   template: `
     <mat-form-field>
@@ -3847,7 +3927,6 @@ class BasicSelectWithoutFormsMultiple {
   @ViewChild(MatSelect) select: MatSelect;
 }
 
-
 @Component({
   selector: 'select-with-custom-trigger',
   template: `
@@ -3871,7 +3950,6 @@ class SelectWithCustomTrigger {
   control = new FormControl();
 }
 
-
 @Component({
   selector: 'ng-model-compare-with',
   template: `
@@ -3929,7 +4007,6 @@ class CustomErrorBehaviorSelect {
   errorStateMatcher: ErrorStateMatcher;
 }
 
-
 @Component({
   template: `
     <mat-form-field>