Auto merge of #14630 - bd339:iss14064, r=KiChjang

Use MediaQueryListEvent for media query list change events

<!-- Please describe your changes on the following line: -->

- Implements MediaQueryListEvent interface
- Makes MediaQueryList change events conform to the [spec](https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes)
- Updates matchMedia.html test to verify that the new event type is used

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [X] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors
- [X] These changes fix #14064

<!-- Either: -->
- [X] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/14630)
<!-- Reviewable:end -->

components/script/dom/mediaquerylist.rs

@@ -9,12 +9,15 @@ use dom::bindings::codegen::Bindings::EventTargetBinding::EventTargetMethods;
 use dom::bindings::codegen::Bindings::MediaQueryListBinding::{self, MediaQueryListMethods};
 use dom::bindings::inheritance::Castable;
 use dom::bindings::js::{JS, Root};
+use dom::bindings::reflector::DomObject;
 use dom::bindings::reflector::reflect_dom_object;
 use dom::bindings::str::DOMString;
 use dom::bindings::trace::JSTraceable;
 use dom::bindings::weakref::{WeakRef, WeakRefVec};
 use dom::document::Document;
+use dom::event::Event;
 use dom::eventtarget::EventTarget;
+use dom::mediaquerylistevent::MediaQueryListEvent;
 use euclid::scale_factor::ScaleFactor;
 use js::jsapi::JSTracer;
 use std::cell::Cell;
@@ -136,8 +139,14 @@ impl WeakMediaQueryListVec {
     /// https://drafts.csswg.org/cssom-view/#evaluate-media-queries-and-report-changes
     pub fn evaluate_and_report_changes(&self) {
         for mql in self.cell.borrow().iter() {
-            if let MediaQueryListMatchState::Changed(_) = mql.root().unwrap().evaluate_changes() {
-                mql.root().unwrap().upcast::<EventTarget>().fire_event(atom!("change"));
+            let mql = mql.root().unwrap();
+            if let MediaQueryListMatchState::Changed(_) = mql.evaluate_changes() {
+                let event = MediaQueryListEvent::new(&mql.global(),
+                                                     atom!("change"),
+                                                     false, false,
+                                                     mql.Media(),
+                                                     mql.Matches());
+                event.upcast::<Event>().fire(mql.upcast::<EventTarget>());
             }
         }
     }

components/script/dom/mediaquerylistevent.rs

@@ -0,0 +1,82 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+use dom::bindings::codegen::Bindings::EventBinding::EventMethods;
+use dom::bindings::codegen::Bindings::MediaQueryListEventBinding;
+use dom::bindings::codegen::Bindings::MediaQueryListEventBinding::MediaQueryListEventInit;
+use dom::bindings::codegen::Bindings::MediaQueryListEventBinding::MediaQueryListEventMethods;
+use dom::bindings::error::Fallible;
+use dom::bindings::inheritance::Castable;
+use dom::bindings::js::Root;
+use dom::bindings::reflector::reflect_dom_object;
+use dom::bindings::str::DOMString;
+use dom::event::Event;
+use dom::globalscope::GlobalScope;
+use dom::window::Window;
+use servo_atoms::Atom;
+use std::cell::Cell;
+
+// https://drafts.csswg.org/cssom-view/#dom-mediaquerylistevent-mediaquerylistevent
+#[dom_struct]
+pub struct MediaQueryListEvent {
+    event: Event,
+    media: DOMString,
+    matches: Cell<bool>
+}
+
+impl MediaQueryListEvent {
+    pub fn new_uninitialized(global: &GlobalScope) -> Root<MediaQueryListEvent> {
+        MediaQueryListEvent::new_initialized(global,
+                                             DOMString::new(),
+                                             false)
+    }
+
+    pub fn new_initialized(global: &GlobalScope,
+                           media: DOMString,
+                           matches: bool) -> Root<MediaQueryListEvent> {
+        let ev = box MediaQueryListEvent {
+            event: Event::new_inherited(),
+            media: media,
+            matches: Cell::new(matches)
+        };
+        reflect_dom_object(ev, global, MediaQueryListEventBinding::Wrap)
+    }
+
+    pub fn new(global: &GlobalScope, type_: Atom,
+               bubbles: bool, cancelable: bool,
+               media: DOMString, matches: bool) -> Root<MediaQueryListEvent> {
+        let ev = MediaQueryListEvent::new_initialized(global, media, matches);
+        {
+            let event = ev.upcast::<Event>();
+            event.init_event(type_, bubbles, cancelable);
+        }
+        ev
+    }
+
+    pub fn Constructor(window: &Window, type_: DOMString,
+                       init: &MediaQueryListEventInit)
+                       -> Fallible<Root<MediaQueryListEvent>> {
+        let global = window.upcast::<GlobalScope>();
+        Ok(MediaQueryListEvent::new(global, Atom::from(type_),
+                                    init.parent.bubbles, init.parent.cancelable,
+                                    init.media.clone(), init.matches))
+    }
+}
+
+impl MediaQueryListEventMethods for MediaQueryListEvent {
+    // https://drafts.csswg.org/cssom-view/#dom-mediaquerylistevent-media
+    fn Media(&self) -> DOMString {
+        self.media.clone()
+    }
+
+    // https://drafts.csswg.org/cssom-view/#dom-mediaquerylistevent-matches
+    fn Matches(&self) -> bool {
+        self.matches.get()
+    }
+
+    // https://dom.spec.whatwg.org/#dom-event-istrusted
+    fn IsTrusted(&self) -> bool {
+        self.upcast::<Event>().IsTrusted()
+    }
+}

components/script/dom/mod.rs

@@ -371,6 +371,7 @@ pub mod location;
 pub mod mediaerror;
 pub mod medialist;
 pub mod mediaquerylist;
+pub mod mediaquerylistevent;
 pub mod messageevent;
 pub mod mimetype;
 pub mod mimetypearray;

components/script/dom/webidls/MediaQueryListEvent.webidl

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+// https://drafts.csswg.org/cssom-view/#dom-mediaquerylistevent-mediaquerylistevent
+[Constructor(DOMString type, optional MediaQueryListEventInit eventInitDict), Exposed=(Window)]
+interface MediaQueryListEvent : Event {
+  readonly attribute DOMString media;
+  readonly attribute boolean matches;
+};
+
+dictionary MediaQueryListEventInit : EventInit {
+  DOMString media = "";
+  boolean matches = false;
+};

tests/wpt/mozilla/tests/css/matchMedia.html

@@ -126,12 +126,16 @@
             window.onload = function(){
 
                 var rmListener = function(x){
+                    assert_true(x instanceof MediaQueryListEvent, "Check that event is instance of MediaQueryListEvent.");
+
                     resizeTest.step(function(){
                         assert_unreached("removeListener was not successful.");
                     });
                 };
 
                 var dupListener = function(x){
+                    assert_true(x instanceof MediaQueryListEvent, "Check that event is instance of MediaQueryListEvent.");
+
                     duplicateListenerTest.step(function(){
                         assert_false(mql1.dupListenerCalled, "Check that this listener has not been called before.");
                         mql1.dupListenerCalled = true;
@@ -148,6 +152,8 @@
                 mql1.addListener(dupListener);
 
                 mql1.addListener(function(x){
+                    assert_true(x instanceof MediaQueryListEvent, "Check that event is instance of MediaQueryListEvent.");
+
                     resizeTest.step(function(){
                         assert_equals(x, mql1, "Check that the MediaQueryList passed to the handler is the same that addListener was invoked on.");
                         assert_true(x.matches, "(max-height: 50px) should now pass.");
@@ -162,6 +168,8 @@
                 });
 
                 mql1.addListener(function(x){
+                    assert_true(x instanceof MediaQueryListEvent, "Check that event is instance of MediaQueryListEvent.");
+
                     listenerOrderTest.step(function(){
                         assert_true(mql1.firstListenerCalled, "Check that the listener added last is called last.");
                     });
@@ -171,6 +179,8 @@
                 mql1.removeListener(rmListener);
 
                 mql2.addListener(function(x){
+                    assert_true(x instanceof MediaQueryListEvent, "Check that event is instance of MediaQueryListEvent.");
+
                     duplicateListenerTest.done();
                     resizeTest.step(function(){
                         assert_equals(x, mql2, "Check that the MediaQueryList passed to the handler is the same that addListener was invoked on.");

tests/wpt/mozilla/tests/mozilla/interfaces.html

@@ -143,6 +143,7 @@ test_interfaces([
   "MediaError",
   "MediaList",
   "MediaQueryList",
+  "MediaQueryListEvent",
   "MessageEvent",
   "MimeType",
   "MimeTypeArray",