Not working in Chrome's device mode

[kvnapavl]

Description

In Chrome's device mode, iron-media-query returns:

1. true regardless of width when calling the queryMatches property (this.$.mq.queryMatches)
2. undefined when binding to the query-matches matches property (this.query)

Expected outcome

Should return true/false depending on viewport width.

Actual outcome

Returns true when calling element property.

Returns undefined when data binding.

Steps to reproduce

1. Put a iron-media-query element in the page.

<iron-media-query id="mq" query="(max-width: 321px)" query-matches="{{query}}"></iron-media-query>

2. Give element id.
3. Create function that logs the query-matches data binding. (e.g. this.query)
4. Create function that logs elements property directly. (e.g. this.$.mq.queryMatches)
5. Turn on dev tools > toggle device toolbar
6. Refresh page.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10