MediaQueryList.addListener does not support Object with handleEvent() method

Confirmed Issue #7252345 • Assigned to Eugene V.

Details

Author
Neil K.
Created
Apr 19, 2016
Privacy
This issue is public.
Found in
  • Microsoft Edge
  • Internet Explorer
  • Safari
  • Firefox
Standard affected
CSSOM View Module

Found in build #
13.10586
Reports
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.75 Safari/537.36
Steps to reproduce:
Repro:
var query = matchMedia("(min-width: 400px)");
var listener = {
handleEvent: function() {
document.body.style.background = query.matches ? ‘red’ : 'blue’;
}
}
query.addListener(listener);
listener.handleEvent();
Runnable: https://jsfiddle.net/j4278otv/
Actual results:
The handleEvent method is never called as you resize the browser window. If you pass the handleEvent method directly into addListener it will work.
Expected results:
The spec (https://drafts.csswg.org/cssom-view/#mediaquerylist) says the parameter to addListener is an EventListener (https://dom.spec.whatwg.org/#callbackdef-eventlistener):
callback interface EventListener {
void handleEvent(Event event);
};
but the implementation only allows functions.
The Node.addEventListener method does support the Object with handleEvent() method: See https://jsfiddle.net/6nL0epf3/

Attachments

0 attachments

    Comments and activity

    • Sorry for the bad formatting in the original post. Here is a better version:

      Steps to reproduce:

      Repro:

      var query = matchMedia("(min-width: 400px)");
      var listener = {
          handleEvent: function() {
             document.body.style.background = query.matches ? 'red' : 'blue';
          }
      }
      query.addListener(listener);
      listener.handleEvent();
      

      Runnable: https://jsfiddle.net/j4278otv/

      Actual results:

      The handleEvent method is never called as you resize the browser window. If you pass the handleEvent method directly into addListener it will work.

      Expected results:

      The spec (https://drafts.csswg.org/cssom-view/#mediaquerylist) says the parameter to addListener is an EventListener (https://dom.spec.whatwg.org/#callbackdef-eventlistener):

      callback interface EventListener {
          void handleEvent(Event event);
      };
      

      but the implementation only allows functions.

      The Node.addEventListener method does support the Object with handleEvent() method: See https://jsfiddle.net/6nL0epf3/

    • Microsoft Edge Team

      Changed Assigned To to “Brad E.”

    • Hello,

      Thanks for the feedback on Edge and for creating the repro. I am showing this as fixed in our Insider Fast build 14332.1001

      In 10586 (TH2) it shows up as blue. 

      Can you confirm that this is correct before I close out the item as fixed, please?

      All the best,
      The MS Edge Team

    • I just tried it on build 14338 and it does not appear fixed. You need to resize the width of the window to get the min-width query to change. When you go above/below 400px, the background should change between red/blue.

    • Microsoft Edge Team

      Changed Assigned To to “Travis L.”

      Changed Assigned To from “Travis L.” to “Eugene V.”

      Changed Status to “Confirmed”

    You need to sign in to your Microsoft account to add a comment.

    Sign in