mirror of
https://github.com/servo/servo.git
synced 2025-08-28 00:28:20 +01:00
Update web-platform-tests to revision cbd8c8ca929bc1aea71087be3b826cf1ee189a52
This commit is contained in:
WPT Sync Bot
parent
0c20fba2ab
commit
9c6bf785bd
150 changed files with 1798 additions and 876 deletions
|
|
@ -1,21 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSSOM View Module test:MediaQueryList</title>
|
||||
<link rel="author" title="unbug" href="mailto:tidelgl@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-view/#the-mediaquerylist-interface">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style type="text/css">
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>This case tests the MediaQueryList</p>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
test(function(){
|
||||
assert_equals(window.matchMedia('(min-width: 1px)').matches, true, "Expected any device to match min-width: 1px");
|
||||
},'matchMedia');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="flags" content="dom">
|
||||
<title>CSS Test: CSSOM View MediaQueryList::addListener with handleEvent</title>
|
||||
<link rel="help" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener">
|
||||
<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";
|
||||
setup({ allow_uncaught_exception: true });
|
||||
|
||||
promise_test(async t => {
|
||||
const mql = await createMQL(t);
|
||||
|
||||
let _this;
|
||||
let _event;
|
||||
const listener = {
|
||||
handleEvent(event) {
|
||||
_this = this;
|
||||
_event = event;
|
||||
},
|
||||
};
|
||||
|
||||
mql.addListener(listener);
|
||||
triggerMQLEvent(mql);
|
||||
await waitForChangesReported();
|
||||
|
||||
assert_equals(_this, listener);
|
||||
assert_equals(_event.media, mql.media);
|
||||
assert_equals(_event.matches, mql.matches);
|
||||
}, "calls handleEvent method of event listener");
|
||||
|
||||
promise_test(async t => {
|
||||
const mql = await createMQL(t);
|
||||
|
||||
let calls = 0;
|
||||
mql.addListener({
|
||||
get handleEvent() {
|
||||
calls++;
|
||||
return function() {};
|
||||
},
|
||||
});
|
||||
assert_equals(calls, 0);
|
||||
|
||||
triggerMQLEvent(mql);
|
||||
await waitForChangesReported();
|
||||
assert_equals(calls, 1);
|
||||
|
||||
triggerMQLEvent(mql);
|
||||
await waitForChangesReported();
|
||||
assert_equals(calls, 2);
|
||||
}, "looks up handleEvent method on every event dispatch");
|
||||
|
||||
promise_test(async t => {
|
||||
const mql = await createMQL(t);
|
||||
|
||||
let calls = 0;
|
||||
const listener = () => {
|
||||
calls++;
|
||||
};
|
||||
|
||||
Object.defineProperty(listener, "handleEvent", {
|
||||
get: t.unreached_func("handleEvent method should not be looked up on functions"),
|
||||
});
|
||||
mql.addListener(listener);
|
||||
|
||||
triggerMQLEvent(mql);
|
||||
await waitForChangesReported();
|
||||
assert_equals(calls, 1);
|
||||
}, "doesn't look up handleEvent method on callable event listeners");
|
||||
|
||||
const uncaught_error_test = async (t, listener) => {
|
||||
const mql = await createMQL(t);
|
||||
mql.addListener(listener);
|
||||
|
||||
const eventWatcher = new EventWatcher(t, window, "error");
|
||||
const errorPromise = eventWatcher.wait_for("error");
|
||||
triggerMQLEvent(mql);
|
||||
|
||||
const event = await errorPromise;
|
||||
throw event.error;
|
||||
};
|
||||
|
||||
promise_test(t => {
|
||||
const error = { name: "test" };
|
||||
const listener = {
|
||||
get handleEvent() {
|
||||
throw error;
|
||||
},
|
||||
};
|
||||
|
||||
return promise_rejects_exactly(t, error, uncaught_error_test(t, listener));
|
||||
}, "rethrows errors when getting handleEvent");
|
||||
|
||||
promise_test(t => {
|
||||
const listener = { handleEvent: null };
|
||||
return promise_rejects(t, new TypeError(), uncaught_error_test(t, listener));
|
||||
}, "throws if handleEvent is falsy and not callable");
|
||||
|
||||
promise_test(t => {
|
||||
const listener = { handleEvent: "str" };
|
||||
return promise_rejects(t, new TypeError(), uncaught_error_test(t, listener));
|
||||
}, "throws if handleEvent is thruthy and not callable");
|
||||
</script>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<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">
|
||||
<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)");
|
||||
const widthMQL = iframe.contentWindow.matchMedia("(min-width: 150px)");
|
||||
|
||||
let heightEvent;
|
||||
let widthEvent;
|
||||
|
||||
heightMQL.addListener(event => {
|
||||
heightEvent = event;
|
||||
});
|
||||
widthMQL.addListener(event => {
|
||||
widthEvent = event;
|
||||
});
|
||||
|
||||
assert_false(heightMQL.matches);
|
||||
assert_true(widthMQL.matches);
|
||||
|
||||
iframe.height = "50"; // 200x100 => 200x50
|
||||
await waitForChangesReported();
|
||||
|
||||
assert_equals(heightEvent.media, heightMQL.media);
|
||||
assert_true(heightEvent.matches);
|
||||
assert_true(heightMQL.matches);
|
||||
assert_true(widthMQL.matches);
|
||||
|
||||
iframe.width = "100"; // 200x50 => 100x50
|
||||
await waitForChangesReported();
|
||||
|
||||
assert_equals(widthEvent.media, widthMQL.media);
|
||||
assert_false(widthEvent.matches);
|
||||
assert_false(widthMQL.matches);
|
||||
assert_true(heightMQL.matches);
|
||||
}, "listeners are called when <iframe> is resized");
|
||||
|
||||
promise_test(async t => {
|
||||
const mql = await createMQL(t);
|
||||
|
||||
let eventsCount = 0;
|
||||
mql.addListener(() => {
|
||||
eventsCount++;
|
||||
});
|
||||
|
||||
for (let i = 1; i <= 10; i++) {
|
||||
triggerMQLEvent(mql);
|
||||
await waitForChangesReported();
|
||||
assert_equals(eventsCount, i);
|
||||
}
|
||||
}, "listeners are called correct number of times");
|
||||
|
||||
promise_test(async t => {
|
||||
const mql = await createMQL(t);
|
||||
const calls = [];
|
||||
|
||||
mql.addListener(() => {
|
||||
calls.push("1st");
|
||||
});
|
||||
mql.addListener(() => {
|
||||
calls.push("2nd");
|
||||
});
|
||||
|
||||
triggerMQLEvent(mql);
|
||||
await waitForChangesReported();
|
||||
|
||||
assert_equals(calls[0], "1st");
|
||||
assert_equals(calls[1], "2nd");
|
||||
}, "listeners are called in order they were added");
|
||||
|
||||
promise_test(async t => {
|
||||
const mql = await createMQL(t);
|
||||
|
||||
let called = 0;
|
||||
const listener = () => {
|
||||
called++;
|
||||
};
|
||||
|
||||
mql.addListener(listener);
|
||||
mql.addListener(listener);
|
||||
|
||||
triggerMQLEvent(mql);
|
||||
await waitForChangesReported();
|
||||
|
||||
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 mql = await createMQL(t);
|
||||
const listener = t.unreached_func("should not be called");
|
||||
|
||||
mql.addListener(listener);
|
||||
mql.removeListener(listener);
|
||||
|
||||
triggerMQLEvent(mql);
|
||||
await waitForChangesReported();
|
||||
}, "MediaQueryList::removeListener removes added listener");
|
||||
</script>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>cssom-view - MediaQueryList with empty string</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
test(function () {
|
||||
var mql = window.matchMedia('');
|
||||
assert_equals(mql.media, '', "This should be an empty media query list");
|
||||
assert_equals(mql.matches, true, "Empty media query list should evaluate to true");
|
||||
});
|
||||
</script>
|
||||
|
|
@ -9,22 +9,10 @@
|
|||
<script>
|
||||
"use strict";
|
||||
|
||||
test(t => {
|
||||
assert_equals(MediaQueryListEvent.length, 1);
|
||||
assert_throws(new TypeError(), () => {
|
||||
new MediaQueryListEvent();
|
||||
});
|
||||
}, "type argument is required");
|
||||
|
||||
test(t => {
|
||||
assert_equals(new MediaQueryListEvent("test").type, "test");
|
||||
}, 'type can be different from "change"');
|
||||
|
||||
test(t => {
|
||||
assert_equals(Object.getPrototypeOf(MediaQueryListEvent), Event);
|
||||
assert_true(new MediaQueryListEvent("change") instanceof Event);
|
||||
}, "extends Event");
|
||||
|
||||
test(t => {
|
||||
const event = new MediaQueryListEvent("change");
|
||||
|
||||
|
|
@ -47,16 +35,4 @@ test(t => {
|
|||
assert_true(event.bubbles);
|
||||
assert_true(event.cancelable);
|
||||
}, "init dictionary overrides");
|
||||
|
||||
test(t => {
|
||||
const event = new MediaQueryListEvent("change");
|
||||
assert_idl_attribute(event, "media");
|
||||
assert_readonly(event, "media");
|
||||
}, "MediaQueryListEvent::media is read-only IDL attribute");
|
||||
|
||||
test(t => {
|
||||
const event = new MediaQueryListEvent("change");
|
||||
assert_idl_attribute(event, "matches");
|
||||
assert_readonly(event, "matches");
|
||||
}, "MediaQueryListEvent::matches is read-only IDL attribute");
|
||||
</script>
|
||||
|
|
|
|||
79
tests/wpt/web-platform-tests/css/cssom-view/matchMedia.html
Normal file
79
tests/wpt/web-platform-tests/css/cssom-view/matchMedia.html
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<meta name="flags" content="dom">
|
||||
<title>CSS Test: CSSOM View matchMedia and MediaQueryList</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-window-matchmedia">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-view/#the-mediaquerylist-interface">
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-media-queries">
|
||||
<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(() => {
|
||||
assert_equals(
|
||||
typeof window.matchMedia,
|
||||
"function",
|
||||
"FATAL ERROR: The window.matchMedia function is not present. The rest of the testsuite will fail to run."
|
||||
);
|
||||
}, "window.matchMedia is a function");
|
||||
|
||||
test(() => {
|
||||
const mql = window.matchMedia("all");
|
||||
assert_equals(mql.media, "all");
|
||||
assert_true(mql.matches);
|
||||
}, 'window.matchMedia("all") matches');
|
||||
|
||||
test(() => {
|
||||
const mql = window.matchMedia("");
|
||||
assert_equals(mql.media, "");
|
||||
assert_true(mql.matches);
|
||||
}, 'window.matchMedia("") matches');
|
||||
|
||||
test(() => {
|
||||
const mql = window.matchMedia("(min-width: 1px)");
|
||||
assert_equals(mql.media, "(min-width: 1px)");
|
||||
assert_true(mql.matches);
|
||||
}, 'window.matchMedia("(min-width: 1px)") matches');
|
||||
|
||||
test(() => {
|
||||
const mql = window.matchMedia("::");
|
||||
assert_true(mql instanceof MediaQueryList);
|
||||
assert_equals(mql.media, "not all");
|
||||
assert_false(mql.matches);
|
||||
}, 'media query with syntax error is serialized as "not all"');
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIFrame(t, 200);
|
||||
const mql = iframe.contentWindow.matchMedia("(max-width: 199px), all and (min-width: 200px)");
|
||||
assert_equals(mql.media, "(max-width: 199px), (min-width: 200px)");
|
||||
assert_true(mql.matches);
|
||||
}, 'iframe.matchMedia("(max-width: 199px), all and (min-width: 200px)") is serialized w/o "all"');
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIFrame(t);
|
||||
const mql = iframe.contentWindow.matchMedia("(min-aspect-ratio: 1/1)");
|
||||
assert_true(mql.matches);
|
||||
}, 'iframe.matchMedia("(min-aspect-ratio: 1/1)") matches');
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIFrame(t, 200);
|
||||
const mql = iframe.contentWindow.matchMedia("(width: 200px)");
|
||||
assert_true(mql.matches);
|
||||
}, 'iframe.matchMedia("(width: 200px)") matches');
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIFrame(t, 200, 100);
|
||||
const mql = iframe.contentWindow.matchMedia("(max-height: 50px)");
|
||||
assert_false(mql.matches);
|
||||
}, 'iframe.matchMedia("(max-height: 50px)") matches');
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIFrame(t, 200, 100);
|
||||
const mql = iframe.contentWindow.matchMedia("(min-width: 150px)");
|
||||
assert_true(mql.matches);
|
||||
}, 'iframe.matchMedia("(min-width: 150px)") matches');
|
||||
</script>
|
||||
|
|
@ -1,188 +0,0 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: CSSOM View matchMedia and MediaQueryList</title>
|
||||
<meta name="timeout" content="long"/>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-window-matchmedia" />
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-view/#the-mediaquerylist-interface" />
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-1/#serializing-media-queries" />
|
||||
<meta name="flags" content="dom" />
|
||||
<script src="/resources/testharness.js" type="text/javascript" />
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript" />
|
||||
<style type="text/css"><![CDATA[
|
||||
iframe { border: none; }
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>Test not run - javascript required.</noscript>
|
||||
<div id="log" />
|
||||
<iframe width="200" height="100" />
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function reflow(doc) {
|
||||
doc.body.offsetWidth;
|
||||
}
|
||||
|
||||
var iframe = document.querySelector("iframe");
|
||||
var iframe_window = window.frames[0];
|
||||
|
||||
reflow(iframe_window.document);
|
||||
|
||||
test(function(){
|
||||
assert_inherits(window, "matchMedia");
|
||||
}, "window.matchMedia exists");
|
||||
|
||||
test(function(){
|
||||
assert_true(window.matchMedia instanceof Function, "FATAL ERROR: The window.matchMedia function is not present. The rest of the testsuite will fail to run.");
|
||||
}, "window.matchMedia is a Function");
|
||||
|
||||
var mql, mql1, mql2, mql3;
|
||||
|
||||
test(function(){
|
||||
mql = window.matchMedia("all");
|
||||
assert_true(mql instanceof MediaQueryList, "matchMedia(\"all\") returned MediaQueryList object.");
|
||||
}, "window.matchMedia(\"all\")");
|
||||
|
||||
test(function(){
|
||||
assert_idl_attribute(mql, "media", "Check that MediaQueryList.media exists.");
|
||||
}, "MediaQueryList.media exists");
|
||||
|
||||
test(function(){
|
||||
assert_readonly(mql, "media", "Check that MediaQueryList.media is readonly.");
|
||||
}, "MediaQueryList.media is readonly");
|
||||
|
||||
test(function(){
|
||||
assert_equals(mql.media, "all");
|
||||
}, "MediaQueryList.media for \"all\"");
|
||||
|
||||
test(function(){
|
||||
assert_idl_attribute(mql, "matches", "Check that MediaQueryList.matches exists.");
|
||||
}, "MediaQueryList.matches exists");
|
||||
|
||||
test(function(){
|
||||
assert_readonly(mql, "matches", "Check that MediaQueryList.matches is readonly.");
|
||||
}, "MediaQueryList.matches is readonly");
|
||||
|
||||
test(function(){
|
||||
assert_true(mql.matches);
|
||||
}, "MediaQueryList.matches for \"all\"");
|
||||
|
||||
test(function(){
|
||||
assert_inherits(mql, "addListener");
|
||||
}, "MediaQueryList.addListener exists");
|
||||
|
||||
test(function(){
|
||||
assert_true(mql.addListener instanceof Function);
|
||||
}, "MediaQueryList.addListener is a Function");
|
||||
|
||||
test(function(){
|
||||
assert_inherits(mql, "removeListener");
|
||||
}, "MediaQueryList.removeListener exists");
|
||||
|
||||
test(function(){
|
||||
assert_true(mql.removeListener instanceof Function);
|
||||
}, "MediaQueryList.removeListener is a Function");
|
||||
|
||||
test(function(){
|
||||
mql = window.matchMedia("::");
|
||||
assert_true(mql instanceof MediaQueryList, "window.matchMedia(\"::\") returned MediaQueryList object.");
|
||||
assert_equals(mql.media, "not all", "MediaQueryList.media serialized as \"not all\" from original string with syntax error.");
|
||||
}, "MediaQueryList.media syntax error");
|
||||
|
||||
test(function(){
|
||||
assert_false(mql.matches);
|
||||
}, "MediaQueryList.matches for \"not all\"");
|
||||
|
||||
test(function(){
|
||||
mql = iframe_window.matchMedia("(max-width: 199px), all and (min-width: 200px)");
|
||||
assert_equals(mql.media, "(max-width: 199px), (min-width: 200px)");
|
||||
assert_true(mql.matches);
|
||||
}, "MediaQueryList.matches for \"(max-width: 199px), all and (min-width: 200px)\"")
|
||||
|
||||
test(function(){
|
||||
mql = iframe_window.matchMedia("(min-aspect-ratio: 1/1)");
|
||||
assert_true(mql.matches);
|
||||
}, "MediaQueryList.matches for \"(min-aspect-ratio: 1/1)\"");
|
||||
|
||||
test(function(){
|
||||
mql = iframe_window.matchMedia("(width: 200px)");
|
||||
assert_true(mql.matches);
|
||||
}, "MediaQueryList.matches for \"(width: 200px)\"");
|
||||
|
||||
test(function(){
|
||||
mql1 = iframe_window.matchMedia("(max-height: 50px)");
|
||||
assert_false(mql1.matches);
|
||||
}, "MediaQueryList.matches for \"(max-height: 50px)\"");
|
||||
|
||||
test(function(){
|
||||
mql2 = iframe_window.matchMedia("(min-width: 150px)");
|
||||
assert_true(mql2.matches);
|
||||
}, "MediaQueryList.matches for \"(min-width: 150px)\"");
|
||||
|
||||
var resizeTest = async_test("Resize iframe from 200x100 to 200x50, then to 100x50");
|
||||
var listenerOrderTest = async_test("Listeners are called in the order which they have been added");
|
||||
var duplicateListenerTest = async_test("Listener added twice is only called once.");
|
||||
|
||||
window.onload = function(){
|
||||
|
||||
var rmListener = function(x){
|
||||
resizeTest.step(function(){
|
||||
assert_unreached("removeListener was not successful.");
|
||||
});
|
||||
};
|
||||
|
||||
var dupListener = function(x){
|
||||
duplicateListenerTest.step(function(){
|
||||
assert_false(mql1.dupListenerCalled, "Check that this listener has not been called before.");
|
||||
mql1.dupListenerCalled = true;
|
||||
});
|
||||
};
|
||||
|
||||
mql1.firstListenerCalled = false;
|
||||
mql1.dupListenerCalled = false;
|
||||
// Add listener twice and remove it below. Should not be called.
|
||||
mql1.addListener(rmListener);
|
||||
mql1.addListener(rmListener);
|
||||
// Add listener twice. Should only be called once.
|
||||
mql1.addListener(dupListener);
|
||||
mql1.addListener(dupListener);
|
||||
|
||||
mql1.addListener(function(x){
|
||||
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.");
|
||||
assert_true(mql2.matches, "(min-width: 150px) should still pass.");
|
||||
iframe.width = "100";
|
||||
});
|
||||
|
||||
listenerOrderTest.step(function(){
|
||||
assert_false(mql1.firstListenerCalled, "Check that this listener is only called once.");
|
||||
mql1.firstListenerCalled = true;
|
||||
});
|
||||
});
|
||||
|
||||
mql1.addListener(function(x){
|
||||
listenerOrderTest.step(function(){
|
||||
assert_true(mql1.firstListenerCalled, "Check that the listener added last is called last.");
|
||||
});
|
||||
listenerOrderTest.done();
|
||||
});
|
||||
|
||||
mql1.removeListener(rmListener);
|
||||
|
||||
mql2.addListener(function(x){
|
||||
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.");
|
||||
assert_true(mql1.matches, "(max-height: 50px) should still pass.");
|
||||
assert_false(x.matches, "(min-width: 150px) should now fail.");
|
||||
});
|
||||
resizeTest.done();
|
||||
});
|
||||
|
||||
iframe.height = "50";
|
||||
};]]>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: CSSOM View matchMedia handleEvent via addListener</title>
|
||||
<link rel="help" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script src="resources/matchMedia.js"></script>
|
||||
<div id="log"></div>
|
||||
<script>
|
||||
setup({ allow_uncaught_exception: true });
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIframe(t);
|
||||
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
|
||||
|
||||
let _this;
|
||||
let _event;
|
||||
const eventListener = {
|
||||
handleEvent(event) {
|
||||
_this = this;
|
||||
_event = event;
|
||||
},
|
||||
};
|
||||
|
||||
mql.addListener(eventListener);
|
||||
triggerMQLEvent(iframe);
|
||||
await waitForChangesReported();
|
||||
|
||||
assert_equals(_this, eventListener);
|
||||
assert_equals(_event.matches, mql.matches);
|
||||
assert_equals(_event.media, MEDIA_QUERY);
|
||||
}, "calls handleEvent method of event listener");
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIframe(t);
|
||||
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
|
||||
|
||||
let uncaughtError;
|
||||
const errorHandler = event => {
|
||||
uncaughtError = event.error;
|
||||
};
|
||||
window.addEventListener("error", errorHandler);
|
||||
t.add_cleanup(() => {
|
||||
window.removeEventListener("error", errorHandler);
|
||||
});
|
||||
|
||||
const thrownError = { name: "test" };
|
||||
mql.addListener({
|
||||
get handleEvent() {
|
||||
throw thrownError;
|
||||
},
|
||||
});
|
||||
|
||||
triggerMQLEvent(iframe);
|
||||
await waitForChangesReported();
|
||||
assert_equals(uncaughtError, thrownError);
|
||||
}, "rethrows errors when getting handleEvent");
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIframe(t);
|
||||
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
|
||||
|
||||
let calls = 0;
|
||||
mql.addListener({
|
||||
get handleEvent() {
|
||||
calls++;
|
||||
return function() {};
|
||||
},
|
||||
});
|
||||
assert_equals(calls, 0);
|
||||
|
||||
triggerMQLEvent(iframe);
|
||||
await waitForChangesReported();
|
||||
assert_equals(calls, 1);
|
||||
|
||||
triggerMQLEvent(iframe);
|
||||
await waitForChangesReported();
|
||||
assert_equals(calls, 2);
|
||||
}, "looks up handleEvent method on every event dispatch");
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIframe(t);
|
||||
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
|
||||
|
||||
let calls = 0;
|
||||
const eventListener = function() { calls++; };
|
||||
Object.defineProperty(eventListener, "handleEvent", {
|
||||
get: t.unreached_func("handleEvent method should not be looked up on functions"),
|
||||
});
|
||||
mql.addListener(eventListener);
|
||||
|
||||
triggerMQLEvent(iframe);
|
||||
await waitForChangesReported();
|
||||
assert_equals(calls, 1);
|
||||
}, "doesn't look up handleEvent method on callable event listeners");
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIframe(t);
|
||||
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
|
||||
|
||||
let uncaughtError;
|
||||
const errorHandler = event => {
|
||||
uncaughtError = event.error;
|
||||
};
|
||||
window.addEventListener("error", errorHandler);
|
||||
t.add_cleanup(() => {
|
||||
window.removeEventListener("error", errorHandler);
|
||||
});
|
||||
|
||||
mql.addListener({ handleEvent: null });
|
||||
triggerMQLEvent(iframe);
|
||||
await waitForChangesReported();
|
||||
|
||||
assert_equals(uncaughtError.name, "TypeError");
|
||||
}, "throws if handleEvent is falsy and not callable");
|
||||
|
||||
promise_test(async t => {
|
||||
const iframe = await createIframe(t);
|
||||
const mql = iframe.contentWindow.matchMedia(MEDIA_QUERY);
|
||||
|
||||
let uncaughtError;
|
||||
const errorHandler = event => {
|
||||
uncaughtError = event.error;
|
||||
};
|
||||
window.addEventListener("error", errorHandler);
|
||||
t.add_cleanup(() => {
|
||||
window.removeEventListener("error", errorHandler);
|
||||
});
|
||||
|
||||
mql.addListener({ handleEvent: "str" });
|
||||
triggerMQLEvent(iframe);
|
||||
await waitForChangesReported();
|
||||
|
||||
assert_equals(uncaughtError.name, "TypeError");
|
||||
}, "throws if handleEvent is thruthy and not callable");
|
||||
</script>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: CSSOM View matchMedia addListener</title>
|
||||
<link rel="author" title="Chris Wu" href="mailto:pwx.frontend@gmail.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/cssom-view/#the-mediaquerylist-interface" />
|
||||
<meta name="flags" content="dom" />
|
||||
<script src="/resources/testharness.js" type="text/javascript"></script>
|
||||
<script src="/resources/testharnessreport.js" type="text/javascript"></script>
|
||||
<style type="text/css">
|
||||
iframe { border: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<iframe width="200" height="100" id="iframe1"></iframe>
|
||||
<script>
|
||||
function reflow(doc) {
|
||||
doc.body.offsetWidth;
|
||||
}
|
||||
|
||||
var iframe = document.querySelector("iframe");
|
||||
var iframe_window = window.frames[0];
|
||||
var iframe1 = document.getElementById("iframe1");
|
||||
reflow(iframe_window.document);
|
||||
|
||||
var i = 0;
|
||||
var totalCount = 10;
|
||||
var count = 0;
|
||||
var divineCount = 10;
|
||||
var width_list = [201,199];
|
||||
var mq1 = iframe_window.matchMedia("(max-width:200px)");
|
||||
mq1.addListener(function(mql){
|
||||
|
||||
count = count + 1;
|
||||
|
||||
});
|
||||
|
||||
var equalAssert = async_test("Check for the correct number of event triggers");
|
||||
|
||||
var changeFrameWidth = function(iWidth) {
|
||||
iframe1.style.width = iWidth + "px";
|
||||
i = (i === 0) ? 1 : 0;
|
||||
totalCount = totalCount - 1;
|
||||
if(totalCount > 0)
|
||||
{
|
||||
step_timeout(function(){
|
||||
changeFrameWidth(width_list[i]);
|
||||
}, 100);
|
||||
}
|
||||
else
|
||||
{
|
||||
step_timeout(function(){
|
||||
equalAssert.step(function(){
|
||||
assert_equals(divineCount, count, "this will be 10 times of event triggers by change width");
|
||||
});
|
||||
equalAssert.done();
|
||||
}, 100);
|
||||
}
|
||||
};
|
||||
|
||||
changeFrameWidth(width_list[0]);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,11 +1,21 @@
|
|||
const IFRAME_BASE_WIDTH = "200";
|
||||
const MEDIA_QUERY = `(max-width: ${IFRAME_BASE_WIDTH}px)`;
|
||||
const IFRAME_DEFAULT_SIZE = "200";
|
||||
const iframes = new WeakMap();
|
||||
|
||||
async function createMQL(t) {
|
||||
const iframe = await createIFrame(t);
|
||||
const mql = iframe.contentWindow.matchMedia(`(max-width: ${IFRAME_DEFAULT_SIZE}px)`);
|
||||
assert_true(mql.matches, "MQL should match on newly created <iframe>");
|
||||
iframes.set(mql, iframe);
|
||||
return mql;
|
||||
}
|
||||
|
||||
function createIFrame(t, width = IFRAME_DEFAULT_SIZE, height = width) {
|
||||
assert_not_equals(document.body, null, "<body> element is missing");
|
||||
|
||||
function createIframe(t) {
|
||||
const iframe = document.createElement("iframe");
|
||||
iframe.srcdoc = "";
|
||||
iframe.width = IFRAME_BASE_WIDTH;
|
||||
iframe.height = "100";
|
||||
iframe.width = String(width);
|
||||
iframe.height = String(height);
|
||||
iframe.style.border = "none";
|
||||
|
||||
t.add_cleanup(() => {
|
||||
|
|
@ -14,6 +24,7 @@ function createIframe(t) {
|
|||
|
||||
return new Promise(resolve => {
|
||||
iframe.addEventListener("load", () => {
|
||||
iframe.contentDocument.body.offsetWidth; // reflow
|
||||
resolve(iframe);
|
||||
});
|
||||
|
||||
|
|
@ -21,8 +32,10 @@ function createIframe(t) {
|
|||
});
|
||||
}
|
||||
|
||||
function triggerMQLEvent(iframe) {
|
||||
iframe.width = iframe.width === IFRAME_BASE_WIDTH ? "250" : IFRAME_BASE_WIDTH;
|
||||
function triggerMQLEvent(mql) {
|
||||
const iframe = iframes.get(mql);
|
||||
assert_not_equals(iframe, undefined, "Passed MQL instance was not created with createMQL");
|
||||
iframe.width = iframe.width === IFRAME_DEFAULT_SIZE ? "250" : IFRAME_DEFAULT_SIZE;
|
||||
}
|
||||
|
||||
function waitForChangesReported() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue