Skip to content
This repository was archived by the owner on Mar 19, 2021. It is now read-only.

Commit 74286c9

Browse files
shvaikaleshzcorpan
shvaikalesh
authored and
zcorpan
committed
Test that MediaQueryListener calls EventListener::handleEvent
1 parent eb78a40 commit 74286c9

File tree

2 files changed

+168
-0
lines changed

2 files changed

+168
-0
lines changed

‎css/cssom-view/matchMediaAddListener-handleEvent.html

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>CSS Test: CSSOM View matchMedia handleEvent via addListener</title>
4+
<link rel="help" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener">
5+
<script src="/resources/testharness.js"></script>
6+
<script src="/resources/testharnessreport.js"></script>
7+
<script src="resources/matchMedia.js"></script>
8+
<div id="log"></div>
9+
<script>
10+
setup({ allow_uncaught_exception: true });
11+
12+
promise_test(async t => {
13+
const iframe = await createIframe(t);
14+
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
15+
16+
let _this;
17+
let _event;
18+
const eventListener = {
19+
handleEvent(event) {
20+
_this = this;
21+
_event = event;
22+
},
23+
};
24+
25+
mql.addListener(eventListener);
26+
triggerMQLEvent(iframe);
27+
await waitForChangesReported();
28+
29+
assert_equals(_this, eventListener);
30+
assert_equals(_event.matches, mql.matches);
31+
assert_equals(_event.media, MEDIA_QUERY);
32+
}, "calls handleEvent method of event listener");
33+
34+
promise_test(async t => {
35+
const iframe = await createIframe(t);
36+
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
37+
38+
let uncaughtError;
39+
const errorHandler = event => {
40+
uncaughtError = event.error;
41+
};
42+
window.addEventListener("error", errorHandler);
43+
t.add_cleanup(() => {
44+
window.removeEventListener("error", errorHandler);
45+
});
46+
47+
const thrownError = { name: "test" };
48+
mql.addListener({
49+
get handleEvent() {
50+
throw thrownError;
51+
},
52+
});
53+
54+
triggerMQLEvent(iframe);
55+
await waitForChangesReported();
56+
assert_equals(uncaughtError, thrownError);
57+
}, "rethrows errors when getting handleEvent");
58+
59+
promise_test(async t => {
60+
const iframe = await createIframe(t);
61+
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
62+
63+
let calls = 0;
64+
mql.addListener({
65+
get handleEvent() {
66+
calls++;
67+
return function() {};
68+
},
69+
});
70+
assert_equals(calls, 0);
71+
72+
triggerMQLEvent(iframe);
73+
await waitForChangesReported();
74+
assert_equals(calls, 1);
75+
76+
triggerMQLEvent(iframe);
77+
await waitForChangesReported();
78+
assert_equals(calls, 2);
79+
}, "looks up handleEvent method on every event dispatch");
80+
81+
promise_test(async t => {
82+
const iframe = await createIframe(t);
83+
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
84+
85+
let calls = 0;
86+
const eventListener = function() { calls++; };
87+
Object.defineProperty(eventListener, "handleEvent", {
88+
get: t.unreached_func("handleEvent method should not be looked up on functions"),
89+
});
90+
mql.addListener(eventListener);
91+
92+
triggerMQLEvent(iframe);
93+
await waitForChangesReported();
94+
assert_equals(calls, 1);
95+
}, "doesn't look up handleEvent method on callable event listeners");
96+
97+
promise_test(async t => {
98+
const iframe = await createIframe(t);
99+
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
100+
101+
let uncaughtError;
102+
const errorHandler = event => {
103+
uncaughtError = event.error;
104+
};
105+
window.addEventListener("error", errorHandler);
106+
t.add_cleanup(() => {
107+
window.removeEventListener("error", errorHandler);
108+
});
109+
110+
mql.addListener({ handleEvent: null });
111+
triggerMQLEvent(iframe);
112+
await waitForChangesReported();
113+
114+
assert_equals(uncaughtError.name, "TypeError");
115+
}, "throws if handleEvent is falsy and not callable");
116+
117+
promise_test(async t => {
118+
const iframe = await createIframe(t);
119+
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
120+
121+
let uncaughtError;
122+
const errorHandler = event => {
123+
uncaughtError = event.error;
124+
};
125+
window.addEventListener("error", errorHandler);
126+
t.add_cleanup(() => {
127+
window.removeEventListener("error", errorHandler);
128+
});
129+
130+
mql.addListener({ handleEvent: "str" });
131+
triggerMQLEvent(iframe);
132+
await waitForChangesReported();
133+
134+
assert_equals(uncaughtError.name, "TypeError");
135+
}, "throws if handleEvent is thruthy and not callable");
136+
</script>

‎css/cssom-view/resources/matchMedia.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const IFRAME_BASE_WIDTH = "200";
2+
const MEDIA_QUERY = `(max-width: ${IFRAME_BASE_WIDTH}px)`;
3+
4+
function createIframe(t) {
5+
const iframe = document.createElement("iframe");
6+
iframe.srcdoc = "";
7+
iframe.width = IFRAME_BASE_WIDTH;
8+
iframe.height = "100";
9+
iframe.style.border = "none";
10+
11+
t.add_cleanup(() => {
12+
document.body.removeChild(iframe);
13+
});
14+
15+
return new Promise(resolve => {
16+
iframe.addEventListener("load", () => {
17+
resolve(iframe);
18+
});
19+
20+
document.body.appendChild(iframe);
21+
});
22+
}
23+
24+
function triggerMQLEvent(iframe) {
25+
iframe.width = iframe.width === IFRAME_BASE_WIDTH ? "250" : IFRAME_BASE_WIDTH;
26+
}
27+
28+
function waitForChangesReported() {
29+
return new Promise(resolve => {
30+
step_timeout(resolve, 75);
31+
});
32+
}

0 commit comments

Comments
 (0)