test: rework flaky tests that depend on getComputedStyle (#16487)

Currently most of the grid list tests as well as one of tab nav bar test are flaky, because we use `getComputedStyle` for assertions and the return values can be formatted differently depending on the browser. These changes move them to either pick up values directly from the DOM or to measure the element with `getBoundingClientRect`.

Author: crisbeto

src/material/datepicker/datepicker.spec.ts

@@ -178,13 +178,13 @@ describe('MatDatepicker', () => {
 
         const popup = document.querySelector('.cdk-overlay-pane')!;
         expect(popup).not.toBeNull();
-        expect(parseInt(getComputedStyle(popup).height as string)).not.toBe(0);
+        expect(popup.getBoundingClientRect().height).toBeGreaterThan(0);
 
         testComponent.datepicker.close();
         fixture.detectChanges();
         flush();
 
-        expect(parseInt(getComputedStyle(popup).height as string)).toBe(0);
+        expect(popup.getBoundingClientRect().height).toBe(0);
       }));
 
       it('should close the popup when pressing ESCAPE', fakeAsync(() => {