honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Paul Gschwendtner 2019-03-26 14:24:15 +01:00 committed by Kara Erickson
parent 0f1da49b86
commit 7951c4feb2
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/platform-browser/test/dom/shadow_dom_spec.ts
View File

@ -27,9 +27,13 @@ if (browserDetection.supportsShadowDom) {
it('should use the shadow root to encapsulate styles', () => { it('should use the shadow root to encapsulate styles', () => {
const compEl = TestBed.createComponent(StyledShadowComponent).nativeElement; 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'); 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 <slot> elements', () => { it('should allow the usage of <slot> elements', () => {
@ -86,7 +90,7 @@ class ShadowComponent {
selector: 'styled-shadow-comp', selector: 'styled-shadow-comp',
template: '<div class="red"></div>', template: '<div class="red"></div>',
encapsulation: ViewEncapsulation.ShadowDom, encapsulation: ViewEncapsulation.ShadowDom,
styles: [`:host { border: 1px solid black; } .red { border: 1px solid red; }`] styles: [`:host { background: black; } .red { background: red; }`]
}) })
class StyledShadowComponent { class StyledShadowComponent {
} }