build: update firefox to latest version

WORKSPACE

@@ -85,16 +85,6 @@ load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories"
 
 web_test_repositories()
 
-load("@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl", "browser_repositories")
-
-browser_repositories(
-    # Chrome is brought in by `@npm_dev_infra_private` for better version control and
-    # RBE experience where individual browser archives per platform are provided.
-    # TODO: Do the same for Firefox (but it is not used for local development): DEV-114
-    chromium = False,
-    firefox = True,
-)
-
 # Fetch transitive dependencies which are needed to use the Sass rules.
 load("@io_bazel_rules_sass//:package.bzl", "rules_sass_dependencies")
 

scripts/run-component-tests.js

@@ -61,7 +61,7 @@ if (local && (components.length > 1 || all)) {
   process.exit(1);
 }
 
-const browserName = firefox ? 'firefox-local' : 'chromium';
+const browserName = firefox ? 'firefox' : 'chromium';
 const bazelBinary = `yarn -s ${watch ? 'ibazel' : 'bazel'}`;
 const configFlag = viewEngine ? '--config=view-engine' : '';
 

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -683,6 +683,10 @@ cdkPopoverEditTabOut`, fakeAsync(() => {
       });
 
       describe('edit lens', () => {
+        function expectPixelsToEqual(actual: number, expected: number) {
+          expect(Math.floor(actual)).toBe(Math.floor(expected));
+        }
+
         it('shows a lens with the value from the table', fakeAsync(() => {
           component.openLens();
 
@@ -697,9 +701,9 @@ cdkPopoverEditTabOut`, fakeAsync(() => {
              const paneRect = component.getEditPane()!.getBoundingClientRect();
              const cellRect = component.getEditCell().getBoundingClientRect();
 
-             expect(paneRect.width).toBe(cellRect.width);
-             expect(paneRect.left).toBe(cellRect.left);
-             expect(paneRect.top).toBe(cellRect.top);
+             expectPixelsToEqual(paneRect.width, cellRect.width);
+             expectPixelsToEqual(paneRect.left, cellRect.left);
+             expectPixelsToEqual(paneRect.top, cellRect.top);
              clearLeftoverTimers();
            }));
 
@@ -713,25 +717,25 @@ cdkPopoverEditTabOut`, fakeAsync(() => {
              component.openLens();
 
              let paneRect = component.getEditPane()!.getBoundingClientRect();
-             expect(paneRect.top).toBe(cellRects[0].top);
-             expect(paneRect.left).toBe(cellRects[0].left);
-             expect(paneRect.right).toBe(cellRects[1].right);
+             expectPixelsToEqual(paneRect.top, cellRects[0].top);
+             expectPixelsToEqual(paneRect.left, cellRects[0].left);
+             expectPixelsToEqual(paneRect.right, cellRects[1].right);
 
              component.colspan = {after: 1};
              fixture.detectChanges();
 
              paneRect = component.getEditPane()!.getBoundingClientRect();
-             expect(paneRect.top).toBe(cellRects[1].top);
-             expect(paneRect.left).toBe(cellRects[1].left);
-             expect(paneRect.right).toBe(cellRects[2].right);
+             expectPixelsToEqual(paneRect.top, cellRects[1].top);
+             expectPixelsToEqual(paneRect.left, cellRects[1].left);
+             expectPixelsToEqual(paneRect.right, cellRects[2].right);
 
              component.colspan = {before: 1, after: 1};
              fixture.detectChanges();
 
              paneRect = component.getEditPane()!.getBoundingClientRect();
-             expect(paneRect.top).toBe(cellRects[0].top);
-             expect(paneRect.left).toBe(cellRects[0].left);
-             expect(paneRect.right).toBe(cellRects[2].right);
+             expectPixelsToEqual(paneRect.top, cellRects[0].top);
+             expectPixelsToEqual(paneRect.left, cellRects[0].left);
+             expectPixelsToEqual(paneRect.right, cellRects[2].right);
              clearLeftoverTimers();
            }));
 

src/material-experimental/popover-edit/popover-edit.spec.ts

@@ -564,6 +564,10 @@ matPopoverEditTabOut`, fakeAsync(() => {
       });
 
       describe('edit lens', () => {
+        function expectPixelsToEqual(actual: number, expected: number) {
+          expect(Math.floor(actual)).toBe(Math.floor(expected));
+        }
+
         it('shows a lens with the value from the table', fakeAsync(() => {
           component.openLens();
 
@@ -578,9 +582,9 @@ matPopoverEditTabOut`, fakeAsync(() => {
              const paneRect = component.getEditPane()!.getBoundingClientRect();
              const cellRect = component.getEditCell().getBoundingClientRect();
 
-             expect(paneRect.width).toBe(cellRect.width);
-             expect(paneRect.left).toBe(cellRect.left);
-             expect(paneRect.top).toBe(cellRect.top);
+             expectPixelsToEqual(paneRect.width, cellRect.width);
+             expectPixelsToEqual(paneRect.left, cellRect.left);
+             expectPixelsToEqual(paneRect.top, cellRect.top);
              clearLeftoverTimers();
            }));
 
@@ -594,25 +598,25 @@ matPopoverEditTabOut`, fakeAsync(() => {
              component.openLens();
 
              let paneRect = component.getEditPane()!.getBoundingClientRect();
-             expect(paneRect.top).toBe(cellRects[0].top);
-             expect(paneRect.left).toBe(cellRects[0].left);
-             expect(paneRect.right).toBe(cellRects[1].right);
+             expectPixelsToEqual(paneRect.top, cellRects[0].top);
+             expectPixelsToEqual(paneRect.left, cellRects[0].left);
+             expectPixelsToEqual(paneRect.right, cellRects[1].right);
 
              component.colspan = {after: 1};
              fixture.detectChanges();
 
              paneRect = component.getEditPane()!.getBoundingClientRect();
-             expect(paneRect.top).toBe(cellRects[1].top);
-             expect(paneRect.left).toBe(cellRects[1].left);
-             expect(paneRect.right).toBe(cellRects[2].right);
+             expectPixelsToEqual(paneRect.top, cellRects[1].top);
+             expectPixelsToEqual(paneRect.left, cellRects[1].left);
+             expectPixelsToEqual(paneRect.right, cellRects[2].right);
 
              component.colspan = {before: 1, after: 1};
              fixture.detectChanges();
 
              paneRect = component.getEditPane()!.getBoundingClientRect();
-             expect(paneRect.top).toBe(cellRects[0].top);
-             expect(paneRect.left).toBe(cellRects[0].left);
-             expect(paneRect.right).toBe(cellRects[2].right);
+             expectPixelsToEqual(paneRect.top, cellRects[0].top);
+             expectPixelsToEqual(paneRect.left, cellRects[0].left);
+             expectPixelsToEqual(paneRect.right, cellRects[2].right);
              clearLeftoverTimers();
            }));
 

src/material/datepicker/datepicker.spec.ts

@@ -1929,6 +1929,21 @@ describe('MatDatepicker', () => {
 
 });
 
+/**
+ * Styles that set input elements to a fixed width. This helps with client rect measurements
+ * (i.e. that the datepicker aligns properly). Inputs have different dimensions in different
+ * browsers. e.g. in Firefox the input width is uneven, causing unexpected deviations in measuring.
+ * Note: The input should be able to shrink as on iOS the viewport width is very little but the
+ * datepicker inputs should not leave the viewport (as that throws off measuring too).
+ */
+const inputFixedWidthStyles = `
+  input {
+    width: 100%;
+    max-width: 150px;
+    border: none;
+    box-sizing: border-box;
+  }
+`;
 
 @Component({
   template: `
@@ -1941,6 +1956,7 @@ describe('MatDatepicker', () => {
       [xPosition]="xPosition"
       [yPosition]="yPosition"></mat-datepicker>
   `,
+  styles: [inputFixedWidthStyles]
 })
 class StandardDatepicker {
   opened = false;

tools/defaults.bzl

@@ -166,7 +166,7 @@ def karma_web_test_suite(name, **kwargs):
             # Note: when changing the browser names here, also update the "yarn test"
             # script to reflect the new browser names.
             "@npm_angular_dev_infra_private//browsers/chromium:chromium",
-            "@io_bazel_rules_webtesting//browsers:firefox-local",
+            "@npm_angular_dev_infra_private//browsers/firefox:firefox",
         ]
 
     for opt_name in kwargs.keys():