<!DOCTYPE html>
<meta charset="utf-8">
<meta name="flags" content="dom">
<title>CSS Test: CSSOM View MediaQueryList extends EventTarget</title>
<link rel="help" href="https://www.w3.org/TR/cssom-view-1/#the-mediaquerylist-interface">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/matchMedia.js"></script>
<div id="log"></div>
<script>
"use strict";

promise_test(async t => {
    const mql = await createMQL(t);

    let _event;
    mql.onchange = event => {
        _event = event;
    };

    triggerMQLEvent(mql);
    await waitForChangesReported();
    assert_equals(_event.media, mql.media);
    assert_equals(_event.matches, mql.matches);
}, "onchange adds listener");

promise_test(async t => {
    const mql = await createMQL(t);

    let calls = 0;
    mql.onchange = () => {
        calls++;
    };

    triggerMQLEvent(mql);
    await waitForChangesReported();
    assert_equals(calls, 1);

    mql.onchange = null;

    triggerMQLEvent(mql);
    await waitForChangesReported();
    assert_equals(calls, 1);
}, "onchange removes listener");

promise_test(async t => {
    const mql = await createMQL(t);

    let calls = 0;
    mql.addEventListener("change", {
        handleEvent() {
            calls++;
        },
    });

    triggerMQLEvent(mql);
    await waitForChangesReported();
    assert_equals(calls, 1);
}, 'listeners for "change" type are called');

promise_test(async t => {
    const mql = await createMQL(t);
    mql.addEventListener("matches", t.unreached_func("should not be called"));

    triggerMQLEvent(mql);
    await waitForChangesReported();
}, 'listeners with different type are not called');

promise_test(async t => {
    const mql = await createMQL(t);

    let calls = 0;
    mql.addEventListener("change", {
        handleEvent() {
            calls++;
        },
    }, {once: true});

    triggerMQLEvent(mql);
    await waitForChangesReported();
    assert_equals(calls, 1);

    triggerMQLEvent(mql);
    await waitForChangesReported();
    assert_equals(calls, 1);
}, 'addEventListener "once" option is respected');

promise_test(async t => {
    const mql = await createMQL(t);
    const listener = t.unreached_func("should not be called");

    mql.addEventListener("change", listener);
    mql.removeEventListener("change", listener);

    triggerMQLEvent(mql);
    await waitForChangesReported();
}, "removeEventListener removes listener");

test(() => {
    const mql = window.matchMedia("all");

    let receivedEvent;
    mql.addEventListener("custom", event => {
        receivedEvent = event;
        event.preventDefault();
    }, true);

    const dispatchedEvent = new CustomEvent("custom", {
        cancelable: true,
        detail: {},
    });

    const defaultAction = mql.dispatchEvent(dispatchedEvent);

    assert_equals(receivedEvent, dispatchedEvent);
    assert_false(defaultAction);
}, "dispatchEvent works as expected");
</script>