From 7951c4feb29aac062e8a91a095594da90c26efe9 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Tue, 26 Mar 2019 14:24:15 +0100 Subject: [PATCH] test(platform-browser): fix shadow dom test not working in firefox 65 (#29518) With 093dc915ae9ad92a3baa602eb7cb7862ca4b6734, Firefox has been updated to the latest available version within Saucelabs. Firefox added shadow DOM support in Firefox 63 and therefore the shadow dom test in `platform-browser` now runs as well. This test currently fails because Firefox does not support computed style property shorthands. In order to make this test work on Firefox now, we just switch from `border` to `background` (because of the overhead when comparing each `top`, `bottom`, `left`, `right`-border properties) PR Close #29518 --- packages/platform-browser/test/dom/shadow_dom_spec.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/platform-browser/test/dom/shadow_dom_spec.ts b/packages/platform-browser/test/dom/shadow_dom_spec.ts index 0088d11f04..0570dd9ee2 100644 --- a/packages/platform-browser/test/dom/shadow_dom_spec.ts +++ b/packages/platform-browser/test/dom/shadow_dom_spec.ts @@ -27,9 +27,13 @@ if (browserDetection.supportsShadowDom) { it('should use the shadow root to encapsulate styles', () => { const compEl = TestBed.createComponent(StyledShadowComponent).nativeElement; - expect(window.getComputedStyle(compEl).border).toEqual('1px solid rgb(0, 0, 0)'); + // Firefox and Chrome return different computed styles. Chrome supports CSS property + // shorthands in the computed style object while Firefox expects explicit CSS properties. + // e.g. we can't use the "border" CSS property for this test as "border" is a shorthand + // property and therefore would not work within Firefox. + expect(window.getComputedStyle(compEl).backgroundColor).toEqual('rgb(0, 0, 0)'); const redDiv = compEl.shadowRoot.querySelector('div.red'); - expect(window.getComputedStyle(redDiv).border).toEqual('1px solid rgb(255, 0, 0)'); + expect(window.getComputedStyle(redDiv).backgroundColor).toEqual('rgb(255, 0, 0)'); }); it('should allow the usage of elements', () => { @@ -86,7 +90,7 @@ class ShadowComponent { selector: 'styled-shadow-comp', template: '
', encapsulation: ViewEncapsulation.ShadowDom, - styles: [`:host { border: 1px solid black; } .red { border: 1px solid red; }`] + styles: [`:host { background: black; } .red { background: red; }`] }) class StyledShadowComponent { }