Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test that MediaQueryList extends EventTarget #20401

Merged
merged 14 commits into from
Nov 25, 2019
Merged

Test that MediaQueryList extends EventTarget #20401

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4da1cae
Make listeners call order test more robust
shvaikalesh Nov 5, 2019
89c1af9
Remove unused `t` parameters
shvaikalesh Nov 5, 2019
7f717e3
Remove tests that duplicate checks in "idlharness.html"
shvaikalesh Nov 5, 2019
2ffcef9
Improve MediaQueryListEvent coverage
shvaikalesh Nov 22, 2019
43f9c25
Add MQL extends EventTarget tests
shvaikalesh Nov 22, 2019
900d6ec
Add listeners call order test
shvaikalesh Nov 22, 2019
8c69833
Add listeners per MQL storage test
shvaikalesh Nov 22, 2019
7068c62
Link published version of spec by https://
shvaikalesh Nov 22, 2019
e716c44
Use `assert_array_equals` harness
shvaikalesh Nov 23, 2019
4eef7bc
Use strict mode in harness
shvaikalesh Nov 23, 2019
41f1dfd
Define private harness variables in block statement
shvaikalesh Nov 23, 2019
2c00109
Fix MediaQueryListEvent `instanceof` tests
shvaikalesh Nov 23, 2019
528eb9b
Rename variable and call preventDefault()
shvaikalesh Nov 23, 2019
4f5d122
Fix listeners call order test
shvaikalesh Nov 24, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 44 additions & 14 deletions css/cssom-view/MediaQueryList-addListener-removeListener.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,14 @@
<meta name="flags" content="dom">
<title>CSS Test: CSSOM View MediaQueryList::{add,remove}Listener</title>
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
<link rel="help" href="http://www.w3.org/TR/cssom-view/#the-mediaquerylist-interface">
<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";

test(function() {
const mql = window.matchMedia("all");
assert_inherits(mql, "addListener");
assert_equals(typeof mql.addListener, "function");
}, "MediaQueryList::addListener is a function");

promise_test(async t => {
const iframe = await createIFrame(t, 200, 100);
const heightMQL = iframe.contentWindow.matchMedia("(max-height: 50px)");
Expand Down Expand Up @@ -81,8 +75,7 @@
triggerMQLEvent(mql);
await waitForChangesReported();

assert_equals(calls[0], "1st");
assert_equals(calls[1], "2nd");
assert_equals(calls.join(), "1st,2nd");
shvaikalesh marked this conversation as resolved.
Show resolved Hide resolved
}, "listeners are called in order they were added");

promise_test(async t => {
Expand All @@ -102,11 +95,48 @@
assert_equals(called, 1);
}, "listener that was added twice is called only once");

test(function() {
const mql = window.matchMedia("all");
assert_inherits(mql, "removeListener");
assert_equals(typeof mql.removeListener, "function");
}, "MediaQueryList::removeListener is a function");
promise_test(async t => {
const iframe = await createIFrame(t, 100);
const media = `(min-width: 200px)`;

const mql1 = iframe.contentWindow.matchMedia(media);
const mql2 = iframe.contentWindow.matchMedia(media);
const calls = [];

mql2.addListener(() => {
calls.push("mql2");
});

mql1.addListener(() => {
calls.push("mql1");
});

iframe.width = "200"; // 100x100 => 200x100
await waitForChangesReported();

assert_equals(calls.join(), "mql1,mql2");
shvaikalesh marked this conversation as resolved.
Show resolved Hide resolved
}, "listeners are called in order their MQLs were created");

promise_test(async t => {
const iframe = await createIFrame(t, 200);
const media = `(max-height: 150px)`;

const mql1 = iframe.contentWindow.matchMedia(media);
const mql2 = iframe.contentWindow.matchMedia(media);

let calls = 0;
const listener = () => {
calls++;
};

mql1.addListener(listener);
mql2.removeListener(listener);

iframe.height = "50"; // 200x200 => 200x50
await waitForChangesReported();

assert_equals(calls, 1);
}, "removing listener from one MQL doesn't remove it from all MQLs");

promise_test(async t => {
const mql = await createMQL(t);
Expand Down
168 changes: 168 additions & 0 deletions css/cssom-view/MediaQueryList-extends-EventTarget-interop.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="flags" content="dom">
<title>CSS Test: CSSOM View MediaQueryList extends EventTarget (interop)</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";

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

let receivedEvent;
mql.addListener(event => {
receivedEvent = event;
});

const dispatchedEvent = new Event("change");
mql.dispatchEvent(dispatchedEvent);

assert_equals(receivedEvent, dispatchedEvent);
}, "dispatchEvent triggers listener added with addListener");

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

let calls = 0;
const listener = {
handleEvent() {
calls++;
},
};

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

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

mql.dispatchEvent(new Event("change"));
assert_equals(calls, 2, "dispatchEvent");
}, "listener added with addListener and addEventListener is called once");

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

let calls = 0;
const listener = () => {
calls++;
};

mql.addListener(listener);
mql.addEventListener("change", listener, true);

triggerMQLEvent(mql);
await waitForChangesReported();
assert_equals(calls, 2, "triggerMQLEvent");

mql.dispatchEvent(new Event("change"));
assert_equals(calls, 4, "dispatchEvent");
}, "listener added with addListener and addEventListener (capture) is called twice");

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

let calls = 0;
const listener = {
handleEvent() {
calls++;
},
};

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

triggerMQLEvent(mql);
await waitForChangesReported();
assert_equals(calls, 0, "triggerMQLEvent");

mql.dispatchEvent(new Event("change"));
assert_equals(calls, 0, "dispatchEvent");
}, "removeEventListener removes listener added with addListener");

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

let calls = 0;
const listener = () => {
calls++;
};

mql.addListener(listener);
mql.removeEventListener("change", listener, true);

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

mql.dispatchEvent(new Event("change"));
assert_equals(calls, 2, "dispatchEvent");
}, "removeEventListener (capture) doesn't remove listener added with addListener");

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

let calls = 0;
const listener = {
handleEvent() {
calls++;
},
};

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

triggerMQLEvent(mql);
await waitForChangesReported();
assert_equals(calls, 0, "triggerMQLEvent");

mql.dispatchEvent(new Event("change"));
assert_equals(calls, 0, "dispatchEvent");
}, "removeListener removes listener added with addEventListener");

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

let calls = 0;
const listener = () => {
calls++;
};

mql.addEventListener("change", listener, true);
mql.removeListener(listener);

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

mql.dispatchEvent(new Event("change"));
assert_equals(calls, 2, "dispatchEvent");
}, "removeListener doesn't remove listener added with addEventListener (capture)");

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

let calls = [];
mql.addListener(() => {
calls.push("addListener");
});
mql.addEventListener("change", {
handleEvent() {
calls.push("addEventListener");
},
}, true);

triggerMQLEvent(mql);
await waitForChangesReported();
assert_equals(calls.join(), "addListener,addEventListener", "triggerMQLEvent");
shvaikalesh marked this conversation as resolved.
Show resolved Hide resolved

calls = [];
mql.dispatchEvent(new Event("change"));
assert_equals(calls.join(), "addListener,addEventListener", "dispatchEvent");
shvaikalesh marked this conversation as resolved.
Show resolved Hide resolved
}, "listeners are called in order they were added, ignoring capture parameter");
</script>
117 changes: 117 additions & 0 deletions css/cssom-view/MediaQueryList-extends-EventTarget.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
<!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;
}, true);

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

const isCanceled = mql.dispatchEvent(dispatchedEvent);
shvaikalesh marked this conversation as resolved.
Show resolved Hide resolved

assert_equals(receivedEvent, dispatchedEvent);
assert_true(isCanceled);
}, "dispatchEvent works as expected");
</script>
Loading