[cssom-view] Update {add,remove}Listener() to hook into DOM correctly

Fixes #4407.

Author: zcorpan

cssom-view-1/Overview.bs

@@ -771,8 +771,8 @@ When asked to <dfn>evaluate media queries and report changes</dfn> for a {{Docum
 interface MediaQueryList : EventTarget {
   readonly attribute CSSOMString media;
   readonly attribute boolean matches;
-  void addListener(EventListener? listener);
-  void removeListener(EventListener? listener);
+  void addListener(EventListener? callback);
+  void removeListener(EventListener? callback);
            attribute EventHandler onchange;
 };
 </pre>
@@ -783,22 +783,24 @@ the associated <a>media</a>.
 The <dfn attribute for=MediaQueryList>matches</dfn> attribute must return
 the associated <a>matches state</a>. <!--fingerprint-->
 
-The <dfn method for=MediaQueryList>addListener(<var>listener</var>)</dfn> method must run these steps:
+The <dfn method for=MediaQueryList>addListener(<var>callback</var>)</dfn> method,
+when invoked, must run these steps:
 
-1. If <var>listener</var> is null, terminate these steps.
-1. Append an <a>event listener</a> to the associated list of <a>event listeners</a>
-    with <b>type</b> set to <code>change</code>,
-    <b>callback</b> set to <var>listener</var>,
-    and <b>capture</b> set to false,
-    unless there already is an <a>event listener</a> in that list
-    with the same <b>type</b>, <b>callback</b>, and <b>capture</b>.
+1. <a spec=dom>Add an event listener</a> with the <a spec=dom>context object</a>
+    and an <a spec=dom>event listener</a> whose
+    <a spec=dom for="event listener">type</a> is <code>change</code>,
+    and <a spec=dom for="event listener">callback</a> is |callback|.
 
-The <dfn method for=MediaQueryList>removeListener(<var>listener</var>)</dfn> method must run these steps:
+The <dfn method for=MediaQueryList>removeListener(<var>callback</var>)</dfn> method,
+when invoked, must run these steps:
 
-1. Remove an <a>event listener</a> from the associated list of <a>event listeners</a>,
-    whose <b>type</b> is <code>change</code>,
-    <b>callback</b> is <var>listener</var>,
-    and <b>capture</b> is false.
+1. If the <a spec=dom>context object</a>’s <a spec=dom for=EventTarget>event listener list</a>
+    <a for=list>contains</a> an <a>event listener</a> whose
+    <a spec=dom for="event listener">type</a> is <code>change</code>,
+    <a spec=dom for="event listener">callback</a> is |callback|,
+    and <a spec=dom for="event listener">capture</a> is false,
+    then <a spec=dom>remove an event listener</a> with
+    the <a spec=dom>context object</a> and that <a spec=dom>event listener</a>.
 
 Note: This specification initially had a custom callback mechanism with {{addListener()}} and
 {{removeListener()}}, and the callback was invoked with the associated media query list as argument.