breakpoint-observer: incorrectly splitting queries

[emilio-martinez]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

BreakpointObserver.observe() should treat comma-separated media queries as is standard.
See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#comma-separated_lists.

What is the current behavior?

BreakpointObserver.observe() as of https://github.com/angular/material2/pull/10789/files splits comma-separated queries into multiple queries rather than leaving them as one, which is the correct behavior.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ppreg2?file=app%2Fapp.component.ts

This demo is to show that the PR merged at https://github.com/angular/material2/pull/10789/files is doing something incorrectly and deviates from standard media queries.

This showcase is using @angular/[email protected] in which that change hadn't been merged yet. The observable before$ demonstrates how the query behaves normally, and after$ simulates what the PR would do to the query. Doing that change contradicts standard media query behaviors.

Comma-separated media queries are actually a thing, in which the query is treated as statement01 OR statement02 OR ... for as many statements are represented.

What is the use-case or motivation for changing an existing behavior?

Keeping in line with standard comma-separated media query behaviors.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

[email protected]
@angular/[email protected]
@angular/[email protected]

Is there anything else we should know?

Nope.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}